/* Finitions visuelles de la conversation « Audit visuel » (B). Chargé après systeme.css, avant le mode sombre.
   Chaque bloc cite le défaut mesuré le 11/10/2026 (captures : audit-visuel-2026-10-11/preuves/). */

/* ── 1. Boutons : UNE échelle (9 variantes mesurées sur l'accueil, 12 px sur téléphone) ───────────────
   16 px / 600, 50 px de haut minimum, pilule, même rembourrage partout. */
.button,.fpt-btn,.cx-btn,.button.cta-navbar-top,.button-6.cta-navbar-top,.link-white-default-2{
  font-size:16px!important;font-weight:600!important;line-height:1.2!important;min-height:50px;
  padding:0 28px!important;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;
  border-radius:999px!important;letter-spacing:0;white-space:nowrap}
.button div,.fpt-btn div{font-size:inherit!important;font-weight:inherit!important}
.link-white-default-2{background:none!important;border:0!important;min-height:44px;padding:0!important;color:#fff!important;text-decoration:underline;text-underline-offset:4px}
.link-white-default-2 div{color:#fff!important}
.wrap-cta-navbar .button.cta-navbar-top{min-height:44px;padding:0 22px!important;font-size:15px!important}
.text-card-popular.link-card{font-size:15px!important;font-weight:600!important;min-height:44px;display:inline-flex;align-items:center}
@media (max-width:767px){.button,.fpt-btn,.cx-btn{width:100%;max-width:420px}}

/* ── 2. Menu : cibles de 15 px de haut mesurées → ≥ 44 px ; menu téléphone aligné à gauche, grand bouton ── */
.link-navbar{font-size:15px!important;min-height:44px;align-items:center!important;padding:0 6px!important}
.button-inline-navbar,.choix-langue{min-height:44px;display:inline-flex!important;align-items:center;font-size:15px!important}
.wrap-item-burger-menu,.wrap-item-burger-menu-mobile{align-items:stretch!important;text-align:left;gap:0!important}
.wrap-item-burger-menu .navbar-item{flex-direction:column;align-items:stretch;gap:0!important;width:100%}
.wrap-item-burger-menu .link-navbar{font-size:18px!important;min-height:56px;border-bottom:1px solid var(--bord);padding:0 4px!important;color:var(--encre)!important;justify-content:flex-start!important;text-align:left!important;width:100%}
.wrap-item-burger-menu .link-navbar *{text-align:left!important}
.wrap-item-burger-menu .wrap-cta-navbar{flex-direction:column;align-items:stretch;gap:12px;margin-top:16px;width:100%}
.wrap-item-burger-menu .button-inline-navbar{font-size:17px!important;min-height:48px;justify-content:flex-start;padding:0 4px}
.wrap-item-burger-menu .button.cta-navbar-top{width:100%;min-height:52px;font-size:17px!important;background:var(--accent)!important;color:#fff!important}
.wrap-item-burger-menu-mobile.margin-top{margin-top:24px!important}
.menu-tel-bas{align-items:stretch!important}
/* en-tête téléphone : « EN » collé au bouton thème (4 px mesurés) → 10 px */
.navbar-mobile > .choix-langue{margin-right:10px!important}

/* ── 3. Garanties : les 6 tuiles coupées sur téléphone (« Simp », « Sécu ») → 2 colonnes, libellés entiers ;
   la barre collante coupe « For… » → elle passe sur 2 rangées ───────────────────────────────────────── */
@media (max-width:767px){
  .wrap-key-features{position:static!important;border-radius:12px!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important;padding:12px!important;margin:0 0 20px;width:100%!important}
  .wrap-key-features .cards-key-features{width:auto!important;min-width:0!important;flex:none!important;padding:14px 12px!important;gap:10px!important;flex-direction:row!important;align-items:center;justify-content:flex-start!important}
  .cards-key-features .text-md{white-space:normal!important;font-size:15px!important;overflow:visible!important;text-overflow:clip!important}
  .sticky-menu-features{flex-wrap:wrap;height:auto!important;min-height:56px;padding:8px 12px;gap:2px 18px!important;justify-content:center}
}
/* ordinateur : la pilule géante grise → un cadre à 12 px, comme toutes les cartes du site */
.wrap-key-features{border-radius:12px!important;border:1px solid var(--bord)}

/* ── 4. (retiré) bouton clair/sombre — décision Lucas 11/10 : site clair seulement ── */

/* ── 5. Étiquettes de section : 3 styles (« Le problème » 13 px à 56 %, « Pourquoi ClairSign ? » gros)
   → une seule : petite capitale bleue ───────────────────────────────────────────────────────────────── */
.label,.sub-title,.sub-title.regular{font-size:13px!important;font-weight:600!important;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)!important;opacity:1!important;margin-bottom:16px!important;line-height:1.4!important}
.section.bg-gradient-grey .label,.bloc-dark-blue .label,.section.start-now .label{color:#9db8f0!important}

/* ── 6. Rythme vertical : 128 + 128 px entre sections (256 px de vide) → 96 px ordinateur, 64 px téléphone ─ */
.section{padding-top:96px;padding-bottom:96px}
.section.no-padding-top,.section.no-paddings,.section.no-padding{padding-top:0}
.section.no-padding-bottom,.section.no-paddings,.section.no-padding{padding-bottom:0}
.section.hero.home{padding-bottom:40px}
.section.probleme{padding-top:56px}
.section.no-padding-top.etapes-accueil{padding-top:24px}
@media (max-width:767px){.section{padding-top:64px;padding-bottom:64px}.section.hero.home{padding-bottom:40px}.section.probleme{padding-top:48px}}

/* ── 7. Titres : mot orphelin seul sur sa ligne (« …du début à la | fin », « …INPI en ligne | ? ») ──── */
h1,.dsp-2xl{text-wrap:balance}
h2,h3,.dsp-xl,.dsp-xl-8,.dsp-lg,.dsp-lg-3,.card-title{text-wrap:pretty}

/* ── 8. Blog : 39 étiquettes à 12 px → 13 px ─────────────────────────────────────────────────────────── */
.tag-blog{font-size:13px!important;letter-spacing:.06em}

/* ── 9. Pied : « © 2026 … non affilié à l'INPI » coupé sur 2 lignes → une ligne pleine largeur ─────── */
@media (min-width:992px){.alohi---main-style-guide--wrapper-col.invert{flex-wrap:wrap}
  .alohi---main-style-guide--wrapper-col.invert .alohi---main-style-guide--col-8{flex:1 1 100%;width:100%!important;max-width:100%!important}
  .alohi---main-style-guide--last-item-mobile{white-space:nowrap}}

/* ── 10. Rond « Règlement eIDAS » (image .flag-square) qui recouvre le texte de l'onglet à 768 et 390 px
   → plus petit et posé sous le bloc, jamais sur le texte ──────────────────────────────────────────── */
@media (max-width:991px){.flag-square{width:150px!important;position:static!important;transform:none!important;display:block;margin:24px auto 0!important}}

/* ── 11. Cartes « problème » : titres de 2 et 3 lignes → descriptions décalées de 16-32 px ─────────── */
@media (min-width:768px){.carte-simple h3.dsp-md{min-height:2.6em}}

/* ── 12. Rangée des formes d'entreprise et carrousels : cartes coupées net aux bords → fondu de bord ── */
.section.relative.overflow-hidden{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}

/* ── 13. Comment ça marche : coches de 10 px au-dessus des 3 cartes de réassurance → 40 px ──────────── */
.card img.icon-check,.card .coche-mini,.cards-reassurance img{width:40px;height:40px}

/* ── 14. Tarif, bande « Vous signez souvent pour vos clients ? Parlons-en » : titre coupé « Parlons- | en »
   (colonne trop étroite, défi A du 11/10) → colonne du titre plus large, retour à la ligne propre ─── */
.wrap-button.space-between.full-width .dsp-sm.special-size{min-width:300px;max-width:380px;text-wrap:pretty;hyphens:manual}
@media (max-width:991px){.wrap-button.space-between.full-width{flex-wrap:wrap;gap:16px}.wrap-button.space-between.full-width .dsp-sm.special-size{min-width:0;max-width:none}}

/* ── Lot B2 (11/10 après-midi) : version anglaise + 5 pages formalités ───────────────────────────────── */
/* 15. Liste des formalités sous le haut de page : « Transfer of shares » seul sur sa ligne → lignes équilibrées */
.wrap-logo-footers,.logos-home{text-wrap:balance}
/* 16. Rangée de confiance du haut de page (INPI / eIDAS / Trustpilot) : 1 + 2 sur deux lignes → 3 sur une ligne quand ça tient */
.confiance-hero{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
/* 17. Cartes « 3 étapes » et guides (pages formalités, Comment ça marche) : lien « Commencer » à des hauteurs
   différentes (29 px mesurés) → titre sur hauteur fixe, lien collé en bas de la carte */
.card.admin-panel{display:flex;flex-direction:column}
.card.admin-panel .wrap-card-parent-content-images{display:flex;flex-direction:column;flex:1 1 auto}
.card.admin-panel .wrap-card-content{display:flex;flex-direction:column;flex:1 1 auto}
.card.admin-panel .wrap-card-content>a:last-child,.card.admin-panel .wrap-card-content>.wrap-button:last-child{margin-top:auto}
@media (min-width:768px){.card.admin-panel .card-title{min-height:2.6em}}
/* 18. Carrousel des formalités : « En savoir plus » à 46 px d'écart selon la longueur du texte → collé en bas */
.card.bg-green .wrap-card-content{display:flex;flex-direction:column;height:100%}
.card.bg-green .wrap-button{margin-top:auto}
/* 19. Formes d'entreprise : « Self-employed professional » / « Micro-entreprise » sur 2 lignes (carte de 74 px au milieu de cartes de 50) */
.wrap-card-parent-content.small-paddings h3{white-space:nowrap}
/* 20. Tarif (FR + EN) : sous-titres de prix à 12 px (« One-off payment… », « With every signature ») → 14 px */
.fpt-sub-mo,.fpt-annual-sub,.fpt-mo{font-size:14px!important}

/* ── 21. (11/10, Lucas : « quand on scroll, la top bar est coupée en deux ») MESURÉ sur téléphone et tablette :
   la barre du site (header.branding-navbar, fixe) garde un fond TRANSPARENT en défilant (rgba(0,0,0,0) à 390 px,
   y = 900), alors qu'à 1280 px body.defile lui donne un fond blanc → le contenu passe derrière le logo et le
   menu, qui paraissent délavés / coupés. Même fond blanc + filet sur toutes les largeurs dès qu'on défile. */
/* Vraie cause (mesurée après le 1er essai) : le voile blanc de défilement (body::before, z-index 2499, mouvement.css)
   passe DEVANT la barre sur téléphone, où elle n'est qu'à z-index 999 (2500 sur ordinateur) → logo et menu délavés.
   La barre repasse devant le voile ; son fond blanc reste pour le contenu qui défile derrière. */
@media (max-width:991px){header.branding-navbar{z-index:2500!important}
  body.defile header.branding-navbar{background:#fff!important;border-bottom:1px solid #dfe4ec}}

/* ── 22. Menu téléphone fermé : le panneau (.menu-burger, fixe) est seulement poussé hors écran à droite
   (translate3d(100 %) posé en ligne par le script repris de fax.plus) → il reste « visible » pour les outils et
   compte comme un débordement (tests/verifier-site.mjs sur /en/ et /). Fermé = invisible ; ouvert = visible. ── */
.menu-burger{visibility:hidden}   /* caché par défaut : avant que le script pose le style en ligne, le panneau est hors écran mais « visible » (verifier-site le comptait comme débordement, 17:15) */
.menu-burger[style*="translate3d("]:not([style*="translate3d(100%"]){visibility:visible}

/* ═══ Passage B du 11/10 soir — audit en défilant 35 pages × 1280/768/390 (audit-visuel-2026-10-11/tout/) ═══ */

/* ── 23. Survol animé sur TOUT ce qui se clique (Lucas 11/10) : 35 pages avaient des familles sans réaction au survol
   (logo, « Se connecter », fil d'Ariane, questions dépliables, filtres du blog, onglets, liens bleus, flèches du
   carrousel, points, liens du pied). Même langage que mouvement.css : 0,2 s, couleur indigo, léger relief. ── */
@media (hover:hover){
  .link-logo-navbar img,.lien-logo-pied img,.ct-logo img,.cx-logo img{transition:transform .2s ease,opacity .2s ease}
  .link-logo-navbar:hover img,.lien-logo-pied:hover img,.ct-logo:hover img,.cx-logo:hover img{transform:scale(1.04);opacity:.9}
  .button-inline-navbar,.ct-connexion,.ct-menu a,.alohi---main-style-guide--link-breadcrumb,.text-sm.when-link,.link-blue,.lien-fleche,
  .alohi---main-style-guide--button-inline,.link-white-default-2,.cx-lien,.aide-pied-lien,.alohi---main-style-guide--links-last-footer,
  .rc-faits a,.pc-aide a,.pc-demo a,.pc-questions summary,.pc-exemple summary,details.pc-demo summary,.alohi---main-style-guide--faq-title,
  .filtre-blog,.tab-light-blue,.tab._20px,.tab-light-3,.slick-arrow,.slick-dots button,.pc-lien,.pc-rond,.pc-modes label,.langue-option,
  .ct-pied a,.article a,.legal a,main p a,main li a,td a,.ct-corps a,.tldr a,.pied-faits a,.alohi---main-style-guide--text-xs a,
  .menu-tel-bas a,.wrap-item-burger-menu .link-navbar{transition:color .2s ease,background-color .2s ease,transform .2s ease,box-shadow .2s ease,opacity .2s ease,text-decoration-color .2s ease,border-color .2s ease}
  .button-inline-navbar:hover,.ct-connexion:hover,.ct-menu a:hover,.alohi---main-style-guide--link-breadcrumb:hover,.text-sm.when-link:hover,
  .link-blue:hover,.lien-fleche:hover,.alohi---main-style-guide--button-inline:hover,.cx-lien:hover,.aide-pied-lien:hover,.pc-lien:hover,
  .ct-pied a:hover,.article a:hover,.legal a:hover,main p a:hover,main li a:hover,td a:hover,.ct-corps a:hover,.tldr a:hover,.pied-faits a:hover,
  .rc-faits a:hover,.pc-aide a:hover,.pc-demo a:hover{color:#3966cd!important;text-decoration:underline!important;text-underline-offset:4px;text-decoration-thickness:2px}
  .link-blue:hover,.lien-fleche:hover,.alohi---main-style-guide--button-inline:hover,.text-sm.when-link:hover{transform:translateX(2px)}
  .link-white-default-2:hover,.link-white-default-2:hover div{color:#fff!important;text-decoration-thickness:2px;text-underline-offset:6px}
  .alohi---main-style-guide--links-last-footer:hover,.alohi---main-style-guide--text-xs a:hover{color:#fff!important;text-decoration:underline;text-underline-offset:4px}
  .alohi---main-style-guide--faq-title{cursor:pointer}
  .alohi---main-style-guide--faq-title:hover,.pc-questions summary:hover,.pc-exemple summary:hover,details.pc-demo summary:hover{color:#3966cd!important}
  .alohi---main-style-guide--faq-title:hover *{color:#3966cd!important}   /* gardée (relance 17/10 18:40) : utile pour un élément intérieur du titre (mesuré : sans elle, 3e élément foncé #0f1b33 au survol) */
  .filtre-blog:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.18)}
  .tab-light-blue:hover,.tab-light-3:hover,.tab._20px:hover{background:#edf2fc!important;color:#3966cd!important}
  /* (relance 17/10 18:35) « .tab._20px:hover *, .tab-light-3:hover * » retiré : couleur déjà donnée par une autre règle */
  .slick-arrow{transition:scale .2s ease,opacity .2s ease,filter .2s ease}.slick-arrow:hover{scale:1.15;opacity:1!important;filter:brightness(1.15)}   /* « scale » à part : le transform de slick (translateY -50 %) reste intact */
  .slick-dots button{transition:scale .2s ease,background-color .2s ease}.slick-dots button:hover{scale:1 1.6;background:#3966cd!important}
  .pc-rond:hover:not(:disabled){border-color:#3966cd;color:#3966cd;transform:scale(1.06)}
  .pc-modes label:hover{border-color:#3966cd;background:#f4f7fd}
  .wrap-item-burger-menu .link-navbar:hover{background:#f3f5fa}
  .menu-tel-bas a:hover{opacity:.9}
}

/* ── 24. Cibles trop petites (mesuré : onglets du guide 43 px à 40 px de retrait, liens du pied de Connexion 16 px,
   points du carrousel 25×6, « Mode démonstration » 22 px, en-tête des articles 26 px) → ≥ 44 px ── */
.tab._20px{min-height:44px;display:flex!important;align-items:center;padding-top:8px!important;padding-bottom:8px!important}
.cx-pied a,.cx-legal a,.connexion-pied a{display:inline-block;padding:12px 6px;min-height:44px;line-height:20px}
.slick-dots li{width:44px!important;height:44px!important;display:inline-flex!important;align-items:center;justify-content:center;margin:0!important}
.slick-dots li button{min-width:24px;min-height:6px}
/* (retiré 14:50, Lucas : « Mode démonstration : rien n’est envoyé… » éclaté sur 3 lignes — display:flex sur un résumé qui mêle texte nu et balises → chaque morceau devient une boîte. Le bandeau n'existe plus.) */
@media (min-width:992px){.ct-menu a,.ct-connexion{min-height:44px;display:inline-flex;align-items:center}}   /* seulement là où contenu.css les affiche : en dessous ils sont cachés (display:none), un inline-flex les faisait réapparaître et déborder de 67 px */
.alohi---main-style-guide--faq-title{min-height:48px}

/* ── 25. Textes sous 13 px (mesuré : 39 résumés du blog à 12,5 px, « EN BREF » 12 px, bandeau de prix des articles
   11 px, « À partir de / Toujours » 12,5 px, « Document généré le… » 12 px) → 13,5 / 13 px ── */
.blog-liste .text-xs,.card .text-xs,p.text-xs{font-size:13.5px!important;line-height:1.5}
.tldr-label,.disclaimer,.fpt-bdg-rec,.ct-faits,.pied-faits{font-size:13px!important}
.sticky-mobile-cta-sub{font-size:12.5px!important}
.fpt-mini,.prix-mini,.fpt-sub{font-size:13px!important}

/* ── 26. Accueil + /en/ : la liste « Accepté par le Guichet unique pour toutes vos formalités » était 12 mots gris
   clair flottants (14 px, #5a6275, sans cadre) → petites étiquettes cadrées, plus lisibles, air « officiel » ── */
.logos-home .logo-home.logo-texte{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid #dfe4ec;border-radius:8px;
  background:#fff;color:#2b3345!important;font-size:14px!important;font-weight:600;letter-spacing:0;transition:border-color .2s ease,color .2s ease}
@media (hover:hover){.logos-home .logo-home.logo-texte:hover{border-color:#3966cd;color:#3966cd!important}}
.logos-home{gap:16px 16px!important;justify-content:center}

/* ── 27. Accueil tablette (768) : les 3 cartes « Le problème » en 3 colonnes de 232 px, titres coupés mot à mot
   (« FranceConnect+ | ne | fonctionne pas ») → 1 colonne pleine largeur entre 480 et 991 px ── */
@media (min-width:480px) and (max-width:991px){
  .grille-3:has(.carte-simple){display:grid!important;grid-template-columns:1fr;gap:16px}
  .grille-3:has(.carte-simple) .col-4{width:100%!important;max-width:none!important;flex:none!important}
  .grille-3:has(.carte-simple) .carte-simple{width:100%!important}
}

/* ── 28. Tarif : « Paiement sécurisé » coupé sur 2 lignes à côté des logos (colonne étroite) → titre sur 1 ligne ── */
.paiement-logos .pl-titre{white-space:nowrap}

/* ── 29. Pages « certificat qualifié » et articles : tableaux à 3 colonnes de 120 px sur téléphone (texte en colonne
   de 1 mot) → chaque ligne devient une fiche, l'en-tête de colonne est rappelé devant chaque cellule ── */
@media (max-width:600px){
  .compare-table,.compare-table tbody,.compare-table tr,.compare-table td{display:block;width:100%!important;box-sizing:border-box}
  .compare-table thead{display:none}
  .compare-table tr{border:1px solid #dfe4ec;border-radius:10px;margin:0 0 12px;padding:4px 0;background:#fff}
  .compare-table td{border:0!important;padding:8px 14px!important}
  .compare-table td:first-child{font-weight:700;color:#0f1b33;background:#f4f7fd;border-radius:8px 8px 0 0}
  .compare-table td[data-col]::before{content:attr(data-col) " : ";font-weight:600;color:#5a6275}
}

/* ── 30. Citations de termes (« certificat qualifié », « signature électronique qualifiée »…) posées par
   baliser_qualifie.py : pas de guillemets automatiques (le texte en porte déjà), souligné pointillé + info-bulle
   qui dit d'où vient le mot (Guichet unique / règlement eIDAS) ── */
q.q-terme{quotes:none;font-style:inherit;text-decoration:underline dotted;text-decoration-color:#9db6ee;text-underline-offset:3px;cursor:help}
q.q-terme::before,q.q-terme::after{content:none}

/* ── 31. Survol, reliquats mesurés après le 1er passage : lien blanc « Signer mon document » de l'onglet sombre (déjà
   souligné et blanc → rien ne bougeait) → glisse de 2 px ; liens nus des pages légales (contact@, vercel.com) ── */
@media (hover:hover){
  .link-white-default-2{transition:transform .2s ease}.link-white-default-2:hover{transform:translateX(3px)}
  a[href]:not([class]):hover{color:#3966cd;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
  .slick-arrow{transition:transform .2s ease,opacity .2s ease}
}

/* ── 32. Pages Connexion et 404 (défi A du 11/10) : la carte était collée en haut (y = 56 px à 1280, 28 px à 390) avec
   tout l'écran vide dessous → centrée verticalement comme les écrans de connexion Stripe / Qonto ; les 4 liens du bas
   faisaient 16 px de haut → cibles de 44 px ── */
main.cx{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;box-sizing:border-box}
.cx-liens a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font-size:13.5px}

/* ── 33. (retiré 14:10) le fondu du carrousel Garanties est maintenant posé par A sur le conteneur large (mouvement.css,
   `.wrapper-col.center-vertical:has(.slider)`) : flèches et points sont dans la boîte masquée, donc cliquables. ── */

/* ── 34. Onglets « Sur ordinateur / Sur téléphone » (Comment ça marche, défi A 14:05) : mesuré à 390 px, 2 pilules de
   140 × 48 px côte à côte, texte actif indigo à 7,5:1 — mais le fond de l'onglet actif n'est qu'un voile indigo à 4 %
   (quasi invisible sur la capture) → fond teinté franc, comme les pastilles d'étape du parcours ── */
.tab-light-blue.w--current,.tab-light-3.w--current,.w-tab-link.w--current{background:#edf2fc!important;color:#3966cd!important}

/* ── 35. Survol des onglets (le fond actif est déjà teinté depuis § 34) et des questions dépliables : un relief net ── */
@media (hover:hover){
  .tab-light-blue:hover,.tab-light-3:hover,.tab._20px:hover{box-shadow:0 4px 12px rgba(57,102,205,.16);transform:translateY(-1px)}
  .pc-questions summary:hover,.pc-exemple summary:hover{color:#3966cd!important;text-decoration:underline;text-underline-offset:4px}
}

/* ── 36. Pages formalités (15:15, fait d'office) : bandeau « Format attendu par le Guichet unique » sous l'intro, carte photo
   « Une question ? » posée sur la maquette (même composant que la scène de l'accueil) ── */
.formalite-format{margin:14px 0 22px!important;font-size:15px;color:#2b3345;align-items:center;gap:10px}
.formalite-format img{width:22px;height:22px;flex:none}
.formalite-format b{color:#0f1b33}
.hero .bandeau-flottant{position:relative;display:inline-block}
.hero .bandeau-flottant .scene-equipe{left:-6%;bottom:6%}
@media (max-width:767px){.hero .bandeau-flottant .scene-equipe{left:4px;bottom:4px}}
/* 36 bis (après capture) : l'icône du bandeau « Format attendu » passait au-dessus du texte (le <p> n'était pas en flex) ;
   la carte photo recouvrait le bouton « Retour » de la maquette → posée un peu plus bas et plus à gauche */
p.formalite-format{display:flex!important;flex-wrap:nowrap}
.hero .bandeau-flottant .scene-equipe{left:-9%;bottom:-3%}

/* ── 37. (retiré 16:25) contraste du « Sign » du pied : règle reprise par A dans mouvement.css (#9db8f0, 8:1) ── */

/* ── 38. Tarif, les 4 cartes de prix (Lucas 11/10, capture 1280 : « il y a des problèmes d'alignement sur la zone tarif »).
   Mesuré AVANT (Playwright, y du haut de chaque élément depuis le haut des cartes) :
   • 1440 px, 4 colonnes : bouton à 175 / 198 / 170 / 198 (écart 28 px), trait 245 / 268 / 240 / 268, liste 262 / 285 / 257 / 285 ;
   • 1280 et 992 px, 2 colonnes : écart 5 px ; 768 px, 2 colonnes : écart 20 px.
   Deux causes : (1) le « € » de la carte 1 (align-self:flex-start + margin-top 0,4 em) rend sa ligne de prix plus haute
   (33 px contre 28,6 px) → tout ce qui suit descend de 4-5 px ; (2) le sous-titre hérite d'une hauteur de ligne de 32 px :
   sur 2 lignes il fait 64 px alors que l'original ne réserve que 36 px → tout ce qui suit descend de 24-28 px.
   Correctif (aucun texte, aucune couleur touchés) : ligne de prix à hauteur fixe 34 px (la ligne de base de « Tarif affiché »
   reste celle de « 19,90 € », mesurée identique : 110 px) ; sous-titre à 14 px / 1,5 avec 2 lignes réservées pour TOUTES les
   cartes (min-height 42 px) et texte calé en haut, pour qu'un sous-titre d'une ligne parte sur la même ligne que la 1re ligne
   des autres ; titre sur 1 ligne réservée (min-height 1,3 em, calé en bas) pour absorber une éventuelle 2e ligne.
   Mesuré APRÈS (voir audit-visuel-2026-10-11/tarif-alignement.mjs) : écart 0 px sur titre, prix, sous-titre, bouton, trait et
   liste à 1440, 1300, 1280, 992 et 768 px, en français et en anglais (/en/tarif). ── */
#fpt-grid .fpt-card .fpt-plan-name{min-height:1.3em;display:flex;align-items:flex-end;justify-content:center}
#fpt-grid .fpt-card .fpt-price-row{height:34px;min-height:34px;box-sizing:border-box;align-items:baseline}
#fpt-grid .fpt-card .fpt-annual-sub{line-height:1.5!important;min-height:42px;justify-content:flex-start}

/* ── 39. (§ 39) Blog, bandeau sombre (AMELIORATIONS-CONTINUES « Rétention », 2 cases, B 11/10) :
   « remonter le champ de recherche dans le bandeau sombre, sous les filtres » et « les filtres touchent le bas du bandeau (0 px) ».
   Mesuré AVANT (audit-visuel-2026-10-11/blog-bandeau.mjs) : 1280 px → bandeau 0-430, filtres 376-430 = 0 px d'air, fil d'Ariane
   à 462, champ de recherche à 534 (104 px sous les filtres) ; 390 px → bandeau 0-427, filtres 323-427 = 0 px, champ à 527 (100 px).
   Le HTML (pages.py, chantier A) met le fil d'Ariane dans une section ENTRE le bandeau et la recherche, et la recherche dans la
   même section que les cartes : impossible de glisser le champ dans le bandeau sans toucher au HTML. Solution CSS propre :
   (1) le conteneur de page passe en colonne flex, le fil d'Ariane prend `order:-1` et monte en tête du bandeau sombre, sous
   l'en-tête, en texte clair (comme Legalstart et Qonto : fil d'Ariane au-dessus du titre) — le bandeau garde la même hauteur
   utile (son padding haut 192/128 px est redistribué : 116/92 px au fil, 44/20 px au titre) ;
   (2) le bandeau reçoit 84 px de padding bas : 28 px d'air sous les filtres + 56 px de zone de recouvrement ;
   (3) la recherche devient une carte blanche (ombre, coins 14 px) remontée de 56 px : elle est posée À CHEVAL sur le bas du bandeau,
   juste sous les filtres, comme la barre de recherche du blog Stripe. Contrastes sur l'encre #0f1b33 : lien #9db8f0 = 8,0:1,
   « Blog » blanc = 17,1:1, chevron #b7c3dc = 11,7:1 (calculés dans le script). Cibles : lien du fil 44 px de haut.
   Mesuré APRÈS (même script, captures preuves/blog-bandeau-apres-1280.png, -768.png, -390.png, -390-recherche.png, regardées) :
   1280 px → fil d'Ariane 116-160 dans le bandeau (lien 44 px de haut), titre à 204, filtres 388-442, bandeau jusqu'à 526 :
   28 px d'air sous les filtres puis la carte de recherche 470-616 à cheval sur le bandeau (56 px dedans), champ à 530 (avant 534) ;
   390 px → fil 92-136, titre 156, filtres 351-455, bandeau jusqu'à 539, carte 483-621, champ à 537 (avant 527) ; 768 px : idem.
   Contrastes mesurés : lien du fil 8,6:1, « Blog » 17,1:1, chevron 9,7:1, sous-titre 17,1:1, filtre inactif ≈ 10,5:1, survol du lien
   → blanc (la règle « survol bleu #3966cd » de mouvement.css est recouverte, elle donnerait 2,9:1 sur l'encre). Aucun débordement
   horizontal, 0 erreur console, recherche « franceconnect » 39 → 14 cartes (+ filtre Formalités → 1) aux 3 largeurs. ── */
.wrapper-site:has(> .hero-hub .filtres-blog){display:flex;flex-direction:column}
.hero-hub:has(.filtres-blog){padding-top:44px!important;padding-bottom:84px!important}
.hero-hub:has(.filtres-blog)~.section.no-padding{order:-1;background:var(--encre);padding-top:116px!important;padding-bottom:0!important}
.hero-hub:has(.filtres-blog)~.section.no-padding .wrapper-col{margin-top:0!important}
.hero-hub:has(.filtres-blog)~.section.no-padding .alohi---main-style-guide--breadcrumb{align-items:center}
.hero-hub:has(.filtres-blog)~.section.no-padding .alohi---main-style-guide--link-breadcrumb{color:#9db8f0!important;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(157,184,240,.45)}
@media (hover:hover){.hero-hub:has(.filtres-blog)~.section.no-padding .alohi---main-style-guide--link-breadcrumb:hover{color:#fff!important;text-decoration-color:#fff}}
.hero-hub:has(.filtres-blog)~.section.no-padding .alohi---main-style-guide--text-breadcrumb{color:#fff!important}
.hero-hub:has(.filtres-blog)~.section.no-padding .alohi---main-style-guide--arrow-breadcrumb{color:#b7c3dc!important}
.hero-hub:has(.filtres-blog)~.section.no-padding+.section .recherche-guides{position:relative;z-index:1;margin:-56px auto 36px;background:#fff;border-radius:14px;padding:20px 24px 6px;box-shadow:0 12px 32px rgba(15,27,51,.14)}
@media (max-width:767px){
  .hero-hub:has(.filtres-blog){padding-top:20px!important}
  .hero-hub:has(.filtres-blog)~.section.no-padding{padding-top:92px!important}
  .hero-hub:has(.filtres-blog)~.section.no-padding+.section .recherche-guides{padding:16px 18px 4px;margin-bottom:32px}
}

/* ── 40. Site allégé (B, 11/10 19:45) : le moteur Webflow (3,1 Mo) n'est plus chargé ; leger.js tient le menu téléphone
   et les onglets. Icône du bouton rond dessinée en CSS (l'animation Lottie venait du moteur). ───────────────────── */
.burger-lottie{position:relative;width:40px;height:40px}
.burger-lottie::before,.burger-lottie::after{content:"";position:absolute;left:11px;width:18px;height:2px;border-radius:2px;background:#fff;transition:top .22s ease,transform .22s ease,box-shadow .15s ease}
.burger-lottie::before{top:14px;box-shadow:0 5px 0 #fff}
.burger-lottie::after{top:24px}
.burger-navbar.est-ouvert .burger-lottie::before{top:19px;transform:rotate(45deg);box-shadow:0 0 0 transparent}
.burger-navbar.est-ouvert .burger-lottie::after{top:19px;transform:rotate(-45deg)}
.menu-burger{transition:transform .3s ease,visibility 0s linear .3s}
.menu-burger.est-ouvert{transform:none;visibility:visible;transition:transform .3s ease}
html.menu-ouvert,html.menu-ouvert body{overflow:hidden}
html.menu-ouvert .branding-navbar{z-index:10000}   /* la barre (logo + bouton rond) reste au-dessus du panneau ouvert : on peut le refermer */
@media (prefers-reduced-motion:reduce){.menu-burger,.burger-lottie::before,.burger-lottie::after{transition:none}}
/* ── 41. Pages formalité (B, 11/10 20:20, signalé par A) : 96 px de vide entre les 6 cartes et l'encadré « Ce que l'INPI attend »
   (padding du bas de la section des cartes, hérité de fax.plus) → 28 px sur ordinateur, 20 px sur téléphone. ───────────── */
.section:has(+ .inpi-attend){padding-bottom:28px}
@media (max-width:767px){.section:has(+ .inpi-attend){padding-bottom:20px}}

/* ── 42. Titres sans mot orphelin (défi n°4, B 11/10 22:20) : le navigateur équilibre les lignes d'un titre (text-wrap:balance),
   plus de « l'UE » ou « ? » seul sur la dernière ligne. Mesuré avant : « Plusieurs documents à signer ? » (Tarif 1280/768), « Liste de confiance de l'UE » (Garanties 390). ── */
h1,h2,h3,.pc-titre,.fpt-card h3,.rc-titre{text-wrap:balance}
/* ── 43. État « enfoncé » (:active) sur toutes les familles de boutons, en plus du survol §23 — on sent le clic. ── */
.button:active,.pc-actions .button:active:not([disabled]),.cta-btn:active,a.mid-cta-btn:active,.fpt-btn:active,.pcb-cta:active,.barre-signer:active,.menu-tel-signer:active,
.button-inline-navbar:active,a.bouton-blanc:active,.filtre-blog:active,.sticky-mobile-cta-btn:active,.ligne-action a:active,.pc-lien:active,.link-blue:active,summary:active,
.w-tab-link:active,.burger-navbar:active{transform:translateY(1px) scale(.985)!important;box-shadow:none!important;filter:brightness(.95);transition-duration:.06s!important}
@media (prefers-reduced-motion:reduce){.button:active,.cta-btn:active,.fpt-btn:active,.pcb-cta:active,.barre-signer:active{transform:none!important}}

/* ── 44. En-tête ordinateur (défi n°5, B 11/10 23:05) : « Comment ça marche » était à 16 px du logo (mesuré) alors que
   288 px restaient libres avant le bouton → le menu s'écarte de 40 px du logo. ──────────────────────────────────── */
@media (min-width:992px){.branding-navbar .navbar-item{margin-left:40px}}
/* ── 45. Audit du lot A 23:50 (B 11/10 23:55) ───────────────────────────────────────────────────────────────────────
   a) accueil : la rangée « Paiement sécurisé » sous les 3 prix porte la classe sur-fonce (gris clair) mais s'affiche sur la carte
      blanche → 1,62:1 mesuré. b) pages formalité à 390 : fil d'Ariane 30 px et logo 22 px de haut → zones de 44 px. */
/* (retiré 12/10 01:10 : le fond réellement peint derrière cette rangée est le bleu nuit — pixel mesuré (15,27,51) — ma mesure remontait le fond blanc d'un parent ; A a remis le gris clair, contraste 10:1) */
@media (max-width:991px){
  .text-sm.when-link{display:inline-block;padding:7px 2px;margin:-7px -2px}
  .link-logo-navbar{display:inline-flex;align-items:center;min-height:44px}
}
/* ── 46. Zoom 200 % / petites tablettes (défi n°7, B 12/10 01:20) : la rangée des 3 cartes de prix (section.start-now-price) garde
   3 cartes de 211 px dans une colonne de 600 px entre 480 et 767 px → la 3e carte et son bouton « Nous écrire » sortent de l'écran
   (mesuré 640 : bouton 649→794 pour 640 px). La rangée passe à la ligne. ─────────────────────────────────────────────── */
@media (max-width:767px){
  .start-now-price .wrapper-col{flex-wrap:wrap;justify-content:center;gap:16px}
  .start-now-price .wrapper-col>.col-4{flex:1 1 260px;width:auto!important;max-width:360px;min-width:0}
}

/* §47 (défi n°11, 12/10) — bouton « Signer mon document » visible sans défiler : à 1280 le bas du bouton était à 649 px (accueil), 648 (tarif), 626 (cessation) pour un écran utile de 600 px. L'espace au-dessus du titre (224 px dont 92 d'en-tête) descend de 48-56 px. */
@media (min-width:992px){
 .section.hero.home{padding-top:168px}
 .section.hero-section-pricing{padding-top:152px}
 .section.hero-section{padding-top:176px}
}
@media (max-width:767px){
 .section.hero-section{padding-top:120px}
}
/* §48 (défi n°11) — vidéo du parcours sous « Votre document signé en 3 étapes » : lecture au clic seulement, jamais automatique */
.video-parcours{max-width:380px;margin:36px auto 0;text-align:center}
.video-parcours video{width:100%;height:auto;display:block;border-radius:18px;box-shadow:0 10px 30px rgba(15,27,51,.14);background:#0f1b33}
.video-parcours figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:#5a6275}

/* §49 (défi n°13, 12/10) — en-tête à 1024 px : le bouton « Signer mon document » sortait de l'écran (887 → 1093 px pour 1024, mesuré) : à 992-1120 px, menu plus serré (§44 ramené à 20 px) et bouton moins large */
@media (min-width:992px) and (max-width:1279px){   /* relance 14/10 : 1120 → 1279 (le menu français débordait encore de 62 px à 1 180-1 200) */
 .navbar-item{margin-left:20px}
 .wrap-cta-navbar{grid-column-gap:.3rem}
 .cta-navbar-top{padding:1rem 1.1rem}
 header .wrap-cta-navbar a.button.cta-navbar-top.w-inline-block{padding:0 12px!important}   /* mouvement.css (chargé après) impose « 0 22px » en !important : on gagne par la spécificité. 206 → ~186 px */
 header .button-inline-navbar{padding-left:.6rem!important;padding-right:.6rem!important}
 .langue-bouton .langue-nom{display:none}
 .langue-bouton .langue-code{display:none}   /* à 992-1120 px : drapeau + flèche seulement (le libellé reste dans aria-label « Choisir la langue, Français ») : 136 → ~56 px */
 .navbar-item{margin-left:14px}
 .hero-section-pricing .wrap-button,.hero-section .wrap-button{flex-wrap:wrap}
}
/* §50 (défi n°13) — tableau comparatif du Tarif à 320 px : les colonnes fixes (848 px) débordaient ; sous 360 px le tableau glisse dans son cadre */
@media (max-width:359px){
 .features-rows{max-width:100%;overflow-x:auto}
 .features-col-1,.features-col-1.expand{min-width:0}
 .title-country{overflow-wrap:anywhere}
}

/* §51 (défi n°15, 12/10) — encadré « FranceConnect+ ne fonctionne pas chez vous ? » sous « Le problème » (accueil) : 3 lignes honnêtes + bouton vers le tableau du Tarif */
.encadre-fc-section{padding-top:0}
.encadre-fc{max-width:860px;margin:0 auto;padding:28px 30px;border-radius:16px;background:#eef3ff;border:1px solid #d7e2fb;text-align:left}
.encadre-fc-titre{font-size:26px;line-height:1.2;margin:0 0 14px;text-align:left}
.encadre-fc-lignes{margin:0 0 18px;padding-left:22px;font-size:16px;line-height:1.55;color:#2b3345}
.encadre-fc-lignes li{margin:0 0 6px}
.encadre-fc-actions{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.encadre-fc-actions .button{min-height:48px}
.encadre-fc-lien{color:#3966cd;font-weight:600;text-decoration:underline;text-underline-offset:2px}
@media (max-width:767px){.encadre-fc{padding:20px 16px}.encadre-fc-titre{font-size:22px}.encadre-fc-actions .button{width:100%;justify-content:center}}

/* §52 (défi n°16, 12/10) — titre du premier écran à 8 mots (« Signez votre document de synthèse INPI en ligne ») : à 52 px il prenait 4 lignes et repoussait le bouton à 619 px (limite 600, défi 11) ; à 46 px il tient en 3 lignes */
@media (min-width:992px){body section.hero.home h1.dsp-2xl{font-size:46px!important;line-height:1.1!important}}   /* le style de base impose 52 px en !important plus loin : spécificité + !important */

/* ── §53 (B, défi n°17, 12/10) : cohérence visuelle de bout en bout ──────────────────────────────── */
/* survol : 4 familles sans retour visuel (mesure tout.mjs, 67 pages) */
.evitement:hover{background:#3966cd !important}
@media (hover:hover){details>summary:hover{color:#3966cd !important;cursor:pointer}}
@media (hover:hover){a.card.drop-shadow.grey-bg:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(16,35,90,.12)}}
a.card.drop-shadow.grey-bg{transition:transform .18s,box-shadow .18s}
@media (hover:hover){.encadre-fc-lien:hover{color:#0f1b33 !important;text-decoration-thickness:2px}}
/* boutons : 3 familles (plein bleu · blanc bleu · blanc sombre), 52 px, graisse 600, pilule */
.encadre-fc-actions .button{min-height:52px}
.button-6.secondary{background:#fff !important;font-weight:600;border-color:#3966cd}
.button.bouton-blanc,.button.bouton-blanc div{color:#0f1b33 !important}
/* cartes : 2 familles — carte blanche (rayon 12, relief ou filet #dfe4ec) · encadré teinté (#f3f6fc, filet #dfe4ec) */
.scene-carte,.encadre-fc,.ot-maquette,.otm-fichier,.w-tab-pane,.fpt-card,.objection,.mcp-usp-card,.compat-groupe,.verif-doc,.me-aide,.recevez-liste li,.voir-aussi li,.on-nous-demande details{border-radius:12px !important}
.encadre-fc,.verif-doc,.ot-maquette,.me-aide,.w-tab-pane.w--tab-active{background:#f3f6fc !important;border-color:#dfe4ec}
.scene-carte{border-color:#dfe4ec !important}
/* palette : 8 couleurs de texte (sombre #0f1b33 · courant #2b3345 · secondaire #5a6275 · accent #3966cd · blanc · sur fond sombre #eef2f7 / #c6cbd8 / #9db8f0) */
.ou-croise strong,.pd-groupe h3,.ot-texte h3,dd q,.verif-doc h3,.compare-fc h2,p.chapo,.ia-carte h2,a.retour-haut,.tab-light-blue .text-block,.otm-titre,.otm-etiquette,.ot-maquette b,.faq-q,article strong,.cgv strong,table th{color:#0f1b33 !important}
p.hero-usages,p.prix-rembourse,p.ia-source,.note-marque,.me-exemple small{color:#2b3345 !important}
.card-meta,.card-meta time,.ot-note,.otm-depot,.otm-depot small,figcaption.er-page,.disclaimer,article em,#pc-signer[disabled] div{color:#5a6275 !important}
.blog-liste a,figure.regle-inpi figcaption,dl dt,p.ligne-action a,p.aide-liens a,th.compare-nous,.otm-bouton,.otm-depot b,q.q-terme,.a-la-une-label,.ou-croise a,.cgv li a,.otm-pdf{color:#3966cd !important}
.text-lg-2,.col-5-3 p,p.confiance-texte,.cc-lib span{color:#c6cbd8 !important}
p.cc-lib,.pane-faits span,.badges-confiance span{color:#eef2f7 !important}
p.confiance-label,.cc-unite,.label.grey02{color:#9db8f0 !important}

/* ── §54 (B, défi n°17) : rythme vertical sur une grille de 8 px — bloc GÉNÉRÉ par defi17-mesures.mjs (ne pas éditer à la main) ──
   arrondi au multiple de 8 le plus proche (1-3 → 0, 4 → 8, 12 → 16, 20 → 24, 28 → 32) ; sections, cartes, marges dans les cartes, écarts de grilles */
/* DEBUT-RYTHME-8 */
a.cards-key-features.w-inline-block{column-gap:8px !important} /* 10 */
a.cards-key-features.w-inline-block{row-gap:8px !important} /* 10 */
a.me-exemple-vignette{column-gap:16px !important} /* 14 */
a.me-exemple-vignette{row-gap:16px !important} /* 14 */
aside.encadre-fc{padding-bottom:24px !important} /* 20 */
aside.encadre-fc{padding-bottom:32px !important} /* 28 */
aside.encadre-fc{padding-left:32px !important} /* 30 */
aside.encadre-fc{padding-right:32px !important} /* 30 */
aside.encadre-fc{padding-top:24px !important} /* 20 */
aside.encadre-fc{padding-top:32px !important} /* 28 */
aside.encadre-fc > h2.encadre-fc-titre{margin-bottom:16px !important} /* 14 */
aside.encadre-fc > ol.encadre-fc-lignes{margin-bottom:16px !important} /* 18 */
aside.pc-recap-collant{padding-bottom:24px !important} /* 20 */
aside.pc-recap-collant{padding-left:24px !important} /* 22 */
aside.pc-recap-collant{padding-right:24px !important} /* 22 */
aside.pc-recap-collant{padding-top:24px !important} /* 20 */
aside.pc-recap-collant > div.paiement-logos.rc-paiement{margin-bottom:16px !important} /* 12 */
aside.pc-recap-collant > h3{margin-bottom:16px !important} /* 12 */
aside.pc-recap-collant > p.rc-note{margin-bottom:16px !important} /* 12 */
aside.pc-recap-collant > p.rc-prix{margin-bottom:8px !important} /* 4 */
aside.pc-recap-collant > p.rc-prix{margin-top:16px !important} /* 14 */
button.fpt-show-more{column-gap:8px !important} /* 6 */
button.fpt-show-more{row-gap:8px !important} /* 6 */
div.aide-pied{column-gap:8px !important} /* 10 */
div.aide-pied{row-gap:8px !important} /* 10 */
div.alohi---main-style-guide--wrap-item-footer{column-gap:0px !important} /* 1 */
div.alohi---main-style-guide--wrap-item-footer{row-gap:0px !important} /* 1 */
div.alohi---main-style-guide--wrap-item-footer.alohi---main-style-guide--margin-top-mobile{column-gap:0px !important} /* 1 */
div.alohi---main-style-guide--wrap-item-footer.alohi---main-style-guide--margin-top-mobile{row-gap:0px !important} /* 1 */
div.alohi---main-style-guide--wrap-left-last-footer.alohi---main-style-guide--center-horizontal-wrap-mobile{column-gap:24px !important} /* 20 */
div.alohi---main-style-guide--wrap-left-last-footer.alohi---main-style-guide--center-horizontal-wrap-mobile{row-gap:8px !important} /* 10 */
div.card.drop-shadow-light.carte-petite{column-gap:16px !important} /* 14 */
div.card.drop-shadow-light.carte-petite{padding-bottom:32px !important} /* 28 */
div.card.drop-shadow-light.carte-petite{padding-left:24px !important} /* 20 */
div.card.drop-shadow-light.carte-petite{padding-right:24px !important} /* 20 */
div.card.drop-shadow-light.carte-petite{padding-top:32px !important} /* 28 */
div.card.drop-shadow-light.carte-petite{row-gap:16px !important} /* 14 */
div.card.drop-shadow-light.carte-simple{padding-bottom:32px !important} /* 28 */
div.card.drop-shadow-light.carte-simple{padding-left:24px !important} /* 26 */
div.card.drop-shadow-light.carte-simple{padding-right:24px !important} /* 26 */
div.card.drop-shadow-light.carte-simple{padding-top:32px !important} /* 28 */
div.card.drop-shadow-light.carte-simple > h3.dsp-md{margin-top:16px !important} /* 14 */
div.card.drop-shadow-light.carte-simple > p{margin-bottom:24px !important} /* 20 */
div.carte-flottante.cf-1{column-gap:16px !important} /* 12 */
div.carte-flottante.cf-1{row-gap:16px !important} /* 12 */
div.carte-flottante.cf-2{column-gap:16px !important} /* 12 */
div.carte-flottante.cf-2{row-gap:16px !important} /* 12 */
div.compat-groupe{padding-bottom:24px !important} /* 20 */
div.compat-groupe{padding-top:24px !important} /* 20 */
div.compat-groupe > span.compat-titre{margin-bottom:16px !important} /* 12 */
div.compat-groupe > ul{row-gap:16px !important} /* 12 */
div.confiance-hero{column-gap:24px !important} /* 22 */
div.confiance-hero{row-gap:8px !important} /* 10 */
div.encadre-fc-actions{column-gap:24px !important} /* 20 */
div.encadre-fc-actions{row-gap:16px !important} /* 12 */
div.er-grille{column-gap:40px !important} /* 36 */
div.er-grille{row-gap:40px !important} /* 36 */
div.features-rows.left-padding{column-gap:16px !important} /* 12 */
div.features-rows.left-padding{row-gap:0px !important} /* 2 */
div.fpt-card.card{padding-bottom:24px !important} /* 22 */
div.fpt-card.card{padding-bottom:32px !important} /* 28 */
div.fpt-card.card{padding-left:16px !important} /* 18 */
div.fpt-card.card{padding-right:16px !important} /* 18 */
div.fpt-card.card{padding-top:24px !important} /* 22 */
div.fpt-card.card{padding-top:32px !important} /* 28 */
div.fpt-card.card > a.fpt-btn{margin-bottom:24px !important} /* 20 */
div.fpt-card.card > div.fpt-feats{margin-bottom:16px !important} /* 12 */
div.fpt-card.card > div.fpt-price-row{margin-bottom:8px !important} /* 4 */
div.fpt-card.card > hr.fpt-hr{margin-bottom:16px !important} /* 14 */
div.fpt-card.card > p.fpt-annual-sub{margin-bottom:24px !important} /* 20 */
div.fpt-card.card > p.fpt-plan-name.dsp-lg{margin-bottom:16px !important} /* 12 */
div.fpt-card.card.fpt-recommended{padding-bottom:24px !important} /* 21 */
div.fpt-card.card.fpt-recommended{padding-bottom:24px !important} /* 27 */
div.fpt-card.card.fpt-recommended{padding-left:16px !important} /* 17 */
div.fpt-card.card.fpt-recommended{padding-left:24px !important} /* 23 */
div.fpt-card.card.fpt-recommended{padding-right:16px !important} /* 17 */
div.fpt-card.card.fpt-recommended{padding-right:24px !important} /* 23 */
div.fpt-card.card.fpt-recommended{padding-top:24px !important} /* 21 */
div.fpt-card.card.fpt-recommended{padding-top:24px !important} /* 27 */
div.fpt-card.card.fpt-recommended > a.fpt-btn{margin-bottom:24px !important} /* 20 */
div.fpt-card.card.fpt-recommended > div.fpt-feats{margin-bottom:16px !important} /* 12 */
div.fpt-card.card.fpt-recommended > div.fpt-price-row{margin-bottom:8px !important} /* 4 */
div.fpt-card.card.fpt-recommended > hr.fpt-hr{margin-bottom:16px !important} /* 14 */
div.fpt-card.card.fpt-recommended > p.fpt-annual-sub{margin-bottom:24px !important} /* 20 */
div.fpt-card.card.fpt-recommended > p.fpt-plan-name.dsp-lg{margin-bottom:16px !important} /* 12 */
div.fpt-feats{column-gap:8px !important} /* 10 */
div.fpt-feats{row-gap:8px !important} /* 10 */
div.fpt-price-row{column-gap:0px !important} /* 2 */
div.fpt-price-row{row-gap:0px !important} /* 2 */
div.ia-carte{padding-bottom:24px !important} /* 20 */
div.ia-carte{padding-bottom:24px !important} /* 26 */
div.ia-carte{padding-left:24px !important} /* 20 */
div.ia-carte{padding-left:32px !important} /* 28 */
div.ia-carte{padding-right:24px !important} /* 20 */
div.ia-carte{padding-right:32px !important} /* 28 */
div.ia-carte{padding-top:24px !important} /* 20 */
div.ia-carte{padding-top:24px !important} /* 26 */
div.ia-carte > dl{column-gap:16px !important} /* 14 */
div.ia-carte > dl{column-gap:24px !important} /* 20 */
div.ia-carte > dl{row-gap:16px !important} /* 14 */
div.ia-carte > dl{row-gap:24px !important} /* 20 */
div.ia-carte > h2{margin-bottom:16px !important} /* 18 */
div.ia-carte > p.ia-source{margin-top:16px !important} /* 18 */
div.mcp-usp-card{padding-bottom:16px !important} /* 18 */
div.mcp-usp-card{padding-top:16px !important} /* 18 */
div.mcp-usp-row{column-gap:16px !important} /* 12 */
div.mcp-usp-row{row-gap:16px !important} /* 12 */
div.me-aide{padding-bottom:24px !important} /* 20 */
div.me-aide{padding-left:24px !important} /* 22 */
div.me-aide{padding-right:24px !important} /* 22 */
div.me-aide{padding-top:24px !important} /* 20 */
div.me-aide > strong{margin-bottom:8px !important} /* 6 */
div.objection{padding-left:16px !important} /* 18 */
div.objection{padding-right:16px !important} /* 18 */
div.objection{padding-top:16px !important} /* 18 */
div.ot-maquette{padding-bottom:16px !important} /* 18 */
div.ot-maquette{padding-left:16px !important} /* 18 */
div.ot-maquette{padding-right:16px !important} /* 18 */
div.ot-maquette{padding-top:16px !important} /* 18 */
div.ot-maquette > p.otm-etiquette{margin-bottom:16px !important} /* 12 */
div.otm-fichier{column-gap:16px !important} /* 12 */
div.otm-fichier{padding-bottom:16px !important} /* 12 */
div.otm-fichier{padding-left:16px !important} /* 12 */
div.otm-fichier{padding-right:16px !important} /* 12 */
div.otm-fichier{padding-top:16px !important} /* 12 */
div.otm-fichier{row-gap:16px !important} /* 12 */
div.paiement-logos{column-gap:16px !important} /* 14 */
div.paiement-logos{row-gap:8px !important} /* 10 */
div.paiement-logos.rc-paiement{column-gap:8px !important} /* 10 */
div.paiement-logos.rc-paiement > ul{column-gap:8px !important} /* 6 */
div.paiement-logos.rc-paiement > ul{row-gap:8px !important} /* 6 */
div.paiement-logos.sur-fonce{column-gap:16px !important} /* 14 */
div.paiement-logos.sur-fonce{row-gap:8px !important} /* 10 */
div.paiement-logos.sur-fonce.prix-paiement{column-gap:16px !important} /* 14 */
div.paiement-logos.sur-fonce.prix-paiement{row-gap:8px !important} /* 10 */
div.pc-barre-prix{column-gap:16px !important} /* 12 */
div.pc-barre-prix{row-gap:16px !important} /* 12 */
div.pc-cadre{padding-bottom:24px !important} /* 20 */
div.pc-cadre{padding-top:24px !important} /* 20 */
div.pc-grille{column-gap:32px !important} /* 28 */
div.pc-grille{row-gap:32px !important} /* 28 */
div.pc-usage-cartes{column-gap:16px !important} /* 12 */
div.pc-usage-cartes{row-gap:16px !important} /* 12 */
div.scene-equipe{column-gap:16px !important} /* 12 */
div.scene-equipe{row-gap:16px !important} /* 12 */
div.verif-doc{padding-bottom:24px !important} /* 20 */
div.verif-doc{padding-left:24px !important} /* 20 */
div.verif-doc{padding-left:32px !important} /* 28 */
div.verif-doc{padding-right:24px !important} /* 20 */
div.verif-doc{padding-right:32px !important} /* 28 */
div.verif-doc{padding-top:24px !important} /* 20 */
div.verif-doc > ul{column-gap:16px !important} /* 14 */
div.verif-doc > ul{column-gap:16px !important} /* 18 */
div.verif-doc > ul{row-gap:16px !important} /* 14 */
div.verif-doc > ul{row-gap:16px !important} /* 18 */
div.w-dyn-items.grille-formalites{column-gap:24px !important} /* 20 */
div.w-dyn-items.grille-formalites{row-gap:24px !important} /* 20 */
div.wrap-card-content.center-horizontal.flex-horizontal-mobile{column-gap:16px !important} /* 12 */
div.wrap-card-content.center-horizontal.flex-horizontal-mobile{row-gap:16px !important} /* 12 */
div.wrap-key-features{column-gap:8px !important} /* 10 */
div.wrap-key-features{row-gap:8px !important} /* 10 */
div.wrap-sitemap{column-gap:8px !important} /* 4 */
div.wrap-sitemap{row-gap:8px !important} /* 4 */
div.wrapper-col-wrap.wrap-items-countrie.w-dyn-items{column-gap:16px !important} /* 14 */
div.wrapper-col-wrap.wrap-items-countrie.w-dyn-items{row-gap:16px !important} /* 14 */
div.wrapper-col.center-vertical.mb-3{column-gap:16px !important} /* 14 */
div.wrapper-col.center-vertical.mb-3{row-gap:16px !important} /* 14 */
div.wrapper-col.logos-home{column-gap:16px !important} /* 18 */
div.wrapper-col.logos-home{column-gap:40px !important} /* 42 */
div.wrapper-col.logos-home{row-gap:16px !important} /* 13 */
div.wrapper-col.logos-home.margin-top-small{column-gap:16px !important} /* 18 */
div.wrapper-col.logos-home.margin-top-small{column-gap:40px !important} /* 42 */
div.wrapper-col.logos-home.margin-top-small{row-gap:16px !important} /* 13 */
figure.scene-carte{column-gap:8px !important} /* 10 */
figure.scene-carte{padding-left:24px !important} /* 20 */
figure.scene-carte{padding-right:24px !important} /* 20 */
figure.scene-carte{padding-top:24px !important} /* 22 */
figure.scene-carte{row-gap:8px !important} /* 10 */
figure.scene-carte > figcaption{margin-top:8px !important} /* 5 */
label.pc-usage-carte{padding-bottom:24px !important} /* 20 */
label.pc-usage-carte{padding-left:24px !important} /* 20 */
label.pc-usage-carte{padding-right:48px !important} /* 44 */
label.pc-usage-carte{padding-top:24px !important} /* 20 */
ol.me-liste{column-gap:24px !important} /* 22 */
ol.me-liste{row-gap:24px !important} /* 22 */
ol.ot-etapes{column-gap:24px !important} /* 22 */
ol.ot-etapes{row-gap:24px !important} /* 22 */
ol.ot-etapes > li{column-gap:32px !important} /* 28 */
ol.ot-etapes > li{padding-bottom:24px !important} /* 22 */
ol.ot-etapes > li{padding-left:24px !important} /* 22 */
ol.ot-etapes > li{padding-right:24px !important} /* 22 */
ol.ot-etapes > li{padding-top:24px !important} /* 22 */
ol.ot-etapes > li{row-gap:32px !important} /* 28 */
ol.pc-progression{column-gap:8px !important} /* 6 */
ol.pc-progression{row-gap:8px !important} /* 6 */
p.avant-payer{column-gap:8px !important} /* 10 */
p.avant-payer{padding-bottom:16px !important} /* 14 */
p.avant-payer{padding-left:16px !important} /* 18 */
p.avant-payer{padding-right:16px !important} /* 18 */
p.avant-payer{padding-top:16px !important} /* 14 */
p.avant-payer{row-gap:8px !important} /* 10 */
p.avant-payer > img{margin-top:0px !important} /* 2 */
p.confiance-hero.formalite-format{column-gap:8px !important} /* 10 */
p.confiance-hero.formalite-format{row-gap:8px !important} /* 10 */
section.section.border-top{padding-bottom:24px !important} /* 20 */
section.section.border-top{padding-bottom:32px !important} /* 28 */
section.section.border-top{padding-top:24px !important} /* 20 */
span.pc-usage-texte{column-gap:8px !important} /* 4 */
span.pc-usage-texte{row-gap:8px !important} /* 4 */
ul.badges-confiance{column-gap:16px !important} /* 14 */
ul.badges-confiance{row-gap:16px !important} /* 14 */
ul.badges-confiance > li{column-gap:16px !important} /* 14 */
ul.badges-confiance > li{padding-bottom:16px !important} /* 14 */
ul.badges-confiance > li{padding-top:16px !important} /* 14 */
ul.badges-confiance > li{row-gap:16px !important} /* 14 */
ul.compat-appareils{row-gap:16px !important} /* 12 */
ul.pane-faits{column-gap:8px !important} /* 10 */
ul.pane-faits{row-gap:8px !important} /* 10 */
ul.pane-faits > li{column-gap:8px !important} /* 10 */
ul.pane-faits > li{row-gap:8px !important} /* 10 */
ul.recevez-liste{column-gap:24px !important} /* 20 */
ul.recevez-liste{row-gap:24px !important} /* 20 */
ul.voir-aussi{column-gap:8px !important} /* 10 */
ul.voir-aussi{row-gap:8px !important} /* 10 */
/* FIN-RYTHME-8 */

/* ── §55 (B, défi n°17) : restes du rythme 8 px (sélecteurs sans classe), 2 cartes, 3 couleurs ── */
.verif-doc li,.pane-faits li,.badges-confiance li{gap:8px!important}
div.wrapper-col.default>div.wrapper-col.logos-home,.wrapper-col.logos-home{row-gap:16px!important;column-gap:16px!important}
.wrapper-col.center-vertical{row-gap:16px!important;column-gap:16px!important}
.w-tab-menu{row-gap:8px!important;column-gap:8px!important}
ol.ot-etapes>li,.ot-etapes li{border-radius:12px!important}
div.tab-pane.w-tab-pane,.w-tab-pane{border-radius:12px!important;border:1px solid #dfe4ec!important}
span>b,li>b{color:#0f1b33!important}
span>small,small{color:#5a6275!important}
.me-exemple-vignette strong,span>strong{color:#3966cd!important}
/* §55 bis : ce qu'A a ajouté entre deux mesures (date de mise à jour, « En bref », chapo) + bouton Nos garanties */
body p.chapo,body .en-bref-titre{color:#0f1b33!important}
body p.maj-page{color:#5a6275!important}
body .button-6.secondary div,body .button-6.secondary{color:#3966cd!important}
body section div.wrapper-col.center-vertical.mb-3{row-gap:16px!important;column-gap:16px!important}
/* §55 ter : 4 derniers rattachements (mouvement.css charge après finition avec !important → spécificité plus haute) */
html body .ou-trouver h2#ou-trouver-titre,html body .ou-trouver h2.dsp-md{color:#0f1b33!important}
html body .en-bref-hero .en-bref-titre,html body .en-bref .en-bref-titre{color:#3966cd!important}
html body .er-page figcaption{color:#5a6275!important}
html body section div.wrapper-col.center-vertical.mb-3{row-gap:16px!important;column-gap:16px!important;gap:16px!important}

/* §C1 (conversation C, 12/10 15:30) — ESPACEMENT : 5 règles simples, contrôlées par audit-C-2026-10-12/espacement.mjs
   E1 un titre ne colle jamais au bloc du dessus (≥ 32 px) · E2 un titre est plus près de son contenu que du bloc d'avant
   E3 un chiffre est centré dans son rond · E4 les éléments d'une rangée sont centrés entre eux · E5 interligne ≤ 1,6 sur les textes courts
   + bords : tout le contenu s'aligne sur le bord du logo (conteneur 1 184 px à 1 440). */
/* E1 : questions fréquentes collées au bandeau sombre « confiance » (accueil FR/EN, capture Lucas 12/10) */
html body section.confiance + section#faq{padding-top:96px!important}
/* E2 : titre « Questions fréquentes » → contenu : 72 px → 40 px (le titre appartient à sa liste) */
html body section#faq div.wrapper-col.center-vertical.mb-3{margin-bottom:40px!important}
/* E1 : titre de /signer collé à l'en-tête (8 px) → 56 px */
html body .pc-entete{padding-top:48px}
@media (max-width:767px){html body .pc-entete{padding-top:56px!important}html body #onda-titre{margin-top:24px!important}}
/* E3 : chiffres des pastilles d'étapes 4,5 px trop bas (interligne 32 px dans un rond de 22 px) */
html body .pc-progression .pc-num{line-height:1!important;place-items:center;place-content:center}
/* E5 : récapitulatif « Votre signature » — interligne 2,3 → 1,45 (une valeur sur 2 lignes faisait un trou) */
html body .pc-recap-collant dl div,html body .pc-recap-collant dt,html body .pc-recap-collant dd{line-height:1.45!important}
/* E1 : titre du blog caché SOUS l'en-tête fixe. Cause : la section « Guides par démarche » insérée juste après le haut du blog
   cassait le sélecteur « + » qui remonte le fil d'Ariane (bandeau sombre de 116 px) au-dessus du titre → « ~ » (§ lignes 294-301). */
/* Bords : « Guides par démarche » démarrait 63 px plus à gauche que le reste du site */
html body section.par-demarche .container-large,html body section.hero-hub .container-large{max-width:1184px!important}
/* Articles : le lien « Aller au contenu » s'affichait en haut (sa règle n'était chargée que sur les pages du site) */
.evitement{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:8px;background:#0f1b33;color:#fff!important;font-weight:600;text-decoration:none}
.evitement:focus,.evitement:focus-visible{top:12px;outline:3px solid #ffbf47;outline-offset:2px}
/* Articles : bouton posé dans l'encadré « En bref » existant (fini les 2 encadrés empilés) */
html body .tldr a.en-bref-bouton{display:inline-block;margin-top:16px;padding:11px 20px;border-radius:999px;background:#3966cd;color:#fff!important;font-weight:600;text-decoration:none!important;min-height:44px;line-height:22px}
html body .tldr a.en-bref-bouton:hover,html body .tldr a.en-bref-bouton:focus-visible{background:#244ba3;color:#fff!important}
/* Blog « Guides par démarche » : les puces débordaient sur le bord de la carte (liste sans retrait) → liste sans puce, liens espacés de 4 px */
html body .pd-groupe ul{list-style:none!important;padding-left:0!important;margin:0}
html body .pd-groupe li{margin:0 0 4px!important;line-height:1.45!important;padding:6px 0}
/* E1 /tarif : comparatif « FranceConnect+ ou ClairSign » collé à l'encadré « Avant de payer » (24 px) → nouvelle partie = 80 px ;
   « Avant de payer » collé aux cartes (4 px) → 16 px ; tableau aligné sur les bords de l'encadré (était rentré de 20 px) */
html body section.compare-fc{margin-top:80px!important}
html body p.avant-payer{margin-top:16px!important}
html body section.compare-fc h2,html body section.compare-fc table{margin-left:0!important;margin-right:0!important;width:100%!important;max-width:none!important}
/* E1 /blog : « Guides par démarche » à 27 px du bandeau sombre → 72 px */
html body section.par-demarche{padding-top:72px!important}
@media (max-width:767px){html body section.compare-fc{margin-top:56px!important}html body section.par-demarche{padding-top:48px!important}}
/* Barre « Usage · Formalité · Prix » de /signer (capture Lucas 12/10) : 3 segments séparés par un filet fin au lieu de « · »,
   tous centrés sur la même ligne (E4), sélecteur à la même hauteur que le texte ; sur téléphone : carte arrondie 16 px, segments empilés
   à gauche (l'ancienne pilule devenait un ovale géant de 3 lignes). */
html body .pc-formalite{gap:0!important;padding:6px 6px 6px 16px!important;line-height:1.3;align-items:center!important}
html body .pc-formalite>*{line-height:1.3}
html body .pc-formalite .pc-usage-sep{display:none!important}
html body .pc-formalite .pc-usage-pastille{padding-right:16px;margin-right:16px;border-right:1px solid #c9d8f5;gap:10px}
html body .pc-formalite .pc-usage-pastille[hidden]{display:none!important}
html body .pc-formalite>img{margin-right:10px}
html body .pc-formalite-lab{margin-right:8px;font-weight:600}
html body .pc-formalite-choix{min-height:40px!important;padding-top:8px!important;padding-bottom:8px!important}
html body .pc-formalite-prix{padding-left:16px;margin-left:16px;border-left:1px solid #c9d8f5;padding-right:12px}
html body .pc-formalite.pc-mp .pc-formalite-prix{border-left:0;padding-left:0;margin-left:0}
html body .pc-usage-changer{min-height:40px!important;display:inline-flex;align-items:center}
@media (max-width:767px){
 html body .pc-formalite{display:grid!important;grid-template-columns:auto 1fr;justify-items:start;text-align:left;border-radius:16px!important;padding:14px 16px 6px!important;row-gap:10px!important;width:100%;box-sizing:border-box}
 html body .pc-formalite>img{grid-row:1;margin:2px 0 0}
 html body .pc-formalite .pc-usage-pastille{grid-column:2;border-right:0;margin:0 0 0 10px;padding:0;flex-wrap:wrap;gap:4px 10px}
 html body .pc-formalite-lab{grid-column:1/-1;margin:0}
 html body .pc-formalite-choix{grid-column:1/-1;width:100%}
 html body .pc-formalite-prix{grid-column:1/-1;border-left:0;margin:0;padding:10px 0 2px;line-height:1.3;border-top:1px solid #c9d8f5;width:100%;flex-basis:auto!important;text-align:left!important}
}
/* Barre (suite) : titre → barre 24 px (E2) ; « Formalité : » centré sur la hauteur du sélecteur ; téléphone : coche alignée sur la 1re ligne, sélecteur pleine largeur */
html body .pc-entete h1#pc-titre{margin-bottom:24px!important}
html body .pc-formalite-lab{display:inline-flex;align-items:center;min-height:40px}
@media (max-width:767px){
 html body .pc-formalite>img{align-self:start;margin-top:1px!important}
 html body .pc-formalite .pc-usage-pastille{align-self:start}
 html body .pc-formalite-lab{min-height:0}
 html body .pc-formalite-choix{justify-self:stretch;width:100%!important;max-width:none!important}
}
/* 🔴 Accueil FR/EN, section à onglets « Tout ce qu'il faut pour débloquer votre dépôt INPI » : la règle « une famille de cartes »
   (ligne 414 : .w-tab-pane.w--tab-active fond clair #f3f6fc) avait peint le panneau en CLAIR alors que son texte est BLANC
   → titre, texte et liste illisibles (capture Lucas 12/10), texte collé au bord. Le panneau reprend le fond sombre de la section. */
html body .tabs-dark .w-tab-pane,html body .tabs-dark .w-tab-pane.w--tab-active{background:transparent!important;border:0!important;padding:48px 8px 8px!important}
@media (max-width:767px){html body .tabs-dark .w-tab-pane,html body .tabs-dark .w-tab-pane.w--tab-active{padding:32px 0 0!important}}
/* Accueil « Pourquoi ClairSign » : 2 cartes fantômes VIDES (décor fax.plus à 24 % d'opacité) dépassaient en haut du panneau → on aurait
   dit des cartes cassées. Gardées dans la mise en page (elles décalent les colonnes) mais invisibles. */
html body .card-why.transparent{visibility:hidden!important}
/* 🔴 Parcours, téléphone : l'icône de « Enregistré automatiquement sur cet appareil » (14 px) s'affichait en 350 × 350 px à l'étape
   « Vérification » → un écran entier vide avant le bouton de paiement. Taille fixée. */
html body .pc-sauvegarde img{width:14px!important;height:14px!important;max-width:14px!important;flex:none!important}
html body .pc-sauvegarde{display:flex;align-items:center;justify-content:center;gap:6px}
/* Barre « Usage · Formalité · Prix » sur téléphone, formalité figée : nom d'usage collé à la coche, à gauche (il partait au centre) */
@media (max-width:767px){html body .pc-formalite .pc-usage-pastille{justify-self:start;justify-content:flex-start;text-align:left}
 html body .pc-formalite #pc-formalite-nom{grid-column:1/-1}}
/* E5 : récapitulatif de l'étape « Vérification » — interligne 2,3 → 1,5 (nom et e-mail sur 2 lignes étaient séparés d'un trou) */
html body .pc-recap dt,html body .pc-recap dd{line-height:1.5!important}
html body .pc-recap dd code,html body .pc-recap dd .pc-empreinte{line-height:1.5!important;font-size:13px}
/* Page Tarif : 4 largeurs de contenu sur la même page (cartes 90→1350, tableau 200→1240, bandeau et icônes 65→1375, texte à 65)
   → toute la page sur la colonne du site (1 184 px, bord du logo). Règle E6 du contrôleur d'espacement. */
html body:has(#pricing_table) section .container-large{max-width:1184px!important;margin-left:auto!important;margin-right:auto!important}
html body:has(#pricing_table) section.compare-fc{max-width:1184px!important}
/* Tarif : titre → sous-titre 16 px, sous-titre → cartes 56 px (le badge « Le plus choisi » touchait la phrase) */
html body:has(#pricing_table) .hero-section-pricing h1{margin-bottom:16px!important}
html body:has(#pricing_table) #pricing_table{margin-top:56px!important}
/* Tarif (E4 entre cartes) : la carte « Le plus choisi » avait 24 px + bord 2 px en haut, les autres 32 px + 1 px → titre, prix et bouton 7 px plus hauts */
html body div.fpt-card.card.fpt-recommended{padding-top:31px!important}   /* plus fort que le bloc généré « rythme 8 px » qui l arrondissait à 24 */
/* Accueil, téléphone : sous l'image du haut, 126 px vides + un halo flou (la scène gardait sa hauteur d'ordinateur, 380 px, pour une image de 254 px) */
/* Relance 14/10 : « height:auto » aplatissait la scène ANIMÉE à 0 px (ses cartes sont en position absolue) → la carte recouvrait
   « Paiement sécurisé », les logos de paiement et « Accepté par le Guichet unique ». Hauteur = carte + 16 px ; auto seulement pour l'image fixe. */
@media (max-width:767px){html body .scene{aspect-ratio:auto!important;height:436px!important;min-height:0!important}html body .scene .scene-halo{display:none!important}}
@media (max-width:479px){html body .scene{height:361px!important}}
@media (max-width:767px) and (prefers-reduced-motion:reduce){html body .scene{height:auto!important}}
/* Relance 14/10 : de 480 à 767 px le haut de l'accueil restait sur 2 colonnes de 264 px (carte collée au bord droit, logos de paiement sur 2 lignes) → une colonne, comme sur téléphone */
@media (max-width:767px){html body .wrapper-col:has(> .col-6 .scene){flex-direction:column!important}html body .wrapper-col:has(> .col-6 .scene) > .col-6{width:100%!important;max-width:100%!important;flex:none!important}}
/* Accueil, téléphone : les 12 cartes « formalités » faisaient ~3 300 px de défilement (une carte de 270 px par formalité).
   2 colonnes compactes : icône + titre, la carte entière reste cliquable ; description et « En savoir plus » restent sur ordinateur. */
@media (max-width:767px){
 html body .grille-formalites{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important}
 html body .grille-formalites>.w-dyn-item,html body .grille-formalites .bg_image{width:auto!important;margin:0!important;height:100%}
 html body a.card.bg-green{padding:16px!important;min-height:0!important;height:100%}
 html body a.card.bg-green .text-md,html body a.card.bg-green .wrap-button{display:none!important}
 html body a.card.bg-green .icon._56{width:40px!important;height:40px!important;margin-bottom:10px!important}
 html body a.card.bg-green h3{font-size:16px!important;line-height:1.3!important;margin:0!important}
 html body a.card.bg-green .wrap-card-parent-content,html body a.card.bg-green .wrap-card-content{padding:0!important;margin:0!important;min-height:0!important;height:auto!important;width:100%!important;max-width:none!important}
 html body a.card.bg-green h3{max-width:none!important;width:100%!important;hyphens:none}
}
/* Garanties : un clic dans le sous-menu (Simplicité, Sécurité, Conformité, Aide) cachait le titre de la partie sous l'en-tête + le sous-menu collant */
html body #simplicite,html body #security,html body #compliance,html body #enterprise{scroll-margin-top:96px!important}
/* Articles / pages de contenu : l'en-tête démarrait 142 px plus à droite que sur le reste du site (barre de 1 100 px) → même colonne
   que les autres pages (1 184 px) : le logo ne « saute » plus quand on passe de l'accueil à un article. */
@media (min-width:861px){html body .ct-barre{max-width:1232px!important}}
/* E7 (trou) : Aide et « Ce que vous recevez » — 240 px vides entre les cartes du haut et la partie suivante (112 + 96 px de marges cumulées) */
html body section.hero-section + section.ou-trouver,html body section.hero-section + section.mail-entier{padding-top:40px!important}
/* Barre « Formalité » ≤ 767 px : la coche flottait 15 px au-dessus du nom (rangée de 40 px à cause du lien « Modifier ») → centrées ensemble */
@media (max-width:767px){html body .pc-formalite>img{align-self:center!important;margin-top:0!important}html body .pc-formalite .pc-usage-pastille{align-self:center!important}}
/* (suite) quand le nom passe sur 2 lignes (390 px), la coche se plaçait entre les deux : elle s'aligne sur la 1re ligne ;
   « Modifier » garde une zone de clic de 40 px sans gonfler la ligne (marge négative) */
@media (max-width:767px){html body .pc-formalite>img{align-self:start!important;margin-top:-1px!important}
 html body .pc-formalite .pc-usage-pastille{align-self:start!important;align-items:baseline}
 html body .pc-usage-changer{min-height:0!important;padding:10px 0!important;margin:-10px 0!important}}
/* Pied de page des articles : sur 1 100 px (bord à 170 px) alors que l'en-tête et le reste du site sont sur 1 184 px (bord à 128 px) */
@media (min-width:861px){html body .ct-pied-grille,html body .ct-pied .ct-faits,html body .ct-pied .ct-bas{max-width:1184px!important;margin-left:auto!important;margin-right:auto!important}}
/* Contraste mesuré : la ligne « Paiement sécurisé » sous les tarifs de l'accueil est posée sur le bandeau sombre (calque absolu),
   le contrôle la croyait sur blanc (1,6:1). Même fond posé sur la ligne elle-même (rgb 15,27,51 = --encre) : rendu identique, mesure juste. */
html body .start-now-price .paiement-logos.sur-fonce{background:var(--encre,#0f1b33)!important;border-radius:12px;padding:8px 14px}
/* Articles : « Blog » marqué comme rubrique en cours dans l'en-tête (comme sur /blog), le lecteur sait où il est */
html:has(link[rel=canonical][href*="/blog/"]) body .ct-menu a[href="/blog"]{color:#3966cd!important;font-weight:600}

/* Relance 14/10 — interligne : le site hérite de fax.plus un interligne de 2 (32 px pour un texte de 16 px) sur TOUS les paragraphes
   (mesuré : 32 paragraphes sur l'accueil, 32 sur l'Aide, 22 sur Comment ça marche…). Règle Lucas 12/10 : interligne ≤ 1,6 (Stripe ≈ 1,6).
   Seulement le texte courant : les boutons, pastilles et menus gardent leur hauteur. */
html body p:not(.button):not([class*="pill"]),html body dd,html body .text-lg-2,html body .text-xl,html body [class*="text-xs"]{line-height:1.6!important}
html body main li:not([class*="nav"]):not([class*="menu"]):not(.pc-etape){line-height:1.6}
html body .card-why > div:not([class]),html body .wrap-tabs-bullet > div:not([class]),html body .wrap-card-content > div:not([class]),html body .title-country,html body .cta-pricing{line-height:1.6!important}
/* Relance 14/10 : en français, « Tarif » touchait le sélecteur de langue (0 px à 1 000, 1 120 et 1 280 px ; 43 px en anglais) → 24 px minimum entre le menu et le bloc de droite, comme entre les liens */
@media (min-width:992px){html body .wrapper-col-navbar{column-gap:24px}html body .wrapper-col-navbar .navbar-item{margin-left:32px}}
@media (min-width:992px) and (max-width:1199px){html body .wrapper-col-navbar .navbar-item{margin-left:20px;column-gap:18px}html body .wrapper-col-navbar{column-gap:18px}}
/* Relance 14/10 : de 992 à 1 280 px le bouton « Signer mon document » sortait du bandeau blanc de l'en-tête (FR : 35 px à 1 000, 166 px à 1 200 ;
   EN : 62 px à 1 200). Le bandeau garde la colonne du site (logo aligné sur le contenu) ; c'est le contenu qui se resserre :
   langue = drapeau + code (« FR ») jusqu'à 1 359 px, comme Stripe ; liens à 20 px. */
@media (min-width:1280px) and (max-width:1359px){
  html body .langue-bouton .langue-nom{display:none}
}
@media (min-width:992px) and (max-width:1279px){
  html body header .wrapper-col-navbar .navbar-item a.link-navbar{padding-left:6px!important;padding-right:6px!important}
  html body header .wrapper-col-navbar .navbar-item{column-gap:10px!important;margin-left:6px!important}
  html body header .wrapper-col-navbar{column-gap:16px}
}
@media (min-width:992px) and (max-width:1279px){
  html body header .wrapper-col-navbar .navbar-item a.link-navbar,html body header .button-inline-navbar{font-size:14px!important}
}

/* (14/10, session iPhone) Aide : adresse en clair + « Copier l'adresse » sous les cartes contact */
.copie-contact{text-align:center;margin:28px auto 0;max-width:640px;font-size:15px;line-height:1.5;color:#4b5563}
.copie-contact b{color:#0f1b3d;white-space:nowrap}
.lien-copier{background:none;border:0;padding:4px 2px;margin-left:6px;font:inherit;font-weight:600;color:#3966cd;text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
@media (hover:hover){.lien-copier:hover{color:#274fa8}}
.lien-copier:focus-visible{outline:2px solid #3966cd;outline-offset:2px;border-radius:4px}
/* Relance 14/10 — Aide : « Copier l’adresse » DANS la carte « Par e-mail », juste sous l'adresse (une seule adresse affichée, comme Qonto Aide) */
.carte-contact .ligne-copier{margin:-6px 0 16px;font-size:15px;line-height:1.4}
.carte-contact .ligne-copier .lien-copier{margin-left:0;padding:2px 0}
/* Relance 14/10 — /signer, bandeau « usage · formalité · prix » (≥ 768 px) : le prix passait seul à la ligne en gardant son filet gauche (trait orphelin, FR + EN, 1280) → le prix occupe toujours sa propre ligne, centrée, sans filet */
@media (min-width:768px){html body .pc-formalite{flex-wrap:wrap!important;row-gap:6px!important}
 html body .pc-formalite-prix{flex-basis:100%;border-left:0!important;margin-left:0!important;padding-left:0!important;text-align:center}}
/* Relance 14/10 — Aide, cartes contact : 45 px entre le titre et le texte (marge héritée du h3) → 12 px, comme les cartes Stripe / Qonto */
#contact .carte-contact h3{margin-bottom:12px!important}
/* … et la hauteur réservée à 2 lignes de titre (57 px) ne sert qu'entre 992 et 1 239 px, où « Votre dépôt bloque ? » passe sur 2 lignes (mesuré FR/EN à 992, 1024, 1100, 1180, 1280, 1440) */
@media (max-width:991px),(min-width:1240px){#contact .carte-contact h3{min-height:0!important}}
@media (min-width:768px) and (max-width:1023px){html body .pc-formalite>img{display:none!important}html body .pc-formalite .pc-usage-pastille{flex-basis:100%}}
/* Relance 14/10 — /signer de 768 à 1 023 px : « Formalité : » restait en fin de 1re ligne et sa liste passait seule dessous → usage sur sa ligne, puis « Formalité : [liste] » ensemble, puis le prix ; coins 16 px (bloc de 3 lignes, plus une pilule) */
@media (min-width:768px) and (max-width:1023px){html body .pc-formalite{justify-content:center!important;border-radius:16px!important;padding:10px 16px!important}
 html body .pc-formalite .pc-usage-pastille{flex-basis:calc(100% - 40px);justify-content:center;border-right:0!important;margin-right:0!important;padding-right:0!important}}
/* Relance 14/10 15:05 — /signer : « Formalité : » 3 px plus haut que sa liste et que « Formalité au Guichet unique » (≥ 768 px, FR + EN) :
   le libellé héritait d'une marge basse de 5 px (règle générale des <label>) → 0 ; l'écart vertical vient déjà du bandeau */
html body .pc-formalite .pc-formalite-lab{margin-bottom:0!important}
/* Relance 14/10 15:05 — /signer ≤ 991 px : « 19,90 € TTC » affiché 2 fois à 170 px d'écart (ligne du bandeau + barre collante
   « 19,90 € TTC · quelques minutes · Signer ») → le prix reste dans la barre collante seule, qui suit le client pendant le défilement */
@media (max-width:991px){html body .pc-formalite .pc-formalite-prix{display:none!important}
}
@media (max-width:767px){html body .pc-formalite{padding-bottom:14px!important}}
/* Relance 14/10 15:05 — Garanties (FR + EN) : 4 px de jour entre le bas de l'en-tête (92 px ; 74 px sous 992) et le menu collant
   « Simplicité · Sécurité · … » (96 px ; 76 px) → en défilant, le grand titre dépassait dans la fente → menu collé à l'en-tête */
html body .sticky-menu-features{top:92px!important}
@media (max-width:991px){html body .sticky-menu-features{top:74px!important}}
/* Relance 14/10 15:05 — Garanties (FR + EN) : les 6 cartes « Simplicité · Sécurité · … · Formalités » sont des liens, mais au survol
   seule la bordure changeait, d'un coup (transition 0 s) → même geste que les autres cartes du site : bordure, légère montée, ombre douce */
html body a.cards-key-features{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important}
@media (prefers-reduced-motion:no-preference){html body a.cards-key-features:hover,html body a.cards-key-features:focus-visible{transform:translateY(-3px);box-shadow:0 10px 24px rgba(15,27,51,.08)!important}}
/* Relance 14/10 15:05 — /signer?usage=marche-public (≥ 768 px) : sans liste « Formalité », la pastille gardait son filet droit
   → trait vertical orphelin après « Modifier » et pastille décalée à gauche → pas de filet, pastille centrée */
html body .pc-formalite.pc-mp .pc-usage-pastille{border-right:0!important;margin-right:0!important;padding-right:0!important}
/* … et le titre « Signez votre document pour un marché public » laissait « public » seul en 2e ligne à 1280 → lignes équilibrées */
html body .pc-entete h1#pc-titre{text-wrap:balance}

/* Relance 14/10 15:20 — survol animé (règle Lucas 11/10 « tout ce qui se clique s'anime ») : 7 liens par page formalité
   (« Voir dans l’Aide » des questions repliables, cartes « Voir aussi ») et le bouton « Signer → » de la barre collante
   des pages glossaire / certificat / marché public avaient transition-duration 0 → changement brusque au survol */
html body .complements .onda p a{transition:color .2s ease,text-decoration-color .2s ease;text-decoration-color:rgba(57,102,205,.45)}
html body .complements .onda p a:hover,html body .complements .onda p a:focus-visible{color:#244ba3;text-decoration-color:currentColor}
html body .voir-aussi a{transition:border-color .2s ease,color .2s ease,background-color .2s ease,transform .2s ease}
html body .voir-aussi a:focus-visible{background:#f7f9fd;transform:translateY(-1px)}@media (hover:hover){html body .voir-aussi a:hover{background:#f7f9fd;transform:translateY(-1px)}}
html body .sticky-mobile-cta-btn{transition:background-color .2s ease,transform .2s ease!important}
html body .sticky-mobile-cta-btn:hover,html body .sticky-mobile-cta-btn:focus-visible{background:var(--accent-fonce,#2a52b0)!important}
@media (prefers-reduced-motion:reduce){html body .voir-aussi a:hover{transform:none}}
/* Relance 14/10 15:20 — Tarif sur téléphone : 108 px de vide entre la dernière carte de prix et les 4 questions « Avant de payer »
   (8 + 64 de bas de grille + 36 de marge) contre 23-32 px entre les cartes → les questions semblaient détachées de l'offre → 48 px */
@media (max-width:767px){html body .fpt-page:has(+ .objections){padding-bottom:12px!important}html body .fpt-page + .objections{margin-top:28px}}

/* Relance 14/10 15:45 — Garanties sur téléphone (FR : 2 cartes, EN : 4 cartes) : sous 768 px la colonne passe à max-width 100 %
   mais garde flex:50 % → les cartes à texte court tenaient à DEUX par ligne (167 px, un mot par ligne, « Lire le règlement (EUR-Lex) »
   sur 3 lignes) pendant que les autres prenaient toute la largeur → une carte par ligne, comme le reste du site sur téléphone */
@media (max-width:767px){html body .wrapper-col-wrap>.col-6-wrap{flex-basis:100%!important}}
/* Relance 14/10 15:45 — interligne 2 (32 px pour 14 px) restant sur les légendes d'images et les petites lignes de cartes
   (« Exemple fictif : le modèle d’e-mail… » de Ce que vous recevez et de Tarif, « document signé fictif, nom inventé · 1 page »)
   → 1,5 ; les questions repliables du parcours (« À quoi ressemble le document de synthèse ? » sur 2 lignes à 32 px) → 1,45 */
html body figcaption{line-height:1.5!important}
html body .me-exemple-vignette strong{line-height:1.35!important}
html body .me-exemple-vignette small{line-height:1.45!important;margin-top:4px}
html body .pc-exemple summary,html body .pc-si-inpi summary{line-height:1.45!important}
html body .text-card-popular{line-height:1.45!important}
/* Relance 14/10 15:45 — page introuvable : les 4 liens du bas et le logo changeaient d'un coup au survol → même geste que le site */
html body .cx-liens a{transition:color .2s ease,text-decoration-color .2s ease;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
html body .cx-liens a:hover,html body .cx-liens a:focus-visible{color:#3966cd;text-decoration-color:currentColor}
html body a.cx-logo{transition:opacity .2s ease}
/* Relance 14/10 15:45 — /signer, bandeau d'usage : l'icône de 20 px (un document de 9 px dans un carré pâle) se lisait comme une poussière
   à côté d'un texte de 15 px (case AMELIORATIONS « coche 12 px ») → retirée à toutes les largeurs : le libellé en gras suffit (déjà absente de 768 à 1 023) */
html body .pc-formalite>img{display:none!important}
/* Relance 14/10 15:45 — Accueil, section « Pourquoi ClairSign » (2 colonnes décalées, ≥ 992 px, FR + EN) : la colonne de droite finissait 19 px
   (EN : 6 px) au-dessus de celle de gauche → les 2 boutons « Nos garanties » pas à la même hauteur (règle E7). Les 2 colonnes remplissent leur
   hauteur commune et la dernière carte de chacune pousse son bouton en bas : mesuré égal à 1440, 1280, 1024, 992, 900 et 768 px, FR + EN */
@media (min-width:768px){html body .col-6:has(>.wrap-card-why-left),html body .col-6:has(>.wrap-card-why-right){display:flex;flex-direction:column}html body .wrap-card-why-left,html body .wrap-card-why-right{flex-grow:1}html body :is(.wrap-card-why-left,.wrap-card-why-right)>.card-why:last-child{flex-grow:1;display:flex;flex-direction:column}html body :is(.wrap-card-why-left,.wrap-card-why-right)>.card-why:last-child>.wrap-button{margin-top:auto!important;padding-top:24px}}
/* Relance 14/10 15:45 — Accueil (pas de <main>) : listes à icône « Un vrai PDF · Lisible et ouvert · 15 Mo au plus » et badges
   « Règlement eIDAS · Guichet unique · Liste de confiance » à interligne 2 (32 px pour 16 px, règle E5) → 1,5 */
html body li:has(>img+span),html body .badges-confiance li{line-height:1.5!important}
html body li:has(>img+span)>span,html body .badges-confiance li>span{line-height:1.5!important}
/* … et la petite ligne « document signé fictif, nom inventé · 1 page » laissait « · » seul en fin de ligne → lignes équilibrées */
html body .me-exemple-vignette small{text-wrap:balance}
/* Relance 14/10 15:45 — Garanties, section « Conformité » (≥ 768 px, FR + EN) : cartes d'une même rangée de hauteurs différentes →
   « Lire le règlement (EUR-Lex) » et « Voir la liste officielle » décalés de 26 à 77 px (règle E7, devenue bloquante) → cartes à la hauteur
   de la rangée, lien d'action poussé en bas de chaque carte ; mesuré 0 décalage à 1440, 1280, 1024 et 768 px, FR + EN */
@media (min-width:768px){html body .wrapper-col-wrap>.col-6-wrap>.card{height:100%}html body .wrapper-col-wrap>.col-6-wrap>.card>.wrap-card-parent-content{flex-grow:1}html body .wrapper-col-wrap>.col-6-wrap .wrap-card-content{display:flex;flex-direction:column;align-self:stretch}html body .wrapper-col-wrap>.col-6-wrap .wrap-card-content>.wrap-button{margin-top:auto!important;padding-top:24px}}
/* Relance 14/10 15:45 — Tarif de 768 à 991 px (FR + EN) : 4 petites cartes « Inclus » de 158 px côte à côte → titres sur 3 lignes,
   liens « Voir le parcours / Comment ça marche » sur 2 lignes à interligne 2 (décalés de 30 px, règle E7) → 2 × 2, liens à 1,4 */
@media (min-width:768px) and (max-width:991px){html body .wrapper-col-wrap>.col-3-wrap:has(>.carte-petite){flex-basis:50%!important;max-width:50%!important;margin-bottom:16px}}html body .lien-petite-carte{line-height:1.4!important}

/* Relance 14/10 16:15 — page introuvable : « Vous cherchiez peut-être » (3 pages proches de l'adresse tapée) */
.cx-proches{margin:20px 0 4px;padding:14px 18px;border:1px solid #dfe5f2;border-radius:12px;background:#f6f8fd;text-align:left}
.cx-proches p{margin:0 0 6px;font-size:14px;font-weight:600;color:#1d2433}
.cx-proches ul{margin:0;padding:0;list-style:none}
.cx-proches li{margin:0}
.cx-proches a{display:inline-flex;align-items:center;min-height:36px;color:#3966cd;font-size:15px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:color .2s ease,text-decoration-color .2s ease}
.cx-proches a::before{content:"→";margin-right:8px;transition:transform .2s ease}
.cx-proches a:hover,.cx-proches a:focus-visible{color:#2a4fa8;text-decoration-color:currentColor}
.cx-proches a:hover::before{transform:translateX(3px)}
/* Relance 14/10 16:15 — Ce que vous recevez : « Rien reçu après 10 minutes ? » sous la maquette du mail */
.me-mail .me-rien-recu{margin:14px 0 0;padding:12px 16px;border-left:3px solid #3966cd;border-radius:0 10px 10px 0;background:#f6f8fd;font-size:15px;line-height:1.55;color:#1d2433;text-wrap:pretty}
.cx-proches a{align-items:flex-start;padding:6px 0}
.cx-proches a::before{flex:none;line-height:inherit}
.me-mail .me-rien-recu a{white-space:nowrap;transition:color .2s ease}
/* Relance 14/10 16:15 — « Où trouver mon document de synthèse ? » : le titre (16 px, maigre) était plus petit que son texte (17 px) → vrai titre ; 136 px de vide au-dessus sur téléphone → 64 */
html body .ou-trouver h2#ou-trouver-titre{font-size:clamp(26px,1.4rem + 0.8vw,32px)!important;font-weight:500!important;line-height:1.22!important;margin-bottom:12px!important}
@media (max-width:767px){html body section.hero-section:has(+ section.ou-trouver){padding-bottom:40px!important}}

/* Relance 14/10 16:35 — Aide, en haut : les 2 bulles de discussion étaient écrites dans l'image (≈ 10 px sur téléphone, illisibles,
   restées en français sur /en/) → photo seule + 2 vraies bulles en texte (15 px), traduites, posées à cheval sur la photo */
.aide-conv{position:relative;max-width:440px;margin:0 auto;padding:0 0 40px}
.aide-conv .aide-conv-photo{display:block;width:72%;height:auto;aspect-ratio:1;object-fit:cover;margin:0 0 0 auto;border-radius:20px}
.aide-conv .aide-bulle{position:absolute;max-width:68%;margin:0;padding:11px 15px;border-radius:16px;font-size:15px;line-height:1.45;text-wrap:pretty;box-shadow:0 1px 2px rgba(15,27,51,.08),0 8px 22px rgba(15,27,51,.10)}
.aide-conv .aide-bulle-q{left:0;bottom:116px;background:#fff;color:#1d2433;border-bottom-left-radius:5px}
.aide-conv .aide-bulle-r{right:0;bottom:0;background:#3966cd;color:#fff;border-bottom-right-radius:5px}
@media (max-width:767px){.aide-conv{max-width:360px;margin-top:8px}.aide-conv .aide-bulle{font-size:14.5px;max-width:78%}}
/* Relance 14/10 16:35 — Ce que vous recevez : la carte « Voir un exemple de rendu » faisait 360 px de large, vide à droite, et cassait
   « document signé fictif, / nom inventé · 1 page » sur 2 lignes → carte à la taille de son contenu, petite ligne sur 1 ligne (≥ 480 px) */
@media (min-width:480px){html body a.me-exemple-vignette{width:fit-content!important;max-width:100%!important;padding-right:20px}html body .me-exemple-vignette small{white-space:nowrap}}
/* … de 768 à 991 px la colonne ne fait que 287 px : les bulles en surimpression couvraient le visage → bulles sous la photo, à la suite */
@media (min-width:768px) and (max-width:991px){.aide-conv{padding:0}.aide-conv .aide-conv-photo{width:100%}.aide-conv .aide-bulle{position:static;inset:auto;max-width:88%;font-size:14px;width:fit-content}.aide-conv .aide-bulle-q{margin:-26px 0 0 -8px;position:relative}.aide-conv .aide-bulle-r{margin:10px 0 0 auto}}
/* Relance 14/10 16:35 — Blog : « Guides par démarche » partait à 48 px quand le fil d'Ariane, les cartes d'articles et l'en-tête partent
   à 130 px (colonne de 1 184 px contre 1 020 ailleurs) → même colonne que le reste de la page, titres de groupe équilibrés */
html body section.par-demarche .container-large{max-width:1020px!important}
.par-demarche-grille h3,.par-demarche-grille .par-demarche-titre{text-wrap:pretty}
/* Relance 14/10 16:35 — Aide, « Où trouver mon document de synthèse ? » : l'étape 2 avait son texte centré verticalement (90 px de vide
   au-dessus du « 2 »), l'étape 3 calée en haut → toutes les étapes calées en haut, comme un mode d'emploi */
@media (min-width:768px){html body ol.ot-etapes>li{align-items:start!important}}
/* Relance 14/10 16:35 — téléphone : 113 à 152 px de vide entre le haut de page et la section suivante (Ce que vous recevez 136, Aide 113,
   Comment ça marche 129, formalités 152 — mesuré) → ≈ 72-88 px, le rythme du reste des pages sur téléphone */
@media (max-width:767px){html body section.hero-section{padding-bottom:32px!important}html body section.hero-section+section.section{padding-top:48px!important}}

/* Relance 14/10 16:52 — Blog « Guides par démarche » : lien de pied vers la page formalité, collé en bas de la carte (les cartes à 2 guides gardaient ≈ 200 px de vide) */
html body .pd-groupe{display:flex;flex-direction:column}
html body .pd-groupe .pd-pied{margin:auto 0 0!important;padding-top:12px;border-top:1px solid #e6eaf1;font-size:14.5px;line-height:1.45}
html body .pd-groupe ul{margin-bottom:14px!important}
html body .pd-groupe .pd-pied{text-wrap:balance}
html body .pd-groupe .pd-pied a{font-weight:600;color:#2c52a8;text-decoration:none;display:inline}
html body .pd-groupe .pd-pied a span{display:inline-block;margin-left:4px;transition:transform .18s ease}
@media (hover:hover){html body .pd-groupe .pd-pied a:hover{color:#0d182e;text-decoration:underline}}
@media (hover:hover){html body .pd-groupe .pd-pied a:hover span{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){html body .pd-groupe .pd-pied a span{transition:none}}
/* Relance 14/10 16:52 — prix sous les boutons : coupure au « · » seulement (« Dès 19,90 € TTC · paiement / unique… » à 390) */
html body .hero-prix .hp-m{white-space:nowrap}
/* Relance 14/10 16:52 — formalités : encadré « Que faut-il signer… » (1 120 px) aligné sur la colonne des cartes (1 020 px) */
@media (min-width:992px){html body div.ia-carte{max-width:1020px;margin-left:auto!important;margin-right:auto!important}}
/* Relance 14/10 17:12 — Blog « Guides par démarche » : 9 cartes en 3 colonnes (rangées 6-6-6 · 5-5-5 · 2-2-2, mesurées) au lieu de 4 colonnes
   (551 px de vide sous « Marques et brevets ») ; puces rondes retirées (elles sortaient à gauche de l'alignement du titre) */
@media (min-width:992px){html body .par-demarche-grille{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important}}
html body .pd-groupe li{list-style:none!important}
html body .pd-groupe ul{padding-left:0!important}
@media (min-width:561px) and (max-width:991px){html body .par-demarche-grille>.pd-groupe:last-child:nth-child(odd){grid-column:1/-1}}
/* Relance 14/10 17:12 — téléphone : le « · » entre les 2 morceaux du prix restait seul en fin de 1re ligne → 2 lignes nettes, sans séparateur */
@media (max-width:560px){html body .hero-prix .hp-sep{display:none}html body .hero-prix .hp-m{display:block}}
/* Relance 14/10 17:12 — formalités sur téléphone : m-t1 / m-t3 ont ≈ 17 % de vide transparent sous la carte dessinée (mesuré : contenu jusqu'à 81-85 %)
   → 140 px de blanc avant « Pourquoi signer… » ; on rattrape ce vide sous l'image */
@media (max-width:767px){html body .bandeau-flottant:has(>img[src*="m-t3"]),html body .bandeau-flottant:has(>img[src*="m-t1"]){margin-bottom:-52px}}
/* Relance 14/10 17:12 — survol animé manquant (mesuré : transition 0 s) : lien de l'encadré FranceConnect+ de l'accueil, bouton menu sur téléphone */
html body .encadre-fc-lien{transition:color .15s ease,text-decoration-thickness .15s ease}
html body .burger-navbar{transition:background-color .18s ease,transform .18s ease,box-shadow .18s ease}
@media (hover:hover){html body .burger-navbar:hover{transform:translateY(-1px)}}
@media (prefers-reduced-motion:reduce){html body .burger-navbar{transition:none}html body .burger-navbar:hover{transform:none}}
/* Relance 14/10 17:30 — sommaire collant des pages de contenu : à 800 px de haut, la liste (15 mots du glossaire) poussait la carte « Signer »
   hors du cadre (bouton à 762-806 px, caché derrière un défilement interne) → seule la liste défile, la carte reste toujours visible */
@media (min-width:1240px){html body nav.toc-collant{display:flex;flex-direction:column;overflow:hidden}
 html body nav.toc-collant ol{overflow-y:auto;min-height:0;flex:0 1 auto;overscroll-behavior:contain}
 html body nav.toc-collant .toc-collant-titre,html body nav.toc-collant .toc-cta{flex:0 0 auto}}
/* Relance 14/10 17:30 — en-tête des pages de contenu (glossaire, certificat, marché public, articles) aligné sur celui des autres pages :
   le logo sautait de 130 px à 48 px (1280) et de 25 px à 16 px (téléphone), barre 65 px au lieu de 74 px en passant de l'Aide au Glossaire */
@media (min-width:1280px) and (max-width:1439px){html body .ct-barre{max-width:1068px!important}}
/* Relance 14/10 18:00 — 992-1279 px : l'en-tête des pages de contenu partait à 24 px du bord quand les autres pages partent à 61-204 px (colonne de 870 px).
   Même resserrement que le §49 des autres pages (menu plus serré, bouton moins large) PUIS la même colonne : 918 px − 2 × 24 = 870 px utiles */
@media (min-width:992px) and (max-width:1279px){html body .ct-barre{max-width:918px!important;gap:16px}
 html body .ct-menu{gap:18px}
 html body .ct-actions{gap:12px}
 html body header.ct-entete .ct-bouton{padding:0 14px!important}
 html body .ct-menu a,html body .ct-connexion{white-space:nowrap}}
@media (max-width:767px){html body .ct-barre{height:74px!important;padding:0 25px!important}}
/* Relance 14/10 17:30 — téléphone : 113-121 px de blanc sous le haut de page de l'Aide et de « Comment ça marche » (16 + 40 + 48 + interligne) → ≈ 80 px comme « Ce que vous recevez » */
@media (max-width:767px){html body .hero-section.no-bg + .section.ou-trouver,html body .hero-section.no-bg + .section.no-padding-top{padding-top:28px!important}
 html body .hero-section.no-bg .mcp-usp-row:last-child{margin-bottom:0!important}}
/* Relance 14/10 17:30 — formalités : « — selon l'INPI » à la fin de la citation « Qui signe » (la règle vient de l'administration, pas de nous) */
html body .ia-selon{font-size:13px;color:#5a6275;white-space:nowrap}
/* Relance 14/10 17:30 — écrans de 800-880 px de haut : sommaire collant resserré (les 15 mots tiennent sans défilement interne) */
@media (min-width:1240px) and (max-height:880px){html body nav.toc-collant li{margin-bottom:5px!important}html body nav.toc-collant .toc-cta{margin-top:14px!important}}

/* Relance 14/10 18:15 — (1) glossaire, grands écrans : le bouton flottant « Retour aux 15 mots » chevauchait la carte « Signer » du sommaire collant (bouton 1084→ x, 752-804 px ; sommaire 104-784 px) → le sommaire suffit, le bouton ne s'affiche plus quand le sommaire est là ; (2) liens du sommaire collant : survol animé comme le reste du site */
@media (min-width:1240px){body:has(nav.toc-collant.visible) .retour-haut{opacity:0!important;visibility:hidden!important;pointer-events:none}}
html body nav.toc-collant ol a{display:inline-block;transition:color .15s ease,transform .15s ease}
html body nav.toc-collant ol a:hover{transform:translateX(2px)}
@media (prefers-reduced-motion:reduce){html body nav.toc-collant ol a{transition:none}html body nav.toc-collant ol a:hover{transform:none}}
/* Relance 14/10 18:30 — (1) Garanties (FR + EN, toutes tailles) : la phrase d'intro touchait le cadre des 6 raccourcis (0 px d'écart mesuré, 108 px de vide dessous à 390) → 32 px d'air au-dessus du cadre sous 768 px (seule plage touchée) ;
   (2) pied de page : un lien replié sur 2 lignes (« Ce qu'exige le Guichet / unique », à 390 ET à 1280) gardait 32 px d'interligne = l'écart entre 2 liens → il se lisait comme 2 liens. Même pas de 32 px pour un lien d'une ligne, 20 px entre ses propres lignes ;
   (3) Tarif « Avant de payer » : mots seuls en fin de bloc (« dépôt ? », « 7 jours sur 7. », « suffisent. ») → coupure équilibrée des titres et des réponses */
@media (max-width:767px){.section.hero.features .wrap-key-features{margin-top:32px}} /* écart mesuré sans ce bloc : 0 px de 360 à 767, 48 px à 768-1100, 32 px à 1280 (où le cadre doit rester au-dessus de la pastille « Document protégé ») */
a.alohi---main-style-guide--link-footer{line-height:20px!important;padding-top:6px!important;padding-bottom:6px!important}
.objections .objection p{text-wrap:pretty}
.objections .objection p.objection-q{text-wrap:balance}

/* Relance 14/10 19:05 — Garanties sur téléphone : 18 cartes de 240 à 400 px faisaient ~7 300 px de défilement
   (Simplicité 2 163 px, Conformité 2 763 px, Aide 2 363 px). Icône à gauche du titre sur la même ligne,
   texte dessous en pleine largeur, marges resserrées : même contenu, moitié moins de hauteur (façon Stripe). */
@media (max-width:767px){
  html body #simplicite .wrapper-col-wrap,html body #enterprise .wrapper-col-wrap,html body #compliance .wrapper-col-wrap{row-gap:14px!important}
  html body #simplicite .card,html body #enterprise .card,html body #compliance .card{margin-top:0!important}
  html body #simplicite .wrap-card-parent-content,html body #enterprise .wrap-card-parent-content{padding:22px!important}
  html body #simplicite .wrap-card-content,html body #enterprise .wrap-card-content{display:grid!important;grid-template-columns:44px 1fr;column-gap:14px;align-items:center}
  html body #simplicite .wrap-card-content>img,html body #enterprise .wrap-card-content>img{width:44px!important;height:44px!important;margin:0!important;grid-row:1;grid-column:1}
  html body #simplicite .wrap-card-content>h3,html body #enterprise .wrap-card-content>h3{margin:0!important;grid-row:1;grid-column:2}
  html body #simplicite .wrap-card-content>:not(img):not(h3),html body #enterprise .wrap-card-content>:not(img):not(h3){grid-column:1/-1;margin-top:10px!important}
  html body #compliance .wrap-card-parent-content{display:grid!important;grid-template-columns:44px 1fr;column-gap:14px;row-gap:0;align-items:center;padding:22px!important}
  html body #compliance .wrap-card-parent-content>img{width:44px!important;height:44px!important;margin:0!important;grid-row:1;grid-column:1;object-fit:contain}
  html body #compliance .wrap-card-content{display:contents!important}
  html body #compliance .wrap-card-content>h3{margin:0!important;grid-row:1;grid-column:2}
  html body #compliance .wrap-card-content>:not(h3){grid-column:1/-1;margin-top:10px!important}
}
@media (max-width:767px){html body #enterprise .wrap-card-content .wrap-button,html body #compliance .wrap-card-content .wrap-button{margin-top:12px!important}}
/* Relance 14/10 19:32 — pied de page : les 6 logos de paiement passaient sur 2 rangées à 992-1439 px (4+2 en FR, 5+1 « PayPal » seul en EN) :
   la colonne des logos prend sa largeur naturelle (304 px), le texte de gauche cède la place. Sous 992 px la colonne est pleine largeur, rien ne change. */
@media (min-width:992px){
  html body .alohi---main-style-guide--wrapper-special-footer>.paiement-logos.sur-fonce{flex:0 0 auto!important;max-width:none!important}
  html body .alohi---main-style-guide--wrapper-special-footer>.paiement-logos.sur-fonce ul{flex-wrap:nowrap!important}
  html body .alohi---main-style-guide--wrapper-special-footer>.alohi---main-style-guide--wrap-logo-app-footer{flex:1 1 auto!important;min-width:0!important}
}
/* Relance 14/10 19:32 — « Format attendu par le Guichet unique · / signature avancée eIDAS » : le « · » restait seul en fin de ligne sur téléphone.
   Même règle que .hero-prix : sous 560 px le séparateur disparaît et la 2e partie passe à la ligne (avec sa majuscule). */
html body .formalite-format .ff-m{white-space:nowrap}
@media (max-width:560px){html body .formalite-format .hp-sep{display:none}html body .formalite-format .ff-m{display:block}}
/* Relance 14/10 19:32 (suite) — dès 992 px, la place prise par les logos écrasait « Aucun cookie publicitaire… » en 4 lignes de 110 px :
   les 2 phrases du bas de pied s'empilent dans la colonne de gauche. */
@media (min-width:992px){
  html body .alohi---main-style-guide--wrapper-special-footer>.alohi---main-style-guide--wrap-logo-app-footer{flex-direction:column!important;align-items:flex-start!important;row-gap:6px!important}
  html body .alohi---main-style-guide--wrap-logo-app-footer>.pied-faits{max-width:560px!important;width:auto!important;margin:0!important}
}
/* Relance 14/10 19:32 — exemple dépliable du document de synthèse (pages formalité « Que faut-il déposer » + accueil « contrôlé dès son dépôt ») :
   celui qui ne sait pas quel PDF télécharger le voit sans quitter la page. Même look que le dépliant du parcours (.pc-exemple). */
html body details.ex-synthese{margin:12px 0 4px;border:1px solid #dfe4ec;border-radius:12px;background:#fff;max-width:560px}
html body details.ex-synthese summary{cursor:pointer;padding:12px 16px;font-size:15px;font-weight:600;color:#2453c4;list-style:none;display:flex;align-items:center;gap:8px;line-height:1.45;transition:color .2s ease}
html body details.ex-synthese summary::-webkit-details-marker{display:none}
html body details.ex-synthese summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:auto;transition:transform .2s ease;flex:none}
html body details.ex-synthese[open] summary::after{transform:rotate(-135deg)}
@media (hover:hover){html body details.ex-synthese summary:hover{text-decoration:underline;text-underline-offset:4px}}
html body details.ex-synthese .ex-corps{display:flex;gap:16px;align-items:flex-start;padding:0 16px 16px}
html body details.ex-synthese .ex-corps img{width:150px;height:auto;border:1px solid #dfe4ec;border-radius:6px;box-shadow:0 2px 8px rgba(15,27,51,.08);flex:none}
html body details.ex-synthese .ex-corps p{margin:0!important;font-size:14px;line-height:1.55;color:#2b3345}
@media (max-width:480px){html body details.ex-synthese .ex-corps{flex-direction:column}html body details.ex-synthese .ex-corps img{width:140px}}
/* Relance 14/10 19:32 (suite) — dans la colonne « Quel document » (≈ 290 px à 1280) l'image à côté du texte laissait 1 mot par ligne : texte sous l'image. */
html body .inpi-attend details.ex-synthese .ex-corps{flex-direction:column}

/* Relance 14/10 19:54 — Tarif, bandeau sombre « Vous signez souvent pour vos clients ? » : à 1280 le texte (866 px) + l'écart (80) + le bouton (177)
   dépassaient la carte de 3 px → bouton à 28 px du bord droit contre 32 px à gauche. Le bloc texte peut maintenant rétrécir, le bouton jamais. */
.cta-price-tabs .space-between>.wrap-button:first-child{min-width:0;flex:1 1 auto;justify-content:flex-start}
.cta-price-tabs .space-between>.wrap-button:first-child>.dsp-sm{flex:none}
.cta-price-tabs .space-between>.wrap-button:first-child>:last-child{min-width:0}
.cta-price-tabs .space-between>.wrap-button:last-child{flex:none}
/* Relance 14/10 19:54 (suite) — de 992 à 1279 px la section du comparatif + bandeau collait aux bords de l'écran (0 px de 992 à 1199, 8 px de 1200 à 1279)
   alors qu'elle a 40 px sous 992 et 48 px au-delà : même respiration que le reste de la page. */
@media (min-width:992px) and (max-width:1279px){section.section:has(.cta-price-tabs){padding-left:40px!important;padding-right:40px!important}}
/* Relance 14/10 20:17 — Tarif : la ligne « Vous ne savez pas quel document télécharger… » occupait 48-781 px à 1280 (texte centré dans une boîte
   collée à gauche) sous une note centrée → boîte centrée. Les 4 questions « Avant de payer » partaient à 100 px quand les cartes de prix partent
   à 72 px (1280) / 64 px (1024) → mêmes bords que les cartes au-dessus. */
html body .cta-pricing{width:fit-content;max-width:100%;margin-left:auto!important;margin-right:auto!important;text-align:center}
@media (min-width:768px){html body .fpt-page + .objections, html body .objections{max-width:none;padding-left:24px;padding-right:24px}}
/* Relance 14/10 20:17 — pied de page : « …non affilié à l’INPI Pourquoi ? » se lisait d'un bloc (lien collé à la phrase, sur téléphone surtout)
   → séparateur « · » comme partout ailleurs dans le pied, hors du soulignement du lien. FR + EN, sans toucher aux textes traduits. */
html body .pied-pourquoi{white-space:nowrap}
html body .pied-pourquoi::before{content:"·" / "";display:inline-block;margin-right:.4em;text-decoration:none;opacity:.7}
/* Relance 14/10 20:17 — accueil sur téléphone : les 11 démarches étaient 2 groupes (6 + 5) séparés par 40 px quand leurs rangées sont à 16 px
   → un seul nuage régulier (écart entre groupes = écart entre rangées). FR + EN. */
@media (max-width:991px){html body .logos-home + .logos-home{margin-top:0!important}}
/* Relance 14/10 20:17 (suite) — l'encadré « Avant de payer » restait à 100-1180 px sous les 4 questions recalées à 72-1208 → même largeur.
   Fin d'article sur téléphone : les 3 questions « Encore une question ? » passaient chacune à la ligne avec un « · » seul en bout de ligne
   → sous 768 px, une question par ligne, sans séparateur. */
@media (min-width:768px){html body .objections + .avant-payer{max-width:none!important;margin-left:24px!important;margin-right:24px!important}}
@media (max-width:767px){html body .aide-liens a{display:table;margin-top:6px}html body .aide-liens span[aria-hidden]{display:none}html body .aide-liens span:first-child{display:block}}

/* ── Relance 14/10 20:37 ─────────────────────────────────────────────────────────────
   1. Comment ça marche : la maquette du haut (recadrée, m-t1-cadre) remplit sa colonne,
      centrée en hauteur sur le texte ; sur téléphone 300 px max, centrée, sans vide dessous.
   2. Ce que vous recevez : la carte « Voir un exemple de rendu » prend la largeur de sa colonne
      (elle s'arrêtait à 992 px sous un encadré qui va jusqu'à 1 150).
   3. Accueil, encadré FranceConnect+ : puces dans le bleu du site (elles étaient noires). */
img.ccm-doc{display:block;width:100%;max-width:400px;height:auto;margin:0 auto}
@media (min-width:768px){
  .col-5:has(> img.ccm-doc){display:flex;align-items:center;justify-content:center;align-self:stretch}
}
@media (max-width:767px){
  img.ccm-doc{max-width:300px}
  .col-5:has(> img.ccm-doc){margin-top:32px !important}
}
.me-gestes > a.me-exemple-vignette{display:flex;width:100% !important;max-width:none !important;box-sizing:border-box}
.encadre-fc-lignes li::marker{color:#3966cd}
/* 4. Accueil ≥ 768 px : 3 vides de 208 à 225 px entre deux sections au MÊME fond blanc (encadré FC+ → suite,
      démarches → suite, questions → carte) — on garde 96 px sous la 1re, 48 px au-dessus de la 2de (≈ 160-180 px, rythme Stripe). */
@media (min-width:768px){
  .encadre-fc-section + section.section,#formalites + section.section,#faq + section.section{padding-top:48px !important}
}

/* ── Relance 14/10 21:15 ───────────────────────────────────────────────────────────────────────────
   1. Pages de démarche sur téléphone : « Signature » restait SEUL en 1re ligne du titre (4 pages sur 6,
      text-wrap:balance) → coupe « pretty » : « Signature INPI de / votre cessation / d’activité ».
   (Le survol du logo existe déjà sur son image, l. 131 : rien à ajouter.) */
@media (max-width:767px){ body[data-maj] .hero-section h1{text-wrap:pretty} }
/* Relance 14/10 21:12 — Blog : le cadre « Rechercher un guide » remontait de 56 px (pensé pour chevaucher le haut de page)
   alors que la carte « À la une » est maintenant juste au-dessus : il cachait le bas du bouton « Lire le guide » (15 px à 390, 16 px à 1280). */
html body .a-la-une+.recherche-guides{margin-top:32px!important}
/* Relance 14/10 21:12 — Pied anglais sous 992 px : « No advertising cookies… » (plus court que le français) se centrait dans sa colonne
   alors que la phrase au-dessus part du bord gauche → les 2 phrases partent du même bord. */
@media (max-width:991px){html body .alohi---main-style-guide--wrap-logo-app-footer>.pied-faits{align-self:stretch!important}}
/* Relance 14/10 21:12 — Conditions de vente : sommaire de 23 articles en dépliant (refermé sur téléphone par contenu.js). */
html body details.toc>summary.toc-title{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;margin-bottom:0;transition:color .2s ease}
html body details.toc>summary.toc-title::-webkit-details-marker{display:none}
html body details.toc>summary.toc-title::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);margin-left:auto;transition:transform .2s ease}
html body details.toc[open]>summary.toc-title::after{transform:rotate(-135deg) translate(-2px,-2px)}
html body details.toc[open]>summary.toc-title{margin-bottom:10px}
@media (hover:hover){html body details.toc>summary.toc-title:hover{color:#2453c4!important}}
html body details.toc .toc-nb{font-weight:500;text-transform:none;letter-spacing:0;opacity:.8}
@media (prefers-reduced-motion:reduce){html body details.toc>summary.toc-title::after{transition:none}}
/* Relance 14/10 21:12 (suite) — barre « Signer » du bas : jamais « Signer mon / document » sur 2 lignes, quel que soit le texte de prix */
@media (max-width:767px){html body .barre-signer{white-space:nowrap;padding:0 18px}html body .barre-signer span{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}}

/* Relance 14/10 21:38 — « Les 4 gestes » en liste numérotée ; titre « Guides par démarche » du blog à la taille d'un titre de section (16 px sur téléphone = taille du texte, plus petit que les titres de ses propres cartes) */
.ia-carte ol.ia-gestes{margin:0;padding-left:1.25em;list-style:decimal outside!important}
.ia-carte ol.ia-gestes li{margin:0 0 6px;padding-left:2px;list-style:inherit!important}
.ia-carte ol.ia-gestes li::marker{color:#2c52a8;font-weight:600}
html body .par-demarche h2#par-demarche-titre{font-size:32px!important;line-height:1.2!important;margin-bottom:10px!important}
@media (max-width:767px){html body .par-demarche h2#par-demarche-titre{font-size:26px!important}}
/* Relance 15/10 12:40 — page active de l'en-tête signalée par un trait de 2 px, pas seulement la couleur (lisible pour un daltonien, comme Stripe / Qonto) */
.navbar-desktop a.link-navbar{position:relative}
.navbar-desktop a.link-navbar[aria-current="page"]::after{content:"";position:absolute;left:6px;right:6px;bottom:4px;height:2px;border-radius:2px;background:#3966cd;transform:scaleX(1)!important}
/* Relance 15/10 12:40 — carte « Une question ? » de l'accueil : elle cachait le bas de la miniature de synthèse (mesuré 1280 : carte 449-527, image 248-543) → posée sous la carte active, qui dépasse de 16 px comme une étiquette (Stripe, Qonto) */
@media (min-width:992px){.scene>.scene-equipe{bottom:-40px}}
/* Relance 15/10 13:40 — logo de l'en-tête : seul élément cliquable sans animation au survol (mesuré 7 pages × 3 largeurs) → léger fondu, comme Stripe */
html body a.link-logo-navbar,html body a.ct-logo{transition:opacity .2s ease}
@media (hover:hover){html body a.link-logo-navbar:hover,html body a.ct-logo:hover{opacity:.72}}
@media (prefers-reduced-motion:reduce){html body a.link-logo-navbar,html body a.ct-logo{transition:none}}
/* Relance 15/10 13:40 — fil d'Ariane « Ce que vous recevez » : la page en cours était en bleu lien comme son parent (on croyait pouvoir cliquer) → texte foncé, comme l'autre fil du site */
html body .wrap-sitemap a.w--current,html body .wrap-sitemap a[aria-current="page"]{color:#2b3345!important;text-decoration:none!important;cursor:default;pointer-events:none}
/* Relance 15/10 13:40 — accueil de 992 à 1279 px : la carte estompée de gauche de la scène mordait de 19 px sur la colonne de texte (mesuré 992 / 1024 / 1100) → la scène est coupée à 24 px de son bord gauche */
@media (min-width:992px) and (max-width:1279px){html body .scene{clip-path:inset(-80px -100vw -80px -24px)}}
/* Relance 15/10 13:40 — accueil de 992 à 1199 px : « Compatible Guichet unique » et « Règlement européen eIDAS » passaient sur 2 lignes (185 + 24 + 226 = 435 px pour 419) → une seule ligne */
@media (min-width:992px) and (max-width:1199px){html body div.confiance-hero{column-gap:14px!important}html body .confiance-hero .ch-item{font-size:13px}html body .confiance-hero .ch-item img{width:24px;height:auto}}
/* Relance 15/10 13:40 — Garanties, « Comment votre document est protégé » : sur ordinateur, les 6 protections en grille 3 × 2 (le carrousel cachait « Paiement sécurisé » et « Remboursement » hors écran) */
@media (min-width:992px){
html body #security .slider-grey{position:relative;width:min(1020px,calc(100vw - 96px));left:50%;transform:translateX(-50%)}
html body #security .slider-grey .slick-list{overflow:visible}
html body #security .slider-grey .slick-track{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:auto!important;transform:none!important;cursor:default}
html body #security .slider-grey .slick-track::before,html body #security .slider-grey .slick-track::after{display:none}
html body #security .slider-grey .slick-slide{width:auto!important;transform:none!important;opacity:1!important;float:none;height:100%;box-shadow:none!important;z-index:auto}
html body #security .slider-grey .slick-cloned,html body #security .slider-grey .slick-arrow,html body #security .slider-grey .slick-dots{display:none!important}
}
@media (min-width:992px){html body #security .slider-grey .bg_image{height:auto!important}html body #security .slider-grey .bg_image>.card{height:100%}html body #security .slider-grey .wrap-card-parent-content{height:auto;padding-bottom:28px}}
@media (min-width:992px){html body #security .slider-grey .bg_image>.card{transition:transform .2s ease,background-color .2s ease}html body #security .slider-grey .bg_image>.card:hover{transform:translateY(-3px);background-color:#353e55}html body #security .slider-grey .bg_image>.card:focus-visible{outline:2px solid #9db6f0;outline-offset:3px}}
@media (min-width:992px) and (prefers-reduced-motion:reduce){html body #security .slider-grey .bg_image>.card{transition:none}html body #security .slider-grey .bg_image>.card:hover{transform:none}}
@media (min-width:992px){html body #security .slider-grey .slick-slide{display:flex!important;flex-direction:column}html body #security .slider-grey .bg_image{flex:1 1 auto;display:flex;flex-direction:column}html body #security .slider-grey .bg_image>.card{flex:1 1 auto}}
@media (min-width:992px){html body #security .slider-grey .slick-slide.slick-cloned{display:none!important}}
/* Relance 15/10 13:40 — pages formalité sur téléphone : les images m-t1 et m-t3 ont 5 % de vide transparent en haut et 12-15 % en bas (mesuré sur le fichier) → 128 px de blanc avant « Pourquoi signer… » ; on rattrape ce vide par des marges négatives (en % de la largeur = de la hauteur, l'image est carrée) */
@media (max-width:767px){
html body .bandeau-flottant>img[src*="m-t3"]{margin-top:-5%;margin-bottom:-14%}
html body .bandeau-flottant>img[src*="m-t1"]{margin-top:-4.5%;margin-bottom:-11%}
}
/* Relance 15/10 14:08 — fil d'Ariane : un seul séparateur sur tout le site (le chevron des pages formalité), posé par finitions-site.py à la place de « > », « › » et « / » */
.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:2px}
.breadcrumbs img.fil-sep,.alohi---main-style-guide--arrow-breadcrumb img.fil-sep{width:9px;height:9px;flex:none;display:block;opacity:.75}
.alohi---main-style-guide--arrow-breadcrumb{display:flex;align-items:center}
/* Relance 15/10 14:08 — Mon espace sur téléphone : « Mentions légales » passait seul 50 px sous les 2 autres liens → les 3 liens sur une ligne, cible tactile gardée à 32 px (≥ 24 px, WCAG 2.2) */
@media (max-width:480px){.cx-liens{gap:0 6px;flex-wrap:wrap}.cx-liens a{min-height:32px;padding:0 4px;font-size:13px}}
/* Relance 15/10 14:08 — Tarif : la carte « Signature INPI » avait 24 px de marge intérieure, les 3 autres 16 px (coches décalées de 9 px d'une carte à l'autre, mesuré 390 / 1024 / 1280) → 24 px partout */
html body .fpt-card.card{padding-left:24px!important;padding-right:24px!important}

/* Relance 15/10 14:36 — un seul encadré « En bref » sur tout le site (mesuré : 3 styles — articles, glossaire/certificat/marché public, formalités FR + EN) → celui des 39 articles : fond gris clair, barre bleue 4 px, coins 12 px ; titre 13 px gras, casse normale, sur sa propre ligne */
html body .tldr,html body .en-bref,html body .en-bref-hero{background:#f5f7fa!important;border:0!important;border-left:4px solid #3966cd!important;border-radius:12px!important}
html body .en-bref,html body .tldr{padding:20px 24px!important}
html body .en-bref-hero{padding:14px 20px!important}
html body .tldr-label,html body .en-bref-titre{display:block!important;margin:0 0 6px!important;font-size:13px!important;font-weight:700!important;letter-spacing:.02em!important;text-transform:none!important;color:#3966cd!important;line-height:1.4!important}
@media (max-width:480px){html body .en-bref,html body .tldr{padding:16px 18px!important}}
/* Relance 15/10 14:36 — articles : « Mis à jour le … » et « 7 min de lecture » collés sans séparateur (glossaire, certificat : « · ») → même point médian */
html body .article-meta{column-gap:.4em!important}
html body .article-meta span+span::before{content:"·";margin-right:.4em}
/* Relance 15/10 14:36 — Mon espace : la ligne de confiance se coupait au milieu de « avancée eIDAS » sur téléphone → coupure seulement au point médian */
.cx-nw{white-space:nowrap}
html body .en-bref-hero p .en-bref-titre{display:block!important;margin:0 0 6px!important;font-size:13px!important;line-height:1.4!important}
.cx-nw1::after{content:"\00a0·"}

/* ── Relance 15/10 16:56 : blog, sommaire en ancres des 9 « Guides par démarche » (saut direct au groupe, surtout sur téléphone) ── */
html body .pd-sommaire{margin:0 0 28px}
html body .pd-sommaire ul{list-style:none!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:8px!important}
html body .pd-sommaire li{margin:0!important;padding:0!important;list-style:none!important}
html body .pd-sommaire li::before,html body .pd-sommaire li::marker{content:none!important}
html body .pd-sommaire a{display:inline-block;padding:7px 14px;border:1px solid #d7dde8;border-radius:8px;background:#fff;color:#2c52a8;font-size:14.5px;font-weight:500;line-height:1.35;text-decoration:none;transition:background-color .18s ease,border-color .18s ease,color .18s ease}
html body .pd-sommaire a:focus-visible{text-decoration:none!important;background:#eef3fc;border-color:#9fb4dd;color:#1d3f8a}@media (hover:hover){html body .pd-sommaire a:hover{text-decoration:none!important;background:#eef3fc;border-color:#9fb4dd;color:#1d3f8a}}
html body .pd-groupe{scroll-margin-top:96px}
@media (max-width:767px){html body .pd-sommaire ul{gap:6px}html body .pd-sommaire a{font-size:14px;padding:6px 12px}}

/* ── Relance 15/10 16:56 : pied sur téléphone — « Conditions de vente · Confidentialité · Mentions légales » sur une seule ligne en français (368 px pour 350 avec 24 px d’écart ; l’anglais tenait déjà) ── */
@media (max-width:479px){
 html body div.alohi---main-style-guide--wrap-left-last-footer.alohi---main-style-guide--center-horizontal-wrap-mobile{column-gap:12px!important}
 html body .ct-bas span:last-child{column-gap:10px!important}
}

/* ── Relance 15/10 17:10 : pages formalités (ordinateur) — la carte « Une question ? » cachait le badge de la maquette
   (« eIDAS electronic signature » sur m-t4-en, « Signature enregistrée / saved » sur m-t2 FR + EN). Mesuré : carte à 71-94 % de la
   hauteur de l’image, badges à 77-99 %. Les règles § 36 visaient « .hero », absent de ces pages (section.hero-section) : jamais
   appliquées. → carte posée sous la maquette, plus rien de recouvert (mesuré 6 pages × 1024/1280/1440). ── */
@media (min-width:992px){.hero-section .bandeau-flottant .scene-equipe{bottom:auto;top:calc(100% + 8px);left:-4%}}

/* ── Relance 15/10 17:10 (liste continue) : pied à 360 px (petits Android) — « Mentions légales » repassait seul sur une 2e ligne
   en français → sous 370 px, les 3 liens empilés et centrés (Stripe mobile), écart 8 px, cible tactile ≥ 32 px. ── */
@media (max-width:369px){
 html body div.alohi---main-style-guide--wrap-left-last-footer.alohi---main-style-guide--center-horizontal-wrap-mobile{flex-direction:column!important;align-items:center!important;row-gap:8px!important}
 html body .ct-bas span:last-child{flex-direction:column!important;align-items:flex-start!important;row-gap:8px!important}   /* pied des pages de contenu aligné à gauche : liens empilés à gauche aussi */
 html body div.alohi---main-style-guide--wrap-left-last-footer.alohi---main-style-guide--center-horizontal-wrap-mobile a{min-height:32px;display:inline-flex;align-items:center}
 html body .ct-bas span:last-child a{padding:7px 0!important;margin:0!important}   /* pages de contenu : la zone de 44 px (padding 13 + marge −13) se chevauchait une fois empilée */
}

/* ── Relance 15/10 17:10 : fil d’Ariane à 3 maillons sur téléphone (« Accueil › Comment ça marche › Ce que vous recevez ») — chaque
   libellé se coupait en 2 lignes dans sa propre colonne → le fil passe à la ligne ENTRE les maillons, jamais au milieu d’un libellé. ── */
@media (max-width:767px){html body .wrap-sitemap{flex-wrap:wrap!important;row-gap:4px!important}html body .wrap-sitemap>a,html body .wrap-sitemap>div,html body .wrap-sitemap>span{white-space:nowrap!important;flex:none!important}}
/* Relance 15/10 17:26 — pied de page : titres de colonnes en MAJUSCULES sur les pages du gabarit (SERVICE, FORMALITÉS, RESSOURCES, mais « Besoin d’aide ? » en casse normale)
   et en casse normale sur les pages de contenu (glossaire, 39 articles) → casse normale partout, comme Stripe. Même graisse, même taille (16 px) des deux côtés. */
html body .alohi---main-style-guide--title-footer,html body .alohi---main-style-guide--title-footer strong{text-transform:none!important;letter-spacing:normal!important}
html body footer.ct-pied > div > div > strong:first-child{font-size:16px}
/* Relance 15/10 18:00 — 3 défauts mesurés (audit-relance-2026-10-15/1800/) + 2 cases d'AMELIORATIONS-CONTINUES
   1. « Copier l'adresse » (Aide FR + EN) : seul bouton du contenu sans transition au survol → fondu de couleur + soulignement qui s'éloigne
   2. maquette du fichier (Aide) : word-break:break-all coupait « _v1. / pdf » à 390 → coupure normale, après « Synthese_ » (<wbr> dans pages.py)
   3. pages du gabarit, téléphone : 86 px réservés sous le © pour la barre « Signer »… qui se cache dès que le pied arrive (site.js) → 138 px de bleu nuit vide ; 32 px comme sur ordinateur */
html body .lien-copier{transition:color .15s ease,text-underline-offset .15s ease}
@media (hover:hover){html body .lien-copier:hover{text-underline-offset:5px}}
html body .otm-fichier b{word-break:normal!important;overflow-wrap:break-word;line-height:1.4!important}
@media (max-width:767px){html body:has(.barre-signer) .alohi---main-style-guide--footer-copyright{padding-bottom:32px!important}}
/* glossaire : intertitres du sommaire collant cliquables, mots des autres groupes repliés (contenu.js) */
html body .toc-collant li.toc-groupe a{color:inherit;text-decoration:none;transition:color .15s ease}
html body .toc-collant li.toc-groupe a:hover,html body .toc-collant li.toc-groupe.ouvert a{color:#3966cd}
html body .toc-collant li.toc-groupe:not(.ouvert) a::after{content:" +";font-weight:600}
/* glossaire : lien « Signer mon document de synthèse » sous le mot « Document de synthèse » */
.gl-signer{margin:-4px 0 0!important}
.gl-signer-lien{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#3966cd!important;text-decoration:none!important;min-height:44px;transition:color .15s ease}
.gl-signer-lien::after{content:"→" / "";transition:transform .15s ease}   /* « / "" » : flèche affichée, pas lue (relance 17/10 21:20, fusionné 21:50) */
/* (relance 17/10 19:10) couleur de survol #244ba3 de .gl-signer-lien retirée : jamais appliquée (le soulignement montre le survol) */
@media (hover:hover){.gl-signer-lien:hover::after{transform:translateX(3px)}}

/* ── Relance 15/10 18:25 ─────────────────────────────────────────────
   1) Garanties (FR + EN) à 390 : la photo du bandeau faisait 152 px de haut et la carte
      « Document protégé » se posait PILE sur le visage (visage mesuré x 780-970 / y 101-291
      sur 1800 × 700). Photo 280 px, recadrée au centre, les 2 cartes empilées en bas à gauche :
      le visage reste dégagé (x 147-223, y 40-116 ; cartes à partir de y 156).
   2) Tarif (FR + EN) à 390 : le paragraphe « Prix toutes taxes comprises… » était serré à
      205 px à côté des logos de paiement → texte pleine largeur, logos dessous. */
@media (max-width:767px){
  .bandeau-flottant>.photo-bandeau{height:280px;object-fit:cover;object-position:50% 50%}
  .bandeau-flottant>.cf-1{top:auto;left:12px;bottom:72px}
  .bandeau-flottant>.cf-2{right:auto;left:12px;bottom:12px}
  .wrap-price.annual{flex-direction:column;align-items:flex-start;row-gap:16px}
  .wrap-price.annual>*{max-width:100%}
}
/* 3) Tarif : le tableau « FranceConnect+ ou ClairSign » faisait doublon avec « Deux façons de signer » → un seul tableau, sa note sourcée (FAQ INPI n° 890) dessous */
.comparatif-fc .compare-note{margin:16px auto 0;max-width:640px;font-size:15px;color:#2b3345;text-align:center;text-wrap:balance}
/* Relance 15/10 18:40 — formalités : lien « Pas encore votre document ? Voici où le trouver » sous le prix (AMELIORATIONS-CONTINUES),
   détaché des 2 lignes de prix (sinon on le lit comme une 3e ligne de prix) */
html body p.pas-encore{margin:14px 0 0;font-size:15px;line-height:1.5;color:#4a5568}
html body p.pas-encore a{font-weight:600;text-decoration:none;white-space:nowrap;transition:color .18s ease}
html body p.pas-encore a span{display:inline-block;transition:transform .18s ease}
html body p.pas-encore a:hover{text-decoration:underline}   /* (relance 17/10 21:55) décalage 3 px retiré : jamais appliqué, la règle de 19:35 impose 4 px au repos ET au survol */
@media (hover:hover){html body p.pas-encore a:hover span{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){html body p.pas-encore a span{transition:none}}
/* Relance 15/10 18:40 — Comment ça marche : mots seuls en fin de carte (« bloque. », « de payer. ») → coupe équilibrée */
html body .mcp-usp-card p{text-wrap:balance}
html body .card p{text-wrap:pretty}
/* Relance 15/10 18:40 — Comment ça marche (ordinateur) : l'image ordinateur + téléphone (col-10, 803 px à 1280) était plus étroite
   que la rangée des 3 cartes juste dessous (972 px) → même largeur que les cartes (image source 1280 px, pas d'agrandissement flou) */
@media (min-width:768px){html body .col-10:has(>.div-video-youtube>.image-plateformes){flex:0 0 calc(100% - 32px);max-width:calc(100% - 32px);width:calc(100% - 32px);margin-left:auto;margin-right:auto}}
/* Relance 15/10 19:05 : lien de retour vers la formalité d'origine (Aide, ?depuis=…) — même famille que « Voici où le trouver », survol = soulignement */
html body .ou-trouver .ot-retour{margin:-4px 0 20px!important;font-size:16px!important;line-height:1.5!important}
html body .ou-trouver .ot-retour a{text-decoration:none!important;transition:color .15s ease,text-decoration-color .15s ease!important}
html body .ou-trouver .ot-retour a:hover,html body .ou-trouver .ot-retour a:focus-visible{text-decoration:underline!important;text-underline-offset:3px!important}
/* Relance 15/10 19:05 — « En bref » : un mot seul en dernière ligne sur 9 pages formalités sur 12 à 1280 (« déposer. », « upload. ») → coupe soignée */
html body .en-bref-hero p,html body .en-bref p,html body .tldr p{text-wrap:pretty!important}
/* Relance 15/10 19:05 — Garanties : le sous-menu collant (Simplicité · Sécurité · Conformité · Aide) n'indiquait jamais la section lue
   (mesuré : même couleur pour les 6 liens à 900 / 1800 / 2700 / 3600 px) → lien de la section en cours en bleu, souligné comme le menu du haut */
html body .menu-features-items-default.est-en-cours{color:#3966cd!important;text-decoration:underline!important;text-decoration-thickness:2px!important;text-underline-offset:8px!important}
/* Relance 15/10 19:05 — Aide : l'arrivée par le lien « Voici où le trouver » (#ou-trouver-synthese) cachait le titre sous l'en-tête collant (mesuré : titre coupé à 390 et 1280) */
html body #ou-trouver-synthese{scroll-margin-top:96px!important}
@media (max-width:991px){html body #ou-trouver-synthese{scroll-margin-top:72px!important}}
/* Relance 15/10 19:11 — encadré « Que faut-il déposer / signer… » des 4 formalités (AMELIORATIONS-CONTINUES) : 778-868 px de haut à 390
   (3 blocs empilés, 24 px entre chaque, titre 22 px sur 2 lignes) → blocs séparés par un filet fin, titre 20 px, interlignes resserrés */
@media (max-width:767px){
  html body div.ia-carte > h2{font-size:20px!important;margin-bottom:12px!important}
  html body div.ia-carte > dl{row-gap:0!important}
  html body div.ia-carte > dl > div + div{border-top:1px solid #dbe5f7;margin-top:12px;padding-top:12px}
  html body .ia-carte dt{margin-bottom:4px}
  html body .ia-carte dd{line-height:1.5}
  html body .ia-carte ol.ia-gestes li{margin-bottom:2px}
  html body .inpi-attend details.ex-synthese{margin:10px 0 0}
  html body div.ia-carte > p.ia-source{margin-top:12px!important}
  html body div.ia-carte{padding:20px!important}
}
/* Relance 15/10 19:11 — accueil + garanties, téléphone (< 480 px) : la rangée des 3 cartes de prix passe en colonne, et la base
   « flex:1 1 260px » du § 46 (prévue pour la rangée) devenait une HAUTEUR de 260 px → cartes coupées (contenu 338 / 289 / 283 px,
   « …faite sous 24 h » tronqué, bouton « Voir l'aide » rogné ; trouvé par tests/contraste-pixel.mjs) → hauteur naturelle en colonne */
@media (max-width:479px){html body .start-now-price .wrapper-col>.col-4{flex:0 0 auto!important}}
/* Relance 15/10 19:11 — accueil : la rangée des formalités en pastilles (.logos-home, opacity .55 héritée des logos d'origine) mettait
   « Création, Modification… » à 3,25:1 sur blanc (sous le seuil 4,5:1, mesuré sur le fond peint) → pastilles opaques, texte gris lisible */
html body .wrapper-col.logos-home:has(.logo-texte){opacity:1!important}
html body .logos-home .logo-home.logo-texte{color:#4a5568}
/* Relance 15/10 19:11 — contrastes trouvés sur le fond peint (tests/contraste-pixel.mjs) : nombre « 39 » du filtre actif du Blog à 4,01:1
   (blanc à 80 % sur le bleu) et « (23 articles) » du sommaire des CGV à 3,43:1 (bleu à 80 % sur gris clair) → opacité pleine, bleu foncé */
html body .filtre-blog.actif span{opacity:1}
html body details.toc .toc-nb{opacity:1;color:#2c52a8}
/* Relance 15/10 19:11 — Garanties : le lien de la section en cours (ajouté à 19:05) gardait l'opacité .7 des liens du sous-menu
   → bleu pâle à ≈ 2,6:1 sur blanc (sous le seuil) ; plein bleu lisible, comme le lien en cours de l'en-tête */
html body .menu-features-items-default.est-en-cours{opacity:1!important}
/* Relance 15/10 19:45 — « Cet article vous a-t-il aidé ? » (fin des articles, contenu.js) : une rangée sobre façon Stripe Docs,
   filet en haut, 2 boutons contour qui se remplissent au survol */
html body .avis-article{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:40px 0 8px;padding:20px 0;border-top:1px solid #dfe4ec;border-bottom:1px solid #dfe4ec}
html body .avis-article p{margin:0!important;font-size:16px!important;line-height:1.5!important}
html body .avis-article .avis-article-question{font-weight:600;color:#0f1b33!important}
html body .avis-article-boutons{display:flex;gap:8px}
html body .avis-article-boutons button{min-width:72px;min-height:40px;padding:8px 18px;border:1px solid #c4ccd9;border-radius:8px;background:#fff;color:#0f1b33;font:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
html body .avis-article-boutons button:hover{background:#eef3fd;border-color:#2c52a8;color:#2c52a8}
html body .avis-article-boutons button:focus-visible{outline:2px solid #2c52a8;outline-offset:2px}
html body .avis-article a{color:#2c52a8;text-decoration:underline;text-underline-offset:2px}
/* Relance 15/10 19:45 — Aide, carte « Par e-mail » : la dernière recherche sans réponse, reprise (site.js) */
html body #contact .contact-question{margin:-4px 0 12px!important;padding:8px 12px;border-left:3px solid #2c52a8;background:#f5f7fa;border-radius:0 8px 8px 0;font-size:15px;line-height:1.45;color:#2b3345;overflow-wrap:anywhere}
/* Relance 15/10 19:45 — Pages formalités FR + EN : les 3 questions « On nous demande » (summary) étaient les seuls éléments cliquables
   de la page sans réaction au survol (mesuré : transition 0 s) ; Pages légales : idem pour les liens du sommaire */
html body .complements .onda details{transition:border-color .15s ease}
@media (hover:hover){html body .complements .onda details:hover{border-color:#b9c6dc}}
html body .complements .onda summary{transition:color .15s ease,background-color .15s ease;border-radius:12px}
@media (hover:hover){html body .complements .onda summary:hover{background:#f5f7fa}}
html body .complements .onda summary:focus-visible{outline:2px solid #2c52a8;outline-offset:2px}
html body details.toc li a{transition:color .15s ease,text-decoration-color .15s ease;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
html body details.toc li a:hover{color:#2c52a8;text-decoration-color:currentColor}
/* Relance 15/10 19:45 — pages légales : les liens du texte (adresse, contact, annexe, plateforme européenne) sans réaction au survol */
html body .article p a,html body .article li a,html body div.container>p a,html body div.container li a,html body .form-box p a{transition:color .15s ease,text-decoration-color .15s ease}
/* (relance 17/10 19:10) couleur de survol #1f3f86 des liens de texte retirée : jamais appliquée (le survol passe en #244ba3 + trait de 2 px par une autre règle) */
/* Relance 15/10 19:45 (AMELIORATIONS-CONTINUES l. 169) — /signer, « Pour quoi signez-vous ? » : les 2 cartes centraient leur texte
   verticalement → titres à des hauteurs différentes (3 lignes contre 2). Icône et titre alignés en haut, comme les cartes radio de Stripe */
html body .pc-usage-carte{align-items:flex-start}

/* ── Relance 15/10 20:10 : bouton « Copier le lien de cette question » sous chaque réponse de l'Aide ── */
.faq-copier-lien{display:inline-flex;align-items:center;gap:6px;margin:4px 0 0;padding:4px 0;border:0;background:none;font:inherit;font-size:14px;line-height:1.4;color:#3a4a63;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;cursor:pointer;transition:color .15s ease,text-decoration-color .15s ease}
.faq-copier-lien::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url(icones/lien.svg) center/contain no-repeat;mask:url(icones/lien.svg) center/contain no-repeat}
.faq-copier-lien:hover,.faq-copier-lien:focus-visible{color:#1f3fa3;text-decoration-color:currentColor}
.faq-copier-lien.copie{color:#1d6b3a}
/* Relance 15/10 20:10 : encadré « Service privé indépendant » des pages légales — tout en gras 14 px (style en ligne) : seul le mot-clé reste en gras */
.container > div[style*="#fffbeb"]{border-width:1px !important}
.container > div[style*="#fffbeb"] > p{font-weight:400 !important;font-size:15px !important;line-height:1.6 !important}
.container > div[style*="#fffbeb"] > p strong{font-weight:700}

/* ── Relance 15/10 20:30 : UNE seule barre « Signer » sur téléphone ──────────────────────────────
   Les pages du gabarit ont la pilule bleue « Signer mon document · dès 19,90 € TTC » (.barre-signer) ;
   les 42 pages de contenu (39 articles, glossaire, certificat, marché public) avaient une bande blanche
   « Dès 19,90 € TTC · Signer → ». Même pilule partout, toute la pilule est cliquable. */
@media (max-width:768px){
  html body .sticky-mobile-cta{left:12px!important;right:12px!important;bottom:12px!important;min-height:54px;padding:0 18px!important;
    border:0!important;border-radius:999px!important;background:var(--accent,#3966cd)!important;box-shadow:0 10px 30px rgba(10,60,160,.35)!important;
    flex-direction:row-reverse;justify-content:center;align-items:center;gap:10px!important;white-space:nowrap;transition:background-color .2s ease}
  html body .sticky-mobile-cta-info{flex:0 1 auto!important;min-width:0;overflow:hidden}
  html body .sticky-mobile-cta-price,html body .article .sticky-mobile-cta-price{color:#fff!important;font-size:14px!important;font-weight:500!important;opacity:.85;
    line-height:1.2!important;overflow:hidden;text-overflow:ellipsis}
  html body .sticky-mobile-cta-sub{display:none!important}
  html body a.sticky-mobile-cta-btn,html body .article a.sticky-mobile-cta-btn{background:transparent!important;color:#fff!important;padding:0!important;min-height:0!important;
    border-radius:0!important;font-size:17px!important;font-weight:600!important;box-shadow:none!important}
  html body a.sticky-mobile-cta-btn::after{content:"";position:absolute;inset:0;border-radius:999px}
  html body a.sticky-mobile-cta-btn:hover,html body a.sticky-mobile-cta-btn:focus-visible{background:transparent!important;color:#fff!important}
  html body .sticky-mobile-cta:has(a:hover),html body .sticky-mobile-cta:has(a:focus-visible){background:var(--accent-fonce,#2a52b0)!important}
  html body .sticky-mobile-cta:has(a:focus-visible){outline:3px solid #9db8f0;outline-offset:2px}
}

/* ── Relance 16/10 16:02 ────────────────────────────────────────────────────────────────────────
   a) Barre « Signer » des pages de contenu (téléphone) : même apparition que la pilule du gabarit (contenu.js ajoute .pilotee
      et .visible) — cachée à l'arrivée, près du pied et quand un bouton « Signer » de la page est à l'écran.
   b) Garanties (téléphone) : 88 px de marge sous le sous-menu + 25 px avant la photo = ~110 px de vide (capture 1602) → 40 px. */
@media (max-width:768px){
  html body .sticky-mobile-cta.pilotee{transform:translateY(140%);opacity:0;pointer-events:none;transition:transform .25s ease,opacity .2s ease,background-color .2s ease}
  html body .sticky-mobile-cta.pilotee.visible{transform:none;opacity:1;pointer-events:auto}
}
@media (prefers-reduced-motion:reduce){html body .sticky-mobile-cta.pilotee{transition:none}}
@media (max-width:479px){html body .section.hero.features:has(+ .bandeau-flottant){padding-bottom:40px!important}}

/* ── Relance 16/10 17:00 (défi B resté en « À faire ») : le logo des pages « carte seule » n'avait pas la même taille :
   Connexion 38 px (connexion.css) contre 32 px sur la 404 (mouvement.css, chargé là seulement). Une seule taille, 32 px,
   sur les deux pages, quelle que soit la feuille de style chargée. ── */
main.cx .cx-logo img{height:32px!important;width:auto!important}

/* ── Relance 16/10 17:00 — accueil, « Votre document signé en 3 étapes » (mesuré à 1280) : titre → image 56 px
   (24 px sous le titre + 32 px au-dessus de l'image), image → texte 24 px → même respiration des deux côtés. ── */
html body #etapes .illus-etape{margin-top:0!important}

/* ── Relance 16/10 17:00 — accueil, onglets sombres « Votre document / Signature / Code e-mail… » (390) : « Votre
   document » passait sur 2 lignes, la pilule active devenait plus haute que les autres → une ligne pour chaque onglet. ── */
@media (max-width:479px){html body .tabs-dark .tab-light-3{white-space:nowrap;padding-left:10px!important;padding-right:10px!important;line-height:1.3!important}}

/* ── Relance 16/10 17:00 — Tarif, téléphone : les 4 petites cartes « Inclus » (signature, code, aide, guides) faisaient
   274 px chacune sur une seule colonne, soit 1 193 px pour 4 informations → grille de 2 × 2, comme les cartes
   d'avantages de Stripe sur téléphone. ── */
@media (max-width:479px){
  html body .wrapper-col-wrap:has(> .col-3-wrap > .carte-petite){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  html body .wrapper-col-wrap:has(> .col-3-wrap > .carte-petite) > .col-3-wrap{width:auto!important;max-width:none!important;margin:0!important;padding:0!important;display:flex}
  html body .card.carte-petite{padding:20px 12px!important;width:100%;grid-template-columns:1fr!important;align-content:start;row-gap:10px}
  html body .card.carte-petite .carte-petite-titre{font-size:15px!important;line-height:1.35!important}
}
/* (suite) dans la grille 2 × 2 : la valeur (« Incluse », « Sur demande ») tient sur une ligne, le lien se cale en bas de
   chaque carte → les 2 liens d'une même rangée sont alignés. */
@media (max-width:479px){
  html body .card.carte-petite{display:flex!important;flex-direction:column;align-items:center;text-align:center}
  html body .card.carte-petite > img{width:44px;height:44px;margin:0 auto 4px}
  html body .card.carte-petite .carte-petite-valeur{font-size:19px!important;line-height:1.3!important;margin:4px 0 8px!important;white-space:nowrap}
  html body .card.carte-petite .lien-petite-carte{margin-top:auto!important;font-size:14px}
}
@media (max-width:479px){
  html body .card.carte-petite .lien-petite-carte{align-self:center!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important}
  html body .card.carte-petite .carte-petite-titre{min-height:calc(1 * 1.35em);display:flex;align-items:flex-start;justify-content:center}   /* relance 08/11 : 4 titres d'1 ligne dès 360 px → plus de 62 px de vide sous « Signature dessinée » */
}
@media (max-width:359px){html body .card.carte-petite .carte-petite-titre{min-height:calc(2 * 1.35em)}   /* très petits téléphones : un titre peut passer sur 2 lignes, la valeur reste alignée dans la rangée */   /* titres de 2 ou 3 lignes : 1re ligne calée en haut (défi de l’autre relance 17:30), la valeur tombe à la même hauteur dans la rangée */
}

/* Relance 16/10 17:00 : page introuvable — les 3 démarches les plus demandées en liste alignée (repartir vers une démarche, pas seulement l'accueil) */
.cx-demarches{margin:22px auto 4px;max-width:420px;text-align:left}
.cx-demarches p{margin:0 0 4px;font-size:14px;color:#44506a}
.cx-demarches div{display:flex;flex-direction:column}
.cx-demarches a{display:flex;align-items:center;justify-content:space-between;min-height:46px;border-bottom:1px solid #e6eaf3;color:#2c55b3;font-size:15px;font-weight:600;text-decoration:none;transition:color .2s ease,background-color .2s ease,padding .2s ease}
.cx-demarches a:first-child{border-top:1px solid #e6eaf3}
.cx-demarches a::after{content:"→";color:#3966cd;transition:transform .2s ease}
.cx-demarches a:hover,.cx-demarches a:focus-visible{color:#1f428f;background:#f6f8fd;padding:0 8px}
.cx-demarches a:hover::after{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.cx-demarches a,.cx-demarches a::after{transition:none}}

/* ── Relance 16/10 17:30 : lien « Découvrez comment ça marche » de Connexion sans aucun survol (mesuré FR + EN, 1280 + 390) ── */
html body main.cx .cx-bas a{color:#3966cd;text-decoration:underline;text-decoration-color:rgba(57,102,205,.35);text-underline-offset:3px;transition:color .2s ease,text-decoration-color .2s ease}
html body main.cx .cx-bas a:hover,html body main.cx .cx-bas a:focus-visible{color:#244a9e;text-decoration-color:currentColor}

/* ── Relance 16/10 18:10 (audit accueil-01, mesuré à 390) : « Entreprise individuelle », « Micro-entreprise », « Sole
   proprietorship » sortaient de leur carte de 16 à 40 px (texte sur une ligne imposée dans une colonne de 151 px), la coche
   débordait à gauche. Les couper sur 2 lignes rendait les rangées inégales → les 2 formes au nom long (6e et 7e de la liste,
   même ordre FR et EN) prennent toute la largeur, sur une ligne, centrées ; « SA » remonte à côté de « SCI » (rangées pleines). ── */
@media (max-width:600px){
  html body .wrap-items-countrie{grid-auto-flow:row dense}
  html body .wrap-items-countrie > .col-3-wrap:nth-child(6),html body .wrap-items-countrie > .col-3-wrap:nth-child(7){grid-column:1 / -1}
}

/* ── Relance 16/10 18:30 — parcours : défauts du parcours de signature (/signer, /en/signer) et de Mon espace (/connexion), audit 16/10 17:30 ── */
/* parcours-02 : questions du bas de page de hauteurs inégales (53/53/62/62/53 px, interligne 23,2 contre 32 px) → même interligne pour toutes */
html body .pc-questions summary{line-height:1.45!important}
/* parcours-03 : « Et maintenant ? » = liste numérotée affichée avec des puces rondes (li en disc) → 1, 2, 3 */
html body ol.pc-suite-liste > li{list-style-type:decimal!important;display:list-item}
/* parcours-06 : étape 2, colonne de formulaire de 277 px pour 383 px de boutons → « Retour » et « Continuer » en escalier ; pile pleine largeur, principal en haut */
@media (min-width:768px){
  html body .pc-deux .pc-form .pc-actions{flex-direction:column;align-items:stretch}
  html body .pc-deux .pc-form .pc-actions .button{width:100%}
  html body .pc-deux .pc-form .pc-actions .button:not(.secondary){order:-1}
  html body .pc-deux .pc-form .pc-actions .button.secondary[data-aller]{margin-right:0;order:1}
}
/* parcours-07 : « Refaire ma signature » devient un lien texte sous l'encadré du cachet (3 boutons = 625 px pour 582) */
html body .pc-refaire-ligne{margin:6px 0 0}
/* parcours-08 : aperçu « Écrire mon nom » sur 2 lignes à 390 (« Amandine » / « ZZQATEST ») alors que le PDF le pose sur 1 ligne */
html body .pc-texte-apercu{white-space:nowrap!important;overflow-wrap:normal!important;max-width:100%}
html body .pc-grille > .pc-cadre{min-width:0}   /* (parcours-08) sans cela, la ligne insécable élargissait la colonne de la grille (509 px à 390) */
/* parcours-14 / 15 : une information par ligne dans le récapitulatif et le journal (« · » plus jamais en bout de ligne, empreinte entière sur sa ligne) */
html body #rc-doc,html body #rc-signataire,html body #pc-r-signataire,html body .pc-journal span{white-space:pre-line}
/* parcours-09 : étape 4, 2 récapitulatifs complets côte à côte (mêmes lignes Usage…Signature) → le latéral garde prix, note, paiement */
html body[data-pc-etape="4"] .pc-recap-collant dl,html body[data-pc-etape="5"] .pc-recap-collant dl{display:none!important}
/* parcours-20 : étape 5 (document signé), « Paiement sécurisé » + 6 logos encore affichés → retirés ; la ligne Prix reste, comme sur un reçu */
html body[data-pc-etape="5"] .pc-recap-collant .rc-note,html body[data-pc-etape="5"] .pc-recap-collant .rc-paiement{display:none!important}
/* parcours-10 : survol invisible (« Pourquoi mon e-mail ? » et menu Page : 0 pixel changé ; liens : seul le décalage du soulignement, 3 → 4 px) */
@media (hover:hover){
  html body .pc-pourquoi summary{transition:color .2s ease}
  html body .pc-lien:hover,html body .rc-faits a:hover,html body main.cx .cx-lien:hover,html body main.cx .cx-aide a:hover,html body .pc-pourquoi summary:hover{color:#244ba3!important;text-decoration-line:underline!important;text-decoration-thickness:2px!important;text-underline-offset:4px!important}
  html body #pc-page-signature{transition:border-color .2s ease}
  html body #pc-page-signature:hover{border-color:#3966cd!important}
}
/* parcours-11 : cibles tactiles sous 44 px sur téléphone (.pc-modifier 28 px, exemple 32, Pourquoi 30, rc-faits 17, Mon espace 18-19) */
@media (max-width:479px){
  html body .pc-modifier{min-height:44px;display:inline-flex;align-items:center;top:2px}
  html body .pc-lien-exemple,html body .pc-pourquoi summary{min-height:44px;display:inline-flex;align-items:center}
  html body .rc-faits a{display:inline-block;padding:14px 0;margin:-14px 0}
  html body main.cx .cx-bas a,html body main.cx .cx-aide a{display:inline-block;padding:13px 0;margin:-13px 0}
}
/* parcours-12 : Mon espace après connexion — cartes de 430 et 640 px (bords gauches décalés de 105 px), « Adresse : … » centré sous un titre aligné à gauche */
/* (le masquage du formulaire après connexion, prévu par cx-reduit, est retiré : tests/parcours.test.mjs l. 180 ressaisit une adresse dans ce formulaire) */
html body main.cx .cx-espace{max-width:430px}
html body main.cx .cx-espace .cx-aide{text-align:left}
html body main.cx .cx-espace-tete .cx-lien{padding:0}   /* (parcours-12) colonne de 430 px : « Changer d’adresse » passe sous le titre, calé sur le même bord gauche (x 456 → 450) */
/* parcours-17 : pastille d'usage à x 47 contre x 37 pour « Formalité : » (marge de 10 px réservée à une icône cachée partout) */
@media (max-width:767px){
  html body .pc-formalite .pc-usage-pastille{grid-column:1 / -1;margin-left:0!important}
}
/* parcours-18 : icône au bord gauche (x 20) d'un texte centré sur 2-3 lignes (sauvegarde, cadenas sous « Signer et payer ») → icône dans la ligne */
html body .pc-sauvegarde:not([hidden]){display:block!important;text-align:center;text-wrap:balance}
html body .pc-sauvegarde img{display:inline-block!important;vertical-align:-2px;margin-right:6px}
@media (max-width:600px){
  html body .pc-sous-bouton{display:block;text-align:center;text-wrap:balance}
  html body .pc-sous-bouton img{display:inline-block;vertical-align:-2px;margin-right:6px}
}
/* parcours-19 : description des 2 cartes « Pour quoi signez-vous ? » en gras (700) comme le titre → poids normal */
html body .pc-usage-texte > span{font-weight:400}
/* parcours-23 : mot seul en dernière ligne (« for. » 24 px, « it? » 18 px) → césure de paragraphe soignée */
html body .pc-aide,html body .pc-questions summary,html body .pc-etape details summary{text-wrap:pretty}

/* Relance 16/10 18:20 — pied téléphone (gabarit : accueil, Tarif, Aide, formalités…). Mesuré à 390 : la 2e rangée du pied
   (Ressources · Besoin d'aide ?) héritait d'une marge haute de 64 px de fax.plus → 88 px de blanc sous « Mon espace » alors que
   la grille n'a que 8 px d'écart ; et « Besoin d'aide ? » était en 16 px quand les 3 autres titres sont en 15 px. */
@media (max-width:767px){
  html body .alohi---main-style-guide--wrap-item-footer.alohi---main-style-guide--margin-top-mobile{margin-top:24px}
  html body .aide-pied .aide-pied-titre{font-size:inherit}
}

/* Relance 16/10 18:20 — liens dans le texte des pages de contenu (glossaire, certificat, marché public, articles) : bleus et
   soulignés, mais rien ne bougeait au survol (mesuré au vrai pointeur, tests/survol-pages.mjs). Même bleu foncé que le reste du site. */
html body article.article :is(p,li,td,dd,blockquote,.info-box) a:not([class]){transition:color .15s ease,text-decoration-thickness .15s ease}
/* La l. 420 (correction de contraste) force la couleur de ces liens en !important → aucun :hover ne pouvait la changer : même priorité ici. */
@media (hover:hover){html body article.article :is(p,li,td,dd,blockquote,.info-box) a:not([class]):hover,
html body :is(.blog-liste a,p.ligne-action a,p.aide-liens a,.ou-croise a,.cgv li a):hover{color:#244ba3!important;text-decoration-line:underline!important;text-decoration-thickness:2px!important}}

/* ── Relance 16/10 18:30 — formalites : pages formalité (6 FR + 6 EN), défauts mesurés par l'audit du 16/10 17:30 ──
   Portée « body:has(p.formalite-format) » = les 12 pages formalité seulement (l'Aide et le Tarif gardent leur FAQ). */
/* formalites-08 : à 390 la ligne « Format attendu par le Guichet unique » était centrée (ajouts.css .confiance-hero) → icône à x 45 au lieu de 20 */
@media (max-width:767px){html body p.confiance-hero.formalite-format{justify-content:flex-start}}
/* formalites-09 : à 390 « Comment signer… » et « Questions sur… » (et « Suivez les étapes… ») centrés entre des titres alignés à gauche → tous à gauche ; le bandeau final reste centré */
@media (max-width:767px){
  html body:has(p.formalite-format) section:not(.start-now) .wrapper-col.center-vertical{align-items:flex-start}
  html body:has(p.formalite-format) section:not(.start-now) .wrapper-col.center-vertical>h2,
  html body:has(p.formalite-format) section:not(.start-now) .wrapper-col.center-vertical .col-9,
  html body:has(p.formalite-format) section:not(.start-now) .wrapper-col.center-vertical .col-9 p{text-align:left}
}
/* formalites-10 : à 390 FAQ, « Mis à jour », « On nous demande aussi », « Voir aussi » (et le titre « Comment signer ») rentrés de 24 px
   (conteneur .container-medium.center-2 : 333 px + 15 px de marge intérieure) quand les cartes vont de 20 à 370 → même largeur utile */
@media (max-width:767px){
  html body:has(p.formalite-format) section:not(.start-now)>.container-medium.center-2{padding-left:0;padding-right:0;margin-left:0;margin-right:0;max-width:none;width:auto}
}
/* formalites-11 : « On nous demande aussi » = cartes à bord 1 px, coins 12 px, flèche CSS 9 px, juste sous la FAQ en lignes plates (flèche chevron-bas.svg 14 px)
   → même composant que la FAQ : ligne plate, filet bas 1 px #eef2f7, question 600, même chevron */
html body .complements .onda details{border:0;border-bottom:1px solid #eef2f7;border-radius:0;background:transparent;margin:0 0 8px}
@media (hover:hover){html body .complements .onda details:hover{border-color:#eef2f7}}
html body .complements .onda summary{padding:16px 52px 16px 0;border-radius:0;font-size:17px;line-height:1.4}
@media (hover:hover){html body .complements .onda summary:hover{background:transparent}}
html body .complements .onda summary::after{width:14px;height:14px;right:13px;margin-top:-7px;border:0;transform:none;background:url(icones/chevron-bas.svg) center/14px 14px no-repeat}
html body .complements .onda details[open] summary::after{transform:rotate(180deg);margin-top:-7px}
html body .complements .onda p{padding:0 0 16px;font-size:16px;line-height:1.6}
@media (max-width:767px){html body .complements .onda summary{font-size:15px}}
/* formalites-14 : la réserve de 2 lignes des titres de cartes est désormais calculée rangée par rangée (assets/leger.js, bloc « formalites-14 ») ;
   la règle min-height 2.6em (l. 100) reste comme repli sans JavaScript */
/* formalites-17 : bouton « Copier le lien de cette question » 226 × 28 px sur téléphone → cible tactile de 44 px */
@media (max-width:767px){html body .faq-copier-lien{min-height:44px;padding:10px 0}}
/* formalites-20 : pied à 1280, 4 colonnes de 178,5 px + 3 × 8 px = 738 px dans 714 px → « Besoin d'aide ? » débordait de 24 px à droite */
@media (min-width:768px){
  html body .alohi---main-style-guide--wrap-links-footer{min-width:0}
  html body .alohi---main-style-guide--wrap-links-footer>.alohi---main-style-guide--col-4-footer{flex:1 1 0;min-width:0}
}
/* formalites-03 : à 390, 112 px (m-t2) et 154 px (m-t4) de blanc entre la maquette et « Pourquoi signer… » contre 84-87 px sur les pages sœurs
   (vide transparent sous la carte dessinée, mesuré sur le fichier) → même rattrapage en % de la largeur que m-t1 / m-t3 */
@media (max-width:767px){
  html body .bandeau-flottant>img[src*="m-t2"]{margin-bottom:-7.5%}
  html body .bandeau-flottant>img[src*="m-t4"]{margin-bottom:-19%}
}
/* ── Relance 16/10 18:30 — service : pages de service (Tarif, Comment ça marche, Garanties, Ce que vous recevez, Aide), défauts mesurés par l'audit du 16/10 17:30 ── */
/* service-02 : Tarif 390, 4 petites cartes « Inclus » : marge intérieure mesurée 32px 24px au lieu des 12 px voulus (div.card.drop-shadow-light.carte-petite 0,3,1 battait
   html body .card.carte-petite 0,2,2) → « Comment ça marche » sur 2 lignes (119 × 39), rangées 299/279 px, liens 20 px de haut → sélecteur plus fort, lien sur 1 ligne et 44 px */
@media (max-width:479px){
  html body div.card.drop-shadow-light.carte-petite{padding:20px 12px!important}
  html body .card.carte-petite .lien-petite-carte{white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}
/* service-02 (suite) : sous 380 px, « Comment ça marche » (141 px avec sa flèche) touchait le bord de la carte (360) → lien en 13 px et marge 8 px ;
   sous 340 px, il repasse à la ligne dans sa boîte de 44 px (les liens d'une rangée gardent le même haut) */
@media (max-width:379px){
  html body div.card.drop-shadow-light.carte-petite{padding-left:8px!important;padding-right:8px!important}
  html body .card.carte-petite .lien-petite-carte{font-size:13px}
}
@media (max-width:339px){html body .card.carte-petite .lien-petite-carte{white-space:normal;text-align:center}}
/* service-03 : Comment ça marche 1280, guides « Signer selon votre situation » : la colonne s'étirait mais pas la carte → hauteurs 561/533/533 et liens « Lire le guide »
   décalés de 29 px dans une rangée → carte pleine hauteur, lien (dernier slot seulement, le 1er slot vide reste en haut) calé en bas */
html body .guides-groupe>.col-4>.alohi---main-style-guide--card{height:100%}
html body .guides-groupe .alohi---main-style-guide--wrap-card-parent-content,html body .guides-groupe .alohi---main-style-guide--wrap-card-content{flex:1 1 auto}
html body .guides-groupe .alohi---main-style-guide--wrap-card-content>.alohi---main-style-guide--slot-min-height:last-child{margin-top:auto}
/* service-11 : même liste à 390 : « Lire le guide » 244 × 24 px sur les 18 cartes → cible tactile de 44 px */
@media (max-width:600px){html body .guides-groupe .alohi---main-style-guide--button-inline{min-height:44px;display:inline-flex;align-items:center}}
/* service-05 : Tarif 390 : 220 px de blanc entre le tableau « Tout ce qui est inclus » et « COMPARATIF » (padding-bottom-big 152 px + 64 px) contre 102-136 px ailleurs → 64 px */
@media (max-width:767px){html body #pricing-features.padding-bottom-big{padding-bottom:64px!important}}
/* service-06 : mot seul en dernière ligne (« étape. », « tard. », « unique. », « you. », 6 titres h4 de guides…) : text-wrap ne couvrait que h1-h3 et .card p → aussi h4, p, li, figcaption */
h4,p,li,figcaption{text-wrap:pretty}
/* (suite) titres des 18 cartes guides de Comment ça marche, 3 à 4 lignes : « pretty » laissait « expliquée », « procédure », « solutions » seuls (mesuré 5 FR, 3 EN à 1280) → coupe équilibrée */
html body .guides-groupe h4{text-wrap:balance}
/* service-07 : pilule « Signer mon document · dès 19,90 € TTC » du téléphone : prix en blanc à 85 % sur rgb(57,102,205) = 4,32:1 (< 4,5:1 à 14 px) → blanc plein (5,31:1) */
@media (max-width:767px){
  html body .barre-signer span{opacity:1}
  html body .sticky-mobile-cta-price,html body .article .sticky-mobile-cta-price{opacity:1}
}
/* service-10 : Aide 390 : pastilles « refusé / remboursement / délai » 36 px et « Copier l'adresse » 28 px de haut (< 44), pastilles réparties 1 + 2 → libellé seul sur sa ligne, cibles de 44 px */
@media (max-width:767px){
  html body .recherche-faq-suggestions button{min-height:44px}
  html body .recherche-faq-suggestions>span{flex-basis:100%}
  html body .lien-copier,html body .carte-contact .ligne-copier .lien-copier{min-height:44px;display:inline-flex;align-items:center}
}
/* service-12 : Tarif « Ce que vous recevez » : titres en gras 17 px / 30-32 px (1,76-1,88) au-dessus de paragraphes à 1,6, mot seul (« minutes », « unique ») → 1,35 et coupe équilibrée */
html body .recevez-liste strong{line-height:1.35!important;text-wrap:balance}
/* Relance 16/10 20:52 — téléphone. (1) Pied : 102 px de blanc entre « Guides par démarche » et le filet (marge haute 60,8 px de
   fax.plus sur .border-double) alors que les rangées du pied sont à 24 px → 32 px. (2) Fil d'Ariane à 3 niveaux (Ce que vous recevez,
   Modification de statuts à 360) : le chevron restait seul en fin de 1re ligne (« Accueil › Comment ça marche › » / « Ce que vous
   recevez ») → chaque lien porte son chevron, le retour à la ligne emporte « › Ce que vous recevez » entier. Mesuré : audit-relance-2026-10-16/2052/fil.mjs */
@media (max-width:767px){
  html body .alohi---main-style-guide--wrapper-col.alohi---main-style-guide--border-double{margin-top:32px}
  html body .wrap-sitemap>img.arrow-sitemap{display:none!important}
  html body .wrap-sitemap>img.arrow-sitemap+a::before{content:"";display:inline-block;width:9px;height:14px;margin-right:8px;background:url(icones/chevron-droit.svg) center/contain no-repeat;vertical-align:-2px}
}
/* ── Relance 16/10 18:30 — contenus : blog, articles et pages de contenu (glossaire, certificat, marché public), défauts mesurés par l'audit du 16/10 17:30 ── */
/* contenus-03 : tableau du comparatif 848 px dans un cadre de 672 px à 1280 (Yousign tranché, DocuSign invisible, aucun signe de défilement) → les 6 colonnes tiennent dans la colonne.
   Seuls les tableaux à 6 colonnes et plus (les autres tiennent déjà) ; 1re colonne à 18 %, 13 px (en-têtes 12 px) : 0 mot coupé mesuré de 768 à 1 600 px. */
@media (min-width:768px){
  html body .article .compare-table:has(tr>:nth-child(6)){table-layout:fixed;width:100%!important;font-size:13px}
  html body .article .compare-table:has(tr>:nth-child(6)) :is(th,td){padding:9px 4px!important;overflow-wrap:break-word;hyphens:manual}
  html body .article .compare-table:has(tr>:nth-child(6)) tr>:first-child{width:18%}
  html body .article .compare-table:has(tr>:nth-child(6)) thead th{font-size:12px}
}
/* contenus-04 : pied des pages de contenu à 48→1 232 px alors que l'en-tête (logo x 130, bouton fin 1 150) est ramené à 1 068 / 918 px (l. 1007-1010) → même bord */
@media (min-width:1280px) and (max-width:1439px){html body .ct-pied-grille,html body .ct-pied .ct-faits,html body .ct-pied .ct-bas{max-width:1020px!important}}
@media (min-width:992px) and (max-width:1279px){html body .ct-pied-grille,html body .ct-pied .ct-faits,html body .ct-pied .ct-bas{max-width:870px!important}}
/* contenus-05 : en-tête des articles ≠ /blog et /tarif (liens à 12 px au lieu de 24, « Blog » en gras sans trait, bouton 200 px au lieu de 206) */
html body .ct-menu a[aria-current="page"]{font-weight:400!important}
@media (min-width:861px){html body .ct-menu a[aria-current="page"]::after{left:6px;right:6px;bottom:4px;transform:scaleX(1)!important}}
@media (min-width:1280px) and (max-width:1439px){html body header.ct-entete .ct-menu{margin:0 auto 0 42px}}   /* 1er lien à x 304 comme /blog (mesuré 286 sinon) */
@media (min-width:1280px){
  html body header.ct-entete .ct-menu{gap:24px}
  html body header.ct-entete .ct-menu a{padding:0 6px;margin:0}
  html body header.ct-entete .ct-actions .ct-bouton{padding:0 23px!important}
}
/* contenus-11 : le prix sorti du bouton de l'encadré (« … — dès 19,90 € TTC › » sur 2 lignes, 312 × 62 px à 390) se lit juste dessous */
html body .article .cta-box p.cta-prix{margin:10px 0 0!important;font-size:14px!important;line-height:1.4;color:#5a6275!important}
/* contenus-13 : cartes « Cas 1 … 6 » du comparatif : 48 px au-dessus du titre (marge 32 px des h3 d'article), 16 px dessous → 16 / 16 */
html body .article .verdict-card h3{margin-top:0!important}
/* contenus-14 : pastilles « Guides par démarche » du blog à 33 px de haut sur téléphone (minimum tactile 44 px) */
@media (max-width:767px){html body .pd-sommaire a{display:inline-flex;align-items:center;min-height:44px}}
/* contenus-15 : « Encore une question ? » — chaque « · » reste avec sa question (span .aide-q) ; téléphone : liens 26 px séparés de 6 px → lignes de 44 px */
html body .article .aide-liens .aide-q{white-space:nowrap}
html body .article .aide-liens .aide-q>span[aria-hidden]{font-weight:inherit;color:inherit;margin:0}
@media (max-width:767px){
  html body .article .aide-liens .aide-q{display:block;white-space:normal}
  html body .article .aide-liens .aide-q>span[aria-hidden]{display:none!important}
  html body .article .aide-liens .aide-q a{display:flex;align-items:center;width:fit-content;min-height:44px;margin:0;border-bottom:0;text-decoration:underline;text-decoration-color:#c9d6f1;text-decoration-thickness:1px;text-underline-offset:4px}
}
/* contenus-16 : légende « Ce que dit l'INPI pour une modification ou une cessation » (56 signes) en capitales, 2 lignes à 390 → casse normale */
html body figure.regle-inpi figcaption{text-transform:none;letter-spacing:0}
/* contenus-18 : fiches des tableaux en anglais « Required : … » (espace française avant les deux-points) */
@media (max-width:600px){html[lang="en"] body .compare-table td[data-col]::before{content:attr(data-col) ": "}}
/* contenus-21 : cartes du blog, « N min de lecture » 23-24 px plus bas quand le titre de la voisine fait 2 lignes (8 rangées sur 13) → 3 lignes réservées */
@media (min-width:768px){html body .w-dyn-item a.card h3{min-height:3lh}}

/* ── Relance 16/10 21:15 — fil d'Ariane : UN seul dessin sur tout le site. Sur les pages du gabarit (Aide, Comment ça marche,
   Garanties…) « Accueil » était foncé comme du texte, sans air de lien, alors qu'il est bleu sur les formalités, « Ce que vous
   recevez » et les pages de contenu (mesuré 390 et 1280, captures audit-relance-2026-10-16/2115/fil-planche.png).
   Lien = bleu #3966cd (5,0:1 sur blanc), page en cours = foncé #2b3345, chevron opacité .75 partout. Le fil clair sur le
   bandeau sombre du Blog garde ses couleurs (règle .hero-hub:has(.filtres-blog), plus précise). ── */
html body .alohi---main-style-guide--breadcrumb .alohi---main-style-guide--link-breadcrumb,html body .wrap-sitemap a:not([aria-current="page"]):not(.w--current),html body .breadcrumbs a{color:#3966cd}
html body .alohi---main-style-guide--breadcrumb .alohi---main-style-guide--text-breadcrumb,html body .breadcrumbs [aria-current="page"],html body .breadcrumbs>span:last-child{color:#2b3345!important}
html body .alohi---main-style-guide--breadcrumb .arrow-sitemap,html body .wrap-sitemap .arrow-sitemap,html body .breadcrumbs .arrow-sitemap{opacity:.75}
/* (même relance) le glossaire écrit le nom de la page en texte nu dans .breadcrumbs : il héritait du gris de contenu.css */
html body .breadcrumbs{color:#2b3345!important}
/* (même relance) dernier chevron + nom de la page dans un seul bloc (finitions-site.py, span.fil-courant) : ils passent à la ligne ensemble */
html body .breadcrumbs .fil-courant{display:flex;align-items:center;column-gap:8px;min-width:0;max-width:100%;color:#2b3345}
html body .breadcrumbs .fil-courant>span{min-width:0}

/* ── Relance 16/10 21:35 — Aide : les pastilles « Les plus cherchées » restaient affichées sous les résultats (site.js les marque
   hidden dès qu'une question est trouvée, mais une règle display:flex l'emportait ; mesuré : hidden=true, display=flex). ── */
html body .recherche-faq-suggestions[hidden]{display:none!important}

/* ── Relance 16/10 18:30 — accueil : accueil (FR + EN) et pages annexes, défauts mesurés par l'audit du 16/10 17:30 ── */
/* accueil-03 : bouton blanc final « Signer mon document » bloqué à 190 px avec padding 0 (site.css) → texte 170 px, 10 px de marge (FR), 23 px (EN) ; les autres boutons : 23-29 px */
html body a.button.tertiary.compare-plans-home{width:auto!important;padding-left:28px!important;padding-right:28px!important}
/* accueil-04 : « Pourquoi ClairSign ? » — colonne de droite 30 px plus bas (margin-top -320 / -290 de site.css), « Sécurité » 7-33 px sous « Formalités ».
   Les 2 colonnes deviennent UNE grille (2 colonnes × 3 rangées, une seule marge haute) : les 2 cartes d'une rangée ont le même haut et la même hauteur. */
@media (min-width:768px){
  html body .wrapper-col.z-index:has(>.col-6>.wrap-card-why-left){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto;grid-auto-flow:column;column-gap:32px;row-gap:16px;margin-top:-320px}
  html body .col-6:has(>.wrap-card-why-left),html body .col-6:has(>.wrap-card-why-right),html body .wrap-card-why-left,html body .wrap-card-why-right{display:contents!important}
  html body .wrapper-col.z-index .card-why.image{height:auto;min-height:350px}
  html body .wrapper-col.z-index .card-why.image img{height:100%;width:100%;object-fit:cover}
}
@media (min-width:1440px){html body .wrapper-col.z-index:has(>.col-6>.wrap-card-why-left){margin-top:-440px}}
/* accueil-06 : bouton « Nos garanties / Our commitments » (a.button-6.secondary) : aucun survol mesuré (fond et position identiques après 800 ms) ; même survol que « Voir le tarif » (#edf2fc, -2 px) */
html body a.button-6.secondary{transition:background-color .2s,transform .2s,border-color .2s,color .2s}
@media (hover:hover){html body a.button-6.secondary:hover{background-color:#edf2fc!important;transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){html body a.button-6.secondary:hover{transform:none}}
/* accueil-05 + accueil-09 : la règle contenus-21 ci-dessus (« .w-dyn-item a.card h3{min-height:3lh} », faite pour les cartes du blog) prend aussi les cartes de l'accueil :
   formes d'entreprise à 100 px de haut au lieu de 50, coche sous le nom (mesuré h3 « SAS » 34 × 74 px) ; formalités : 3 lignes réservées pour des titres de 1-2 lignes.
   → formes : aucune réserve ; formalités : 2 lignes réservées (descriptions d'une rangée au même y, demandé par accueil-05) */
html body .wrap-parent-logo .w-dyn-item a.card h3{min-height:0!important}
@media (min-width:768px){html body .grille-formalites .w-dyn-item a.card h3{min-height:2lh}}
/* accueil-09 (max-width en !important : mouvement.css l.181 impose max-width:none!important) : grille des 12 formes d'entreprise 106→1 174 px (1 068) alors que le bord commun est 130→1 150 à 1280 ; 16→1 084 contre 115→985 à 1100 → même bord que les cartes de tarif */
@media (min-width:1280px) and (max-width:1439px){html body .wrap-parent-logo.first{max-width:1020px!important;margin-left:auto!important;margin-right:auto!important}}
@media (min-width:992px) and (max-width:1279px){html body .wrap-parent-logo.first{max-width:870px!important;margin-left:auto!important;margin-right:auto!important}}
/* accueil-10 : texte de « Conçue pour la confiance » à x 50 (max-width 1 180, mouvement.css) contre x 130 pour le logo, le H1 et le pied à 1280 ; 24 contre 115 à 1100. La Terre (canvas) garde toute la largeur */
@media (min-width:1280px) and (max-width:1439px){html body .confiance-int{max-width:1020px}}
@media (min-width:992px) and (max-width:1279px){html body .confiance-int{max-width:870px}}
/* accueil-12 : cartes « Le problème » sur téléphone : 2 lignes réservées au titre (min-height 2,7em = 51 px) → 11 px de blanc sous un titre de 2 lignes, 35 px sous un titre d'1 ligne. Cartes empilées : rien à aligner */
@media (max-width:767px){html body .carte-simple .dsp-md,html body .carte-simple h3{min-height:0!important}}
/* accueil-13 : liens trop petits pour le doigt à 390 (pied 32 px, légaux 21 px, « Pourquoi ? » 16 px, liens bleus des cartes et de l'encadré 30 px) → 44 px, comme le pied des pages de contenu (contenu.css l.181) */
@media (max-width:480px){html body :is(.alohi---main-style-guide--link-footer,.alohi---main-style-guide--links-last-footer,.pied-pourquoi,a.link-blue,.encadre-fc-lien){display:inline-flex;align-items:center;min-height:44px}}
/* accueil-14 : mots seuls en dernière ligne (« individuelle. » 91 px, « ligne. » 42 px, EN « filing. » 41 px ; « Une équipe qui / répond » à 390) → même traitement que l'« En bref » du 15/10 19:05 */
html body .grille-formalites a.card .text-md{text-wrap:pretty}
/* (suite) chiffres du bandeau sombre : « pretty » laissait « valider » et « engagement » seuls (mesuré 390 / 1280) → libellé et sous-ligne équilibrés chacun ; mêmes hauteurs (54-109 px) */
html body .cc-lib,html body .cc-lib>span{text-wrap:balance}html body .cc-lib>span{display:block}
/* accueil-15 : Tarif de l'accueil : « Parlons-en » (sans étiquette au-dessus) 5-6 px plus haut que « 19,90 € » et « Inclus » : margin-top-extra = 16 px, l'étiquette .text-xs absente fait 22 px */
html body #tarif .dsp-xl.margin-top-extra{margin-top:22px}
/* Relance 16/10 21:55 — Garanties téléphone : même air au-dessus et au-dessous de la photo du haut
   (mesuré 390 FR + EN : 73 px au-dessus, 121 px au-dessous avant « Simplicité » = padding 64 + marge 32 du conteneur) */
@media (max-width:480px){
  section#simplicite{padding-top:44px}
  section#simplicite>.container-medium.margin-top{margin-top:0}
}
/* Relance 16/10 22:15 — « Cet article vous a-t-il aidé ? Oui » : lien vers le guide suivant (contenu.js), même survol que les liens du texte */
html body .avis-article .avis-article-suivant{font-weight:600;white-space:normal;transition:color .15s ease,text-decoration-thickness .15s ease}
html body .avis-article .avis-article-suivant:hover{color:#1e3f8f!important;text-decoration-thickness:2px}
/* Relance 17/10 08:05 — cartes « Signature avancée / Sans abonnement / Aide » (Comment ça marche) et « Réponse 7 j/7 / Renvoi / Aide au dépôt » (Aide) : une icône parlante de la famille au lieu de 3 coches identiques, même carré 40 px que les tuiles de Garanties */
html body .mcp-usp-card .mcp-usp-ico{width:40px;height:40px;display:block;margin:0 auto 4px}
/* Relance 17/10 08:05 — Garanties : fil d'Ariane posé au-dessus du titre centré, centré lui aussi */
html body .fil-centre{display:flex;justify-content:center;margin:0 auto 18px}
/* Relance 17/10 08:30 — titres des 6 formalités FR + EN en 2 blocs (finitions-site.py) : « Signature INPI » puis « de vos statuts modifiés », chacun équilibré ; plus de « vos » / « your » / « d’activité » seul sur une ligne (25 cas → 0, audit-relance-2026-10-17/0830/h1-deux.mjs) */
html body h1.h1-deux .h1-l1,html body h1.h1-deux .h1-l2{display:block;text-wrap:balance}
@media (max-width:599px){html body h1.dsp-xl.h1-deux{font-size:32px!important}}
@media (min-width:600px) and (max-width:1199px){html body h1.dsp-xl.h1-deux{font-size:40px!important}}
/* Relance 17/10 08:30 — pied à 390 : le « · » avant « Pourquoi ? » descendait sous la ligne et prenait le soulignement du lien (en inline-flex, le ::before devient un bloc qui hérite du soulignement). Bloc en ligne + 12 px de marge haut/bas : même cible tactile de 44 px, point sur la ligne, sans soulignement */
@media (max-width:480px){html body .pied-pourquoi,html body .ct-bas .pied-pourquoi{display:inline-block!important;min-height:0!important;padding:12px 0;line-height:20px}}

/* Relance 17/10 08:53 — séparateurs « · » : invisible quand la ligne se coupe juste après (mouvement.js pose .sep-fin) ; téléphone :
   les questions « Encore une question ? » sont l'une sous l'autre, le point n'a plus de sens. */
html body .sep-fin{visibility:hidden}
@media (max-width:767px){html body .article .aide-liens .sep{display:none}}
/* Relance 17/10 08:53 — formalités, boutons du haut : quand ils passent l'un sous l'autre (768, EN transfert à 900-1024) ils gardaient
   leur largeur naturelle (249 / 145 px) ; boîte à la largeur de son contenu (fit-content : les marges restent fusionnées, inline-flex ajoutait 18 px) + boutons extensibles : côte à côte = taille naturelle, empilés = même largeur. */
html body .formalite-format + .wrap-button{display:flex;flex-wrap:wrap;width:fit-content;max-width:100%}
html body .formalite-format + .wrap-button > .button{flex:1 1 auto;justify-content:center;text-align:center}

/* Relance 17/10 09:23 — pied de page téléphone (défi 08:53, capture audit-relance-2026-10-17/0853/c/index-390-bas.jpg) :
   1) un seul alignement : sur les pages du site, les faits et le cadenas étaient à gauche, mais les liens légaux + le « © » centrés ;
      les pages de contenu (glossaire, guides) sont déjà à gauche partout → gauche partout sous 768 px (Stripe et Qonto en mobile).
   2) « Pourquoi ? » en bloc en ligne de 44 px de haut creusait ≈ 40 px entre les 2 lignes du « © » → lien EN LIGNE : le remplissage
      de 12 px agrandit la zone tactile sans pousser la ligne (un élément en ligne n'agrandit pas sa ligne avec son remplissage vertical).
   3) faits : pas de dernier mot isolé (« le paiement. » seul) → text-wrap:pretty. */
@media (max-width:767px){
 html body div.alohi---main-style-guide--wrap-left-last-footer.alohi---main-style-guide--center-horizontal-wrap-mobile{justify-content:flex-start!important;align-items:flex-start!important;text-align:left!important}
 html body div.alohi---main-style-guide--wrap-left-last-footer.alohi---main-style-guide--center-horizontal-wrap-mobile > *{text-align:left!important}
 html body .pied-faits{text-wrap:pretty}
 html body .pied-sans-traceur{text-wrap:pretty}   /* relance 20/10 12:20 : « balance » la coupait en 2 lignes de ~200 px dans un pied de 350 px (colonne étroite) */
}
@media (max-width:369px){
 html body div.alohi---main-style-guide--wrap-left-last-footer.alohi---main-style-guide--center-horizontal-wrap-mobile{align-items:flex-start!important}
}
@media (max-width:480px){html body .pied-pourquoi,html body .ct-bas .pied-pourquoi{display:inline!important;padding:14px 0;line-height:inherit}}
/* Relance 17/10 09:23 — /signer étape 1 : ligne « Pas sûr ? » sous les 2 cartes INPI / marché public (le visiteur hésitant ne reste pas
   bloqué au 1er choix) ; disparaît dès qu'une carte est choisie. */
html body .pc-usage-indice{margin:14px 0 0;font-size:14px;line-height:1.5}
html body .pc-usage-indice a{white-space:nowrap}
html body .pc-usage:has(input:checked) .pc-usage-indice{display:none}
/* Relance 17/10 09:23 — /signer, titres des 2 cartes d'usage : lignes équilibrées (EN 1280 : « INPI » restait seul sur sa ligne). */
html body .pc-usage-texte strong{text-wrap:balance}

/* ── Relance 17/10 10:00 — barre de prix du parcours (téléphone, tablette) ──
   Défi 09:23 : visible dès l'arrivée au-dessus de « Pour quoi signez-vous ? », bouton qui renvoyait à l'écran déjà
   visible. Elle sort du flux (plus de place réservée en haut) et n'apparaît, collée sous l'en-tête, qu'une fois
   les cartes d'usage (étape 1) ou les pastilles (étapes 2-3) sorties de l'écran (parcours.js majBarrePrix). */
@media (max-width:991px){
  div.pc-barre-prix{position:fixed;top:82px;left:20px;right:20px;margin:0;opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
  div.pc-barre-prix.pcb-visible{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .2s ease,transform .2s ease,visibility 0s}
}
@media (prefers-reduced-motion:reduce){div.pc-barre-prix,div.pc-barre-prix.pcb-visible{transition:none;transform:none}}
/* ── Relance 17/10 10:00 — Aide (téléphone) : photo de la conseillère calée à droite (≈ 250 px sur 350) avec 100 px
   de vide à gauche que la bulle recouvrait à moitié (défi 09:23) → même mise en page qu'en tablette : photo pleine
   largeur de la colonne (format 4:3, visage gardé), les 2 bulles à la suite dessous, comme une conversation. */
@media (max-width:767px){
  .aide-conv{padding:0}
  .aide-conv .aide-conv-photo{width:100%;aspect-ratio:4/3;object-position:50% 30%;margin:0}
  .aide-conv .aide-bulle{position:static;inset:auto;max-width:86%;width:fit-content}
  .aide-conv .aide-bulle-q{position:relative;margin:-24px 0 0 -6px}
  .aide-conv .aide-bulle-r{margin:10px -6px 0 auto}
}
/* ── Relance 17/10 10:20 — téléphone (≤ 479 px) ──
   (1) Fil d'Ariane à 3 niveaux (Ce que vous recevez, formalités) : coupé sur 2 lignes à 360-390 (« › Ce que vous recevez »
   seul sur la 2e). Comme Stripe Docs et Apple Support : sur téléphone, seul le niveau parent reste, en lien retour
   « ‹ Comment ça marche ». Le fil complet reste lu par les lecteurs d'écran (rien n'est retiré du HTML ni du JSON-LD).
   (2) Barre de prix de /signer : 2e ligne « Étape N sur 5 » (parcours.js majBarrePrix).
   (3) Aide : bloc « Vous ne trouvez pas votre réponse ? » remonté sous la recherche après 2 « Non » (aide-guides.js). */
@media (max-width:479px){
  html body .wrap-sitemap:has(>img.arrow-sitemap~img.arrow-sitemap)>a:first-child,
  html body .wrap-sitemap:has(>img.arrow-sitemap~img.arrow-sitemap)>a:first-child+img,
  html body .wrap-sitemap:has(>img.arrow-sitemap~img.arrow-sitemap)>a[aria-current="page"]{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
  html body .wrap-sitemap:has(>img.arrow-sitemap~img.arrow-sitemap)>img.arrow-sitemap+a:not([aria-current="page"])::before{transform:rotate(180deg)}
  html body .wrap-sitemap:has(>img.arrow-sitemap~img.arrow-sitemap)>img.arrow-sitemap+a:not([aria-current="page"]){min-height:44px;display:inline-flex;align-items:center}
}
html body .pc-barre-prix .pcb-etape{display:block;font-size:13px;line-height:1.3;color:#4a5568;font-weight:500;white-space:nowrap}
html body .pc-barre-prix .pcb-etape:empty{display:none}
html body .aide-contact-remonte{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0 8px;padding:16px 20px;border:1px solid #d7dde8;border-radius:10px;background:#f6f8fc}
html body .aide-contact-remonte p{margin:0;color:#2b3345}
html body .aide-contact-remonte .button{flex:none}
@media (max-width:479px){html body .aide-contact-remonte{flex-direction:column;align-items:stretch;text-align:left}}
/* (même relance) Barre de prix collée à 82 px sous un en-tête qui finit à 75 px : la page défilait dans la fente de 7 px
   (lien « Ce qu'exige l'INPI » coupé, visible entre l'en-tête et la barre, capture 1020/c/apres-barre-signer.jpg).
   Bande de la couleur du fond du parcours qui bouche la fente, de bord à bord. */
@media (min-width:361px) and (max-width:991px){
  html body div.pc-barre-prix::before{content:"";position:absolute;left:-20px;right:-20px;top:-9px;height:9px;background:#f5f7fa;pointer-events:none}
}
html body .wrap-sitemap:has(>img.arrow-sitemap~img.arrow-sitemap)>img.arrow-sitemap+a::before{align-self:center;vertical-align:middle}
/* (même relance, défi 10:20) Formalités FR + EN : l'icône « document coché » de « Format attendu par le Guichet unique »
   était un dessin de 56 px réduit à 22 px : illisible, on croyait voir une case à cocher vide (capture 1020/c/format-390.jpg).
   Tuile de 40 px, à la hauteur des 2 lignes qu'elle accompagne (titre + « Signature avancée eIDAS »). */
html body p.formalite-format img{width:40px;height:40px}
html body p.formalite-format{column-gap:12px!important}
/* (même relance, défi 10:20) Tarif FR + EN, puces des cartes : 25 mots seuls sur la 2e ligne de 360 à 768 px
   (« transfert de / siège », « avancée / eIDAS », « in a few / minutes »), mesuré par 1020/orphelins.mjs → coupe équilibrée. */
html body .fpt-fi{text-wrap:pretty}
/* Relance 17/10 10:45 — liste continue : « Étape N sur 5 » de la barre de prix devient un lien vers les pastilles
   (souligné discret au survol, cible tactile gardée par la ligne), et ligne « Vous avez consulté : … » du bloc de contact de l'Aide. */
html body .pc-barre-prix a.pcb-etape{color:#4a5568;text-decoration:underline;text-decoration-color:rgba(74,85,104,.35);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
html body .pc-barre-prix a.pcb-etape:hover,html body .pc-barre-prix a.pcb-etape:focus-visible{color:#3966cd;text-decoration-color:#3966cd}
html body .aide-contact-remonte p.aide-contact-vues{font-size:14px;line-height:1.5;color:#4a5568}
/* (même relance 10:45, défi) Fil d'Ariane des 45 articles et du glossaire (.breadcrumbs « Accueil › Blog › Page ») :
   coupé sur 2 lignes à 390 en anglais (« › Signing a public contract » seul, chevron en tête, capture 1045/d/
   en-signature-electronique-marche-public-390-0.jpg). Même règle que les autres pages depuis 10:20 : au téléphone,
   seul le parent reste, en lien retour « ‹ Blog ». Le fil complet reste lu par les lecteurs d'écran et dans le JSON-LD. */
@media (max-width:479px){
  html body .breadcrumbs:has(>a~a)>a:first-child,
  html body .breadcrumbs:has(>a~a)>a:first-child+img,
  html body .breadcrumbs:has(>a~a)>[aria-current="page"]{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
  html body .breadcrumbs:has(>a~a)>img+a{display:inline-flex!important;align-items:center;min-height:44px;padding:0 5px!important;margin:-10px -5px!important}
  html body .breadcrumbs:has(>a~a)>img+a::before{content:"";display:inline-block;width:9px;height:14px;margin-right:8px;background:url(icones/chevron-droit.svg) center/contain no-repeat;transform:rotate(180deg);opacity:.75}
}
/* Aide : le bloc « Vous ne trouvez pas votre réponse ? » a maintenant 2 lignes de texte (+ « Vous avez consulté : … ») :
   elles sont regroupées à gauche, le bouton reste à droite sur ordinateur (aide-guides.js .aide-contact-texte). */
html body .aide-contact-remonte .aide-contact-texte{flex:1;min-width:0}
html body .aide-contact-remonte .aide-contact-texte p.aide-contact-vues{margin:6px 0 0}
/* (même relance 10:45, défi) Comment ça marche + Aide FR/EN, 3 cartes du haut : la phrase sous le titre était en 13 px gris
   sous un titre de 22 px — à 1280 on la devinait plus qu'on ne la lisait (capture 1045/pl-comment-ca-marche-1280.jpg).
   15 px, interligne 1,5, même gris (contraste 6,1:1 sur blanc). */
html body .mcp-usp-card p:not(.mcp-usp-titre){font-size:15px!important;line-height:1.5!important}

/* Relance 17/10 11:05 — barre de prix de /signer : flèche « ‹ étape précédente » à gauche (étapes 2-3, téléphone et tablette).
   Cible tactile 44 px, même survol que les autres boutons de la barre. */
html body .pc-barre-prix .pcb-retour{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-4px 0 -4px -6px;padding:0;border:1px solid #d7dde8;border-radius:10px;background:#fff;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,transform .15s ease}
html body .pc-barre-prix .pcb-retour[hidden]{display:none}
html body .pc-barre-prix .pcb-retour:hover,html body .pc-barre-prix .pcb-retour:focus-visible{background:#eef3fd;border-color:#3966cd}
html body .pc-barre-prix .pcb-retour:focus-visible{outline:2px solid #3966cd;outline-offset:2px}
html body .pc-barre-prix .pcb-retour:active{transform:scale(.96)}
html body .pc-barre-prix .pcb-retour img{display:block;width:20px;height:20px}
html body .pc-barre-prix .pcb-prix{flex:1 1 auto;min-width:0}
@media (max-width:359px){html body .pc-barre-prix .pcb-retour{width:40px;height:40px}}
/* Relance 17/10 11:05 : au téléphone, la flèche prend la place du détail « · quelques minutes » (il était coupé : « quelques minut ») */
@media (max-width:479px){html body .pc-barre-prix:has(.pcb-retour:not([hidden])) #pcb-detail{display:none}}

/* ── Relance 17/10 11:34 — Connexion : « Signature électronique avancée eIDAS · » puis « Paiement sécurisé » à la ligne laissait le « · »
   en bout de ligne sous 414 px (8 cas mesurés FR + EN, audit-relance-2026-10-17/1134/cx.mjs ; le point est un ::after, que tests/separateurs.mjs
   ne voit pas). Cadre étroit = pas de point, 2e fait sur sa propre ligne, centré comme le reste. ── */
.cx-pied{container-type:inline-size}
@container (max-width:381px){
  html body .cx-nw1::after{content:none}
  html body .cx-nw1 + .cx-nw{display:block;margin-top:2px}
}

/* ── Relance 17/10 11:34 (défi) — tableaux comparatifs passés en cartes au téléphone : texte en 13 px gris sous un corps en 17 px
   (marché public « Formalité d’entreprise… / Demandé : … », comparatifs du blog). Lisible : 15 px, interligne 1,5. ── */
@media (max-width:600px){
  html body .compare-table td{font-size:15px!important;line-height:1.5!important}
}
/* même passage : « Encore une question ? » des articles — le lien « Comment déposer ensuite le document signé ? » restait sur une ligne
   (white-space:nowrap hérité) et dépassait l'écran de 4 px à 360 (2 articles, mesuré par 1134/large.mjs) → il passe à la ligne. */
@media (max-width:600px){
  html body .article .aide-liens .aide-q a{white-space:normal!important;max-width:100%}
}

/* ── Relance 17/10 12:03 — Connexion (Mon espace) : rangée FIXE des moyens de paiement sous la ligne de confiance,
   mêmes logos que le reste du site (commun.paiement_html), centrée, pas de défilement. « Paiement sécurisé » n'est
   plus répété dans la ligne du dessus (c'est le titre de la rangée) ; le filet passe sous la rangée. */
html body .cx-pied .cx-confiance{border-bottom:0;padding-bottom:0}
html body .cx-pied .paiement-logos.cx-paiement{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;justify-content:center;margin:12px 0 0;padding-bottom:14px;border-bottom:1px solid #edf2fc}
html body .cx-pied .paiement-logos.cx-paiement ul{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0;padding:0;list-style:none}
html body .cx-pied .paiement-logos.cx-paiement li{margin:0;padding:0;list-style:none}
html body .cx-pied .paiement-logos.cx-paiement img{display:block;width:44px;height:28px;object-fit:contain;background:#fff;border:1px solid #dfe4ec;border-radius:6px;padding:3px 5px;box-sizing:border-box}
html body .cx-pied .paiement-logos.cx-paiement .pl-titre{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:13px;font-weight:600;color:#2b3345}
@container (max-width:381px){ html body .cx-pied .paiement-logos.cx-paiement .pl-titre{flex-basis:100%;justify-content:center} }

/* ── Relance 17/10 12:03 — pied de page au téléphone (FR + EN, toutes les pages, pages légales comprises) :
   « Signature avancée eIDAS · Certificat d’une autorité… · Paiement par carte… » faisait 4 lignes de petit texte
   collées par des « · ». Sous 768 px : un fait par ligne (le « · » devient un saut de ligne invisible, 4 px d'air),
   comme les mentions de pied de Stripe et Qonto au téléphone. Ordinateur inchangé. */
@media (max-width:767px){
  html body .pied-faits:not(.pied-sans-traceur) .sep,
  html body .ct-faits .sep{display:block!important;height:4px;overflow:hidden;font-size:0!important;line-height:0!important;visibility:hidden}
  html body .pied-faits:not(.pied-sans-traceur),html body .ct-faits{text-wrap:pretty}
}

/* ── Relance 17/10 13:15 — pied de page : « liste de confiance de l’Union européenne » / « EU Trusted List » = lien vers le glossaire
   (finitions-site.py). Discret comme une mention de pied Stripe : couleur du texte, soulignement fin à demi-teinte, qui s'épaissit
   au survol sans changer de couleur (le bleu du site ne se lit pas sur le pied bleu nuit). ── */
html body :is(.pied-faits,.ct-faits) a.lien-glossaire-pied{color:inherit!important;text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:3px!important;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)!important;transition:text-decoration-color .2s ease,text-decoration-thickness .2s ease}
html body :is(.pied-faits,.ct-faits) a.lien-glossaire-pied:focus-visible{text-decoration-color:currentColor!important;text-decoration-thickness:2px!important}@media (hover:hover){html body :is(.pied-faits,.ct-faits) a.lien-glossaire-pied:hover{text-decoration-color:currentColor!important;text-decoration-thickness:2px!important}}
/* même passage — Connexion : « Vouliez-vous dire …@gmail.com ? » sous le champ (espace.js), même dessin que /signer (parcours.css .pc-suggestion). */
html body .cx-suggestion{margin:6px 0 0;font-size:14px;color:#3b4252;line-height:1.5;text-align:left}
html body .cx-suggestion[hidden]{display:none}
html body .cx-sugg-btn{background:none;border:0;padding:0;font:inherit;font-weight:600;color:#3966cd;text-decoration:underline;text-underline-offset:2px;cursor:pointer;min-height:28px;transition:color .2s ease}
html body .cx-sugg-btn:hover,html body .cx-sugg-btn:focus-visible{color:#244ba3;outline:2px solid rgba(10,105,255,.35);outline-offset:2px;border-radius:4px}
/* même passage — au téléphone, les liens du pied des pages de contenu passent en bloc (cible tactile) : le lien du glossaire, lui, reste DANS
   la phrase (règle WCAG 2.5.8 : un lien dans une phrase est exempté de la taille de cible), sinon 58 px de vide avant « Paiement par carte » (mesuré). */
html body :is(.pied-faits,.ct-faits) a.lien-glossaire-pied{display:inline!important;margin:0!important;padding:0!important;min-height:0!important;width:auto!important}

/* ── Relance 17/10 13:15 (défi 12:03, liste continue) — bas du pied au téléphone et à la tablette : la classe d'origine « invert-mobile »
   retournait l'ordre (logos de paiement, puis « Aucun cookie… », puis les faits ; mesuré 15 cas sur 25, FR + EN, 360 → 768 px).
   Un seul ordre, celui de l'ordinateur : les faits, puis « Aucun cookie… », puis la rangée de paiement. ── */
@media (max-width:991px){
  html body .alohi---main-style-guide--wrapper-special-footer.alohi---main-style-guide--invert-mobile,
  html body .alohi---main-style-guide--wrapper-special-footer>.alohi---main-style-guide--wrap-logo-app-footer.alohi---main-style-guide--invert-mobile{flex-direction:column!important}
}

/* ── Relance 17/10 13:45 — 3 défauts du défi (mesurés : audit-relance-2026-10-17/1341/aide.mjs, mesure.mjs).
   1) Aide FR + EN : « Questions fréquentes » CENTRÉ, recherche centrée à part (280 → 1 000 px), questions de 130 à 1 150 px :
      trois alignements. Page de contenu = titres à gauche (règle 17/10 08:05) → titre et recherche calés sur le bord des questions.
   2) Aide, téléphone (< 768 px) : les 2 bulles débordaient la colonne de 6 px de chaque côté (14 px du bord au lieu de 20).
   3) Articles et glossaire : intitulé h3 en 16 px au téléphone (17 px à l'ordinateur) sous un texte de 17 px — le mot défini
      paraissait plus petit que sa définition. 18 px au téléphone (sous les h2 de 19 px), 19 px ensuite (sous les h2 de 22 px). ── */
html body #faq .wrapper-col.center-vertical{align-items:flex-start!important;text-align:left!important}
html body #faq .wrapper-col.center-vertical>h2{text-align:left!important;margin-left:0!important}
html body #faq .recherche-faq{margin-left:0!important;margin-right:auto!important}
html body #faq .recherche-faq .alohi---main-style-guide--align-text{text-align:left!important}
@media (max-width:767px){
  html body figure.aide-conv .aide-bulle-q{margin-left:0!important}
  html body figure.aide-conv .aide-bulle-r{margin-right:0!important}
}
/* 2 bis) (14:20, défi de la session 13:15) tablette 768-991 px : bulles sous la photo, la blanche dépassait de 8 px à gauche (marge -8 px) → calée sur la photo.
   À 992 px et plus, les 2 bulles sortent de la photo exprès (blanche à gauche, bleue en bas, dans les 40 px réservés par la figure) : effet de conversation, voulu. */
@media (min-width:768px) and (max-width:991px){html body figure.aide-conv .aide-bulle-q{margin-left:0!important}html body figure.aide-conv .aide-bulle-r{margin-right:0!important}}
/* 1 bis) téléphone : la zone des questions (titre, recherche, liste) démarrait à 44 px, le reste de la page à 20 px */
@media (max-width:767px){html body #faq>.container-medium{max-width:none!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}}
html body article.article>h3{font-size:19px!important;line-height:1.35!important}
@media (max-width:767px){html body article.article>h3{font-size:18px!important}}

/* ── Relance 17/10 14:25 (défi de la session 13:41) — titre des pages à photo latérale (Aide, Comment ça marche) en tablette et petit
   ordinateur : en 52 px dans une colonne de 385-515 px, « Aide et / questions / fréquentes » tenait sur 3 lignes et « Help and / frequently /
   asked / questions » sur 4 (mesuré 768-1024, audit-relance-2026-10-17/1315/aide-titre.mjs). La photo reste à côté (comme Stripe Support en
   tablette) ; le titre passe en 40 px avec des lignes équilibrées, la même taille que les titres des formalités en tablette (relance 08:30). ── */
@media (min-width:768px) and (max-width:1199px){
  html body h1.alohi---main-style-guide--heading[data-wf--alohi---main-style-guide--heading--variant="xl"]{font-size:40px!important;line-height:1.15!important;text-wrap:balance}
}

/* ── Relance 17/10 14:35 (défi 14:30 de la session 13:15) — tablette 768-991 px : les 2 boutons du haut (« Nous contacter » +
   « Comment ça marche ») demandaient 428 px pour une colonne de 385 px en français → empilés, alors qu'en anglais ils tenaient
   côte à côte. Écart 32 → 12 px et marge intérieure 28 → 20 px en tablette seulement : 376 px, côte à côte dans les 2 langues.
   Taille du texte et hauteur des boutons inchangées ; téléphone (empilés, pleine largeur) et ordinateur non touchés. ── */
@media (min-width:768px) and (max-width:991px){
  html body .wrap-button.mt-3.center-mobile{column-gap:12px!important}
  html body .wrap-button.mt-3.center-mobile>a.button{padding-left:20px!important;padding-right:20px!important}
}

/* ── Relance 17/10 14:45 (défi de la session 13:41 + case 10:45) — titre de l'accueil : « Signez votre / document / de synthèse /
   INPI en ligne » tenait sur 4 lignes avec « document » seul, de 360 à 1199 px (en 38, 52 et 46 px), et l'anglais sur 4 lignes à 768-820
   (mesuré par audit-relance-2026-10-17/1315/accueil-titre.mjs). Lignes équilibrées partout ; 34 px au téléphone, 40 px de 768 à 1199,
   comme les titres des formalités et de l'Aide. Ordinateur large inchangé. ── */
html body section.hero.home h1{text-wrap:balance}
@media (max-width:767px){ html body section.hero.home h1.dsp-2xl{font-size:34px!important;line-height:1.15!important} }
/* 768-1199 : 40 px partout (une seule taille en FR et en EN). Entre 768 et 899, la colonne du titre ne fait que 348-400 px à côté de la
   carte « Déposez votre document » : le français y reste sur 4 lignes quelle que soit la taille (mesuré de 46 à 36 px, accueil-tailles.mjs),
   en suivant les groupes de sens ; l'anglais, lui, passe de 4 à 3 lignes. De 900 à 1199 : 2-3 lignes sans mot seul dans les 2 langues. */
@media (min-width:768px) and (max-width:1199px){ html body section.hero.home h1.dsp-2xl{font-size:40px!important;line-height:1.15!important} }

/* ── Relance 17/10 15:05 (défi 14:55 de la session 13:15) — accueil, tablette 768-899 px : colonne du titre 348 px à côté de la carte
   animée → « Signez votre / document / de synthèse / INPI en ligne » sur 4 lignes en français (36 à 46 px essayés, aucun ne suffit).
   Colonne du texte 57 % (au lieu de 50 %) et carte sans son décalage de 56 px dans sa colonne : titre sur 3 lignes à 768-820 px
   (2 lignes de 860 à 899), carte 281 px au lieu de 292 à 768 (−4 %, texte de la carte lisible, capture regardée). Dès 900 px : inchangé. ── */
@media (min-width:768px) and (max-width:899px){
  html body .hero.home .wrapper-col>.col-6:first-child{flex:0 0 57%!important;width:57%!important;max-width:57%!important}
  html body .hero.home .wrapper-col>.col-6:last-child{flex:1 1 0!important;width:auto!important;max-width:none!important;min-width:0!important}
  html body .hero.home .padding-image-home{padding-left:0!important}
}
/* … et au téléphone (< 768 px), en français seulement : le titre équilibré (text-wrap:balance) laissait « document » seul sur une ligne
   de 320 à 375 px. « pretty » donne « Signez votre / document de / synthèse INPI / en ligne » : 0 mot seul de 320 à 480 px en FR.
   L'anglais garde balance (pretty y laisserait « summary » seul à 320-340 px). Mesure : audit-relance-2026-10-17/1341/h1-wrap.mjs. */
@media (max-width:767px){html[lang^="fr"] body h1.dsp-2xl{text-wrap:pretty!important}}
/* ── Relance 17/10 15:15 — Garanties au téléphone (< 768 px) : la colonne du haut démarrait à 44 px (conteneur centré 95 % + 15 px de marge
   intérieure, même cause que la section des questions de l'Aide) et le titre en 38 px coupait « Our / commitments » sur 2 lignes jusqu'à 390 px
   (« Nos / garanties » à 320). Colonne sur le bord de 20 px comme le reste du site + titre en 34 px comme celui de l'accueil :
   1 ligne de 360 à 600 px en FR + EN (seul 320 px EN reste sur 2 lignes). Seule page à utiliser section.hero.features. ── */
@media (max-width:767px){
  html body section.hero.features>.container-medium{max-width:none!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
  html body section.hero.features h1.dsp-2xl{font-size:34px!important}
}

/* ── Relance 17/10 15:25 (défi de la session 13:41) — Garanties : la page commençait plus bas que les autres (fil d'Ariane à 224 px du haut
   à 1280 contre 176 pour Aide et Comment ça marche ; 144 contre 120 au téléphone), soit 48 px de vide en plus sous l'en-tête
   (mesuré par audit-relance-2026-10-17/1315/haut.mjs). Même départ que les autres pages du site. Titre et fil restent CENTRÉS :
   page de présentation, comme Tarif (règle du 17/10 08:05). ── */
@media (min-width:992px){ html body section.section.hero.features{padding-top:176px!important} }
@media (max-width:767px){ html body section.section.hero.features{padding-top:120px!important} }

/* ── Relance 17/10 15:40 (défi 15:30 de la session 13:15) — Tarif : fil d'Ariane « Accueil › Tarif » centré (pages.py), et départ du haut
   aligné sur Garanties et Aide : 152 → 176 px dès 992 px, 144 → 120 px au téléphone (768-991 : 144 px, déjà égal). Mesure : 1341/haut-tarif.mjs. ── */
@media (min-width:992px){html body section.hero-section-pricing{padding-top:176px!important}}
@media (max-width:767px){html body section.hero-section-pricing{padding-top:120px!important}}

/* ── Relance 17/10 15:50 (défi de la session 13:41) — cartes de prix en anglais : le « € » était réduit à 60 % du chiffre ET placé devant
   (« €19.90 »), ce qui le fait lire comme un exposant raté. En anglais le symbole précède le montant à la même taille (Stripe, Apple,
   Qonto EN). Taille du chiffre et montant inchangés ; le français garde « 19,90 € TTC » (symbole après, plus petit). ── */
html[lang="en"] body .fpt-amount > .fpt-amount-sym:first-child{margin-right:1px}
/* Relance 17/10 16:05 (défi de la session 13:41) — une seule règle dans les 2 langues : le « € » est à la taille du chiffre partout sur le
   site (accueil FR + EN, textes, récapitulatifs ; mesuré par euro-fr.mjs) sauf ici, où les cartes de Tarif en français le réduisaient
   à 60 % (13,2 px pour 22). Même rendu que l'accueil : « 19,90 € TTC », « TTC » restant plus petit. Montant inchangé. */
html body .fpt-amount > .fpt-amount-sym{font-size:inherit!important;vertical-align:baseline!important}

/* ── Relance 17/10 16:15 (défi 16:10 de la session 13:15) — Tarif : « Tarif affiché », « Inclus », « Sur mesure » à la place d'un montant
   étaient en 22 px / 500 (19 px au téléphone), exactement comme le nom de la carte juste au-dessus : on lisait deux titres de suite.
   Mot et montant inchangés ; seul le style : 16 px, bleu du site, posé sur la même ligne de base que « 19,90 € » dans une rangée de même
   hauteur (34 px) → les boutons des 4 cartes restent alignés. ── */
html body .fpt-amount.fpt-amount-texte .fpt-amount-num{font-size:16px!important;font-weight:600!important;color:#1e3f8f!important;letter-spacing:0!important}
html body .fpt-amount.fpt-amount-texte .fpt-amount-sym:empty{display:none!important}

/* ── Relance 17/10 16:45 (défi 16:35 de la session 13:15) — Tarif au téléphone (< 768 px, cartes l'une sous l'autre) : les 4 boutons
   avaient la largeur de leur texte (134 à 249 px), centrés à des largeurs différentes ; à 360 px en anglais « Sign my business closure »
   (249 px) DÉBORDAIT de sa carte (232 px de contenu). Boutons pleine largeur de la carte, comme les grilles de prix de Stripe au téléphone,
   retour à la ligne permis. Tablette et ordinateur inchangés (côte à côte, largeur du texte). Mesure : 1341/boutons-tarif.mjs. ── */
@media (max-width:767px){
  html body .fpt-card a.fpt-btn{width:100%!important;max-width:100%!important;box-sizing:border-box!important;white-space:normal!important;text-align:center!important;justify-content:center!important;padding-left:16px!important;padding-right:16px!important}
}

/* ── Relance 17/10 17:00 (défi 16:50 de la session 13:41) — Tarif en tablette (768-991 px, cartes 2 par 2) : « Sign my business closure »
   (249 px) ne gardait que 6 px de marge dans sa carte de 262 px à 768 en anglais (14 px à 800) ; mesuré par 1315/boutons-tablette.mjs.
   Même pleine largeur qu'au téléphone (bloc 16:45) jusqu'à 991 px ; à partir de 992, la carte fait 372 px et plus, marge ≥ 62 px. ── */
@media (min-width:768px) and (max-width:991px){
  html body .fpt-card a.fpt-btn{width:100%!important;max-width:100%!important;box-sizing:border-box!important;white-space:normal!important;text-align:center!important;justify-content:center!important;padding-left:16px!important;padding-right:16px!important}
}

/* ── Relance 17/10 17:20 (défi 17:15 de la session 13:41) — Tarif : la carte « Recommandé » a un contour de 2 px contre 1 px pour les
   autres ; avec la même marge intérieure (24 px), son contenu partait 1 px plus loin du bord et ses boutons pleine largeur faisaient 2 px
   de moins (228 contre 230 à 360 px), mesuré FR + EN de 360 à 991 px (1315/carte-reco.mjs). Marge intérieure réduite d'1 px de chaque
   côté : contenu et boutons alignés au pixel d'une carte à l'autre. ── */
html body div.fpt-card.card.fpt-recommended{padding-left:calc(24px - 1px)!important;padding-right:calc(24px - 1px)!important}   /* div.fpt-card.card.fpt-recommended (l. ~502) impose 24 px : même spécificité + html body */

/* ── Relance 17/10 19:35 (défi 19:20 de la session 13:41) — liens DANS UNE PHRASE sans soulignement au repos : 62 sur 78 pages (FR + EN),
   tous des « a.link-blue » dans 6 paragraphes : « Pas encore votre document ? Voici où le trouver », « Source : … », « À lire aussi : … »
   (6 formalités), le petit texte sous le prix et la note du comparatif (Tarif), « Rien reçu après 10 minutes ? » (Ce que vous recevez).
   Le bleu des liens ne se distingue du texte qu'à 2,38:1 (seuil WCAG 1.4.1 : 3:1) → souligné au repos, trait fin, même décalage
   (4 px) que l'état survolé déjà en place (trait 2 px) pour qu'il n'y ait pas de saut. Mesure : tests/liens-phrase.mjs. ── */
html body p:is(.pas-encore,.ia-source,.liens-utiles,.text-tag,.compare-note,.me-rien-recu) a.link-blue{text-decoration:underline!important;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:currentColor}

/* ── Relance 17/10 20:10 (défi 20:00 de la session 13:41) — « À lire aussi / Read also » des 6 formalités au téléphone : 3 liens CENTRÉS
   à des retraits différents (FR : 1 par ligne, x = 124 / 92 / 119 ; EN : 2 puis 1), l'intitulé collé au 1er lien — ce n'est plus une
   phrase. Sous 768 px : petite liste alignée à gauche (comme le reste des pages de contenu au téléphone), intitulé seul sur sa ligne,
   un lien par ligne, zone tactile ≥ 44 px, séparateurs « · » cachés. Ordinateur et tablette inchangés (phrase centrée). ── */
@media (max-width:767px){
  html body p.liens-utiles{text-align:left!important;line-height:1.5!important}
  html body p.liens-utiles > span[aria-hidden]{display:none!important}
  html body p.liens-utiles a.link-blue{display:block!important;width:fit-content;padding:10px 0;margin:0!important}
  html body p.liens-utiles a.link-blue:first-of-type{margin-top:4px!important}
}

/* ── Relance 17/10 20:40 — virgule lue par les lecteurs d'écran devant chaque « · » caché (finitions-site.py) : invisible et sans place. ── */
html body .sep-lu{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}

/* ── Relance 17/10 21:05 (défi 20:50 de la session 13:15) — virgules lues par le lecteur d'écran (bloc 20:40) : 2 endroits les perdaient.
   1) Au téléphone (≤ 560 px), le séparateur de la ligne de prix et de « Format attendu… » est en display:none (pour empiler les lignes)
      → sa virgule invisible disparaissait aussi : « …TTC Paiement unique… » lu d'une traite. Corrigé dans finitions-site.py (la virgule
      est posée AVANT le span.hp-sep) ; l'essai en CSS (séparateur masqué visuellement) a été abandonné : il décalait la page.
   2) « Pourquoi ? » du pied de page : le « · » ajouté en ::before entrait dans le nom du lien (« · Pourquoi ? »). Texte de
      remplacement vide pour ce contenu (syntaxe content: "…" / "") : affiché, plus lu. ── */
/* (21:50) règle fusionnée dans la règle d’origine de .pied-pourquoi::before (≈ l. 1104) : elle rendait l’ancienne déclaration morte (css/doublons.mjs) */

/* ── Relance 17/10 21:20 (tests/nom-lien.mjs) — la flèche décorative du lien « Signer mon document de synthèse » du glossaire (FR + EN)
   entrait dans le nom lu (« Signer mon document de synthèse → »). Affichée, plus lue : texte de remplacement vide. ── */
/* (21:50) règle fusionnée dans la règle d’origine de .gl-signer-lien::after (≈ l. 1275) */

/* ── Relance 17/10 21:40 (défi 21:35 de la session 13:41) — ligne « © 2026 ClairSign · Service indépendant… à l'INPI · Pourquoi ? » :
   le 1er point (span.sep) a 2,2 px de chaque côté (une espace de la ligne), le 2e (::before du lien) en avait 6,2 avant (espace + marge
   de 4 px du lien) et 5,2 après (marge .4em du ::before) — mesuré FR + EN, 390 et 1280 (1315/points-copyright.mjs). Même écart partout :
   plus de marge à gauche du lien, et après le point une marge égale à une espace (.17em à 13 px = 2,2 px). ── */
html body a.pied-pourquoi{margin-left:0!important}
html body a.pied-pourquoi::before{margin-right:.17em!important}

/* ===== Relance 17/10 23:10 — défi 22:45 de la session 20:18 : « 1er écran utile » des articles au téléphone =====
   Mesuré à 390×844 (audit-relance-2026-10-17/2030/premier-ecran.mjs) : 13 articles sur 39 avaient encore leur 1er intertitre sous l'écran,
   8 d'entre eux de 7 px seulement. Les écarts de l'en-tête sont ceux de l'ordinateur : date → filet 24 px + filet → En bref 32 px,
   En bref → sommaire 32 px, sommaire → 1er intertitre 48 px. Au téléphone : 16 + 24, 24, 32 (écarts toujours plus grands que l'interligne).
   L'encadré « Déjà à l'étape de signature ? » (classe saut-etape, posée par copier-contenus.py) redit le lien « Étape 3 » du sommaire : caché ici. */
@media (max-width:767px){
  html body article.article .article-meta{padding-bottom:16px!important;margin-bottom:24px!important}
  html body article.article .tldr{margin-bottom:24px!important}
  html body article.article .toc{margin-bottom:32px!important}
  html body article.article .toc + h2{margin-top:32px!important}
  html body article.article .info-box.saut-etape{display:none!important}
}

/* ===== Relance 17/10 23:30 — défi 22:50 de la session 13:41 : 22 règles de survol (20 sélecteurs mesurés « collants » après un tap
   au téléphone, survol-cascade.mjs MOBILE=1 TAP=1, + 2 de la même famille : .lien-copier décalage, onda neutralisée) rangées SUR PLACE
   dans @media (hover:hover) — même ordre dans le fichier, donc rien ne change à la souris. 2 règles « survol + clavier » coupées en deux :
   la partie :focus-visible reste valable partout. Aucun de ces effets n'a de sens au doigt (couleur, soulèvement, flèche qui glisse =
   « ceci se clique ») : après un tap ils restaient affichés jusqu'au toucher suivant. 2e passe : 2 règles que les premières masquaient
   (details.ex-synthese summary:hover, .pd-sommaire a:hover) rangées de même. ===== */

/* ===== Relance 18/10 00:30 — défi 23:40 de la session 20:18 : maquettes des pages formalité au téléphone =====
   m-t1 (création, comptes annuels), m-t3 (cessation), m-t4 (transfert) : carrés au haut et au bas transparents. Essai 00:15 = recadrer haut ET
   bas → le titre suivant (« Pourquoi signer… ») se retrouvait à 10-21 px du dessin contre 71 px sous lui (tests/espacement.mjs 390 : 4 × E1),
   alors que les autres titres de la page ont 64 à 139 px au-dessus : le blanc du bas EST l'écart entre deux parties, on le garde.
   Recadrage sous 768 px du HAUT seulement (vide transparent au-dessus du dessin, + 8 px sur 1000 pour l'ombre). m-t2 est déjà pleine. */
@media (max-width:767px){
  html body:has(p.formalite-format) img[src$="/m-t1.webp"], html body:has(p.formalite-format) img[src="assets/m-t1.webp"], html body:has(p.formalite-format) img[src$="/m-t1-en.webp"], html body:has(p.formalite-format) img[src="assets/m-t1-en.webp"]{height:auto!important;aspect-ratio:1000/956!important;object-fit:cover!important;object-position:50% 100%!important}   /* 44 px de vide transparent retirés en haut (sur 1000) */
  html body:has(p.formalite-format) img[src$="/m-t3.webp"], html body:has(p.formalite-format) img[src="assets/m-t3.webp"], html body:has(p.formalite-format) img[src$="/m-t3-en.webp"], html body:has(p.formalite-format) img[src="assets/m-t3-en.webp"]{height:auto!important;aspect-ratio:1000/950!important;object-fit:cover!important;object-position:50% 100%!important}   /* 50 px de vide transparent retirés en haut (sur 1000) */
  html body:has(p.formalite-format) img[src$="/m-t4.webp"], html body:has(p.formalite-format) img[src="assets/m-t4.webp"], html body:has(p.formalite-format) img[src$="/m-t4-en.webp"], html body:has(p.formalite-format) img[src="assets/m-t4-en.webp"]{height:auto!important;aspect-ratio:1000/916!important;object-fit:cover!important;object-position:50% 100%!important}   /* 84 px de vide transparent retirés en haut (sur 1000) */
}

/* Relance 18/10 09:45 — Ce que vous recevez : l’expéditeur du mail, juste au-dessus de « Rien reçu après 10 minutes ? » (même encadré, 8 px d’écart) */
.me-mail .me-expediteur{margin-top:14px}.me-mail .me-expediteur+.me-rien-recu{margin-top:8px}
.me-mail .me-expediteur strong{overflow-wrap:anywhere}

/* ===== Relance 18/10 03:45 — étiquettes de formalité de l'accueil devenues des liens (finitions-site.py) : même aspect au repos,
   pas de soulignement, contour au clavier comme les autres boutons ; le survol (déjà dans @media (hover:hover)) tient enfin sa promesse ===== */
html body .logos-home a.logo-home.logo-texte{text-decoration:none!important;cursor:pointer}
html body .logos-home a.logo-home.logo-texte:focus-visible{outline:2px solid #3966cd;outline-offset:2px;border-color:#3966cd;color:#3966cd!important}

/* ===== Relance 18/10 18:40 — étiquette « In French: » devant les 3 liens juridiques des pages anglaises (finitions-site.py) :
   même taille, même ligne et même couleur que les liens qu'elle annonce (mesuré : 14 px contre 13, posée 12 px plus haut au
   téléphone, plus foncée sur Connexion), un peu atténuée, jamais coupée, aucun survol (ce n'est pas un lien) ===== */
html body .pied-langue-fr{display:inline-flex;align-items:center;align-self:center;font-size:13px!important;line-height:inherit;white-space:nowrap;opacity:.72;cursor:default}
@media (max-width:480px){html body div.alohi---main-style-guide--wrap-left-last-footer .pied-langue-fr{min-height:44px}}
html body .cx-liens .pied-langue-fr{color:#5a6275}
html body span > .pied-langue-fr{line-height:1.4!important;align-self:flex-start}   /* pied court des pages de contenu (parent flex, liens à 1,4 d'interligne + 13 px de marge) : même ligne de texte que les liens */

/* ===== Relance 18/10 19:05 — traduction anglaise sous les libellés français des schémas de l'écran « Signature » (en.py, pages anglaises
   seulement) : petite, en italique, gris lisible (≥ 4,5:1 sur le fond du schéma), collée au libellé qu'elle traduit ===== */
html body .ot-maquette p.otm-en{margin:0 0 12px!important;font-size:12.5px!important;line-height:1.4!important;font-style:italic;color:#5a6275!important}
html body .ot-maquette p.otm-etiquette:has(+ p.otm-en){margin-bottom:2px!important}
html body .ot-maquette .otm-depot + p.otm-en{margin:8px 0 0!important;text-align:center}

/* Relance 18/10 19:20 — lien DANS UNE PHRASE (classe .lien-phrase posée par finitions-site.py) : en ligne, sans la zone tactile
   de 44 px des liens seuls (règle « a.link-blue » plus haut), sinon sa ligne passe à 34-44 px au milieu de lignes de 22-24 px.
   WCAG 2.5.8 exempte les liens dans une phrase. Contrôle : tests/lignes-liens.mjs. */
html body a.link-blue.lien-phrase{display:inline!important;min-height:0!important;align-items:normal}

/* ===== Relance 18/10 19:20 — Aide : la photo de « conseillère » (banque d'images) devient une fenêtre de messagerie sobre (pages.py,
   figure.aide-conv-fil) : carte blanche, en-tête pictogramme mail + « Aide ClairSign », bulle du client à gauche, notre réponse à droite.
   Mêmes proportions à toutes les largeurs (bulles dans le flux, plus de position absolue sur une photo). ===== */
html body figure.aide-conv.aide-conv-fil{max-width:420px!important;margin:0 auto!important;padding:0 0 18px!important;background:#fff;border:1px solid #dde2ea;border-radius:16px;box-shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px rgba(16,24,40,.06);overflow:hidden}
html body figure.aide-conv-fil .aide-conv-entete{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#f6f8fd;border-bottom:1px solid #e6eaf1;margin:0 0 18px}
html body figure.aide-conv-fil .aide-conv-entete img{width:28px;height:28px;flex:none}
html body figure.aide-conv-fil .aide-conv-entete span{display:flex;flex-direction:column;line-height:1.3;text-align:left}
html body figure.aide-conv-fil .aide-conv-entete b{font-size:15px;font-weight:600;color:#1d2433}
html body figure.aide-conv-fil .aide-conv-entete small{font-size:13px;color:#5a6478}
html body figure.aide-conv-fil .aide-bulle{position:static!important;inset:auto!important;width:fit-content;max-width:82%!important;font-size:15px!important;text-align:left}
html body figure.aide-conv-fil .aide-bulle-q{margin:0 auto 10px 18px!important;background:#f1f4f9!important;color:#1d2433!important;box-shadow:none!important}
html body figure.aide-conv-fil .aide-bulle-r{margin:0 18px 0 auto!important}

/* ===== Relance 18/10 20:05 — accueil : la carte « Une question ? » de la scène du haut devient un vrai lien (aide.html#contact),
   avec survol et focus clavier ; la maquette « Propriétés de la signature » se montre aussi au téléphone, pleine largeur, sans rognage. ===== */
html body a.scene-equipe{text-decoration:none;color:inherit;cursor:pointer;transition:box-shadow .2s ease,transform .2s ease}
html body a.scene-equipe:hover{box-shadow:0 2px 4px rgba(15,27,51,.10),0 14px 32px rgba(15,27,51,.16);transform:translateY(-2px)}
html body a.scene-equipe:hover b{color:#3966cd}
html body a.scene-equipe:focus-visible{outline:2px solid #3966cd;outline-offset:3px}
@media (max-width:767px){
  html body .wrapper-col.z-index .card-why.image{min-height:0;height:auto;padding:0;overflow:hidden}
  html body .wrapper-col.z-index .card-why.image img.image-card-why{height:auto;width:100%;max-width:400px;margin:0 auto;display:block;object-fit:contain}
}

/* ===== Relance 18/10 20:05 — Garanties : la photo d'un inconnu au téléphone (banque d'images) devient la vraie maquette du parcours
   (ordinateur + téléphone, m-plateformes), centrée sur fond clair ; les 2 cartes se posent sur la maquette à l'ordinateur,
   sous elle au téléphone (jamais par-dessus l'écran du parcours). ===== */
html body section.bandeau-flottant:has(.bandeau-produit-cadre){background:#f4f7fc;padding:56px 24px!important;display:flex;justify-content:center}
html body .bandeau-produit-cadre{position:relative;width:100%;max-width:760px;margin:0 auto}
html body .bandeau-produit-cadre>img.bandeau-produit{display:block;width:100%;height:auto;border-radius:16px}
html body .bandeau-produit-cadre>.cf-1{left:-56px;top:12%;right:auto;bottom:auto}
html body .bandeau-produit-cadre>.cf-2{right:-56px;bottom:10%;left:auto;top:auto}
@media (max-width:991px){html body .bandeau-produit-cadre>.cf-1{left:12px}html body .bandeau-produit-cadre>.cf-2{right:12px}}
@media (max-width:767px){
  html body section.bandeau-flottant:has(.bandeau-produit-cadre){padding:32px 16px!important}
  html body .bandeau-produit-cadre{display:flex;flex-direction:column;gap:10px}
  html body .bandeau-produit-cadre>.carte-flottante{position:static!important;align-self:flex-start;margin:0}
  html body .bandeau-produit-cadre>.cf-1{margin-top:6px}
}

/* ── Relance 18/10 20:30 — Ce que vous recevez : « Vérifiez votre signature vous-même » (texte à gauche, maquette à droite) ── */
.vs-grille{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.vs-maquette{max-width:440px;justify-self:center;width:100%}
.vs-maquette img{border:0;box-shadow:none;border-radius:16px}
@media (max-width:767px){.vs-grille{grid-template-columns:1fr}.vs-maquette{max-width:400px}}

/* ── Relance 18/10 20:30 — Accueil, scène du haut (défis 19:20 et 20:05) ──
   1) la carte « Une question ? » chevauchait le bas de la carte centrale (21 à 65 px selon la largeur, mesuré) :
      la carte centrale fait 400 px de haut et reste centrée dans la scène → la poser 12 px sous elle.
   2) les titres des 2 cartes latérales étaient coupés par la carte centrale (« Recevez le docume… ») → masqués,
      ils réapparaissent quand la carte passe au centre. */
@media (min-width:992px){
  .scene>.scene-equipe{bottom:auto;top:calc(50% + 212px)}
  .scene-carte figcaption{transition:opacity .3s ease}
  .scene-carte.is-prev figcaption,.scene-carte.is-next figcaption{opacity:0}
}

/* ── Relance 18/10 21:00 — sous-titre du haut de l’accueil (FR + EN) ──
   Mesuré : 1re ligne à 615 px, 2e à 500, 3e à 269 (à 1280) — l’œil lit un bloc en escalier qui frôle la scène.
   Lignes équilibrées : 3 lignes de même longueur, rien d’autre ne change (taille, couleur, marges). */
.section.hero.home h1 + p{text-wrap:balance}

/* ── Relance 19/10 09:00 — Garanties ≥ 768 px : la grille des 6 tuiles était posée en absolu (top 32 px) dans un haut de page de 176 px
   de marge basse ; 197 px de haut → elle débordait de 53 px dans la bande bleue (moitié blanc, moitié bleu) et la maquette tombait 3 px
   sous elle (mesuré 1280/1440). La grille rentre dans le haut de page, la bande bleue commence sous elle. ── */
@media (min-width:768px){
  html body .section.hero.features .wrap-key-features{position:static!important;margin-top:32px}
  html body .section.hero.features:has(.wrap-key-features){padding-bottom:64px!important}
}

/* ── Relance 19/10 09:30 — Garanties ≥ 768 px : le sous-menu (Simplicité, Sécurité…) est posé en absolu 92 px (74 px sous 992 px)
   sous un repère collant ; au repos il tombait 116 px sous la bande bleue et CHEVAUCHAIT de 9 px le titre « Un service simple »
   (mesuré 1024 → 1440, FR + EN ; 9 px d'air seulement à 768-991). Repère remonté : sous-menu 40 px sous la bande, étiquette « Simplicité »
   48 px sous le sous-menu (elle était cachée dessous) ; position collée inchangée (juste sous l'en-tête). Une seule couleur de fond derrière la maquette : la bande
   passe en blanc, seul reste le cadre bleu clair dessiné dans l'image (avant : #e9eef8 posé sur #f4f7fc). ── */
html body .bandeau-flottant:has(.bandeau-produit[src*="m-plateformes"]){background:#fff!important}
@media (min-width:768px){
  html body .wrap-sticky-menu-features:has(.sticky-menu-features) > .sticky-element-wrapper{margin-top:-52px!important}
  html body .wrap-sticky-menu-features:has(.sticky-menu-features) .wrap-section-sticky > section:first-child{padding-top:187px!important}
}
@media (min-width:768px) and (max-width:991px){
  html body .wrap-sticky-menu-features:has(.sticky-menu-features) > .sticky-element-wrapper{margin-top:-34px!important}
  html body .wrap-sticky-menu-features:has(.sticky-menu-features) .wrap-section-sticky > section:first-child{padding-top:169px!important}
}
/* Pilule bleue « Signer mon document · dès 19,90 € TTC » (téléphone / fenêtre étroite) : aucun effet au survol à la souris → même
   bleu foncé que les autres boutons. */
@media (hover:hover){html body .barre-signer:hover{background:var(--accent-fonce)!important}}

/* Relance 19/10 10:30 — survols presque invisibles (mesurés au vrai pointeur, audit-relance-2026-10-19/1030/survol2.mjs) :
   · liens d'aide du parcours (.pc-aide a, ex. « Ce qu'exige l'INPI ») : repos déjà bleu souligné, le survol ne faisait que descendre le trait de 1 px
     (l'épaisseur 2 px de la règle commune ≈ l. 142 ne s'appliquait pas) → bleu foncé + trait 2 px, comme les liens des articles ;
   · « Découvrez comment ça marche » (Mon espace) : le bleu foncé écrit l. 1466 était écrasé par « main p a:hover { color:#3966cd !important } ». */
html body .pc-aide a:hover, html body .pc-aide a:focus-visible { color: #244ba3 !important; text-decoration-thickness: 2px !important; }
html body main.cx .cx-bas a:hover, html body main.cx .cx-bas a:focus-visible { color: #244a9e !important; }

/* ── Relance 19/10 10:45 — pages formalités (ordinateur ≥ 992 px) : la bulle « Une question ? » flottait ~100 px sous la carte dessinée
   (vide transparent sous le dessin, mesuré sur le fichier : contenu jusqu’à 78,3 % de la hauteur pour m-t3, 81,9 % m-t1, 87,7 % m-t4, 99,3 % m-t2).
   Même rattrapage que sur téléphone (§ 15/10 13:40), calé pour laisser 1,5 % d’air sous le dessin ; la bulle reste SOUS la maquette (rien de recouvert, § 15/10 17:10). ── */
@media (min-width:992px){
  html body .hero-section .bandeau-flottant>img[src*="m-t3"]{margin-bottom:-20%}
  html body .hero-section .bandeau-flottant>img[src*="m-t1"]{margin-bottom:-16.5%}
  html body .hero-section .bandeau-flottant>img[src*="m-t4"]{margin-bottom:-10.5%}
}

/* ── Relance 19/10 11:15 — Tarif : les 2 cartes sans prix (« Accompagnement », « Professionnels ») sont retirées (pages.py) ;
   la grille d'origine passait à 4 colonnes dès 1300 px → 2 offres payantes côte à côte, centrées, largeur lisible. */
#fpt-grid.fpt-grid-2{max-width:920px;margin-left:auto;margin-right:auto}
@media (min-width:768px){#fpt-grid.fpt-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px}}

/* ── Relance 19/10 11:15 — page « certificat qualifié » (FR + EN) : ses 3 tableaux de définitions tenaient dans la colonne de lecture
   (672 px) → 1re colonne à 167-186 px (« Signature électronique avancée » sur 4-5 lignes) et 2e colonne à 5 lignes par cellule.
   Au-dessus de 1100 px, ces 3 tableaux seulement (classe posée dans contenus/) s'élargissent à 880 px, centrés sur la colonne.
   (Une largeur plancher générique de la 1re colonne avait été essayée puis retirée : 27 tableaux sur 81 devenaient plus hauts.) */
@media (min-width:1100px){
  html body .article .compare-table.tableau-large{width:880px!important;max-width:none!important;margin-left:calc((100% - 880px) / 2)!important;margin-right:0!important}
  html body .article .compare-table.tableau-large tr>:first-child{width:24%}
}
/* Relance 19/10 11:15 (suite) — Tarif : les 4 questions et « Avant de payer » étaient rentrés de 24 px (bloc 14/10 20:17) pour suivre les 4 cartes
   de prix pleine largeur. Les cartes sont désormais 2, centrées (920 px) : seul le bandeau sombre juste dessous gardait le bord de la page
   (48-1232 contre 72-1208 à 1280) → les 3 blocs pleine largeur partagent le même bord. */
@media (min-width:768px){
  html body .fpt-page + .objections, html body .objections{padding-left:0!important;padding-right:0!important}
  html body .objections + .avant-payer{margin-left:0!important;margin-right:0!important}
}

/* ── Relance 19/10 11:35 — « Blog » anglais marqué FR + dossier de preuve sur Ce que vous recevez ── */
.lien-fr{display:inline-block;margin-left:6px;padding:1px 5px;border:1px solid #cfd6e3;border-radius:4px;font-size:10px;font-weight:600;line-height:1.3;letter-spacing:.04em;color:#4a5568;vertical-align:2px}
a:hover > .lien-fr{border-color:currentColor;color:inherit}
.er-preuve{display:flex;align-items:flex-start;gap:16px;margin-top:28px;padding:16px;border:1px solid #dfe4ec;border-radius:12px;background:#fff}
.er-preuve img{flex:0 0 auto;width:96px;height:auto;border:1px solid #e3e7ee;border-radius:6px}
.er-preuve strong{display:block;font-size:15px;line-height:1.4;color:#0d182e}
.er-preuve ul{margin:8px 0 0;padding-left:18px;font-size:14px;line-height:1.5;color:#2d3748}
.er-preuve li+li{margin-top:2px}
.er-preuve small{display:block;margin-top:10px;font-size:13px;line-height:1.5;color:#4a5568}
@media (max-width:479px){.er-preuve img{width:72px}}

/* ═══ Relance 19/10 12:10 — dossier de preuve cliquable (Ce que vous recevez) ═══
   La vignette ouvre l'exemple PDF du dossier (comme l'exemple de document signé) ; survol = léger relèvement, comme les cartes.
   Le lien texte en dessous porte le nom pour le clavier et les lecteurs d'écran (la vignette est hors tabulation). */
.er-preuve-vignette{flex:0 0 auto;display:block;border-radius:6px;transition:transform .18s ease,box-shadow .18s ease}
.er-preuve-vignette:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(13,24,46,.12)}
.er-preuve-vignette img{display:block}
.er-preuve-lien{display:inline-block;margin-top:8px;font-size:14px;line-height:1.5;font-weight:600}
@media (prefers-reduced-motion:reduce){.er-preuve-vignette{transition:none}.er-preuve-vignette:hover{transform:none}}
/* Relance 19/10 12:10 (défi) — /tarif : « Prix exact avant paiement » en bleu gras, sans lien, se lisait comme un lien
   (même bleu que « Suivez notre guide ») → couleur du prix voisin (19,90 €), on garde la taille plus discrète. */
html body .fpt-amount.fpt-amount-texte .fpt-amount-num{color:#0f1b33!important}
/* /tarif : la ligne « Vous ne savez pas quel document… » flottait seule, ~108 px sous le bandeau sombre et ~105 px au-dessus
   des petites cartes (2 marges mt-3 imbriquées + un bloc d'onglets vide) → rapprochée des petites cartes qu'elle introduit. */
html body .wrapper-col.center-vertical.mt-3:has(> .wrapper-col > .cta-pricing){margin-top:40px!important;margin-bottom:28px!important}
html body .wrapper-col.center-vertical.mt-3 > .wrapper-col.mt-3:has(> .cta-pricing){margin-top:0!important}
html body .wrapper-col.center-vertical.mt-3:has(> .wrapper-col > .cta-pricing) > .price-tab:has(> .price-tabs-content:empty){display:none!important}
/* /ce-que-vous-recevez au téléphone : vignette 72 px à gauche = texte serré sur ~210 px, 335 px de haut → vignette au-dessus, texte pleine largeur. */
@media (max-width:479px){.er-preuve{flex-direction:column;gap:12px}.er-preuve img{width:88px}}
/* ── Relance 19/10 13:00 — en-tête « pilule » au chargement sur le glossaire et les 39 articles (header.ct-entete).
   Tout le site ouvre sur la pilule blanche flottante (y 16, 76 px de haut, coins 999 px, ombre douce) puis passe à la barre
   pleine largeur au défilement (body.defile, posé par mouvement.js). Les pages copiées ouvraient directement sur la barre plate
   collée en haut. Même pilule, mesurée sur /aide : débord de 14 px (≥ 1440), 16 px (1280-1439), 6 px (992-1279) autour de la
   colonne du menu. Hauteur dans le flux identique en haut et en défilant (padding 18 px compensé par 18 px de marge en moins) : rien ne saute. */
@media (min-width:992px){
  html body header.ct-entete{margin-bottom:116px}   /* fil d’Ariane à 176 px du haut, comme /aide, /garanties, /tarif (il était à 84 px, 11 px sous la barre) */
  html body:not(.defile) header.ct-entete{background:transparent!important;border-bottom-color:transparent!important;padding-top:18px;margin-bottom:98px}
  html body header.ct-entete .ct-barre{position:relative;isolation:isolate}
  html body:not(.defile) header.ct-entete .ct-barre::before{content:"";position:absolute;inset:-2px -6px;z-index:-1;border-radius:999px;background:#fff;
    box-shadow:0 1px 2px rgba(15,27,51,.06),0 6px 18px rgba(15,27,51,.06)}
}
@media (min-width:1280px){html body:not(.defile) header.ct-entete .ct-barre::before{inset:-2px -16px}}
@media (min-width:1440px){html body:not(.defile) header.ct-entete .ct-barre::before{inset:-2px -14px}}
/* Même relance, sous 992 px (barre plate partout) : le fil d’Ariane des articles était à 3-28 px sous la barre (3 px à 768),
   celui des pages du site à 46-79 px (/aide : lien à 144 px de 768 à 991, 120 px en dessous) → même hauteur. */
@media (min-width:768px) and (max-width:991px){html body header.ct-entete + .breadcrumbs{margin-top:82px!important}}   /* relance 19/10 14:00 : en-tête de 74 px comme le site sur toute la plage → un seul réglage */
@media (min-width:480px) and (max-width:767px){html body header.ct-entete + .breadcrumbs{margin-top:58px!important}}
@media (max-width:479px){html body header.ct-entete + .breadcrumbs{margin-top:33px!important}}
/* ── Relance 19/10 13:30 — en-tête des pages copiées (glossaire, certificat, marché public, articles) = en-tête du site, au pixel ──
   Mesuré contre /aide (audit-relance-2026-10-19/1330/) : le site range logo | menu | actions en « space-between » avec 32 px de plus
   à gauche du menu (6 px de 992 à 1279) ; les pages copiées centraient le menu (1440 : menu 18 px trop à gauche en français,
   écart différent en anglais) ; à droite 20 px entre « Se connecter » et le bouton au lieu de 16 (langue et connexion 4 px trop à
   gauche) ; de 992 à 1279 liens en 15 px espacés de 18 au lieu de 14 px espacés de 10. Même règle, même rendu, FR et EN. */
@media (min-width:992px){
  html body header.ct-entete .ct-menu{margin:0 auto!important}
  html body header.ct-entete .ct-actions{gap:16px}
  html body header.ct-entete .ct-actions .langue{margin-right:8px}
  html body header.ct-entete .ct-menu a{gap:8px}   /* étiquette « FR » de « Blog » en anglais à 8 + 6 px du mot, comme le menu du site */
}
@media (min-width:1280px){html body header.ct-entete .ct-logo{margin-right:32px}}
@media (min-width:992px) and (max-width:1279px){
  html body header.ct-entete .ct-logo{margin-right:6px}
  html body header.ct-entete .ct-menu{gap:10px}
  html body header.ct-entete .ct-menu a{font-size:14px;padding:0 6px;margin:0}
  html body header.ct-entete .ct-actions{gap:5px}
  html body header.ct-entete .ct-connexion{font-size:14px;padding:0 9.6px}
  html body header.ct-entete .ct-actions .ct-bouton{padding:0 13px!important}   /* le bouton du site a 1 px de bord de chaque côté : 12 + 1 */
}
/* Même relance — en défilant, le site garde ses liens à 32 px du haut dans une bande blanche de 92 px ; les pages copiées passaient
   à une barre de 74 px, liens à 14 px (l'en-tête « sautait » de 18 px en passant de l'Aide au Glossaire) → même bande, même hauteur. */
@media (min-width:992px){html body.defile header.ct-entete{padding-top:18px;padding-bottom:1px;margin-bottom:97px}}   /* bande 0-92 px comme /aide */
/* Même relance (AMELIORATIONS-CONTINUES « 2 boutons identiques ») — dès que la barre du haut montre « Signer mon document » (≥ 861 px),
   celui de l'encadré « En bref » des 39 articles était le même bouton plein, sur le même écran → bouton secondaire (contour bleu, fond
   blanc), comme « Comment ça marche » à côté de « Nous contacter » sur /aide ; même survol que ce bouton (fond #edf2fc, relevé de 2 px).
   Au téléphone la barre n'a pas de bouton : celui de l'encadré reste plein, c'est le seul de l'écran.
   (relance 19/10 14:00 : la barre n'a plus de bouton sous 992 px → seuil 861 → 992) */
@media (min-width:992px){
  html body .tldr a.en-bref-bouton{background:#fff;color:#3966cd!important;box-shadow:inset 0 0 0 1px #3966cd;transition:background-color .2s ease,transform .2s ease}
  html body .tldr a.en-bref-bouton:hover,html body .tldr a.en-bref-bouton:focus-visible{background:#edf2fc;color:#3966cd!important;transform:translateY(-2px)}
}
/* ── Relance 19/10 14:00 — en-tête des pages copiées (glossaire, certificat, marché public, 39 articles) sous 992 px = celui du site ──
   Mesuré contre /aide (audit-relance-2026-10-19/1400/pad.mjs) : de 861 à 991 px les pages copiées montraient le menu complet sur
   2 lignes (« Comment ça / marche », « Se / connecter ») quand le site passe au bouton menu dès 991 → seuils 860 → 991 (contenu.css,
   mouvement.css, contenu.js). Le site garde une bande de 74 px, rond du menu 50 px à 12 px du haut, 6 px entre langue et rond, et
   cale son contenu à « marge de l'en-tête + 5 % + 20 px » : 15 px de marge de 768 à 991, 20 px de 480 à 767, pleine largeur
   (25 px) sous 480. Les pages copiées étaient à 16 px du bord de 768 à 860 (72 sur le site), bande de 64 px. Même géométrie ici. */
@media (max-width:991px){
  html body header.ct-entete .ct-barre{height:74px!important;max-width:none!important;box-sizing:border-box}
  html body header.ct-entete .ct-actions{gap:6px!important}
  html body header.ct-entete .ct-actions .langue{margin-right:0!important}
  html body header.ct-entete .ct-burger{width:50px;height:50px}
}
@media (min-width:768px) and (max-width:991px){html body header.ct-entete .ct-barre{padding:0 calc(33.5px + 5%)!important}}
@media (min-width:480px) and (max-width:767px){html body header.ct-entete .ct-barre{padding:0 calc(38px + 5%)!important}}
@media (max-width:479px){html body header.ct-entete .ct-barre{padding:0 25px!important}}
/* Même relance (AMELIORATIONS-CONTINUES « bouton plein du sommaire collant ») — à partir de 1240 px le sommaire collant des 39 articles
   porte une carte « Bloqué à l'étape Signature ? » avec un bouton plein, à l'écran en même temps que « Signer mon document » de la barre
   du haut (collée en défilant) : deux boutons pleins identiques → celui de la carte en secondaire, comme l'encadré « En bref ». */
@media (min-width:992px){
  html body nav.toc-collant a.toc-cta-bouton{background:#fff;color:#3966cd!important;box-shadow:inset 0 0 0 1px #3966cd;transition:background-color .2s ease,transform .2s ease}
  html body nav.toc-collant a.toc-cta-bouton:hover,html body nav.toc-collant a.toc-cta-bouton:focus-visible{background:#edf2fc;color:#3966cd!important;transform:translateY(-2px)}
}
/* Même relance — menu ouvert (bouton rond) des pages copiées : ses liens partaient à 16 px du bord quand le logo, juste au-dessus, est
   à 72-83 px (768-991) ou 62-75 px (480-767) → liste et bouton « Signer mon document » sur la colonne du logo, à toutes les largeurs. */
@media (min-width:768px) and (max-width:991px){html body .ct-menu-tel{padding-left:calc(33.5px + 5%)!important;padding-right:calc(33.5px + 5%)!important}}
@media (min-width:480px) and (max-width:767px){html body .ct-menu-tel{padding-left:calc(38px + 5%)!important;padding-right:calc(38px + 5%)!important}}
@media (max-width:479px){html body .ct-menu-tel{padding-left:25px!important;padding-right:25px!important}}
/* Même relance — sous 992 px, en haut de page, le site pose une ombre douce sous sa bande blanche et n'a le trait gris qu'en défilant ;
   les pages copiées gardaient le trait gris dès l'arrivée → même ombre en haut, trait gris seulement en défilant (largeur du trait
   gardée, transparente, pour que rien ne bouge au passage). */
@media (max-width:991px){
  html body:not(.defile) header.ct-entete{border-bottom-color:transparent!important;box-shadow:0 1px 2px rgba(15,27,51,.06),0 6px 18px rgba(15,27,51,.06)}
}
/* ── Relance 19/10 14:34 — glossaire, certificat, marché public (FR + EN) : leur encadré « En bref » est un div.en-bref, pas un .tldr →
   la règle « bouton secondaire dès 992 px » (13:30 / 14:00) ne les touchait pas : 2 boutons pleins « Signer mon document » sur le même
   écran (barre + encadré, capture audit-relance-2026-10-19/1434/gloss-1280-haut.png). Même traitement que les 39 articles. */
@media (min-width:992px){
  html body article.article .en-bref a.en-bref-bouton{background:#fff;color:#3966cd!important;box-shadow:inset 0 0 0 1px #3966cd;transition:background-color .2s ease,transform .2s ease}
  html body article.article .en-bref a.en-bref-bouton:hover,html body article.article .en-bref a.en-bref-bouton:focus-visible{background:#edf2fc;color:#3966cd!important;transform:translateY(-2px)}
}

/* Relance 19/10 15:10 — carte « Article suivant » en bas des articles (liste continue, Rétention) : un seul choix évident dans la même
   démarche, posé avant « Articles connexes ». Même carte que .related-card (bord 1 px, coins 12 px, pas d’ombre), survol relevé de 2 px. */
article.article nav.article-suivant{margin:48px 0 8px}
article.article nav.article-suivant a{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:16px;padding:20px 24px;border:1px solid var(--bord,#dfe3ea);border-radius:12px;background:#fff;text-decoration:none!important;color:#0b1a33;transition:border-color .2s ease,transform .2s ease,background-color .2s ease}
article.article nav.article-suivant a:hover,article.article nav.article-suivant a:focus-visible{border-color:#3966cd;background:#f7f9fe;transform:translateY(-2px)}
article.article nav.article-suivant .as-etiquette{grid-column:1;font-size:14px;line-height:1.4;color:#4a5568;margin:0 0 4px}
article.article nav.article-suivant .as-titre{grid-column:1;font-size:18px;line-height:1.35;font-weight:600;color:#0b1a33}
article.article nav.article-suivant .as-fleche{grid-column:2;grid-row:1 / span 2;font-size:22px;color:#3966cd;transition:transform .2s ease}
article.article nav.article-suivant a:hover .as-fleche{transform:translateX(3px)}
@media (max-width:480px){article.article nav.article-suivant a{padding:16px 18px}article.article nav.article-suivant .as-titre{font-size:17px}}

/* Relance 19/10 15:10 — défi : (1) « Articles connexes » des articles en 3 colonnes de 213 px dans la colonne de 672 px : titres sur
   3 lignes, textes sur 4 (capture audit-relance-2026-10-19/1510/art-1280-suivant.png) → 2 colonnes de 328 px dès 769 px.
   (2) Tarif : « Inclus aussi : » centré au-dessus d’une liste rangée à gauche (capture 1510/tarif-1280-y400.png) → sur le bord des coches. */
@media (min-width:769px){html body article.article .related-grid{grid-template-columns:1fr 1fr!important}}
html body .fpt-card p.fpt-sublabel{text-align:left}
/* (3) Articles ≥ 768 px : « Encore une question ? » suivi de 3 liens sur la même ligne → le 3e lien passait seul à la ligne, collé
   sous le libellé (capture 1510/art-1280-bas.png). Libellé sur sa ligne, puis les 3 liens ensemble (comme au téléphone). */
@media (min-width:768px){html body .article p.aide-liens>span:first-child{display:block;margin:0 0 6px}}

/* Relance 19/10 15:30 — carte « Article suivant » : durée de lecture du guide suivant sur sa propre ligne, grise, sous le titre ;
   la flèche couvre les 3 lignes (étiquette, titre, durée). */
article.article nav.article-suivant .as-duree{grid-column:1;font-size:14px;line-height:1.4;color:#4a5568;margin:4px 0 0}
article.article nav.article-suivant .as-fleche{grid-row:1 / span 3}
/* Relance 19/10 15:30 — sommaire des CGV (23 articles, 2 colonnes) : numéros dans le texte (list-style inside, copié du site
   d'origine) → texte qui démarre à 322 ou 331 px selon 1 ou 2 chiffres, et 2e ligne repliée SOUS le numéro. Numéros en marge,
   chiffres de même largeur : tous les titres partent du même bord, la 2e ligne s'aligne sur le texte. */
html body details.toc ol:has(a[href="#art-10"]){list-style-position:outside;padding-left:0}
html body details.toc ol:has(a[href="#art-10"])>li{margin-left:2.1em;font-variant-numeric:tabular-nums}

/* Relance 19/10 16:05 (défi) — page introuvable : le champ « Cherchez dans l’Aide » (48 px) et son bouton « Chercher » (50 px :
   hauteur mini de tous les boutons du site) n’avaient pas le même bas → même boîte, même hauteur, un seul bas (mesuré 1280 et 390). */
html body .cx-recherche .cx-btn,html body .cx-recherche input{box-sizing:border-box;height:50px;min-height:50px}   /* 50 = hauteur de tous les boutons du site */
/* Relance 19/10 16:05 (défi) — Aide, arrivée avec une recherche (?q= depuis la page introuvable ou le « Non » d’un guide) :
   le champ était centré → au téléphone la réponse ouverte d’office sortait de l’écran (bas à 852 px sur 780). Le champ se
   place sous la barre du haut (site.js : block « start »), la réponse a toute la hauteur. */
html body .recherche-faq{scroll-margin-top:112px}
@media (max-width:991px){html body .recherche-faq{scroll-margin-top:92px}}
/* Relance 19/10 16:05 (défi) — articles au téléphone : « Article suivant » puis 6 cartes « Articles connexes » empilées
   (~790 px avant le pied de page) → 4 cartes au téléphone ; les 2 autres restent dans la page (maillage interne). */
@media (max-width:767px){html body .related-grid>a:nth-child(n+5){display:none!important}}
/* Relance 19/10 16:30 (liste continue « Rétention ») — lien « Tous les guides par démarche » sous les articles connexes :
   lien texte bleu (pas un 3e bouton), aligné sur le bord gauche des cartes, survol souligné comme les liens du site. */
html body .related .related-tous{margin:20px 0 0;font-size:15px;line-height:1.5}
html body .related .related-tous a{color:#3966cd;font-weight:600;text-decoration:none;transition:color .15s ease}
html body .related .related-tous a:hover{color:#1f45a8;text-decoration:underline;text-underline-offset:3px}
html body .related .related-tous a:focus-visible{outline:2px solid #3966cd;outline-offset:3px;border-radius:4px}

/* ── Relance 19/10 17:20 — arrivée sur une rubrique de « Guides par démarche » (lien « Tous les guides « … » » des articles) :
   à 96 px, le titre de la rubrique se posait à 4 px sous la barre de 92 px (ordinateur) → 24 px d'air, comme le glossaire. */
@media (min-width:992px){html body .pd-groupe{scroll-margin-top:116px}}
/* Relance 19/10 17:20 — fil d'Ariane de l'Aide (gabarit) : « Accueil » souligné en permanence et SANS effet au survol (couleur
   #3966cd au repos ET au survol) → soulignement léger au repos, plus foncé et plein au survol, comme les liens du site. */
html body .alohi---main-style-guide--breadcrumb .alohi---main-style-guide--link-breadcrumb{text-decoration:underline;text-decoration-color:rgba(57,102,205,.35);text-underline-offset:3px;transition:color .15s ease,text-decoration-color .15s ease}
html body .alohi---main-style-guide--breadcrumb .alohi---main-style-guide--link-breadcrumb:hover{color:#1f45a8!important;text-decoration-color:currentColor}
/* Relance 19/10 17:45 — tableaux élargis des articles (classe tableau-large, posée par copier-contenus.py sur 9 guides) : à partir de 1 240 px
   le sommaire collant (nav.toc-collant, fixe dans la marge de droite) recouvrait les 84 px de droite du tableau (mesuré
   audit-relance-2026-10-19/1745/chevauche.mjs, 36 cas) → sur les pages qui ont ce sommaire, le tableau ne gagne de la place que vers la GAUCHE :
   bord droit = celui du texte, 104 px de plus à gauche (776 px). La page « certificat » (sans sommaire collant) garde 880 px centrés. */
@media (min-width:1240px){
  html body:has(.toc-collant) .article .compare-table.tableau-large{width:calc(100% + 104px)!important;margin-left:-104px!important;margin-right:0!important}
}
/* Relance 19/10 17:45 — Mon espace : « Changer d’adresse » passait seul sur sa ligne, SOUS le titre et AU-DESSUS de l’adresse qu’il change
   (colonne de 430 px à toutes les largeurs) → posé au bout de la ligne « Adresse : … · 1 document », comme le lien « Modifier » de Stripe. */
html body main.cx .cx-qui-ligne .cx-lien{padding:0;margin-left:0;font-size:inherit;white-space:nowrap;vertical-align:baseline}

/* Relance 19/10 18:25 (défi) — Aide, maquette de l'étape 1 : les 2 points réels de l'écran « Signature » au lieu de 3 barres grises.
   Un point par ligne, séparés par un filet fin comme une liste de l'écran officiel ; la traduction anglaise (.otm-en) colle à son point. */
html body .ot-maquette-sommaire p.otm-point{margin:0!important;padding:10px 0!important;border-top:1px solid #e3e8f0;font-size:14.5px!important;font-weight:600;color:#1f2533!important}
html body .ot-maquette-sommaire p.otm-titre + p.otm-point{border-top:0;padding-top:4px!important}
html body .ot-maquette-sommaire p.otm-point:has(+ p.otm-en){padding-bottom:2px!important}
html body .ot-maquette-sommaire p.otm-point + p.otm-en{margin:0 0 0!important;padding-bottom:10px}

/* Relance 19/10 18:52 — cartes de service (Comment ça marche, Aide) au téléphone : 3 cartes empilées et centrées,
   icône au-dessus du titre (≈ 105-150 px chacune pour une phrase) → une rangée par carte, icône à gauche, titre + phrase
   à droite, comme les réglages iOS ou les « avantages » de Qonto. Au-delà de 767 px : inchangé (3 colonnes centrées). */
@media (max-width:767px){
  html body .mcp-usp-card{display:grid!important;grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:start;text-align:left!important}
  html body .mcp-usp-card .mcp-usp-ico{grid-column:1;grid-row:1 / span 2;margin:2px 0 0!important}
  html body .mcp-usp-card > p{grid-column:2;text-align:left!important;text-wrap:pretty}
  html body .mcp-usp-card .mcp-usp-titre{font-size:18px!important}
}

/* Relance 19/10 18:52 (liste continue, case du 19/10 17:45) — Mon espace au téléphone, après « Accéder » : le formulaire entier
   (champ, bouton, explication, « ou », « Signer un nouveau document », « Nouveau ? ») restait au-dessus de la liste, ≈ 470 px à
   faire défiler pour voir son document. La ligne « Adresse : … · 1 document · Changer d’adresse » de la liste dit déjà qui est
   connecté → on ne garde que le logo et « Mon espace ». « Changer d’adresse » retire cx-reduit (espace.js l.123) : tout revient. */
@media (max-width:767px){
  html body main.cx .cx-carte.cx-reduit > :not(.cx-logo):not(.cx-titre){display:none!important}
  html body main.cx .cx-carte.cx-reduit{padding-bottom:20px!important}
  html body main.cx .cx-carte.cx-reduit .cx-titre{margin-bottom:0!important}
}

/* Relance 19/10 20:04 (défi) — réponses des questions fréquentes à 1280 : une ligne courait sur 1 020 px (≈ 150 caractères),
   l'œil perd la ligne suivante. Texte limité à ~72 caractères (comme les articles) ; question, « Copier le lien » et « Oui / Non » inchangés. */
[faq="answer"] > p { max-width: 72ch; }

/* Relance 19/10 20:26 — noms de fichiers cités (« _signe.pdf », « preuve_ ») : Aide + Ce que vous recevez, comme dans un explorateur de fichiers */
html body code.nom-fichier{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;font-weight:500;padding:1px 5px;border-radius:5px;background:#f1f3f7;border:1px solid #e1e5ec;color:#0f1b33;white-space:nowrap}

/* Relance 19/10 21:10 — survol des boutons PLEINS dans un article (glossaire, certificat, marché public, 39 articles) : la règle générique
   « .article a:hover { color:#3966cd !important } » (bloc 23, survol des liens) teignait aussi le texte du bouton « Signer mon document »
   en bleu sur son fond bleu foncé : contraste 1,37:1 au survol (mesuré : audit-relance-2026-10-19/2110/survol-contraste.mjs).
   Le texte d'un bouton plein reste blanc. Au-delà de 992 px, le bouton de l'encadré « En bref » est secondaire (fond blanc) : sa règle,
   plus précise, garde le texte bleu. */
@media (hover:hover){html body .article a.cta-btn:hover,html body .article a.mid-cta-btn:hover{color:#fff!important}}
html body .article a.cta-btn:focus-visible,html body .article a.mid-cta-btn:focus-visible{color:#fff!important}
@media (hover:hover) and (max-width:991px){html body .article a.en-bref-bouton:hover{color:#fff!important}}
@media (max-width:991px){html body .article a.en-bref-bouton:focus-visible{color:#fff!important}}

/* Relance 19/10 21:24 — pieds de page SOMBRES (#0f1b33) : au survol, la règle générale « .ct-pied a:hover / .aide-pied-lien:hover
   { color:#3966cd } » (bloc des survols, l. 141) teignait les liens en bleu sur bleu marine : 3,23:1 (glossaire, certificat,
   marché public, 39 articles FR + EN, « Nous écrire » de toutes les pages). Vu par tests/survol-focus-cadre.mjs. Survol = blanc + souligné. */
@media (hover:hover){
  html body .ct-pied a:hover,html body .ct-pied a:focus-visible,html body .aide-pied-lien:hover{color:#fff!important;text-decoration:underline!important;text-underline-offset:4px;text-decoration-thickness:2px}
}

/* Relance 19/10 21:24 — formalités au téléphone : les 6 cartes « Pourquoi signer … ici ? » empilées, icône 56 px au-dessus du
   titre, 243-315 px chacune (≈ 1 550 px pour 6 phrases) → une rangée par carte, icône 40 px à gauche, titre + phrase à droite,
   comme les cartes de service de Comment ça marche et de l’Aide (bloc « Relance 19/10 18:52 »). Au-delà de 767 px : inchangé. */
@media (max-width:767px){
  html body .fm-pourquoi .card .wrap-card-content .wrap-card-content{display:grid!important;grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:4px;align-items:start;text-align:left}
  html body .fm-pourquoi .card .wrap-card-content .wrap-card-content > img.icon{grid-column:1;grid-row:1 / span 2;width:40px!important;height:40px!important;margin:2px 0 0!important}
  html body .fm-pourquoi .card .wrap-card-content .wrap-card-content > h3{grid-column:2;margin:0!important;font-size:18px!important;line-height:1.3}
  html body .fm-pourquoi .card .wrap-card-content .wrap-card-content > div{grid-column:2;text-wrap:pretty}
  html body .fm-pourquoi .card .wrap-card-parent-content{padding:20px!important}
}

/* Relance 19/10 22:00 — pied de page : lien de la page en cours (aria-current, posé par finitions-site.py) en blanc gras, sans
   soulignement ni survol, comme le repère du menu du haut. Pieds clair et sombre : le pied du site est sombre partout (#0f1b33 / thème). */
html body a.pied-courant,html body a.pied-courant:hover,html body a.pied-courant:focus-visible{color:#fff!important;font-weight:600!important;text-decoration:none!important;opacity:1!important;cursor:default;transform:none!important}
/* Relance 19/10 22:00 — Ce que vous recevez : repère « Voir l’e-mail en entier ↓ » au-dessus des 3 gestes, seulement quand les gestes
   passent avant la maquette du mail (< 992 px, formalites.css order:-1) ; la cible s’arrête sous la barre du haut. */
.me-voir-mail{display:none}
@media (max-width:991px){html body .me-gestes .me-voir-mail{display:inline-flex;align-items:center;min-height:44px;margin:-16px 0 12px;font-size:16px}}
#me-image{scroll-margin-top:96px}

/* Relance 20/10 09:57 — barre « Signer » des formalités : elle reprend le libellé du bouton de la page (commun.py pied(libelle=…)).
   Quand le prix ne tient plus (« dès 19,… » à 320 px), site.js pose .sans-prix : le prix passe sous le libellé, jamais tronqué. */
@media (max-width:767px){html body .barre-signer.sans-prix{flex-direction:column;gap:1px;line-height:1.15;padding-top:7px;padding-bottom:7px}
 html body .barre-signer.sans-prix span{flex:none;font-size:13px;overflow:visible}}
/* (même passage, défi) en anglais le libellé est plus long : à 390 px le prix disparaissait → il passe SOUS le libellé (2 lignes dans les
   54 px), comme la barre d’achat d’Apple ; il n’est jamais ni coupé ni retiré. */
/* Relance 20/10 09:57 — nom de fichier encadré suivi d’un point / d’une virgule (aide-guides.py : span.nf-groupe) : le point reste collé
   au cadre et ne part jamais seul à la ligne ; cadre resserré à droite pour qu’on ne lise plus « _signe.pdf . ». */
html body .nf-groupe{white-space:nowrap}
html body code.nom-fichier.nf-ponct{padding-right:2px;margin-right:0}

/* ── Relance 20/10 10:26 — ligne « Montant exact affiché avant de payer » sous la rangée de paiement du pied sombre ── */
/* contain:inline-size : la phrase ne compte pas dans la largeur de la rangée (sans lui, la colonne de faits à gauche tombait de 539 à 184 px à 1280, 34 px à 1024) */
.paiement-logos.sur-fonce{align-content:flex-start}
.paiement-logos.sur-fonce .pl-montant{flex-basis:100%;contain:inline-size;margin:0!important;font-size:13px;line-height:1.45;color:#c6cbd8;max-width:none}
@media (max-width:767px){.paiement-logos.sur-fonce .pl-montant{text-align:inherit}}
/* Relance 20/10 10:26 — barre « Signer » des articles (pilule .sticky-mobile-cta) : prix coupé à 320-360 px → contenu.js pose .sans-prix,
   le prix passe sous le libellé (comme .barre-signer.sans-prix, bloc 09:57), dans les mêmes 54 px. */
@media (max-width:768px){html body .sticky-mobile-cta.sans-prix{flex-direction:column-reverse;gap:1px!important;padding-top:7px!important;padding-bottom:7px!important}
 html body .sticky-mobile-cta.sans-prix .sticky-mobile-cta-info{overflow:visible}
 html body .sticky-mobile-cta.sans-prix .sticky-mobile-cta-price{font-size:13px!important;line-height:1.15!important;overflow:visible}
 html body .sticky-mobile-cta.sans-prix a.sticky-mobile-cta-btn{line-height:1.15!important}}

/* Relance 20/10 11:00 — paragraphe court « en poème » au téléphone : retour à la ligne ordinaire, posé par mouvement.js (data-poeme)
   seulement quand il remplit mieux la colonne sans laisser un mot seul (tests/poeme.mjs). */
[data-poeme]{text-wrap:wrap!important}
/* Relance 20/10 11:00 — « Encore une question ? » des 39 articles au téléphone : le lien est en display:flex (bloc) et l'espace + la virgule
   lue qui le suivent ouvraient une ligne VIDE de 25 px sous chaque question sauf la dernière (69 px au lieu de 44, mesuré
   audit-relance-2026-10-20/1100/aide-q.mjs). La question devient elle-même un conteneur flex : l'espace seul n'y fait plus de ligne. */
@media (max-width:767px){html body .article .aide-liens .aide-q{display:flex;flex-wrap:wrap;align-items:center}}

/* Relance 20/10 12:00 — rangée « Paiement sécurisé » du pied des 48 pages de contenu (articles, glossaire, certificat, marché public) :
   même colonne que la grille, la phrase de faits et la ligne du bas (870 / 1020 / 1184 px), au lieu du bord de l'écran (24 px à 1280, mesuré). */
html body .ct-pied .ct-paiement{max-width:1100px;margin:4px auto 0}
html body .ct-pied .ct-paiement .paiement-logos{margin-top:14px}
@media (min-width:861px){html body .ct-pied .ct-paiement{max-width:1184px!important;margin-left:auto!important;margin-right:auto!important}}
@media (min-width:1280px) and (max-width:1439px){html body .ct-pied .ct-paiement{max-width:1020px!important}}
@media (min-width:992px) and (max-width:1279px){html body .ct-pied .ct-paiement{max-width:870px!important}}

/* Relance 20/10 12:20 — cartes « Pourquoi signer … ici ? » des 6 formalités, de 768 à 1279 px : titres en 22 px dans des cartes de
   179-225 px → 2 lignes sur 2 titres sur 3 (338 cas mesurés, audit-relance-2026-10-20/1220/titres-lignes.mjs). Titres raccourcis
   (« Aide si ça bloque », « No FranceConnect+ », « Help if you’re stuck ») + 19 px dans cette plage, comme les cartes de Stripe. */
@media (min-width:768px) and (max-width:1279px){
  html body .fm-pourquoi .card h3.dsp-md{font-size:19px!important;line-height:1.3}
}
/* phrase des cartes : pas de mot seul en dernière ligne (« ici. » seul dans la carte de la cessation à 1024 px) */
@media (min-width:768px){html body .fm-pourquoi .card .wrap-card-content > div{text-wrap:pretty}}
/* de 768 à 991 px, 3 cartes de 179 px par rangée restaient trop étroites (titres sur 2 lignes une fois sur deux) → 2 par rangée */
@media (min-width:768px) and (max-width:991px){
  html body .fm-pourquoi .col-4-wrap{flex:1 1 50%!important;max-width:50%!important}
}
/* Relance 20/10 12:20 — pied des pages du gabarit au téléphone : 73 px de fond vide sous « … · Pourquoi ? » = colonne col-3 VIDE (20 px)
   + écart de 32 px de la colonne flexible, + 14 px de zone tactile du lien. Colonne vide retirée (bas de page : ~35 px sous le dernier lien). */
@media (max-width:767px){
  html body .alohi---main-style-guide--wrapper-col.invert > .alohi---main-style-guide--col-3:empty{display:none}
  html body:has(.barre-signer) .alohi---main-style-guide--footer-copyright,html body .alohi---main-style-guide--footer-copyright{padding-bottom:44px!important}   /* 32 → 44 : le texte dépasse de 11 px sous sa boîte */
}

/* ── Relance 20/10 13:00 (« Défi ClairSign — 12:53 ») — réserves de titres de cartes devenues inutiles.
   Depuis la relance 12:00, mouvement.js donne à chaque titre la hauteur du plus haut titre de SA rangée (≥ 768 px). Les anciennes
   réserves fixes (3 lignes : cartes du blog / contenus-21 ; 2 lignes : grille des formalités / accueil-05 ; 2,6-2,7 em : cartes
   « Voir aussi » des formalités et cartes de l'Aide) s'ajoutaient par-dessus : 166 titres d'une seule ligne gardaient 1 à 2 lignes
   VIDES entre le titre et le texte (Garanties, section sombre : texte 57 px sous un titre d'une ligne, à 1280 FR + EN).
   Mesure : audit-relance-2026-10-20/1253/reserve-titres.mjs (166 → 0). Mêmes sélecteurs, plus loin dans le fichier = ils l'emportent ;
   SANS !important, sinon la hauteur posée par mouvement.js (style en ligne) serait écrasée. */
@media (min-width:768px){
  html body .w-dyn-item a.card h3,
  html body .grille-formalites .w-dyn-item a.card h3,
  .card.admin-panel .card-title,
  html body .card.admin-panel .card-title,
  .carte-simple .dsp-md, .carte-simple h3, .carte-simple h3.dsp-md{min-height:0}
}
.carte-simple .dsp-md, .carte-simple h3{min-height:0}
/* Lien au milieu d'une phrase, au téléphone : la règle « zone tactile 44 px » (bloc ≤ 480 px plus haut) le passait en inline-flex
   de 44 px → la ligne qui le porte doublait de hauteur (Tarif : « … Guichet unique ? / Suivez notre guide pas à pas. » avec 20 px
   de vide entre les 2 lignes, FR + EN). Ici : lien en ligne, zone tactile gardée par un rembourrage qui ne pousse pas la ligne. */
@media (max-width:480px){
  html body .cta-pricing a.link-blue{display:inline;min-height:0;padding-block:10px;margin-block:-10px}
}

/* relance 08/11 (Tarif 390, mesuré) : titres des 4 petites cartes décalés à gauche (13 px à gauche contre 18-55 px à droite) → vraiment centrés */
@media (max-width:479px){html body .card.carte-petite .carte-petite-titre{display:block!important;width:100%;text-align:center!important}}

/* relance 08/11 (Garanties au téléphone, mesuré WebKit 390) : cartes du carrousel « Comment votre document est protégé » de hauteur fixe,
   vide sous le texte de 26 à 111 px selon la longueur du texte → contenu centré verticalement dans la carte (le vide se répartit haut/bas) */
@media (max-width:991px){html body #security .slider-grey .bg_image>.card{display:flex!important;flex-direction:column;justify-content:center}html body #security .slider-grey .bg_image>.card>.wrap-card-parent-content{height:auto!important}}

/* 08/11 — mode vitrine (vitrine.py ajoute la classe « vitrine » sur <html>) : pas de logos de paiement ni d'espace client tant qu'on ne vend pas
   (risque Google Ads confirmé : « promesse d'achat impossible »). Retirer la classe = tout revient. */
html.vitrine .paiement-logos,html.vitrine a[href="connexion.html"],html.vitrine a[href="../connexion.html"],html.vitrine a[href="/connexion"],html.vitrine a[href="/en/connexion"]{display:none!important}