/* Qatyani — landing des trois offres. Sans police web, sans CDN, sans JavaScript : la doctrine de la maison, et l'argument commercial d'une société qui vend la cybersécurité. ⚠️ AUCUN attribut style= inline nulle part : la CSP les bloque, et le défaut ne se voit QUE chez le visiteur. Tout vit ici. */ :root { --marine: #17395A; --marine-fonce: #0F2840; --marine-clair: #3C6B96; --or: #C9A227; --encre: #1A2027; --texte: #3D4852; --texte-clair: #6B7683; --filet: #DFE4E9; --fond: #FFFFFF; --fond-gris: #F4F6F8; --rayon: 4px; /* ⚠️ TOUTES LES TAILLES DE TEXTE PASSENT PAR CETTE ÉCHELLE. Demande de ynai (2026-09-06) : réduire la police de 30 %. Plutôt que de retoucher trente valeurs à la main, une seule variable les commande. Pour revenir en arrière ou ajuster, il n'y a qu'un nombre à changer ici : 1 = taille d'origine. Réglée à 0.77 le 2026-09-06 (ynai : « augmente la taille de la police de 10 % » depuis 0.7), soit un corps de 12,3 px — juste au-dessus du seuil de 12 px sous lequel la lecture sur mobile devient inconfortable. */ --echelle: 0.77; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--texte); background: var(--fond); line-height: 1.6; font-size: calc(16px * var(--echelle)); /* ⚠️ JUSTIFIÉ AVEC CÉSURE, et les deux vont ensemble. Justifier sans couper les mots creuse des « rivières » de blanc dans les colonnes étroites — très visible dans les trois cartes d'offres. `hyphens` s'appuie sur le `lang="fr"` déclaré sur , sans quoi il ne coupe rien. */ text-align: justify; hyphens: auto; } /* Ce qui ne se justifie jamais : un titre justifié s'étire en lignes trouées, et un libellé de bouton centré doit le rester. */ h1, h2, h3, .etape-num, .bouton, .bouton-clair, .paiement, table.comparatif th { text-align: left; hyphens: manual; } .bouton, .bouton-clair, .paiement { text-align: center; } h1, h2, h3 { color: var(--encre); line-height: 1.2; margin: 0 0 12px; } h1 { font-size: calc(34px * var(--echelle)); } h2 { font-size: calc(24px * var(--echelle)); } h3 { font-size: calc(17px * var(--echelle)); } p { margin: 0 0 14px; } a { color: var(--marine); } .enveloppe { max-width: 1060px; margin: 0 auto; padding: 0 22px; } /* ── Barre du haut ─────────────────────────────────────────────────────── */ /* ⚠️ LES TAILLES DE LA BARRE SONT FIGÉES, HORS ÉCHELLE (ynai, 2026-09-06 : « maintiens cette taille de police à cet endroit »). Elles ne passent volontairement PAS par `--echelle` : la barre est un repère de navigation, pas du contenu, et elle doit garder sa taille même si l'échelle du texte bouge encore. Les valeurs ci-dessous sont exactement celles obtenues à l'échelle 0.77, relevées et gelées. */ .barre { background: var(--marine-fonce); color: #fff; padding: 14px 0; } .barre .enveloppe { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .marque { font-weight: 700; font-size: 14.6px; color: #fff; text-decoration: none; } .marque span { color: var(--or); } .barre nav { margin-left: auto; display: flex; gap: 18px; } .barre nav a { color: #D5DFE8; text-decoration: none; font-size: 10.8px; } .barre nav a:hover { color: #fff; } /* ── Bandeau ───────────────────────────────────────────────────────────── */ .bandeau { background: var(--marine); color: #fff; padding: 54px 0 46px; } .bandeau h1 { color: #fff; max-width: 760px; } .bandeau p { color: #CBD8E4; max-width: 680px; font-size: calc(17px * var(--echelle)); } .filet-or { width: 62px; height: 3px; background: var(--or); margin: 0 0 22px; } /* ── Étapes numérotées (reprises de la CNAM) ───────────────────────────── */ .etapes { padding: 46px 0 10px; } .etape { display: flex; gap: 20px; padding: 22px 0; border-top: 1px solid var(--filet); } .etape:first-of-type { border-top: none; } .etape-num { flex: 0 0 auto; font-size: calc(12px * var(--echelle)); letter-spacing: .1em; font-weight: 700; color: var(--or); padding-top: 3px; width: 78px; } .etape-corps { min-width: 0; } .etape h3 { margin-bottom: 5px; } .etape p { margin: 0; color: var(--texte); } /* ── Les trois offres ──────────────────────────────────────────────────── */ .offres { background: var(--fond-gris); padding: 48px 0; } .grille-offres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .offre { background: #fff; border: 1px solid var(--filet); border-radius: var(--rayon); padding: 24px 22px; display: flex; flex-direction: column; } .offre h3 { font-size: calc(19px * var(--echelle)); margin-bottom: 3px; } .offre .pour { font-size: calc(12.5px * var(--echelle)); color: var(--texte-clair); margin-bottom: 14px; } .offre ul { margin: 0 0 18px; padding: 0; list-style: none; } .offre li { font-size: calc(14px * var(--echelle)); padding: 6px 0 6px 22px; position: relative; } .offre li::before { content: ""; position: absolute; left: 0; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--or); } .offre .bouton { margin-top: auto; } .pictogramme { width: 30px; height: 30px; margin-bottom: 10px; } .bouton { display: inline-block; background: var(--marine); color: #fff; text-decoration: none; font-weight: 600; font-size: calc(15px * var(--echelle)); padding: 12px 20px; border-radius: var(--rayon); text-align: center; } .bouton:hover { background: var(--marine-fonce); } .bouton-clair { display: inline-block; background: #fff; color: var(--marine); border: 1px solid var(--marine); text-decoration: none; font-weight: 600; font-size: calc(15px * var(--echelle)); padding: 11px 20px; border-radius: var(--rayon); } /* ── Blocs thématiques ─────────────────────────────────────────────────── */ .bloc { padding: 46px 0; border-top: 1px solid var(--filet); } .deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; } /* ── Moyens de paiement ────────────────────────────────────────────────── */ .paiements { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 20px 0 8px; } .paiement { border: 1px solid var(--filet); border-radius: var(--rayon); padding: 16px 12px; text-align: center; background: #fff; } .paiement .nom { font-size: calc(14px * var(--echelle)); font-weight: 600; color: var(--encre); } .paiement .genre { font-size: calc(11.5px * var(--echelle)); color: var(--texte-clair); margin-top: 2px; } /* ── Avertissement honnête ─────────────────────────────────────────────── */ .avis { background: #FCF8EA; border: 1px solid #E3D6A6; border-radius: var(--rayon); padding: 14px 16px; font-size: calc(14px * var(--echelle)); color: #6B5710; } .avis strong { color: #4E3F08; } /* ── Pied ──────────────────────────────────────────────────────────────── */ .pied { background: var(--marine-fonce); color: #A8BACB; padding: 26px 0; margin-top: 40px; /* ⚠️ 11.5px : le pied ne porte plus qu'une ligne de mentions légales, il n'a plus à peser autant qu'un paragraphe de contenu. Pas plus bas cependant, sous 11px le gris clair sur marine passe sous le seuil de lisibilité confortable. */ font-size: calc(11.5px * var(--echelle)); letter-spacing: .01em; } .pied p { margin: 0; } .pied a { color: #D5DFE8; } table.comparatif { width: 100%; border-collapse: collapse; font-size: calc(14px * var(--echelle)); } table.comparatif th, table.comparatif td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--filet); } table.comparatif th { font-size: calc(12.5px * var(--echelle)); text-transform: uppercase; letter-spacing: .05em; color: var(--texte-clair); } table.comparatif td.oui { color: var(--marine); font-weight: 600; } table.comparatif td.non { color: var(--texte-clair); } @media (max-width: 880px) { .grille-offres, .deux-colonnes { grid-template-columns: 1fr; } .paiements { grid-template-columns: repeat(2, 1fr); } h1 { font-size: calc(27px * var(--echelle)); } .etape { flex-direction: column; gap: 6px; } .etape-num { width: auto; } }