/* BA35 · compléments propres au site, absents de la maquette. La maquette (design/ba35.css, servie en /assets/ba35.css) reste la référence : ne rien y redéfinir ici sans raison d'accessibilité. */ /* Lien d'évitement : visible seulement au clavier */ .b-page .b-evitement{position:absolute;left:16px;top:-80px;z-index:100;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--marine);color:#fff;font-size:15px} .b-page .b-evitement:focus{top:10px} main:focus{outline:none} /* Ancres : le titre ciblé ne passe pas sous le bandeau collant (64 px) */ .b-page [id]{scroll-margin-top:80px} /* Focus visible (la maquette n'en définit pas) */ .b-page :focus-visible{outline:2px solid var(--ac);outline-offset:3px} .b-page .b-sombre :focus-visible,.b-page .b-marine :focus-visible,.b-page .b-pied :focus-visible,.b-page .sombre :focus-visible{outline-color:#fff} .b-page .b-pil:focus-visible{border-radius:999px} /* Emplacement de contenu à fournir (règle « aucun contenu inventé ») */ .b-a-fournir{color:var(--legende)} .b-sombre .b-a-fournir,.b-marine .b-a-fournir,.b-pied .b-a-fournir,.sombre .b-a-fournir{color:rgba(255,255,255,.72)} /* Filigrane du pied, position reprise de la maquette */ .b-pied-filigrane{right:-120px;top:-140px;width:640px} /* Mouvement réduit : aucune animation ni transition */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .b-page *,.b-page *::before,.b-page *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} .b-page .app{opacity:1;transform:none} } /* ---------- Bandeau (L1-2) ---------- */ /* Avec JavaScript, le déroulant suit aria-expanded (Entrée pour ouvrir, Échap pour fermer) ; sans JavaScript, la règle de la maquette (survol, focus) s'applique seule. */ .js .b-deroule:focus-within .b-sous-menu{display:none} .js .b-deroule.ouvert .b-sous-menu{display:block} @media (hover:hover){.js .b-deroule:hover .b-sous-menu{display:block}} .b-deroule>button{min-height:44px} .b-page a.b-membre{min-height:44px;min-width:44px;justify-content:center} /* Lien de candidature (« Faire financer mon projet ») dans le menu mobile, quand le bouton du bandeau est masqué (téléphone) */ .b-page .b-nav .b-liens a.b-mobile-seul.b-tel-seul{display:none} @container (max-width:720px){.b-page .b-nav.ouvert .b-liens a.b-mobile-seul.b-tel-seul{display:block;font-weight:600;color:var(--marine)}} /* Menu mobile ouvert : fond opaque. Le flou de la maquette ne s'applique pas dans le bandeau (lui-même flouté), et le texte de la page transparaissait sous les liens. */ .b-page .b-nav.ouvert .b-liens{background:#fff} /* Rubrique active des liens du sous-menu et du menu mobile */ .b-page .b-liens a[aria-current="page"]{color:var(--encre);font-weight:600} /* ---------- Pied (L1-2) ---------- */ /* Titres de colonnes : h2 pour la structure, apparence du h5 de la maquette */ .b-pied .b-pied-titre{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin:0 0 4px} /* Cibles de 44 px : l'écart entre liens passe dans la hauteur du lien */ .b-pied ul{gap:0} .b-page .b-pied ul a{display:inline-flex;align-items:center;min-height:44px} .b-pied-accueil{display:inline-block} .b-pied-texte{max-width:340px} .b-pied-texte+.b-pied-texte{margin-top:12px} .b-page a.b-marque{min-height:44px} /* Cibles de 44 px (la maquette donne 40 px au petit bouton) */ .b-page .b-pil-petit{min-height:44px} /* Bandeau des builds de test (BA35_DONNEES=fictives), jamais publié */ .b-fictif{margin:0;padding:10px 16px;background:#8a4b00;color:#fff;font-size:14px;text-align:center} /* ---------- Nos startups (L1-6) ---------- */ /* Positions reprises des styles en ligne de la maquette */ .b-ouv.b-ouv-page{padding-bottom:72px} .b-ouv-page h1{max-width:980px} .b-ouv .b-filigrane.b-filigrane-page{left:auto;right:-160px;transform:none;top:-40px;width:720px} .b-section.b-section-suite{padding-top:88px} .b-liste-nue{list-style:none;padding:0;margin-bottom:0} /* Nom de la carte : h2 pour la structure, apparence du h4 de la maquette */ .b-start .b-start-nom{font-size:18px;letter-spacing:-.015em} .b-start .pied{margin-top:auto} .b-page .b-start .pied a{display:inline-flex;align-items:center;min-height:44px} .b-masque{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- Accueil (L1-3) : styles en ligne de la maquette, passés en classes ---------- */ .b-ouv h1.b-accueil-titre{font-size:clamp(42px,6cqw,88px);max-width:1080px;margin:0 auto} .b-valeurs .b-sous.b-qui{margin-top:0;max-width:760px;font-size:clamp(21px,1.9cqw,27px);color:var(--encre);line-height:1.38} /* Kicker de section porté par un h2 : même apparence que le kicker de la maquette */ .b-page h2.b-kicker{font-family:var(--text);font-size:13px;font-weight:600;color:var(--ac);margin-bottom:22px} /* Les trois valeurs : apparence du h2 de la maquette */ .b-ec .b-filigrane.b-ec-filigrane{right:-160px;top:40px;width:760px} .b-sous.b-sous-colle{margin-top:0} .b-section.b-section-pleine{padding-left:0;padding-right:0} .b-titre.b-titre-espace{margin-bottom:48px} .b-orient.b-orient-accueil{max-width:880px;margin:48px auto 0;text-align:left} .b-page a.b-orient-carte.b-orient-blanc{background:#fff} .b-page a.b-orient-carte.b-orient-marine{background:var(--marine);color:#fff} .b-orient-marine span{color:rgba(255,255,255,.8)} .b-orient-marine svg{color:var(--ciel)} /* Menu : libellés sur une ligne (l'entrée Equity Challenge, ADR-011, allonge le menu de la maquette) */ .b-page .b-liens a,.b-deroule>button,.b-page a.b-membre{white-space:nowrap} /* Le menu complet demande environ 1 200 px : en dessous, bouton menu (règles de la maquette à 1 000 px, seuil déplacé, ADR-013) */ @container (max-width:1200px){ .b-liens{display:none} .b-deroule{display:none} .b-menu{display:inline-flex} .b-page .b-nav.ouvert .b-liens a.b-mobile-seul{display:block} } /* ---------- Contact (L1-8) : styles en ligne de la maquette, passés en classes ---------- */ .b-ouv.b-ouv-contact{padding-bottom:24px} .b-ouv-contact h1.b-contact-titre{max-width:900px} .b-section.b-section-contact{padding-top:40px} .b-form.b-form-contact{margin-top:0} /* Le formulaire dessiné est remplacé par un bouton (ADR-015) : même encadré que la maquette */ .b-form-contact .b-contact-sous-titre{font-size:22px;letter-spacing:-.02em} .b-form-contact>p{margin-top:12px;color:var(--texte)} .b-page .b-mentions.b-mentions-centre{text-align:center;margin:24px auto 0} /* ---------- Entrepreneurs et Business Angels (L1-4, L1-5) : styles en ligne de la maquette, passés en classes ---------- */ .b-ouv .b-filigrane.b-filigrane-entrepreneurs{left:auto;right:-160px;transform:none;top:-40px;width:760px} .b-ouv h1.b-titre-1000{max-width:1000px} .b-photo-in.b-photo-entrepreneurs{height:clamp(340px,38cqw,540px)} .b-photo-in.b-photo-entrepreneurs>img{object-position:center 40%} .b-grille-2.b-grille-espace{margin-top:56px} .b-encadre.b-encadre-espace{margin-top:48px} .b-titre.b-titre-moyen{font-size:clamp(38px,4.4cqw,62px)} .b-page a.b-logo.b-logo-brume{background:var(--brume)} .b-temoin{margin:0} .b-temoin.b-temoin-clair{background:var(--brume);color:var(--encre)} .b-temoin.b-temoin-clair cite{color:var(--legende)} .b-temoin .b-a-fournir{color:rgba(255,255,255,.72)} .b-temoin.b-temoin-clair .b-a-fournir{color:var(--legende)} /* Titres de cartes, encadrés et étapes en h3 (hiérarchie) : apparence du h4 de la maquette */ .b-tuile h3{font-size:23px;letter-spacing:-.02em;line-height:1.15} .b-encadre h3{font-size:22px;letter-spacing:-.02em} .b-etape h3{font-size:20px;line-height:1.2;letter-spacing:-.015em;margin-top:8px} .b-portrait .nom{font-size:18px;font-weight:600;letter-spacing:-.015em;margin:0} @container (max-width:1000px){.b-etape h3{margin-top:10px}} /* Business Angels (L1-5) : styles en ligne de la maquette repris en classes */ .b-ouv h1.b-titre-ba{font-size:clamp(44px,6.4cqw,96px);max-width:1100px;margin:0 auto} .b-photo-in.b-photo-ba{height:clamp(340px,40cqw,560px)} .b-photo-in.b-photo-ba>img{object-position:center 30%} .b-kicker.b-kicker-serre{margin-bottom:14px} .b-encadre.b-encadre-blanc{background:#fff} .b-vid .b-a-fournir{color:rgba(255,255,255,.72)} /* Pages légales (L1-11) : texte courant, sans équivalent dans la maquette */ .b-legal{max-width:820px} .b-legal h1{margin-bottom:32px} .b-legal h2{font-size:clamp(22px,2.2cqw,28px);letter-spacing:-.02em;line-height:1.15;margin:40px 0 12px} .b-legal p:not(.b-kicker){color:var(--texte);max-width:68ch;margin:0 0 12px} .b-legal a{color:var(--ac);text-decoration:underline;text-underline-offset:3px} .b-legal-liste{margin:0;display:grid;gap:8px} .b-legal-liste div{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:16px} .b-legal-liste dt{font-weight:600;color:var(--encre)} .b-legal-liste dd{margin:0;color:var(--texte)} .b-legal-tableau{overflow-x:auto;margin:16px 0} .b-legal table{width:100%;border-collapse:collapse;font-size:15px} .b-legal th,.b-legal td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--filet)} .b-legal thead th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--legende)} @container (max-width:600px){.b-legal-liste div{grid-template-columns:minmax(0,1fr);gap:2px}} /* Cédants (L1-9) : styles en ligne de la maquette repris en classes */ .b-cedant-ouv{overflow:hidden;padding:120px 0 132px} .b-filigrane.clair.b-cedant-filigrane{left:auto;right:-140px;top:-60px;transform:none;width:820px;opacity:.07} .b-page h1.b-cedant-titre{font-size:clamp(46px,7cqw,100px);line-height:.98;letter-spacing:-.045em;max-width:980px} .b-cedant-titre span{color:var(--ciel)} .b-sous.b-sous-680{max-width:680px} .b-chiffres.b-chiffres-cedant{padding:88px 0 0} .b-chiffres strong.b-chiffre-a-fournir{font-size:clamp(26px,2.4cqw,34px);letter-spacing:-.02em} .b-page .b-video-txt blockquote.b-a-fournir,.b-page .b-video-txt cite.b-a-fournir{color:#fff} .b-reforme h3{font-size:20px;letter-spacing:-.015em;margin-top:18px} .b-grille-2.b-grille-tournant{align-items:center;gap:64px} .b-page h3.b-exclus-titre{font-family:var(--text);font-size:14px;font-weight:400;letter-spacing:normal;color:rgba(255,255,255,.7)} .b-page h3.b-exclus-titre-suite{margin-top:32px} .b-exclus.b-liste-nue{margin-top:22px} .b-grille-2.b-grille-espace-64,.b-grille-3.b-grille-espace-64{margin-top:64px} .b-encart.b-encart-24{margin-top:24px} .b-page .b-mentions.b-mentions-faq{margin-top:32px} figure.b-video{margin-left:0;margin-right:0;margin-bottom:0} /* Actualités & Conseils (L1-10) : styles en ligne de la maquette repris en classes ; filtres en liens (pages de thème) */ .b-ouv.b-actu-ouv{padding-bottom:56px} .b-ouv .b-filigrane.b-filigrane-actu{left:auto;right:-160px;transform:none;top:-40px;width:720px} .b-ouv h1.b-actu-titre{max-width:980px} .b-page .b-filtres a{min-height:44px;display:inline-flex;align-items:center;border-radius:999px;padding:0 18px;font-size:15px;background:var(--brume);color:var(--encre)} .b-page .b-filtres a.actif{background:var(--marine);color:#fff} .b-section.b-actu-liste{padding-top:72px} .b-article .vis .b-filigrane.b-actu-vis-filigrane{width:420px;right:-60px;top:-40px;opacity:.1} .b-actu-vis-txt{position:absolute;left:40px;bottom:36px;color:#fff;font-family:var(--display);font-weight:600;letter-spacing:-.04em;line-height:.9} .b-actu-vis-txt .grand{display:block;font-size:96px} .b-actu-vis-txt .petit{display:block;font-size:30px;letter-spacing:-.02em;margin-top:10px;color:var(--ciel)} /* L15-4 : texte du visuel centré dans son cadre (« À la une » et vignettes texte des cartes). */ .b-actu-vis-txt.centre{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center} .b-actu-vis-txt.vignette .grand{font-size:36px;line-height:1;letter-spacing:-.03em;overflow-wrap:anywhere} /* Pictogramme « lecture » sur la miniature d'une vidéo (décoratif : rien n'est chargé avant le clic, sur la page de l'article). */ .b-actu-lecture{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--marine);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(1,32,66,.3)} .b-actu-lecture svg{margin-left:3px} .b-article h2{font-size:21px;line-height:1.2;letter-spacing:-.02em} .b-article.une h2{font-size:clamp(28px,2.6cqw,38px)} /* Page d'un article */ .b-fil{margin-bottom:28px;font-size:15px} .b-page .b-fil a{display:inline-flex;align-items:center;min-height:44px;color:var(--ac)} .b-kicker a{color:inherit} .b-ouv h1.b-article-titre,.b-ouv h1.b-titre-long{font-size:clamp(36px,4.6cqw,64px);line-height:1.04;letter-spacing:-.035em;max-width:980px} /* Titre long d'une page (Notre collectif d'experts, retours d'Élie du 26/10/2026) : comme un titre d'article, 34 px au plus petit pour que « complémentaires, » tienne sur une ligne à 320 px. */ .b-ouv h1.b-titre-long{font-size:clamp(34px,4.6cqw,64px)} .b-article-meta{margin-top:20px;font-size:14px;color:var(--legende)} .b-section.b-article-corps{padding-top:24px} /* L6-4 : articles d'Airtable. Image en tête du texte ; intertitres, listes et citations du texte riche. */ .b-article-image{display:block;width:100%;height:auto;max-height:480px;object-fit:cover;border-radius:24px;margin:0 0 32px} .b-legal h3{font-size:19px;letter-spacing:-.01em;margin:28px 0 8px} .b-legal ul,.b-legal ol{color:var(--texte);max-width:68ch;margin:0 0 12px;padding-left:22px} .b-legal li{margin:0 0 4px} .b-legal blockquote{margin:0 0 12px;padding-left:16px;border-left:3px solid var(--filet);color:var(--texte)} /* « À la une » côte à côte, comme prévu par design/ba35.css (.b-article.une) mais écrasé par .b-page a.b-article */ .b-page a.b-article.une{flex-direction:row} @container (max-width:1000px){.b-page a.b-article.une{flex-direction:column}} .b-ouv .b-article-meta{margin-top:20px} /* Notre collectif d'experts, page d'attente (L1-7a) : styles en ligne de la maquette repris en classes */ .b-ouv.b-experts-ouv{padding-bottom:72px} .b-section.b-experts-section{padding-top:96px} .b-titre.b-titre-56{font-size:clamp(36px,4cqw,56px)} /* Retour de recette d'Élie (16/10/2026, lot-1.md) : écart assumé à la maquette. Les accents des capitales (É, À, Ê) des grands titres montent au-dessus de leur ligne d'environ 0,18 em et touchaient le sur-titre. Un seul réglage, en em pour suivre la taille du titre : au moins 12 px visibles entre le sur-titre et le haut des accents, à toutes les largeurs. L'espace est porté par le titre seul (marge basse du sur-titre à 0) : il ne double pas dans un conteneur flex comme les cartes .b-voie, où les marges ne fusionnent pas. Chargé aussi par l'espace membre. */ .b-page .b-kicker:has(+ :is(h1, h2, h3)){margin-bottom:0} .b-page .b-kicker + :is(h1, h2, h3){margin-top:calc(.2em + 14px)} /* ---------- Retours BA35 du 19/10/2026 (ADR-031) ---------- Écarts à la maquette demandés par le brief de Caroline (docs/retours/2026-10-19-caroline-brief.md, lot-10.md). La maquette (design/) ne change pas : chaque écart est écrit ici, avec sa raison. */ /* L10-11 · Un seul bleu clair (ADR-031, point 6) : --ciel (#8db4ff) sur fond sombre, la même teinte assombrie sur fond clair (5,3 sur blanc, 4,8 sur brume). Pour changer de nuance : cette seule valeur, en restant à 4,5 de contraste au moins. Sur Equity Challenge (fond sombre), le sur-titre passe du vert au bleu clair ; le vert reste pour les pastilles. */ .b-page{--ac:#436ab1} .b-page .b-ec .b-kicker{color:var(--ciel)} /* L10-1 · Moins d'espace entre les sections (brief § 2) : 132 → 96 px sur ordinateur, 88 → 64 px sur téléphone */ .b-section{padding:96px 0} @container (max-width:720px){.b-section{padding:64px 0}.b-section.b-section-suite{padding-top:64px}} /* L10-1 · Chiffres clés centrés sur leur barre et leur texte ; l'unité (« M€ ») de la couleur du chiffre (brief § 7.3, § 8.3, § 11.2) */ .b-chiffres>div{text-align:center} .b-chiffres p{margin-left:auto;margin-right:auto} .b-chiffres strong em{color:inherit} /* L10-1 · Pied de page : lien vers la page LinkedIn de BA35 (brief § 2), cible de 44 px */ .b-page .b-pied a.b-pied-reseau{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:#fff} /* L10-1 · FAQ d'Entrepreneurs et de Business Angels (brief § 7.8, § 8.7) : sur-titre devenu le titre de la section, questions plus serrées pour les voir toutes sur un écran d'ordinateur */ .b-faq.b-faq-serree{margin-top:8px} .b-faq-serree summary{padding:14px 0;font-size:19px} .b-faq-serree details p{padding-bottom:18px} @container (max-width:720px){.b-faq-serree summary{font-size:17px}} /* L10-2 · Accueil : Photo8 derrière la promesse (brief § 11.1). Voile marine dégradé sous le texte blanc, contraste AA mesuré à 1440 et 390 px (voir la PR) ; la photo garde ses couleurs, seul le voile la fonce. */ .b-ouv.b-ouv-photo{padding:120px 0 128px;background:var(--nuit);color:#fff} .b-ouv-photo .b-ouv-fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%} .b-ouv-photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,20,43,.84) 0%,rgba(0,20,43,.7) 55%,rgba(0,20,43,.88) 100%)} .b-ouv-photo .b-dessus{z-index:2} .b-ouv.b-ouv-photo h1{color:#fff} .b-ouv.b-ouv-photo h1 span{color:var(--ciel)} @container (max-width:720px){.b-ouv.b-ouv-photo{padding:72px 0 80px}} /* L10-2 · Bandeau photo (brief § 7.7, § 11.4) : statique, inclinaisons alternées de −4° à +4°, chevauchements légers, formats paysage, carré et portrait. Sur téléphone : ±2°, deux rangées, jamais de défilement horizontal. */ .b-bandeau-photos{display:flex;justify-content:center;align-items:center;padding:28px 12px} .b-bandeau-photos li{flex:none;position:relative;border-radius:18px;overflow:hidden;background:var(--brume);box-shadow:0 18px 40px rgba(1,32,66,.18);border:6px solid #fff} .b-bandeau-photos li+li{margin-left:-26px} .b-bandeau-photos li.paysage{width:300px;height:208px} .b-bandeau-photos li.carre{width:232px;height:232px} .b-bandeau-photos li.portrait{width:196px;height:256px} .b-bandeau-photos img{width:100%;height:100%;object-fit:cover} .b-bandeau-photos li.portrait img{object-position:30% center} .b-bandeau-photos li:nth-child(1){transform:rotate(-4deg);z-index:1} .b-bandeau-photos li:nth-child(2){transform:rotate(3deg) translateY(10px);z-index:2} .b-bandeau-photos li:nth-child(3){transform:rotate(-2deg) translateY(-8px);z-index:3} .b-bandeau-photos li:nth-child(4){transform:rotate(4deg) translateY(6px);z-index:2} .b-bandeau-photos li:nth-child(5){transform:rotate(-3deg);z-index:1} /* Entre 721 et 1240 px : tailles proportionnelles à la largeur, pour tenir dans le cadre */ @container (max-width:1240px){ .b-bandeau-photos li.paysage{width:22cqw;height:15.2cqw} .b-bandeau-photos li.carre{width:17cqw;height:17cqw} .b-bandeau-photos li.portrait{width:14cqw;height:18.4cqw} .b-bandeau-photos li+li{margin-left:-2cqw} } @container (max-width:720px){ .b-bandeau-photos{flex-wrap:wrap;row-gap:10px;padding:16px 8px;overflow:clip} .b-bandeau-photos li{border-width:4px;border-radius:14px} .b-bandeau-photos li+li{margin-left:-10px} .b-bandeau-photos li:nth-child(4){margin-left:0} /* Deux rangées : trois photos, puis deux */ .b-bandeau-photos li{height:auto} .b-bandeau-photos li.paysage{aspect-ratio:3/2} .b-bandeau-photos li.carre{aspect-ratio:1} .b-bandeau-photos li.portrait{aspect-ratio:3/4} .b-bandeau-photos li:nth-child(1){width:42%} .b-bandeau-photos li:nth-child(2){width:29%} .b-bandeau-photos li:nth-child(3){width:25%} .b-bandeau-photos li:nth-child(4){width:50%} .b-bandeau-photos li:nth-child(5){width:36%} .b-bandeau-photos li:nth-child(odd){transform:rotate(-2deg)} .b-bandeau-photos li:nth-child(even){transform:rotate(2deg)} } /* L10-3 · Accueil : trois cartes de valeurs côte à côte, une sous l'autre sur téléphone (brief § 11.3) */ .b-valeurs-cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px;text-align:left} .b-valeurs-cartes h3{font-size:clamp(22px,2cqw,27px);letter-spacing:-.02em;color:var(--marine)} .b-valeurs-cartes p{margin-top:10px} .b-valeurs .b-bandeau-photos{margin-top:40px} @container (max-width:720px){.b-valeurs-cartes{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:32px}} /* L10-3 · Equity Challenge raccourcie (brief § 11.5) : texte et deux dotations à gauche, Photo9 à droite */ .b-ec-court{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center} .b-ec-court .b-ec-logo{height:44px;margin-bottom:20px} .b-ec-court .b-kicker{margin-bottom:14px} .b-ec-court .b-titre{font-size:clamp(32px,3.3cqw,46px);line-height:1.05;max-width:560px} .b-ec-court .b-sous{margin-top:20px;color:rgba(255,255,255,.82);max-width:560px} .b-dotations.b-dotations-deux{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:32px} .b-ec-precision{margin-top:14px;font-size:15px;color:rgba(255,255,255,.76)} .b-ec-court .b-fleche{margin-top:22px} .b-ec-photo{margin:0;border-radius:22px;overflow:hidden;aspect-ratio:4/3;background:#0a2240} .b-ec-photo img{width:100%;height:100%;object-fit:cover} @container (max-width:720px){ .b-ec-court{grid-template-columns:minmax(0,1fr);gap:32px} .b-dotations.b-dotations-deux{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px} } /* L10-4 · Investir autrement : pictogrammes et encart Cédants plus petit que le reste (brief § 7.4) */ .b-tuile .ico{margin-bottom:2px} .b-bandeau-cedant.b-bandeau-cedant-petit{padding:24px 32px;gap:24px;margin-top:20px} .b-bandeau-cedant-petit .b-kicker{font-size:12px;margin-bottom:8px} .b-bandeau-cedant-petit h3{font-size:clamp(19px,1.7cqw,22px)} .b-bandeau-cedant-petit p{font-size:15px;margin-top:6px} .b-bandeau-cedant-petit .b-filigrane{width:300px;top:-90px;right:-60px} @container (max-width:720px){.b-bandeau-cedant.b-bandeau-cedant-petit{padding:20px 22px}} /* L10-4, L10-5 · Bouton à la fin d'une section (brief § 7.1, § 8.1) */ .b-actions.b-actions-section{margin-top:48px;justify-content:center} /* L10-4, L10-5 · Témoignages en une seule vidéo : emplacement 16:9 tant qu'elle n'est pas publiée (brief § 7.5) */ .b-video-attente{aspect-ratio:16/9;border-radius:var(--r);background:var(--brume);display:grid;place-items:center;padding:24px;text-align:center} /* L10-4, L10-5 · Carte d'identité à côté des conditions (brief § 7.6, § 8.5) ; au-dessus sur téléphone. L10-11 : images de BA35 (design1, design2), décoratives */ .b-identite{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px;align-items:stretch;margin-top:48px} .b-identite-carte{border-radius:24px;background:#fff;padding:24px;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 40px rgba(1,32,66,.08)} .b-identite-image{display:block;width:100%;max-width:252px;height:auto} .b-identite .b-encadre{grid-template-columns:minmax(0,1fr);align-items:start;align-content:center;gap:20px} .b-identite .b-encadre ul{grid-template-columns:minmax(0,1fr)} @container (max-width:720px){ .b-identite{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:32px} .b-identite-image{max-width:220px} } /* L10-4, L10-5 · Étapes : chiffres plus gros, tous dans un cercle de couleur (brief § 7.6, § 8.5) */ .b-etapes-cercles .b-etape .n,.b-etapes-cercles .b-etape:last-child .n{width:60px;height:60px;font-size:24px;background:var(--marine);color:#fff} .b-etapes-cercles .b-etapes-rail{top:30px;left:30px;right:30px} @container (max-width:720px){ .b-etapes-cercles .b-etape{grid-template-columns:60px minmax(0,1fr)} .b-etapes-cercles .b-etapes-rail{left:30px;top:30px;bottom:30px} } .b-etapes-cercles+.b-note{margin-top:40px} /* L10-6 · Contact : les deux premiers choix plus grands, « Autre demande » plus petit et secondaire (brief § 4) */ .b-orient.b-orient-contact{margin-top:44px;gap:20px} .b-page .b-orient-contact a.b-orient-carte{min-height:230px;padding:36px 34px;background:#fff;box-shadow:0 0 0 1px var(--filet),0 24px 50px rgba(1,32,66,.08)} .b-orient-contact .b-orient-carte b{font-size:clamp(24px,2.2cqw,30px);line-height:1.15} .b-orient-contact .b-orient-carte span{display:block;margin-top:8px;font-size:16px} .b-orient-contact .b-orient-carte svg{width:28px;height:28px} .b-form.b-form-discret{max-width:600px;padding:18px 22px;background:var(--brume);box-shadow:none;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:center} .b-form-discret>*{grid-column:1} .b-form-discret .b-contact-sous-titre{font-size:17px} .b-form-discret>p{margin-top:4px;font-size:14px} .b-form-discret .b-coches{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px 14px;margin-top:6px} .b-form-discret .b-coches li{font-size:14px} .b-form-discret .b-coches li svg{width:16px;height:16px} .b-form-discret .b-form-pied{grid-column:2;grid-row:1/span 3;margin:0;padding:0;border:0;flex-direction:column;align-items:flex-end;gap:6px} .b-form-discret .b-form-pied small{order:2;font-size:12px} /* Sur téléphone, le bloc se réduit au titre et au bouton, sur une ligne : il reste nettement plus petit que chaque carte. */ @container (max-width:720px){ .b-form.b-form-discret{padding:16px 18px;column-gap:16px} .b-form-discret>p,.b-form-discret .b-coches,.b-form-discret .b-form-pied small{display:none} .b-form-discret .b-form-pied{grid-row:1} } @container (max-width:720px){.b-page .b-orient-contact a.b-orient-carte{min-height:132px;padding:26px 22px}} /* L10-7a · Liste des actualités : titre plus petit, la première rangée d'articles visible sans défiler (brief § 5) */ .b-ouv h1.b-actu-titre{font-size:clamp(34px,4.2cqw,60px)} /* L10-8b · Nos startups : description courte sous le nom, en petit, deux lignes au plus (ADR-031) */ .b-start p.b-start-desc{flex:none;font-size:14px;line-height:1.35;color:var(--texte);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* L10-7b · Vidéo YouTube chargée au clic (ADR-032) : image servie par le site, bouton de lecture, lecteur créé au clic */ .b-yt{margin:0 0 32px} .b-yt-cadre{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:var(--marine)} .b-yt-lancer{position:absolute;inset:0;display:grid;place-items:center;width:100%;padding:0;border:0;background:transparent;cursor:pointer;font:inherit;text-decoration:none} .b-legal a.b-yt-lancer,.b-legal a.b-pil{text-decoration:none} .b-yt-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .b-yt-embleme{position:absolute;top:50%;left:50%;width:34%;height:auto;transform:translate(-50%,-50%);opacity:.14} .b-yt-bouton{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:14px 26px 14px 20px;border-radius:999px;background:#fff;color:var(--marine);font-size:17px;font-weight:600;box-shadow:0 12px 30px rgba(1,32,66,.28);transition:transform .2s} .b-yt-lancer:hover .b-yt-bouton{transform:scale(1.04)} .b-yt-lancer:focus-visible{outline:3px solid var(--ac);outline-offset:-3px} .b-yt-lecteur{position:absolute;inset:0;width:100%;height:100%;border:0} .b-yt-mention{margin-top:10px;font-size:13px;color:var(--legende)} /* L31-1 : vidéo verticale (YouTube Short) : cadre 9:16, 360 px au plus, centré ; sur téléphone, toute la largeur utile jusqu'à 360 px. La miniature hqdefault d'un Short est horizontale avec des bandes : object-fit:cover (.b-yt-image) n'en garde que le centre, c'est-à-dire l'image verticale. L'