/* ============================================== LegalPlace Assurances — specificites de la landing /assurance/ Le socle commun est dans /_shared/legalplace-common.css ============================================== */ /* ============================== FAQ — sous-titres de regroupement ============================== */ .faq-group + .faq-group { margin-top: var(--spacing-40); } .faq-group__title { margin: 0 0 var(--spacing-12); font-family: var(--typography-headline-font-family), sans-serif; font-weight: var(--typography-headline-font-weight); font-size: var(--typography-headline-font-size-6); line-height: var(--typography-headline-line-height-6); color: var(--color-content-decorative-gold); } /* ============================== FOOTER — mentions reglementaires assurance ============================== */ /* Le bloc de liens du footer a deja 56px de padding bas : on le resserre a 32px et on supprime le padding haut des mentions, sinon la separation faisait 80px avant le filet. */ .footer__main { padding-bottom: var(--spacing-32); } .legal-notice { max-width: var(--grid-max-width); margin: 0 auto; padding: 0 var(--grid-margin); } .legal-notice__inner { padding-top: var(--spacing-24); border-top: var(--border-stroke-1) solid var(--color-border-tertiary); max-width: 90ch; } .legal-notice p { font-size: var(--typography-paragraph-font-size-4); line-height: var(--typography-paragraph-line-height-4); color: var(--color-content-tertiary); margin: 0 0 var(--spacing-12); } .legal-notice p:last-child { margin-bottom: 0; } .legal-notice strong { color: var(--color-content-secondary); font-weight: var(--typography-paragraph-font-weight-bold); } .legal-notice a { color: var(--color-content-secondary); text-decoration: underline; text-underline-offset: 2px; } /* ============================== FEATURE-SECTION — grille sur deux colonnes ============================== Le composant repartit les cards en 3 par ligne. Pour les blocs de 4 points on force 2 par ligne, sinon on obtient un orphelin en 3 + 1. ============================== */ /* La repartition en 2 colonnes est desormais portee par la grille du socle commun ; les regles flex sont supprimees. */ /* ============================== HERO — renfort du degrade ============================== La photo de cette page est plus lumineuse que celle de /formation/. On renforce le voile pour garder un contraste suffisant sur la description et la legende (cible WCAG AA sur texte courant). ============================== */ /* Voile renforce a droite : la photo comporte un texte incruste sur le mur ("ENTREPRENDRE, C'EST AVANCER...") qui concurrencait le H1 et passait sous le bouton. Le degrade l'atenue sans l'effacer. */ .hero__bg::after { background: linear-gradient(to right, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.60) 45%, rgba(0,0,0,0.68) 100%); } @media (max-width: 767px) { .hero__bg::after { background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.72) 100%); } } /* Second CTA clair : le DS masque l'icone sur .btn--secondary, on garde donc un libelle seul, aligne sur le bouton primaire */ .hero__cta-row .btn--secondary { white-space: normal; } /* ============================== OFFER-CARD — accroche mise en avant, alignee sur le bas ============================== 1. L'accroche est poussee en bas du corps de card (margin-top:auto) pour que les trois se retrouvent sur la meme ligne, quel que soit le wording au-dessus. 2. Le filet et le bloc bas portent eux aussi margin-top:auto dans le socle : sans neutralisation, flexbox repartit l'espace libre entre les trois marges et l'alignement ne se fait pas. Le selecteur du socle est `.offer-card hr.divider` (0,2,1), il faut donc au moins autant de specificite ici. 3. Les libelles de CTA ne font pas tous le meme nombre de lignes : on reserve deux lignes au bloc bas pour que sa hauteur soit constante, condition de l'alignement. ============================== */ .offer-card__punch { margin: 0; margin-top: auto; padding: var(--spacing-12) var(--spacing-16); background-color: var(--color-surface-primary); border-left: 3px solid var(--color-border-decorative-brand); border-radius: 0 var(--border-radius) var(--border-radius) 0; font-style: normal; font-weight: var(--typography-paragraph-font-weight-bold); font-size: var(--typography-paragraph-font-size-4); line-height: var(--typography-paragraph-line-height-4); color: var(--color-content-primary); } .offer-card .offer-card__punch ~ hr.divider, .offer-card .offer-card__punch ~ .offer-card__bottom { margin-top: 0; } /* ============================== FEATURE-SECTION — variante sur fond linen ============================== */ .feature-section--alt { background-color: var(--color-surface-secondary); } /* ============================== ESPACEMENT — bandeau avis / premiere section ============================== Le bandeau avis a deja 40px de padding bas ; ajoute aux 104px de la section suivante, le blanc devenait trop lourd. On ne resserre que cette jonction, pas les autres sections. ============================== */ .reviews-section + .section, .reviews-section + .feature-section { padding-top: var(--spacing-48); } @media (max-width: 767px) { .reviews-section + .section, .reviews-section + .feature-section { padding-top: var(--spacing-32); } } /* ============================== HERO — deux colonnes : texte a gauche, actions a droite ============================== Specifique a /assurance/ : le regard va du titre au texte puis a l'action, dans le sens de lecture. Sous 992px on repasse en colonne unique, actions sous le texte. Le voile du .hero__bg a ete renforce a droite en consequence, les boutons passant desormais sur la partie claire de la photo. ============================== */ .hero__actions { display: flex; flex-direction: column; gap: var(--spacing-16); } .hero__actions .hero__cta-row { display: flex; flex-direction: column; gap: var(--spacing-12); margin-top: 0; width: 100%; } .hero__actions .hero__legend { display: block; } @media (min-width: 992px) { .hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; /* Bas de colonne aligne : le dernier CTA se cale sur la derniere ligne de la description, pas au centre du bloc. */ align-items: end; column-gap: var(--spacing-56); } .hero__actions { width: 360px; align-items: stretch; } .hero__actions .btn { width: 100%; justify-content: center; text-align: center; } .hero__actions .hero__legend { text-align: center; } } @media (max-width: 991px) { .hero__actions { align-items: flex-start; margin-top: var(--spacing-32); } } /* ============================== HERO — hierarchie mobile ============================== En dessous de 768px le titre du DS tombe a 24px, soit la meme taille que le libelle des boutons : plus aucune hierarchie. On remonte le titre, on allege la description et on reduit les deux boutons, le secondaire plus que le primaire. ============================== */ @media (max-width: 767px) { /* Titre — Headline/2 au lieu de Headline/3 */ .hero__title { font-size: var(--typography-headline-font-size-2); line-height: 1.15; } /* Description — Paragraph/3, interligne resserre */ .hero__description { font-size: var(--typography-paragraph-font-size-3); line-height: var(--typography-paragraph-line-height-3); } /* CTA primaire — allege */ .hero__actions .btn { padding: var(--spacing-12) var(--spacing-20); font-size: var(--typography-paragraph-font-size-3); line-height: var(--typography-paragraph-line-height-3); } .hero__actions .btn .icon { --icon-size: 14px; } /* CTA secondaire — un cran en dessous du primaire */ .hero__actions .btn--secondary { padding: var(--spacing-8) var(--spacing-16); font-size: var(--typography-paragraph-font-size-4); line-height: var(--typography-paragraph-line-height-4); } /* Legende centree sous les boutons, qui sont deja centres */ .hero__actions .hero__legend { text-align: center; font-size: var(--typography-paragraph-font-size-4); line-height: var(--typography-paragraph-line-height-4); } } /* ============================== FEATURE-SECTION — CTA centre ============================== Specifique a /assurance/ : le bouton de fin de section et sa legende sont centres sur la colonne. Le padding de compensation qui servait a l'alignement a droite n'a plus lieu d'etre, le centrage alignant deja la legende sur le milieu du bouton. ============================== */ .feature-section__cta { align-items: center; } /* ============================== OFFER-CARD — liste de points ============================== Reprise de l'ordre de la v3 : titre, une phrase, puis trois points scannables. La pastille de portee et le sous-titre faisaient doublon avec ces points, ils ont ete retires ; le caractere obligatoire ou recommande est porte par le premier point, ou il peut etre qualifie precisement. ============================== */ /* Ligne de statut : pastille doree + portee, sur une seule ligne */ .offer-card__status { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-8); margin-top: calc(var(--spacing-16) * -1 + var(--spacing-4)); } .offer-card__status-text { font-size: var(--typography-paragraph-font-size-4); line-height: var(--typography-paragraph-line-height-4); color: var(--color-content-tertiary); } .offer-card__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-8); } .offer-card__points li { position: relative; padding-left: var(--spacing-20); font-size: var(--typography-paragraph-font-size-3); line-height: var(--typography-paragraph-line-height-3); color: var(--color-content-secondary); } .offer-card__points li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: var(--border-radius-full); background-color: var(--color-surface-decorative-brand); } .offer-card__points strong { color: var(--color-content-primary); font-weight: var(--typography-paragraph-font-weight-bold); } /* ============================== CALLOUT sur fond de marque ============================== En surface pleine claire sur le brun, l'encart pesait autant que les cartes produit et s'y collait. Traitement en contour sur fond transparent : il redevient une note secondaire, et l'ecart au-dessus passe de 40 a 64px. ============================== */ .section--brand .callout { --callout-bg: transparent; --callout-border: var(--color-border-secondary-inverse); margin-top: var(--spacing-64); } .section--brand .callout__title { color: var(--color-content-inverse-primary); } .section--brand .callout__text { color: var(--color-content-inverse-secondary); } /* ============================== OFFER-CARD — lien d'action ============================== Reprise du traitement de la v3 : libelle en gras souligne d'un filet dore, sans fleche. Les trois cartes ouvrent le meme Calendly ; le titre, lui, continue de pointer vers le guide. Le titre n'est plus un lien : la carte n'a qu'une seule action, le bouton, ce qui supprime toute ambiguite de destination. ============================== */ /* CTA : pastille doree puis libelle. Ces trois liens menent au parcours de creation, la pastille leur donne le poids visuel qu'un simple lien souligne ne portait pas. */ /* Card entierement cliquable : le lien est porte par le titre du produit (ancre = "RC Pro", "RC decennale"...), et son pseudo-element ::before du socle s'etire sur toute la card. Le CTA doit donc repasser au-dessus de cette surface pour rester cliquable a part. */ .offer-card__cta { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: var(--spacing-12); padding: 0; border-bottom: 0; } .offer-card__cta .icon { display: block; box-sizing: content-box; flex-shrink: 0; --icon-size: var(--icon-size-s); --icon-stroke: var(--icon-stroke-s); padding: var(--spacing-8); border-radius: 50%; background-color: var(--color-surface-decorative-brand); color: var(--color-brand-1000); transition: transform var(--motion-transition-interactive); } .offer-card__cta:hover .icon { transform: translateX(3px); } .offer-card__cta-label { border-bottom: 2px solid transparent; transition: border-color var(--motion-transition-interactive); } .offer-card__cta:hover .offer-card__cta-label { border-bottom-color: var(--color-border-decorative-brand); } /* Les libelles n'ont pas tous le meme nombre de lignes : on reserve deux lignes au bloc bas pour que sa hauteur reste constante, condition de l'alignement des accroches au-dessus. */ @media (min-width: 576px) { .offer-card__bottom { min-height: calc(2 * var(--typography-paragraph-line-height-3) + var(--spacing-8) + var(--spacing-4)); align-items: flex-end; } } /* Retour visuel sur toute la card : survoler n'importe ou anime la fleche du CTA et souligne le titre, pour signaler la zone cliquable. */ .offer-card:hover .offer-card__cta .icon { transform: translateX(3px); } .offer-card:hover .offer-card__link { text-decoration: underline; text-decoration-color: var(--color-border-decorative-brand); text-decoration-thickness: 2px; text-underline-offset: 4px; } /* ============================== OFFER-CARD — prix sous le titre, sur une ligne ============================== Le composant .offer-card__meta du socle empile ses trois lignes, ce qui convient en bas de card (usage de /formation/). Place dans le groupe titre, il prend trop de hauteur : on le passe en ligne. La regle cible le contexte plutot qu'une classe supplementaire, le markup reste donc strictement celui du design system. ============================== */ .offer-card__heading .offer-card__meta { flex-direction: row; /* centrage vertical : en alignement sur la ligne de base, le petit "A partir de" tombe trop bas contre le montant et l'ensemble paraissait tasse */ align-items: center; gap: var(--spacing-8); flex-wrap: wrap; margin-top: var(--spacing-4); } .offer-card__heading .offer-card__meta-top { margin-bottom: 0; line-height: 1; } /* le groupe titre respire un peu plus que les 4px du socle */ .offer-card__heading { gap: var(--spacing-8); } /* ============================== TEMOIGNAGES — fond linen ============================== Le socle rend cette section sur fond blanc. Surcharge locale a /assurance/ uniquement : le composant partage n'est pas modifie, /formation/ garde son fond blanc. ============================== */ .section--testimonials { background-color: var(--color-surface-secondary); } /* Les cartes de temoignage utilisent elles aussi surface-secondary dans le socle : sur cette section desormais linen, elles avaient exactement la meme couleur que leur fond et disparaissaient. On les repasse en blanc, comme les cards produit. */ .section--testimonials .testimonial { background-color: var(--color-surface-tertiary); } /* ============================== OFFER-CARD — respiration autour du prix ============================== Le socle remonte la ligne de statut de 12px pour la coller au titre. Depuis que le prix s'intercale entre les deux, ce rapprochement le laissait a 4px de l'etiquette alors qu'il flotte a 50px sous le titre : le bloc paraissait tasse vers le bas. On annule la remontee et on ajoute un peu d'air, sans toucher a la hauteur du titre qui est ce qui garantit que les trois prix restent sur la meme ligne. ============================== */ .offer-card__heading + .offer-card__status { margin-top: var(--spacing-8); } /* ============================== OFFER-CARD — titre cale en bas de son bloc ============================== Le socle reserve deux lignes au titre pour que les prix des trois cards restent sur la meme ligne. Sur les titres qui tiennent sur une seule ligne, la deuxieme ligne vide laissait 50px de blanc entre le titre et le prix, contre 14px sur le titre a deux lignes. On cale donc le texte du titre en bas de son bloc : le prix se retrouve toujours a la meme distance du titre, et reste par construction a la meme hauteur dans les trois cards. Contrepartie assumee : les titres ne demarrent plus tous au meme niveau, ils se terminent au meme niveau. ============================== */ /* remplacee par la grille imbriquee ci-dessous */ /* ============================== OFFER-CARD — grille imbriquee, alignement ligne par ligne ============================== Le socle reservait deux lignes au titre pour que les prix des trois cards tombent a la meme hauteur. Quand les trois titres tiennent sur une ligne, cette reserve laissait une ligne vide entre la photo et le titre. On passe donc par une grille imbriquee (subgrid) : chaque rangee de la card est dimensionnee par le contenu le plus haut de la rangee, sur toute la ligne de la grille. Plus aucune reserve fixe, donc plus d'espace mort, et l'alignement se fait de lui-meme sur chaque rangee (titre + prix, statut, description, points, accroche, CTA). La rangee des points porte le 1fr : c'est elle qui absorbe l'espace restant et pousse l'accroche et le CTA en bas. ============================== */ @media (min-width: 768px) { /* 9 rangees : visuel, titre, prix, statut, description, points, accroche, filet, CTA. Celle des points porte le 1fr, c'est elle qui absorbe l'espace restant et pousse le bas de card. */ .offers-grid { grid-template-rows: auto auto auto auto auto 1fr auto auto auto; } .offer-card { display: grid; grid-template-rows: subgrid; grid-row: span 9; /* la subgrid herite du gap de .offers-grid (32px) : sans cette remise a zero, 32px de blanc s'inseraient entre la photo et le titre, en plus du padding du corps de card */ row-gap: 0; } .offer-card__body { display: grid; grid-template-rows: subgrid; grid-row: span 8; row-gap: var(--spacing-16); } /* le groupe titre+prix s'efface : ses deux enfants deviennent des rangees a part entiere, donc le prix s'aligne meme quand un titre passe sur deux lignes */ .offer-card__heading { display: contents; } .offer-card__heading .offer-card__meta { margin-top: 0; } /* la reserve de deux lignes du socle n'a plus lieu d'etre */ .offer-card__title { min-height: 0; } /* les marges automatiques etaient la pour pousser le bas de card ; c'est desormais le role de la rangee en 1fr */ .offer-card__punch, .offer-card .offer-card__punch ~ hr.divider, .offer-card .offer-card__punch ~ .offer-card__bottom, .offer-card__heading + .offer-card__status { margin-top: 0; } } /* ============================== HERO — cadrage de la photo ============================== La photo est en 16:9 alors que le hero est bien plus large que haut : object-fit: cover rogne donc en haut et en bas. Centre par defaut, le bouton principal tombait sur le visage. On descend le point d'ancrage pour degager la tete au-dessus des CTA. Sous 768px le hero devient haut, le rognage passe a l'horizontale et le reglage n'a plus d'objet : on reste au centre. ============================== */ @media (min-width: 768px) { .hero__bg img { object-position: 50% 25%; } } /* ============================== OFFER-CARD — produit pas encore commercialise ============================== La prevoyance n'est pas encore ouverte a la souscription. La card reste informative mais ne doit rien promettre : pas de lien etire, pas de CTA actionnable, et une pastille grise plutot que doree pour ne pas se lire comme un bouton. ============================== */ .badge--bientot { background-color: var(--color-surface-decorative-black); color: var(--color-content-inverse-primary); } .offer-card__cta--bientot { cursor: default; color: var(--color-content-tertiary); } .offer-card__cta--bientot .icon { background-color: var(--color-border-secondary); color: var(--color-content-secondary); } /* aucun retour au survol : il n'y a rien a cliquer */ .offer-card:hover .offer-card__cta--bientot .icon, .offer-card__cta--bientot:hover .icon { transform: none; } .offer-card__cta--bientot .offer-card__cta-label { border-bottom-color: transparent; }