/* ═══════════════════════════════════════════════════════════════════════════════════════════════════ Articles du blog + pages légales : le MÊME système graphique que le reste du site (voir systeme.css). Chargé en dernier sur ces pages. 1 police · 1 bleu d'action · arrondis 8 / 12 px · 1 ombre discrète. ═══════════════════════════════════════════════════════════════════════════════════════════════════ */ :root{--encre:#0f1b33;--texte:#2b3345;--gris:#5a6275;--fond-2:#f5f7fa;--fond-3:#eef2f7;--bord:#dfe4ec; --accent:#3966cd;--accent-fonce:#2c52a8;--accent-clair:#edf2fc;--t2:34px;--t3:22px;--t4:17px} @media (max-width:767px){:root{--t2:27px;--t3:19px;--t4:16px}} html body,body *:not(svg):not(path){font-family:'Plus Jakarta Sans',system-ui,sans-serif!important} body{background:#fff!important;color:var(--texte)!important} a{color:var(--accent)} :focus-visible{outline:3px solid var(--accent)!important;outline-offset:3px} /* ── En-tête commun ── */ .ct-entete{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--bord)} .ct-barre{max-width:1100px;margin:0 auto;height:72px;padding:0 24px;display:flex;align-items:center;gap:24px} .ct-logo img{display:block;height:30px;width:auto} .ct-menu{display:flex;gap:28px;margin:0 auto} .ct-menu a{color:var(--encre);text-decoration:none;font-size:15px} .ct-menu a:hover{color:var(--accent)} .ct-actions{display:flex;align-items:center;gap:20px} .ct-connexion{color:var(--encre);font-weight:600;text-decoration:none;font-size:15px} .ct-bouton{background:var(--accent);color:#fff!important;text-decoration:none;border-radius:999px;padding:11px 22px;font-size:15px;font-weight:600} .ct-bouton:hover{background:var(--accent-fonce)} @media (max-width:991px){.ct-menu,.ct-connexion{display:none}.ct-barre{justify-content:space-between;height:64px;padding:0 16px}} /* ── Contenu : titres sur l'échelle du site (T2 titre d'article, T3 intertitre, T4 sous-titre) ── */ .article h1,.container h1{font-size:var(--t2)!important;line-height:1.2!important;font-weight:500!important;color:var(--encre)!important;letter-spacing:-.01em} .article h2,.container h2{font-size:var(--t3)!important;line-height:1.3!important;font-weight:500!important;color:var(--encre)!important} .article h3,.container h3{font-size:var(--t4)!important;line-height:1.4!important;font-weight:600!important;color:var(--encre)!important} .article p,.article li,.container p,.container li{color:var(--texte)!important;font-size:17px;line-height:1.7} .article-meta,.breadcrumbs,.breadcrumbs a{color:var(--gris)!important} .container{background:#fff} /* encadrés : à plat, bordure fine, bleu d'action seulement */ .tldr,.info-box,.toc,.callout{background:var(--fond-2)!important;border:1px solid var(--bord)!important;border-left:4px solid var(--accent)!important;border-radius:12px!important;box-shadow:none!important} .tldr-label,.toc-title{color:var(--accent)!important} .mid-cta,.cta-box{background:var(--accent-clair)!important;background-image:none!important;border:1px solid #d3e0f7!important;border-radius:12px!important;box-shadow:none!important} .mid-cta-icon{background:var(--accent)!important} .mid-cta-title,.cta-box h2,.cta-box h3{color:var(--encre)!important} .article a.mid-cta-btn,.cta-btn,a.cta-btn{background:var(--accent)!important;color:#fff!important;border-radius:999px!important;box-shadow:none!important} @media (hover:hover){.article a.mid-cta-btn:hover,.cta-btn:hover{background:var(--accent-fonce)!important}} .compare-table th{background:var(--fond-3)!important;color:var(--encre)!important} .compare-table td,.compare-table th{border-color:var(--bord)!important} .faq-item{border-color:var(--bord)!important;border-radius:12px!important;box-shadow:none!important} .related-card{border:1px solid var(--bord)!important;border-radius:12px!important;box-shadow:none!important} .sticky-mobile-cta{background:#fff!important;border-top:1px solid var(--bord)!important;box-shadow:0 -4px 16px rgba(15,27,51,.06)!important} .sticky-mobile-cta-btn{background:var(--accent)!important;border-radius:999px!important} /* ── Pied commun ── */ .ct-pied{background:var(--encre);color:#c6cbd8;padding:56px 24px 28px;margin-top:64px} .ct-pied-grille{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:32px} .ct-pied strong{display:block;color:#fff;font-size:15px;margin-bottom:14px} .ct-pied a{display:block;color:#fff;text-decoration:none;font-size:14px;line-height:1.4;margin:0 0 12px} @media (hover:hover){.ct-pied a:hover{text-decoration:underline}} .ct-pied p{font-size:14px;line-height:1.6;margin:12px 0 0;color:#c6cbd8} .ct-pied-marque img{height:30px;width:auto} .ct-aide a{display:flex;align-items:center;gap:10px;font-weight:600;min-height:44px;margin:0} .ct-aide img{width:28px;height:28px;background:#fff;border-radius:8px;padding:3px} .ct-faits{max-width:1100px;margin:36px auto 0!important;padding-top:20px;border-top:1px solid #2a3654;font-size:13px!important} .ct-bas{max-width:1100px;margin:16px auto 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px} .ct-bas span:last-child{display:flex;gap:20px} .ct-bas a{display:inline;margin:0;font-size:13px} @media (max-width:860px){.ct-pied-grille{grid-template-columns:1fr 1fr}.ct-pied-marque{grid-column:1/-1}} @media (max-width:479px){.ct-pied-grille{grid-template-columns:1fr}} .toc li,.toc a{font-size:15px!important} /* Sommaire collant (grands écrans seulement : il se place dans la marge de droite, apparaît sous le sommaire d'origine) */ .toc-collant{display:none} @media (min-width:1240px){ .toc-collant{display:block;position:fixed;top:104px;left:calc(50% + 356px);width:240px;max-height:calc(100vh - 140px);overflow:auto; opacity:0;visibility:hidden;transition:opacity .2s;border-left:1px solid var(--bord);padding:4px 0 4px 18px} .toc-collant.visible{opacity:1;visibility:visible} .toc-collant-titre{margin:0 0 10px!important;font-size:13px!important;font-weight:600;color:var(--gris)!important;text-transform:uppercase;letter-spacing:.06em} .toc-collant ol{list-style:none;margin:0;padding:0} .toc-collant li{margin:0 0 10px;font-size:14px!important;line-height:1.4} .toc-collant a{color:var(--gris);text-decoration:none} .toc-collant a:hover{color:var(--accent)} .toc-collant a.actif{color:var(--accent);font-weight:600} } @media (prefers-reduced-motion:reduce){.toc-collant{transition:none}} @media (max-width:480px){.ct-barre{gap:10px}.ct-logo img{height:26px}.ct-actions{gap:10px}.ct-bouton{padding:10px 16px;font-size:14px}} /* Boutons des articles sur l'échelle du site (relevé du 11/10 : 5 variantes de 45 à 75 px) : 50 px · 16 px · 600, une seule ligne */ .article a.mid-cta-btn,.cta-btn,a.cta-btn,.sticky-mobile-cta-btn{display:inline-flex!important;align-items:center;justify-content:center;min-height:50px!important;height:auto!important; padding:0 24px!important;font-size:16px!important;font-weight:600!important;line-height:1.2!important;white-space:nowrap!important} @media (max-width:480px){.article a.mid-cta-btn,.cta-btn,a.cta-btn{white-space:normal!important;text-align:center;padding:12px 20px!important}} .ct-bouton{display:inline-flex;align-items:center;height:44px;padding:0 20px!important;font-size:15px!important;box-sizing:border-box} /* citations sourcées (page « certificat qualifié ») : guillemets français avec espaces insécables, encadré pour le message du Guichet unique */ q{quotes:"\00AB\00A0" "\00A0\00BB"} .article blockquote{margin:20px 0;padding:18px 22px;background:var(--fond-2);border:1px solid var(--bord);border-left:4px solid var(--accent);border-radius:12px;font-size:18px;line-height:1.6;color:var(--encre)} .article blockquote[cite*="procedures.inpi.fr"]::after{content:"Guichet unique de l’INPI, écran « Signature »";display:block;margin-top:10px;font-size:14px;color:var(--gris)} /* 11/10 (B) : seulement la citation de l’écran ; les citations de la FAQ INPI (faq/890) portent leur propre source */ /* ── Relance 11/10 : menu téléphone des pages de contenu (articles, pages légales, Ressources) + mêmes repères que le reste du site ── */ .ct-logo img{height:26px} .ct-burger{display:none} .ct-menu-tel[hidden]{display:none!important} @media (max-width:991px){ /* relance 19/10 14:00 : bouton menu jusqu’à 991 px comme le reste du site (de 861 à 991 le menu complet passait sur 2 lignes) */ .ct-logo img{height:22px} .ct-actions .ct-bouton{display:none} .ct-burger{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:48px;height:48px;border-radius:50%;border:0;background:#0d182e;cursor:pointer;padding:0;transition:background-color .2s ease,transform .2s ease} @media (hover:hover){.ct-burger:hover{background:#3966cd}} .ct-burger:focus-visible{outline:3px solid #3966cd;outline-offset:3px} .ct-burger span{display:block;width:20px;height:2px;border-radius:2px;background:#fff;transition:transform .2s ease,opacity .2s ease} .ct-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .ct-burger[aria-expanded="true"] span:nth-child(2){opacity:0} .ct-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .ct-menu-tel{display:flex;flex-direction:column;padding:8px 16px 20px;background:#fff;border-top:1px solid var(--bord);box-shadow:0 12px 24px rgba(13,24,46,.08)} .ct-menu-tel a{display:flex;align-items:center;min-height:56px;border-bottom:1px solid var(--bord);color:var(--encre);text-decoration:none;font-size:18px;transition:color .2s ease} @media (hover:hover){.ct-menu-tel a:hover{color:#3966cd}} .ct-menu-tel a.ct-bouton{display:flex;justify-content:center;border-bottom:0;margin-top:16px;height:50px;font-size:16px!important;color:#fff!important} } /* fil d'Ariane : liens bleus comme sur les pages formalités, page en cours en gris */ .breadcrumbs{font-size:14px!important;line-height:1.6} .breadcrumbs a{color:#3966cd!important;text-decoration:none} @media (hover:hover){.breadcrumbs a:hover{text-decoration:underline;text-underline-offset:3px}} /* bande blanche de 80 px sous le pied (téléphone) : la réserve de la barre « Signer » collante passe DANS le pied sombre ; page sans barre collante = aucune réserve */ @media (max-width:768px){ body{padding-bottom:0!important} body:has(.sticky-mobile-cta) .ct-pied{padding-bottom:108px} } /* liens légaux du pied : jamais un libellé coupé (« Conditions de | vente ») */ .ct-bas span:last-child{flex-wrap:wrap;gap:8px 20px} .ct-bas a{white-space:nowrap} /* Glossaire : index des 15 mots de A à Z (2 colonnes) + bouton « Retour aux 15 mots » (relance 11/10) */ .glossaire-index{scroll-margin-top:96px} .glossaire-index ol{columns:2;column-gap:32px;margin:12px 0 0;padding-left:1.4em} .glossaire-index li{break-inside:avoid;margin:0 0 8px} .glossaire-index a{color:#3966cd;text-decoration:none} .glossaire-index a:hover{text-decoration:underline;text-underline-offset:3px} @media (max-width:560px){.glossaire-index ol{columns:1}} .article h3[id],.article h2[id]{scroll-margin-top:96px} .retour-haut{position:fixed;right:24px;bottom:24px;z-index:40;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:#fff;color:#0f1b33!important;border:1px solid var(--bord);box-shadow:0 6px 18px rgba(13,24,46,.12);font-size:15px;font-weight:600;text-decoration:none; opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility .2s,background-color .2s ease,color .2s ease} .retour-haut.visible{opacity:1;visibility:visible;transform:none} .retour-haut:hover{background:#3966cd;color:#fff!important} .retour-haut:focus-visible{outline:3px solid #3966cd;outline-offset:3px} @media (max-width:767px){.retour-haut{right:16px;bottom:16px}} @media (prefers-reduced-motion:reduce){.retour-haut{transition:none}} .glossaire-index ol{list-style:none;padding-left:0} /* ═══════════════════════════════════════════════════════════════════════════════════════════════════ 11/10 audit articles (B, agent) — 39 articles mesurés à 1280 et 390 px (tout.mjs + contrastes.mjs, 4 lots de 10), 6 articles regardés en captures (haut / encadré du milieu / fin + articles liés / pied). Mesures AVANT : 3 encadrés d'action par article (37/39) · encadré bleu 76 px d'air au-dessus du titre, 34 px sous le bouton · mentions « ✓ 19,90 € » 12 px, alignées à gauche sur téléphone · barre « Signer » collante 86 px, sous-texte 12,5 px · cartes connexes : titre ET résumé 17 px, cartes de 272 px, 4 cartes = 3 + 1 seule · 22 cibles < 40 px par article (logo 26 px, « Blog » 34 px, fil d'Ariane 18 px, 16 liens du pied 20 px) · contrastes : « .lose » 2,56:1 (comparatif), « Oui ✓ » vert 3,3:1 (2 articles). ═══════════════════════════════════════════════════════════════════════════════════════════════════ */ /* 1. Un seul encadré d'action au milieu + un en fin d'article : le 3e (bandeau « Bloqué sur le portail INPI ? » posé entre « En bref » et le sommaire) est masqué dès que l'article porte ses 2 .cta-box (37/39). Le comparatif, sans .cta-box, garde le sien. Quand A retire ce bandeau du HTML, cette ligne tombe. */ /* 2. Encadrés bleus : le titre héritait de la marge haute des intertitres (32 px) → même air en haut et en bas */ .cta-box{padding:36px 32px!important} .cta-box h3{margin-top:0!important} @media (max-width:480px){.cta-box{padding:28px 20px!important}} /* mentions sous le bouton : 12 px → 13,5 px, toujours en rangée centrée (téléphone : elles passaient en colonne, à gauche) */ .cta-stats{display:flex!important;flex-direction:row!important;flex-wrap:wrap;justify-content:center;gap:8px 20px!important;margin-top:18px!important} .cta-stats span{font-size:13.5px!important;color:var(--texte)!important;line-height:1.4} .cta-stats svg{color:#15803d!important} /* 3. Barre « Signer » collante (téléphone) : sous-texte 13 px, barre plus basse (86 → ~78 px), bouton 50 px conservé */ @media (max-width:768px){ .article .sticky-mobile-cta{padding:10px 16px!important;gap:12px!important} .article .sticky-mobile-cta-price{font-size:16px!important;font-weight:700!important;color:var(--encre)!important;line-height:1.2!important} .article .sticky-mobile-cta-sub{font-size:13px!important;line-height:1.35!important;color:var(--gris)!important;margin-top:2px} } /* 4. Articles connexes : titre 16 px / 600 et résumé 15 px gris (ils étaient tous deux à 17 px) ; 4 cartes → 2 colonnes */ .related-card{padding:18px 20px!important} .related-card h3{font-size:16px!important;line-height:1.35!important;margin:0 0 8px!important} .related-card p{font-size:15px!important;line-height:1.5!important;color:var(--gris)!important;margin:0!important} @media (min-width:769px){.related-grid:has(> a:nth-child(4):last-child){grid-template-columns:1fr 1fr}} /* 5. Contrastes : cellules « .lose » du comparatif #94a3b8 (2,56:1) → gris du site (6,1:1) ; « Oui ✓ » et « Non ✗ » en style en ligne (#16a34a 3,3:1 · #dc2626 4,8:1) → #15803d (5:1) · #b91c1c (6,5:1) */ .compare-table .lose{color:var(--gris)!important} .article strong[style*="16a34a"]{color:#15803d!important} .article strong[style*="dc2626"]{color:#b91c1c!important} /* 6. Cibles ≥ 44 px sans bouger la mise en page : logo, liens du menu (zone élargie de 8 px de chaque côté), fil d'Ariane (zone étendue en hauteur par marges négatives), liens du pied (44 px de haut, le pied s'allonge de ~12 px par ligne) */ .ct-logo{display:inline-flex;align-items:center;min-height:44px} @media (min-width:861px){.ct-menu a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;margin:0 -8px}} .breadcrumbs a{display:inline-block;padding:13px 5px;margin:-13px -5px} .ct-pied-grille a{display:flex;align-items:center;min-height:44px;margin:0} .ct-pied-marque a{display:inline-flex} .ct-bas a{display:inline-block;padding:13px 0;margin:-13px 0} /* zone de 44 px sans changer l'interligne (vaut aussi pour « Pourquoi ? » dans la ligne ©) */ /* 7. Méta de l'article (« Mis à jour le … · 6 min de lecture ») 13 px → 14 px */ .article-meta{font-size:14px!important} /* 12/10 (B, défi n°6) : la barre collante des 3 pages de contenu (certificat, glossaire, marché public) n'a pas la classe .article → mêmes tailles qu'un article ; et sous 430 px le sous-texte « Signature avancée eIDAS · en quelques minutes » passait sur 2-3 lignes → masqué, le prix et le bouton suffisent. */ .sticky-mobile-cta-price{font-size:16px!important;font-weight:700!important;line-height:1.2!important} .sticky-mobile-cta-sub{font-size:13px!important;line-height:1.35!important;margin-top:2px} @media (max-width:430px){.sticky-mobile-cta-sub{display:none!important}} /* 12/10 (B) : légende de la citation de l'écran « Signature » en anglais (pages /en/ : html[lang=en]) — remplace l'injection