/* ============================================================
   Parapheo, feuille de style commune
   MARQUE : tout ce qui est modifiable pour rebrander est ici.
   ============================================================ */
:root{
  --ink:#0a0a0a;
  --paper:#ffffff;
  --line:#e4e4e4;
  --muted:#767676;
  --soft:#f7f7f7;
  --accent:#0a0a0a;          /* couleur d'accent (noir par défaut) */
  --max:1180px;
  --radius:0px;              /* 0 = angles vifs, 8px pour un rendu plus doux */
  --font:"Helvetica Neue",Helvetica,Arial,"Inter",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}
.eyebrow{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 16px}

/* ============================================================
   EN-TÊTE

   Le problème à résoudre : sur un écran étroit, trois blocs se
   disputaient la même ligne - le logo avec sa signature, le lien
   de connexion, et le bouton principal. Aucun n'ayant le droit de
   disparaître, tous se repliaient sur deux ou trois lignes, et
   l'en-tête devenait un pavé illisible.

   La règle adoptée : PLUS RIEN NE SE COUPE EN DEUX. Tout est en
   « nowrap », et quand la place manque, on retire par ordre
   d'importance décroissante - d'abord la signature sous le nom,
   qui est décorative ; ensuite les mots superflus du bouton ;
   jamais le bouton lui-même, ni l'accès au compte.
   ============================================================ */
.site-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:70px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;min-width:0}
.logo .mark{width:28px;height:28px;flex:0 0 auto;border:1.5px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;font-style:italic}
.logo>span{min-width:0}
.logo b{display:block;font-size:15px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;white-space:nowrap}
.logo span span,.logo .sous{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:1px;white-space:nowrap}
.site-nav{display:flex;align-items:center;gap:30px;flex:0 0 auto}
.site-nav a{font-size:13px;text-decoration:none;color:var(--muted);transition:.15s;white-space:nowrap}
.site-nav a:hover{color:var(--ink)}
/* Entrée de connexion : lisible sans voler la vedette au bouton
   principal, et jamais masquée sur petit écran, contrairement aux
   liens de contenu. Quelqu'un qui cherche à se reconnecter doit la
   trouver sur toutes les pages, y compris depuis un téléphone. */
