porte tabindex="-1" pour recevoir le focus apres le lien d'evitement. On masque son contour : encadrer toute la page n'apprend rien, le saut est deja annonce par le changement de contexte. */ main:focus,main:focus-visible{outline:none} @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} } /* ── En-tete de site ────────────────────────────────────── */ .sp-head{ display:flex;align-items:center;justify-content:space-between;gap:20px; padding:18px clamp(20px,4vw,48px); background:var(--creme); border-bottom:1px solid var(--line); position:sticky;top:0;z-index:50; backdrop-filter:blur(8px); } .sp-head-brand{display:flex;align-items:center;gap:14px;text-decoration:none} .sp-head-brand img{display:block;width:auto} .sp-head-rule{width:1px;height:28px;background:var(--line);display:block} /* Le CTA d'en-tete ne porte plus de fleche : sur telephone, chaque pixel pris par le bouton est un pixel retire au lockup iA, qui doit rester visible. Pas de gap non plus, il n'y a plus qu'un seul enfant. */ .sp-head-cta{ display:inline-flex;align-items:center; background:var(--bleu);color:var(--creme); font-family:var(--font-m);font-size:12px;letter-spacing:.06em;text-transform:uppercase; padding:12px 20px;border-radius:var(--r-pill);text-decoration:none; white-space:nowrap; transition:background var(--dur) var(--ease),transform var(--dur) var(--ease); } .sp-head-cta:hover{background:var(--bleu-deep);transform:translateY(-1px)} /* ── Boutons ────────────────────────────────────────────── */ .sp-btn{ display:inline-flex;align-items:center;gap:12px; background:var(--bleu);color:var(--creme); font-weight:var(--w-bold);font-size:16px; padding:16px 30px;border-radius:var(--r-pill);text-decoration:none; transition:transform var(--dur) var(--ease),background var(--dur) var(--ease); } .sp-btn:hover{background:var(--bleu-deep);transform:translateY(-2px)} .sp-btn-ghost{ display:inline-flex;align-items:center;gap:12px; color:var(--creme); font-weight:var(--w-bold);font-size:16px; padding:16px 26px;border-radius:var(--r-pill); border:1.5px solid var(--on-dark-line);text-decoration:none; transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease); } .sp-btn-ghost:hover{border-color:var(--creme);transform:translateY(-2px)} /* Lien meta avec fleche : l'ecart se creuse au survol. */ .sp-arrow-link{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font-m);font-size:12px;letter-spacing:.1em;text-transform:uppercase; color:var(--bleu);text-decoration:none; transition:gap var(--dur) var(--ease); } .sp-arrow-link:hover{gap:16px} /* ── Pied de page ───────────────────────────────────────── */ .sp-ft a{color:#CBD2E0;text-decoration:none;transition:color .2s var(--ease)} .sp-ft a:hover{color:var(--creme)} .sp-ft .amf a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:#3A414F;transition:color var(--dur-fast) var(--ease),text-decoration-color var(--dur-fast) var(--ease)} .sp-ft .amf a:hover{color:var(--creme);text-decoration-color:var(--corail)} .sp-ft .soc{width:38px;height:38px;border:1.5px solid var(--on-dark-line);border-radius:var(--r-pill);display:grid;place-items:center;color:var(--creme);transition:all var(--dur-fast) var(--ease)} .sp-ft .soc:hover{background:var(--bleu);border-color:var(--bleu);color:#fff;transform:translateY(-2px)} /* Lien inline sur fond clair (corps de texte). */ .sp-link{color:var(--bleu);font-weight:var(--w-bold);text-decoration:underline;text-underline-offset:3px;transition:color var(--dur-fast) var(--ease)} .sp-link:hover{color:var(--bleu-deep)} /* Lien discret bleu, sans soulignement (fin de paragraphe, FAQ). */ .sp-quiet-link{color:var(--bleu);font-weight:var(--w-semi);text-decoration:none;transition:color var(--dur-fast) var(--ease)} .sp-quiet-link:hover{color:var(--bleu-deep);text-decoration:underline;text-underline-offset:3px} /* Rangee « et aussi » sur fond clair : soulignement beige qui passe au bleu. Un lien de liste, pas un bouton : il ne se souleve pas, seul le filet change. */ .sp-more-link{ color:var(--ink);font-weight:var(--w-semi);font-size:15px; text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line); transition:color var(--dur-fast) var(--ease),text-decoration-color var(--dur-fast) var(--ease); } .sp-more-link:hover{color:var(--bleu);text-decoration-color:var(--bleu)} /* Tampon « Simon protege ca. » devenu cliquable : il mene a /bienvenue, la page qui raconte d'ou vient le « CA ». Le style du tampon reste en attribut style sur chaque page (position et taille varient) ; cette classe ne fait que neutraliser l'apparence de lien et ajouter la reaction au survol. */ .sp-stamp-link{ text-decoration:none;display:inline-block; transition:transform var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease); } /* !important : chaque tampon porte son fond, sa couleur et sa rotation en attribut style (position et taille varient d'une page a l'autre), et un style en ligne bat une feuille. Sans lui, aucun etat de survol ne serait visible. */ .sp-stamp-link:hover,.sp-stamp-link:focus-visible{ background:var(--corail) !important;color:var(--creme) !important; transform:rotate(-7deg) scale(1.04) !important; } .sp-stamp-link:focus-visible{outline:2px solid var(--bleu);outline-offset:4px} @media (prefers-reduced-motion: reduce){ .sp-stamp-link:hover,.sp-stamp-link:focus-visible{transform:rotate(-7deg) !important} } /* ── Tableau comparatif ────────────────────────────────── Le meme rendu qu'avant (grille sombre en tete, colonne de criteres sur fond creme, colonne mise en avant en bleu), mais sur un vrai . Le rendu visuel ne change pas d'un pixel ; ce qui change, c'est que le contenu devient un tableau pour un lecteur d'ecran comme pour un moteur, au lieu d'une pile de

dont la structure ligne/colonne n'existait que dans le CSS. table-layout:fixed reproduit exactement les colonnes 1fr de la grille. */ .sp-cmp-wrap{border:1px solid var(--line);border-radius:20px;overflow-x:auto;overflow-y:hidden} .sp-cmp{width:100%;min-width:560px;border-collapse:collapse;table-layout:fixed;text-align:left} .sp-cmp thead tr{background:var(--ink);color:var(--creme)} .sp-cmp thead th{ padding:18px;font-weight:800;font-size:15px;vertical-align:top; border-left:1px solid var(--on-dark-line); } /* La premiere en-tete nomme la colonne des criteres : etiquette, pas titre. */ .sp-cmp thead th:first-child{ border-left:0;font-family:var(--font-m);font-size:11px;font-weight:400; letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-mono); } .sp-cmp thead th.sp-cmp-vedette{background:var(--bleu)} .sp-cmp tbody tr{border-top:1px solid var(--line)} .sp-cmp tbody th{ padding:16px 18px;font-weight:700;font-size:13.5px;color:var(--ink); background:var(--creme-2);vertical-align:top; } .sp-cmp tbody td{ padding:16px 18px;font-size:13.5px;line-height:1.45;color:var(--muted); border-left:1px solid var(--line);vertical-align:top; } .sp-cmp tbody td.sp-cmp-vedette{color:var(--ink);background:var(--bleu-tint)} /* Cellules a pictogramme (banque contre assurance vie). Le display:flex va sur un conteneur DANS la cellule, jamais sur le

de la page (table-layout:fixed les respecte). */ .sp-cmp-lg{min-width:620px} .sp-cmp-lg thead th{padding:20px 22px;font-size:16px;letter-spacing:-.01em} .sp-cmp-lg thead th:first-child{font-size:12px;letter-spacing:.1em} .sp-cmp-lg tbody th{padding:18px 22px;font-size:15px} .sp-cmp-lg tbody td{padding:18px 22px;font-size:14.5px;line-height:1.5} /* ── Signature d'auteur (pages guides) ─────────────────── Qui a ecrit, avec quel permis, et quand le texte a ete revu. */ .sp-signature{ display:flex;gap:16px;align-items:center; max-width:760px;margin:clamp(30px,3.5vw,44px) auto 0; padding-top:clamp(20px,2.4vw,28px);border-top:1px solid var(--line); } .sp-signature img{ width:56px;height:56px;flex:none;border-radius:50%;object-fit:cover; object-position:50% 12%;background:var(--creme-2); } .sp-signature p{margin:0} .sp-signature-nom{font-size:14.5px;line-height:1.5;color:var(--ink);font-weight:600} .sp-signature-meta{font-family:var(--font-m);font-size:12px;line-height:1.7;color:var(--muted)} .sp-signature a{color:var(--bleu);text-decoration:underline;text-underline-offset:3px} @media (max-width:560px){ .sp-signature{flex-direction:column;align-items:flex-start;gap:12px} } /* ── Boutons complementaires (gabarit page service) ─────── */ /* Contour ink sur fond creme : se remplit au survol. */ .sp-btn-outline{ display:inline-flex;align-items:center;gap:12px; color:var(--ink);background:transparent; font-weight:var(--w-bold);font-size:16px; padding:16px 26px;border-radius:var(--r-pill); border:1.5px solid var(--ink);text-decoration:none; transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease); } .sp-btn-outline:hover{background:var(--ink);color:var(--creme);transform:translateY(-2px)} /* Bouton clair pose sur l'aplat bleu du CTA final. */ .sp-btn-light{ display:inline-flex;align-items:center;gap:12px; background:var(--creme);color:var(--ink); font-weight:var(--w-bold);font-size:16px; padding:16px 32px;border-radius:var(--r-pill);text-decoration:none; transition:transform var(--dur) var(--ease); } .sp-btn-light:hover{transform:translateY(-2px)} /* Bouton bleu compact (encadre partenaire). */ .sp-btn-sm{ display:inline-flex;align-items:center;gap:10px;margin-top:20px; background:var(--bleu);color:var(--creme); font-weight:var(--w-bold);font-size:15px; padding:13px 24px;border-radius:var(--r-pill);text-decoration:none; transition:transform var(--dur) var(--ease),background var(--dur) var(--ease); } .sp-btn-sm:hover{background:var(--bleu-deep);transform:translateY(-2px)} /* Carte « a explorer aussi » sur fond sombre. */ .sp-card-related{ background:var(--ink-surface);border:1px solid var(--on-dark-line); border-radius:var(--r-tile);padding:26px 24px; color:var(--creme);text-decoration:none; display:flex;flex-direction:column;gap:8px;min-height:180px; transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease); } .sp-card-related:hover{transform:translateY(var(--lift-tile));border-color:var(--corail)} /* Tuile de service sur fond clair : se souleve, le filet passe au bleu. */ .sp-tile{ background:var(--creme);border:1px solid var(--line);border-radius:var(--r-tile); color:inherit;text-decoration:none; display:flex;flex-direction:column;gap:8px; transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease); } .sp-tile:hover{transform:translateY(var(--lift-tile));border-color:var(--bleu)} /* Tuile principale en aplat bleu. */ .sp-tile-hero{ background:var(--bleu);border:1px solid var(--bleu);border-radius:var(--r-tile); color:var(--creme);text-decoration:none; display:flex;flex-direction:column;gap:10px; transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease); } .sp-tile-hero:hover{transform:translateY(var(--lift-tile));border-color:var(--creme)} /* Bloc vedette pleine largeur (page guides) : simple soulevement. */ .sp-feature{transition:transform var(--dur) var(--ease)} .sp-feature:hover{transform:translateY(var(--lift-tile))} /* Etape de la ligne de vie : simple soulevement. */ .sp-step{ display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px; color:inherit;text-decoration:none; transition:transform var(--dur) var(--ease); } .sp-step:hover{transform:translateY(var(--lift-tile))} /* Rangee de choix (bloc de qualification de l'accueil). */ .sp-choice{ display:block;font-family:var(--font-d);font-size:15.5px;font-weight:var(--w-med); text-align:left;background:var(--creme);color:var(--ink);text-decoration:none; border:1.5px solid var(--line);border-radius:var(--r-field);padding:15px 18px; transition:border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease); } .sp-choice:hover{border-color:var(--bleu);transform:translateX(var(--nudge))} .sp-choice.is-first, .sp-choice.is-selected{background:var(--bleu-tint);border-color:var(--bleu)} /* Variante

: un

en flex perd son comportement de cellule, la ligne se disloque et le tableau double de hauteur. L'icone ne doit pas se retrecir quand le texte passe sur deux lignes, d'ou le flex:none. */ .sp-cmp .sp-cmp-signe{display:flex;gap:10px;align-items:flex-start} .sp-cmp .sp-cmp-signe > :first-child{flex:none} .sp-cmp-note{font-family:var(--font-m);font-size:12px;color:var(--muted);margin:16px 0 0;line-height:1.6} /* Variante large : trois colonnes, texte plus long, donc plus d'air. Utilisee par la comparaison banque contre assurance vie. Les largeurs de colonnes viennent du