/* ========================================================================== PROSPEE — marketing.css Compositions propres aux pages publiques (spec 02 §A, §F.1-F.2). Les composants viennent de composants.css (port du spécimen) — rien n'y est redéfini ici. Aucun hex, aucune durée en dur : tokens uniquement. ========================================================================== */ /* ---------- S2 · Le problème du lead mutualisé : 3 cartes blanches ---------- */ .cartes-3 { display: grid; gap: var(--space-6); grid-template-columns: repeat(3, 1fr); } @media (max-width: 1023px) { .cartes-3 { grid-template-columns: 1fr; } } .carte-probleme { background: var(--color-surface); border-radius: var(--rayon-m); box-shadow: var(--ombre-douce); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); } /* ---------- S3 · Les 3 piliers : colonnes séparées par filets verticaux ---------- */ .piliers { display: grid; grid-template-columns: repeat(3, 1fr); } .pilier { padding-inline: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); } .pilier:first-child { padding-left: 0; } .pilier:last-child { padding-right: 0; } .pilier + .pilier { border-left: var(--filet-epaisseur) solid var(--color-bordure); } .pilier .picto { margin-bottom: var(--space-1); } @media (max-width: 767px) { /* Filets verticaux → horizontaux (spec A1/S3). */ .piliers { grid-template-columns: 1fr; } .pilier { padding-inline: 0; } .pilier + .pilier { border-left: 0; border-top: var(--filet-epaisseur) solid var(--color-bordure); margin-top: var(--space-6); padding-top: var(--space-6); } } /* ---------- S4 · Comment ça marche : 3 étapes numérotées, liste verticale ---------- */ .etapes { max-width: var(--largeur-lecture); display: flex; flex-direction: column; gap: var(--space-12); } .etape { display: flex; gap: var(--space-6); align-items: baseline; } .etape-num { font-family: var(--font-titres); font-weight: var(--graisse-display-num); font-size: var(--text-h2); line-height: var(--leading-h2); color: var(--color-encre-2); font-variant-numeric: tabular-nums; flex: none; min-width: var(--space-8); } .etape-corps { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; } /* Cascade autorisée (liste signifiante 1-2-3) : délai 80 ms entre items, 3 max (§7.3). */ @media (prefers-reduced-motion: no-preference) { .js .cascade > * { opacity: 0; transform: translateY(var(--space-4)); } .js .cascade.est-visible > * { opacity: 1; transform: translateY(0); transition: opacity var(--duree-reveal) var(--ease-pose), transform var(--duree-reveal) var(--ease-pose); } .js .cascade.est-visible > :nth-child(2) { transition-delay: 80ms; } .js .cascade.est-visible > :nth-child(3) { transition-delay: 160ms; } } /* ---------- S5 · L'agenda qui se remplit : la vignette montre mer + ven sur mobile ---------- */ @media (max-width: 767px) { .vignette-mmv .j-mer, .vignette-mmv .j-ven { display: grid; } .vignette-mmv .j-mar, .vignette-mmv .j-jeu { display: none; } } /* ---------- S8 · Réassurance : lignes verticales picto + titre + corps ---------- */ .reassurances { max-width: var(--largeur-lecture); display: flex; flex-direction: column; gap: var(--space-12); } .reassurance { display: flex; gap: var(--space-6); align-items: flex-start; } .reassurance .picto { margin-top: var(--space-1); } .reassurance-corps { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; } /* La mention légale n'est pas un item de la liste à pictos : elle était placée dans .reassurances et pendait 48 px à gauche de la colonne de texte des items. Sortie du conteneur, elle reprend le rythme de la section. */ .reassurances-mention { margin-top: var(--space-12); } /* Témoignage : composant prêt, masqué par défaut — données réelles uniquement. */ .temoignage { display: none; } .temoignage--reel { display: block; max-width: var(--largeur-lecture); margin-top: var(--space-16); font-style: italic; } /* ---------- A2 · Page prix ---------- */ .prix-hero { text-align: center; } .prix-hero .t-display-l { max-width: 18ch; margin-inline: auto; } .prix-mention { display: block; max-width: 26rem; margin-inline: auto; color: var(--color-encre-2); margin-top: var(--space-3); } .prix-hero .t-lead { max-width: var(--largeur-lecture); margin-inline: auto; margin-top: var(--space-6); color: var(--color-encre-2); } .prix-hero .btn { margin-top: var(--space-8); } /* Carte prix de l'abonnement : sobre, centrée, le montant en évidence (charte). */ .prix-carte { max-width: 26rem; margin: var(--space-8) auto 0; padding: var(--space-8); background: var(--color-surface); border: var(--filet-epaisseur) solid var(--color-bordure-forte); border-radius: var(--rayon-m); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; } .prix-montant { display: flex; align-items: baseline; gap: var(--space-2); margin-block: var(--space-2); } .prix-montant-val { line-height: 1; color: var(--color-encre); } .prix-carte-eng { color: var(--color-encre-2); } .prix-carte .btn { margin-top: var(--space-6); } .liste-coches { max-width: var(--largeur-lecture); display: flex; flex-direction: column; gap: var(--space-4); } .liste-coches li { display: flex; gap: var(--space-3); align-items: flex-start; } .liste-coches .coche-svg { width: var(--space-6); height: var(--space-6); flex: none; color: var(--color-accent); margin-top: calc(var(--space-1) / 2); } .liste-lignes { max-width: var(--largeur-lecture); display: flex; flex-direction: column; gap: var(--space-4); } .faq { max-width: var(--largeur-lecture); display: flex; flex-direction: column; gap: var(--space-12); } .faq-item { display: flex; flex-direction: column; gap: var(--space-3); } /* ---------- A3-A5 · Pages compte (connexion, inscription, mots de passe) ---------- */ .page-auth { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: var(--space-16); min-height: calc(100vh - var(--nav-h) * 4); /* centre de page (spec A3), footer déduit */ } .page-auth .carte-form { width: 100%; max-width: 29rem; /* 464 px — spec 02 §A3 */ } .page-auth .carte-form h1 { margin-bottom: var(--space-6); } .page-auth .form-extrait { max-width: none; } .auth-intro { color: var(--color-encre-2); margin-top: calc(-1 * var(--space-4)); margin-bottom: var(--space-6); } .auth-sous-bouton { text-align: center; } .auth-sous-carte { margin-top: var(--space-6); color: var(--color-encre-2); text-align: center; } .auth-mention { color: var(--color-encre-2); text-align: center; } /* Connexion sociale (A3/A4) — boutons fournisseurs au-dessus du formulaire e-mail. */ .auth-social { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); } .btn-social { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: var(--bouton-h); padding-inline: var(--space-12); border: var(--filet-epaisseur) solid var(--color-bordure-forte); border-radius: var(--rayon-s); background: var(--color-surface); color: var(--color-encre); font-family: var(--font-texte); font-weight: var(--graisse-ui); font-size: var(--text-base); line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--duree-ui-retour) var(--ease-sortie), transform var(--duree-ui-retour) var(--ease-sortie), box-shadow var(--duree-ui-retour) var(--ease-sortie); } .btn-social:hover, .btn-social:focus-visible { background: var(--color-surface-2); transform: translateY(-1px); box-shadow: var(--ombre-douce); transition-duration: var(--duree-ui); transition-timing-function: var(--ease-ui); } .btn-social-ico { position: absolute; left: var(--space-4); display: inline-flex; } .btn-social-ico svg { display: block; } /* Sous 480 px, « Continuer avec Microsoft » (219 px) ne tient plus dans la zone libre du bouton (largeur − 2 × 48 px de padding) : le libellé, centré et en nowrap, s'imprimait sur le logo. On repasse le logo dans le flux et on aligne à gauche. */ @media (max-width: 479px) { .btn-social { justify-content: flex-start; gap: var(--space-3); padding-inline: var(--space-4); } .btn-social-ico { position: static; left: auto; } } @media (max-width: 359px) { .btn-social { font-size: var(--text-sm); } } /* Séparateur « ou » : un filet de part et d'autre du mot. */ .auth-ou { display: flex; align-items: center; gap: var(--space-3); color: var(--color-encre-2); font-size: var(--text-sm); } .auth-ou::before, .auth-ou::after { content: ""; flex: 1 1 auto; height: var(--filet-epaisseur); background: var(--color-bordure); } @media (max-width: 479px) { .page-auth { padding-block: var(--space-8); } } /* États post-submit (inscription, mot de passe oublié) : bascule en fondu 150 ms. */ .etat-poste { display: none; } .etat-poste.actif { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); } .js .etat-poste.actif { animation: ks-fondu var(--duree-ui) var(--ease-ui) both; } /* Une adresse e-mail longue (54 caractères, courant chez un cabinet) n'était pas coupable : elle sortait de la carte de 202 px à 320 px et créait 157 px de scroll horizontal. overflow-wrap casse le mot au besoin, sans rien changer aux adresses courtes. */ .etat-poste [data-email] { overflow-wrap: anywhere; } .etat-poste .coche-confirmation { margin-bottom: var(--space-2); } /* ---------- A6 · Gabarit « page de lecture » (légal) ---------- */ .page-lecture { max-width: var(--largeur-lecture); margin-inline: auto; } .page-lecture h1 { margin-bottom: var(--space-3); } .lecture-date { display: block; color: var(--color-encre-2); margin-bottom: var(--space-8); } .lecture-sommaire { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-12); } /* Les cibles tactiles de composants.css:181 épaississent chaque lien de 12 px en haut et en bas par marge négative : avec le gap de 12 px, les zones se chevauchaient et le vide sous un libellé ouvrait la section suivante. Zones contiguës, rythme intact. */ /* Au-dessus de 1023 px la règle de cible tactile de composants.css ne s'applique plus : le lien retombait à 22,5 px de haut. On l'épaissit sans bouger le rythme (marge négative compensatrice), comme le fait composants.css en dessous. */ @media (min-width: 1024px) { .lecture-sommaire { gap: var(--space-1); } .lecture-sommaire .lien { padding-block: var(--space-2); margin-block: calc(-1 * var(--space-2)); } } @media (max-width: 1023px) { .lecture-sommaire { gap: 0; } .lecture-sommaire .lien { margin-block: 0; } } /* Le sommaire porte déjà 48 px de marge basse : le premier titre du corps n'ajoute pas la sienne (96 px au lieu des 64 px du rythme du document). */ .lecture-corps > h2:first-child { margin-top: 0; } .lecture-corps { display: flex; flex-direction: column; gap: var(--space-4); } /* La nav est collante sur var(--nav-h) : sans marge de défilement, un lien du sommaire posait sa cible à y=0, donc entièrement cachée sous la barre — on atterrissait au milieu d'une phrase. Vaut pour toutes les ancres des pages de lecture. */ .page-lecture [id], .lecture-corps h2, .lecture-corps h3 { scroll-margin-top: calc(var(--nav-h) + var(--space-8)); } .lecture-corps h2 { margin-top: var(--space-12); } .lecture-corps h3 { margin-top: var(--space-6); } /* Pas de margin-block ici : le gap de 16 px de .lecture-corps suffit — sinon le tableau respirait 32 px sous son titre et 80 px avant le suivant. */ /* min-width : sans largeur de lecture minimale, la table se comprimait dans son enveloppe scrollable (une cellule sur 11 à 13 lignes sous 480 px) au lieu de défiler. */ .lecture-table { width: 100%; min-width: 34rem; border-collapse: collapse; } /* Première et dernière colonnes à fleur du filet et de la colonne de lecture. */ .lecture-table th:first-child, .lecture-table td:first-child { padding-left: 0; } .lecture-table th:last-child, .lecture-table td:last-child { padding-right: 0; } .lecture-table th, .lecture-table td { text-align: left; vertical-align: top; font-size: var(--text-sm); line-height: var(--leading-sm); padding: var(--space-3) var(--space-4); border-bottom: var(--filet-epaisseur) solid var(--color-bordure); } .lecture-table th { color: var(--color-encre-2); font-weight: var(--graisse-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-xs); text-transform: uppercase; } .lecture-table td:first-child { font-weight: var(--graisse-ui); } /* Table large (3 colonnes de texte) sur petit écran : elle défile dans sa boîte au lieu de pousser toute la page (débordement horizontal à 320 px). Le -webkit-overflow-scrolling garde l'inertie sur iOS. */ .lecture-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 479px) { .lecture-table th, .lecture-table td { padding: var(--space-2) var(--space-3); } } /* ---------- /annuaires · liste des annuaires où Prospee est référencé ---------- */ /* Liste de renvois, pas un catalogue : aucune puce, aucun encadré, aucun logo tiers (charte §« pas de vignette décorative »). Un filet fin sépare les entrées, comme les lignes de .lecture-table, pour que la page reste une page de lecture. */ .annuaires-liste { list-style: none; padding-left: 0; display: flex; flex-direction: column; } .annuaires-liste li { padding-block: var(--space-4); border-top: var(--filet-epaisseur) solid var(--color-bordure); } .annuaires-liste li:last-child { border-bottom: var(--filet-epaisseur) solid var(--color-bordure); } /* ---------- /faq · Questions fréquentes (gabarit page de lecture) ---------- */ /* Tête de page : les classes de titraille ne portent aucune marge (composants.css), le sommaire en porte déjà 48 px en bas. */ .faq-page-intro { color: var(--color-encre-2); margin-top: var(--space-6); margin-bottom: var(--space-4); } .faq-page-contact { display: inline-block; } /* Cible tactile ≥ 44 px : la règle §10.6 de composants.css ne s'applique que sous 1024 px ; au-dessus, le lien retombait à 28,8 px. Épaissi sans bouger le rythme (marge négative compensatrice), comme le sommaire juste au-dessus. */ @media (min-width: 1024px) { .faq-page-contact { padding-block: var(--space-2); margin-block: calc(-1 * var(--space-2)); } } .faq-page .lecture-sommaire { margin-top: var(--space-12); } /* Accordéon
: le composant vient de l'accueil (home.css §11), mais home.css n'est jamais chargé hors accueil — les règles sont donc reportées ici, SCOPÉES sur .faq-page pour ne pas percuter le .faq-q du blog (blog.css, chargé après celui-ci et qui habille ses propres accordéons avec un signe +/− en SVG). */ .faq-page .faq-acc { display: flex; flex-direction: column; } .faq-page .faq-q { border-top: var(--filet-epaisseur) solid var(--color-bordure); } .faq-page .faq-q:last-child { border-bottom: var(--filet-epaisseur) solid var(--color-bordure); } .faq-page .faq-q > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-6); min-height: var(--bouton-h); /* cible tactile ≥ 44 px */ } .faq-page .faq-q > summary::-webkit-details-marker { display: none; } .faq-page .faq-q summary .t-h3 { color: var(--color-encre); } @media (hover: hover) { .faq-page .faq-q > summary { transition: color var(--duree-ui) var(--ease-ui); } .faq-page .faq-q > summary:hover .t-h3 { color: var(--color-accent); } } /* Signe +/− : deux traits, le vertical disparaît à l'ouverture (pas de rotation). */ .faq-page .faq-signe { position: relative; flex: none; width: var(--space-6); height: var(--space-6); } .faq-page .faq-signe::before, .faq-page .faq-signe::after { content: ""; position: absolute; top: 50%; left: 50%; width: var(--space-4); height: var(--filet-epaisseur); background: var(--color-encre-2); transform: translate(-50%, -50%); transition: opacity var(--duree-ui) var(--ease-ui); } .faq-page .faq-signe::after { width: var(--filet-epaisseur); height: var(--space-4); } .faq-page .faq-q[open] .faq-signe::after { opacity: 0; } .faq-page .faq-q[open] .faq-signe::before { background: var(--color-accent); } .faq-page .faq-q > p { color: var(--color-encre-2); padding-bottom: var(--space-6); } /* Ouverture : le contenu arrive en fondu + léger translate (jamais de bounce). */ @media (prefers-reduced-motion: no-preference) { .js .faq-page .faq-q[open] > p { animation: ks-pose 220ms var(--ease-ui) both; } } /* ---------- Contact (« Nous contacter », pied de page Entreprise) ---------- */ /* Tête centrée (la classe --centre vit dans home.css, non chargée ici). */ .contact-tete { max-width: var(--largeur-lecture); margin-inline: auto; text-align: center; } .contact-tete .t-lead { color: var(--color-encre-2); } /* Deux colonnes : formulaire (largeur de carte) + réassurances. */ .contact-grille { display: grid; grid-template-columns: minmax(0, 28rem) 1fr; gap: var(--space-12) var(--space-16); align-items: start; } /* La carte occupe toute sa colonne (sinon plafonnée par .carte-form). */ .contact-form { max-width: none; } .contact-aside { display: flex; flex-direction: column; gap: var(--space-8); } .contact-aside .section-numero { margin-bottom: 0; } .contact-points { display: flex; flex-direction: column; gap: var(--space-8); } .contact-direct { padding-top: var(--space-2); } /* Honeypot : retiré du flux visuel et de l'accessibilité, jamais display:none (certains robots ignorent les champs display:none). */ .champ-pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; } @media (max-width: 1023px) { /* minmax(0,1fr) et pas 1fr : `1fr` ≡ `minmax(auto,1fr)`, dont le plancher est le min-content de l'item — ici la largeur de l'option la plus longue du