.site-nav a.lien-connexion{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-weight:600;border-bottom:1px solid var(--ink);padding-bottom:2px}
.site-nav a.lien-connexion:hover{opacity:.6}
.pph-account-icon{position:relative;display:none;width:27px;height:27px;flex:0 0 27px;border:1px solid var(--ink);border-radius:50%}
.pph-account-icon:before{content:"";position:absolute;left:9px;top:5px;width:7px;height:7px;border:1.5px solid currentColor;border-radius:50%;box-sizing:border-box}
.pph-account-icon:after{content:"";position:absolute;left:6px;bottom:4px;width:13px;height:7px;border:1.5px solid currentColor;border-radius:9px 9px 5px 5px;box-sizing:border-box}
.pph-install-trigger{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:7px 10px;border:1px solid var(--line);background:#fff;color:var(--ink);font:700 10px/1 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.pph-install-trigger:hover{border-color:var(--ink);background:var(--soft)}
.pph-install-trigger[hidden]{display:none!important}
.pph-install-icon{position:relative;width:16px;height:16px;flex:0 0 16px;border-bottom:1.5px solid currentColor}
.pph-install-icon:before{content:"";position:absolute;left:7px;top:0;width:1.5px;height:10px;background:currentColor}
.pph-install-icon:after{content:"";position:absolute;left:4px;top:5px;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.pph-install-dialog{width:min(470px,calc(100% - 28px));max-width:none;padding:0;border:0;background:transparent;color:var(--ink)}
.pph-install-dialog::backdrop{background:rgba(0,0,0,.48)}
.pph-install-card{position:relative;background:#fff;border:1px solid var(--ink);padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.pph-install-card h2{font-size:26px;margin:5px 42px 10px 0}.pph-install-intro{color:var(--muted);margin:0 0 18px}
.pph-install-close{position:absolute;right:14px;top:12px;width:38px;height:38px;border:0;background:transparent;font:30px/1 Arial,sans-serif;cursor:pointer}
.pph-install-steps{margin:0 0 22px;padding-left:22px}.pph-install-steps li{padding:5px 0;font-size:14px}
.site-nav .btn{white-space:nowrap}
.pph-tools-menu{position:relative;flex:0 0 auto}
.pph-tools-fallback,.pph-tools-summary{font-size:13px;color:var(--muted);white-space:nowrap;text-decoration:none}
.pph-tools-details{position:relative}
.pph-tools-summary{display:flex;align-items:center;gap:7px;min-height:44px;cursor:pointer;list-style:none;transition:.15s}
.pph-tools-summary::-webkit-details-marker{display:none}
.pph-tools-summary:after{content:"+";font-size:15px;line-height:1;color:var(--muted)}
.pph-tools-details[open] .pph-tools-summary,.pph-tools-summary:hover{color:var(--ink)}
.pph-tools-details[open] .pph-tools-summary:after{content:"−"}
.pph-tools-summary:focus-visible,.pph-tools-panel a:focus-visible{outline:3px solid #315eea;outline-offset:3px}
.pph-tools-short{display:none}
.pph-tools-panel{position:absolute;top:calc(100% + 12px);right:0;width:min(780px,calc(100vw - 32px));max-height:calc(100vh - 100px);overflow:auto;border:1px solid var(--ink);background:#fff;padding:22px;box-shadow:0 18px 48px rgba(0,0,0,.2);color:var(--ink)}
.pph-tools-heading{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding-bottom:15px;border-bottom:1px solid var(--line)}
.pph-tools-heading strong{font-size:17px}.pph-tools-heading span{color:var(--muted);font-size:12.5px;text-align:right}
.pph-tools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:19px 0}
.pph-tools-group h2{margin:0 0 9px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.pph-tools-group a{display:block;padding:7px 8px;margin:0 -8px;color:var(--ink);font-size:13px;line-height:1.25;white-space:normal;text-decoration:none}
.pph-tools-group a:hover,.pph-tools-group a[aria-current="page"]{background:var(--soft)}
.pph-tools-group a[aria-current="page"]{font-weight:800}
.pph-tools-all{display:flex!important;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:44px;box-sizing:border-box;padding:10px 14px;border:1px solid var(--ink);background:var(--ink);color:#fff!important;font-size:11px!important;font-weight:800;line-height:1.35;letter-spacing:.12em;text-align:center;text-transform:uppercase;text-decoration:none;white-space:normal!important;overflow-wrap:anywhere}
.pph-tools-all:hover{background:#fff;color:var(--ink)!important}
.pph-footer-legal{display:flex;gap:18px;flex-wrap:wrap}
body.pph-tools-menu-open .pph-feedback,body.pph-tools-menu-open .pph-consent-manage{opacity:0;visibility:hidden;pointer-events:none}
/* Le libellé du bouton est enveloppé dans UN seul span. Sans ça,
   « Signer » et « un PDF » deviennent deux éléments de flexbox
   distincts, et le gap:9px du bouton s'insère au milieu du mot :
   un espace de trop, invisible à la relecture du code, évident
   dès qu'on mesure la largeur du bouton. */
.site-nav .btn>span{display:inline}

/* Les liens de contenu partent les premiers : on les retrouve
   dans le pied de page, et ils ne servent à personne au milieu
   d'une tâche. */
@media(max-width:860px){
  .site-nav a.hide-s{display:none}
  .site-nav{gap:20px}
}
/* La signature sous le nom est la première chose superflue : c'est
   elle qui passait à la ligne, en entraînant tout le reste. */
@media(max-width:640px){
  .site-head .wrap{padding:0 18px;min-height:62px;gap:10px}
  .logo span span{display:none}
  .logo{gap:9px}
  .logo b{font-size:14px;letter-spacing:.13em}
  .site-nav{gap:12px}
  .site-nav a{font-size:12.5px}
  .site-nav .btn.sm{padding:9px 13px;font-size:10px;letter-spacing:.12em}
  .pph-tools-full{display:none}.pph-tools-short{display:inline}
  .pph-install-label,.pph-account-label{display:none}
  .pph-account-icon{display:block}
  .site-nav a.lien-connexion{border-bottom:0;padding:0}
  .pph-install-trigger{width:31px;height:31px;min-height:31px;padding:6px;justify-content:center;border-color:var(--ink)}
  .pph-tools-panel{position:fixed;top:62px;left:14px;right:14px;width:auto;max-height:calc(100vh - 76px);padding:18px}
  .pph-tools-grid{grid-template-columns:1fr 1fr;gap:20px}
  .pph-tools-heading{display:block}.pph-tools-heading span{display:block;margin-top:5px;text-align:left}
}
@media(max-width:430px){
  .site-head .wrap{padding:0 14px;min-height:58px;gap:8px}
  .logo .mark{width:25px;height:25px;font-size:12px}
  .logo b{font-size:13px;letter-spacing:.1em}
  .site-nav{gap:9px}
  .site-nav a{font-size:12px}
  .site-nav .btn.sm{padding:8px 11px;font-size:9.5px;letter-spacing:.1em}
  .pph-tools-panel{top:58px;left:8px;right:8px;padding:15px}
  .pph-tools-grid{grid-template-columns:1fr;gap:18px}
  .pph-install-card{padding:23px 20px}.pph-install-card h2{font-size:22px}
  /* « Signer un PDF » devient « Signer » : le contexte suffit, et
     un bouton qui se coupe en deux lignes ne ressemble plus à un
     bouton. */
  .site-nav .opt{display:none}
}
@media(max-width:390px){
  .logo b{display:none}
  .logo{gap:0}
  .site-nav{gap:8px}
}
/* En dessous, on ne réduit plus : on ne rend pas un bouton
   illisible pour gagner huit pixels. Le nom du site cède la place
   avec des points de suspension plutôt que de pousser le reste
   hors de l'écran. */
@media(max-width:340px){
  .logo b{overflow:hidden;text-overflow:ellipsis}
  .logo>span{overflow:hidden}
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid var(--ink);background:var(--paper);color:var(--ink);text-decoration:none;
  padding:14px 26px;cursor:pointer;border-radius:var(--radius);
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;transition:.16s;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--paper);color:var(--ink)}
.btn.sm{padding:10px 16px;font-size:10.5px}

/* ---------- Limite commune des outils PDF ---------- */
.pph-access-gate[hidden]{display:none}
.pph-access-gate{
  position:fixed;inset:0;z-index:220;display:grid;place-items:center;
  padding:22px;background:rgba(0,0,0,.62)
}
.pph-access-gate-card{
  position:relative;width:min(520px,100%);border:1px solid var(--ink);
  background:#fff;padding:36px;box-shadow:0 24px 70px rgba(0,0,0,.28)
}
.pph-access-gate-card h2{margin:0 0 12px;font-size:clamp(24px,4vw,32px);line-height:1.15;letter-spacing:-.02em}
.pph-access-gate-card>p:not(.eyebrow){margin:0 0 20px;color:#3f3f3f}
.pph-access-gate-card .pph-access-gate-private{padding-top:15px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.pph-access-gate-card .btn{width:100%;margin-top:4px}
.pph-access-gate-close{
  position:absolute;top:12px;right:14px;width:38px;height:38px;border:0;
  background:transparent;font:28px/1 var(--font);cursor:pointer
}
.pph-access-gate-later{display:block;margin:16px auto 0;border:0;background:transparent;color:var(--muted);text-decoration:underline;cursor:pointer;font:inherit;font-size:13px}
.pph-access-gate button:focus-visible,.pph-access-gate a:focus-visible{outline:3px solid #315eea;outline-offset:3px}
body.pph-access-gate-open{overflow:hidden}
@media(max-width:520px){
  .pph-access-gate{padding:12px;align-items:end}
  .pph-access-gate-card{padding:30px 22px 24px}
}

/* ---------- Hero ---------- */
.hero{padding:86px 0 74px;border-bottom:1px solid var(--line)}
.hero .grid{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center}
.hero h1{font-size:clamp(34px,4.6vw,58px);line-height:1.04;letter-spacing:-.025em;margin:0 0 22px;font-weight:700}
.hero p.lead{font-size:18px;color:#333;margin:0 0 32px;max-width:33em}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .note{font-size:12.5px;color:var(--muted);margin-top:20px}
.hero .note b{color:var(--ink);font-weight:600}
.visual{border:1px solid var(--line);background:var(--soft);padding:26px;border-radius:var(--radius)}
.visual .doc{background:#fff;border:1px solid var(--line);padding:26px 24px;box-shadow:0 12px 34px rgba(0,0,0,.07)}
.visual .l{height:8px;background:#ececec;margin-bottom:11px;border-radius:2px}
.visual .l.s{width:54%}.visual .l.m{width:78%}
.visual .sig-zone{margin-top:34px;border:1px dashed #c7c7c7;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.visual .sig-zone small{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;white-space:nowrap}
@media(max-width:900px){.hero .grid{grid-template-columns:1fr;gap:40px}.hero{padding:56px 0 50px}}
/* Sans min-width:0, une colonne de grille ne descend jamais sous la
   largeur de son contenu, et la page déborde de quelques pixels. */
.hero .grid>*{min-width:0}
@media(max-width:520px){
  .visual{padding:16px}
  .visual .doc{padding:18px 16px}
  .visual .sig-zone{flex-wrap:wrap;gap:8px;padding:10px}
  .visual .sig-zone small{white-space:normal}
  .visual .sig-zone svg{max-width:100%;height:auto}
}

/* ---------- Bandeau de réassurance ---------- */
.strip{border-bottom:1px solid var(--line);background:var(--soft)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
/* Marges symétriques et filets AVANT chaque bloc : le premier et le
   dernier arrivent pile aux bords de la page, comme les titres. */
.strip .wrap>div{padding:30px 32px}
.strip .wrap>div+div{border-left:1px solid var(--line)}
.strip .wrap>div:first-child{padding-left:0}
.strip .wrap>div:last-child{padding-right:0}
.strip .wrap>div>b{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}
.strip .wrap>div>span{font-size:13px;color:var(--muted);line-height:1.5}
@media(max-width:900px){
  .strip .wrap{grid-template-columns:1fr 1fr}
  .strip .wrap>div{padding:22px 24px}
  .strip .wrap>div:nth-child(2n+1){padding-left:0;border-left:0}
  .strip .wrap>div:nth-child(2n){padding-right:0}
  .strip .wrap>div:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:520px){
  .strip .wrap{grid-template-columns:1fr}
  .strip .wrap>div,.strip .wrap>div:nth-child(2n),.strip .wrap>div:nth-child(2n+1){padding:18px 0;border-left:0}
  .strip .wrap>div+div{border-top:1px solid var(--line)}
}

/* ---------- Sections ---------- */
section.block{padding:82px 0;border-bottom:1px solid var(--line)}
section.block h2{font-size:clamp(26px,3.1vw,38px);letter-spacing:-.02em;line-height:1.12;margin:0 0 18px;font-weight:700}
section.block p.intro{font-size:17px;color:#3a3a3a;max-width:64ch;margin:0 0 46px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.step .n{font-size:11px;letter-spacing:.2em;font-weight:700;color:var(--muted);border-top:2px solid var(--ink);padding-top:12px;display:block;margin-bottom:14px}
.step h3{margin:0 0 8px;font-size:19px;letter-spacing:-.01em}
.step p{margin:0;color:#4a4a4a;font-size:15px}
@media(max-width:820px){.steps{grid-template-columns:1fr;gap:26px}section.block{padding:54px 0}}

.cols2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media(max-width:820px){.cols2{grid-template-columns:1fr;gap:32px}}
.feature-list{list-style:none;padding:0;margin:0}
.feature-list li{padding:16px 0;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:flex-start;font-size:15px}
.feature-list li:first-child{border-top:1px solid var(--line)}
.feature-list b{display:block;margin-bottom:2px}
.feature-list .ic{width:18px;flex:0 0 18px;margin-top:3px}
.feature-list span.txt{color:#4a4a4a}

.callout{border:1px solid var(--ink);padding:30px 32px;background:var(--paper)}
.callout h3{margin:0 0 10px;font-size:18px}
.callout p{margin:0;color:#3d3d3d;font-size:15px}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{cursor:pointer;font-size:17px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:22px;font-weight:400;color:var(--muted);line-height:1}
.faq details[open] summary:after{content:"-"}
.faq p{margin:14px 0 0;color:#454545;font-size:15px;max-width:76ch}

/* ---------- CTA final ---------- */
.cta-final{background:var(--ink);color:#fff;padding:76px 0;text-align:center}
.cta-final h2{font-size:clamp(26px,3.4vw,40px);margin:0 0 16px;letter-spacing:-.02em}
.cta-final p{color:#bdbdbd;margin:0 0 30px;font-size:16px}
.cta-final .btn{border-color:#fff;background:#fff;color:var(--ink)}
.cta-final .btn:hover{background:transparent;color:#fff}

/* ---------- Pied de page ---------- */
.site-foot{padding:44px 0;font-size:13px;color:var(--muted)}
.site-foot .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.site-foot a{text-decoration:none;margin-right:20px}
.site-foot a:hover{color:var(--ink)}

/* ---------- Pages de contenu ---------- */
.doc-page{padding-top:64px;padding-bottom:90px;max-width:820px}
/* padding-top/bottom seulement : les 26px latéraux de .wrap doivent
   survivre, sinon le texte touche les bords sur téléphone. */
.doc-page h1{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.02em;margin:0 0 10px}
.doc-page .updated{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 40px;font-weight:600}
.doc-page h2{font-size:21px;margin:44px 0 12px;letter-spacing:-.01em}
.doc-page h3{font-size:17px;margin:28px 0 8px}
.doc-page p,.doc-page li{color:#333;font-size:15.5px}
.doc-page ul{padding-left:20px}
.doc-page li{margin-bottom:8px}
.tableau{margin:20px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.doc-page .tableau table{margin:0}
.doc-page table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14.5px}
@media(max-width:700px){
  /* un tableau de comparaison ne se replie pas : il défile,
     avec un filet à droite qui montre qu'il y a une suite. */
  .tableau{border-right:1px solid var(--line)}
  .doc-page .tableau table{min-width:560px;font-size:13.5px}
  .doc-page .tableau th,.doc-page .tableau td{padding:9px 11px}
}
.doc-page th,.doc-page td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
.doc-page th{background:var(--soft);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.doc-page .box{border-left:2px solid var(--ink);padding:4px 0 4px 18px;margin:26px 0;color:#333}
/* Visible pour les lecteurs d'écran et les moteurs, invisible à l'oeil.
   Sert au titre h1 de l'outil, qui n'a pas sa place dans l'interface. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#000;color:#fff;padding:10px 14px;z-index:200}

/* ---------- Pastille d'état du réseau ----------
   z-index 80, sous les fenêtres (100) : cette pastille annonce une
   bonne nouvelle, elle n'a aucune raison de recouvrir le menu que
   la personne vient d'ouvrir. Sur un téléphone, elle masquait la
   dernière option de la liste. */
.etat-reseau{
  position:fixed;left:18px;bottom:18px;z-index:80;
  max-width:290px;padding:12px 16px;background:var(--ink);color:#fff;
  border-radius:var(--radius);box-shadow:0 12px 34px rgba(0,0,0,.22);
  font-size:13px;line-height:1.45;
  opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;
}
.etat-reseau.vu{opacity:1;transform:none}
.etat-reseau b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px}
.etat-reseau span{color:#c9c9c9}
@media(max-width:600px){.etat-reseau{left:12px;right:12px;bottom:12px;max-width:none}}

/* ============================================================
   MISE EN PAGE DES GUIDES ET DES DEUX MODES

   Ajouté avec les pages de référencement. On ne reprend ici que
   les classes qui n'existaient pas : la feuille livrée avec ces
   pages réintroduisait aussi l'ancien en-tête, celui qui se
   coupait en trois lignes sur un téléphone. Il est resté celui
   d'ici.
   ============================================================ */
/* ---------- Deux modes et maillage des guides ---------- */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
.mode-card{border:1px solid var(--line);padding:28px;background:#fff;display:flex;flex-direction:column;align-items:flex-start}
.mode-card.local{border-top:3px solid var(--ink)}
.mode-card.remote{background:var(--soft)}
.mode-card .tag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.mode-card h3{font-size:21px;margin:8px 0 10px;letter-spacing:-.01em}
.mode-card p{margin:0 0 18px;color:#444;font-size:15px;flex:1}
.mode-card ul{margin:0 0 22px;padding-left:18px;color:#444;font-size:14px}
.mode-card li+li{margin-top:6px}
.guide-links{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.guide-link{border-top:2px solid var(--ink);padding:15px 0;text-decoration:none}
.guide-link b{display:block;font-size:15px;margin-bottom:3px}
.guide-link span{display:block;font-size:13px;color:var(--muted)}
.guide-link:hover b{text-decoration:underline;text-underline-offset:3px}
@media(max-width:820px){.mode-grid{grid-template-columns:1fr}.guide-links{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.guide-links{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */

/* ---------- CTA final ---------- */

/* ---------- Pied de page ---------- */

/* ---------- Pages de contenu ---------- */
/* padding-top/bottom seulement : les 26px latéraux de .wrap doivent
@media(max-width:700px){
  /* un tableau de comparaison ne se replie pas : il défile,
}
.doc-page .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 38px}
.doc-page .toc{background:var(--soft);border:1px solid var(--line);padding:20px 22px;margin:28px 0}
.doc-page .toc b{display:block;margin-bottom:8px}
.doc-page .toc a{display:inline-block;margin:4px 18px 4px 0;font-size:14px}
.doc-page .steps-list{counter-reset:guide;list-style:none;padding:0}
.doc-page .steps-list>li{counter-increment:guide;border-top:1px solid var(--line);padding:20px 0 10px;margin:0}
.doc-page .steps-list>li:before{content:counter(guide,decimal-leading-zero);display:block;font-size:10px;letter-spacing:.18em;color:var(--muted);font-weight:700;margin-bottom:4px}
.doc-page .related{border-top:1px solid var(--line);margin-top:50px;padding-top:24px}
.doc-page .related a{margin-right:18px}
/* Visible pour les lecteurs d'écran et les moteurs, invisible à l'oeil.

/* ---------- Pastille d'état du réseau ---------- */
  position:fixed;left:18px;bottom:18px;z-index:300;
}
@media(max-width:600px){.etat-reseau{left:12px;right:12px;bottom:12px;max-width:none}}