porte son propre conteneur 1180px, comme dans le design. Le max-width sur .bip-root est une bidouille de l'export WordPress, qui doit ensuite ressortir les sections en marges négatives. */ .bip-root{ font-family:var(--bip-font-sans); font-size:var(--bip-fs-base); line-height:var(--bip-lh-body); font-weight:var(--bip-fw-regular); color:var(--bip-text); background:var(--bip-bg); -webkit-font-smoothing:antialiased; /* `clip` et non `hidden` : le prototype porte overflow-x:hidden sur un div englobant, or cette classe est ici sur le , donc ancêtre du header sticky. Un ancêtre en overflow:hidden devient le conteneur de défilement de référence et le sticky ne colle plus ; `clip` coupe le débordement horizontal sans créer ce conteneur. */ overflow-x:clip; } .bip-on-dark{ color:var(--bip-text-on-dark); } /* ============ Titres ============ */ .bip-h1,.bip-h2,.bip-h3{ font-family:var(--bip-font-heading); font-weight:var(--bip-fw-heavy); line-height:var(--bip-lh-tight); color:inherit; margin:0; } .bip-h1{ font-size:var(--bip-fs-h1); font-weight:var(--bip-fw-heavy); } .bip-h2{ font-size:var(--bip-fs-h2); font-weight:var(--bip-fw-bold); } .bip-h3{ font-size:var(--bip-fs-h3); font-weight:var(--bip-fw-bold); } @media(max-width:900px){ .bip-h1{ font-size:50px; } .bip-h2{ font-size:38px; } .bip-h3{ font-size:25px; } } @media(max-width:560px){ .bip-h1{ font-size:40px; } .bip-h2{ font-size:30px; } } /* ============ Boutons — pilules (signature de marque) ============ */ .bip-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--bip-font-sans); font-weight:var(--bip-fw-bold); font-size:var(--bip-fs-base); line-height:1; text-decoration:none; cursor:pointer; white-space:nowrap; border:2px solid transparent; border-radius:var(--bip-radius-pill); padding:14px 32px; transition:var(--bip-transition); } .bip-btn--primary{ background:var(--bip-blue); color:var(--bip-white); border-color:var(--bip-blue); } .bip-btn--primary:hover{ background:var(--bip-charcoal); border-color:var(--bip-charcoal); color:var(--bip-white); } .bip-btn--outline{ background:transparent; color:var(--bip-blue); border-color:var(--bip-blue); border-radius:var(--bip-radius-pill-sm); padding:12px 30px; } .bip-btn--outline:hover{ background:var(--bip-blue); color:var(--bip-white); } .bip-btn--lg{ font-size:var(--bip-fs-lg); padding:18px 40px; } .bip-btn--sm{ font-size:var(--bip-fs-sm); padding:10px 22px; } /* ============ Eyebrow ============ */ .bip-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--bip-font-sans); font-size:var(--bip-fs-xs); font-weight:var(--bip-fw-bold); letter-spacing:.14em; text-transform:uppercase; color:var(--bip-blue); border:1px solid rgba(42,58,242,.28); border-radius:999px; padding:7px 15px; } .bip-eyebrow__dot{ width:6px; height:6px; border-radius:50%; background:var(--bip-blue); } /* Sur fond sombre : texte et point blancs, bordure adoucie (spécifié au README, absent du bundle). */ .bip-on-dark .bip-eyebrow{ color:var(--bip-white); border-color:rgba(255,255,255,.32); } .bip-on-dark .bip-eyebrow__dot{ background:var(--bip-white); } /* ============ Carte ============ */ .bip-card{ background:var(--bip-surface); border:1px solid var(--bip-border); border-radius:var(--bip-radius-md); box-shadow:var(--bip-shadow-sm); padding:var(--bip-space-8); } /* ============ Pilule téléphone ============ */ .bip-phone{ display:inline-flex; align-items:center; gap:9px; border:2px solid rgba(42,58,242,.3); border-radius:999px; padding:8px 16px; color:inherit; text-decoration:none; font-weight:var(--bip-fw-bold); } .bip-phone b{ color:var(--bip-blue); font-style:italic; } .bip-on-dark .bip-phone{ border-color:rgba(255,255,255,.3); } .bip-on-dark .bip-phone b{ color:var(--bip-white); } /* ============ Étroitesse : rien ne doit imposer sa largeur au document ============ */ /* Le design ne maquette pas le mobile et pose `white-space:nowrap` sur les boutons. Or « Réserver un appel découverte (30 min) » en 18px fait environ 410px : sur un téléphone ce seul libellé élargissait le document et, `.bip-root` étant en `overflow-x:clip`, chaque page se retrouvait rognée à droite. Les libellés doivent donc pouvoir se couper. */ @media (max-width:640px){ .bip-btn{ white-space:normal; text-align:center; } .bip-btn--lg{ font-size:16px; padding:15px 22px; } .bip-btn--sm{ padding:10px 16px; } /* Même raison pour la pastille de sur-titre, dont le lettrage large allonge le texte. */ .bip-eyebrow{ white-space:normal; letter-spacing:.1em; } /* Un mot trop long ne doit jamais élargir la page. */ h1, h2, h3, p, li, td, th{ overflow-wrap:break-word; } } /* ============ Accordéon de FAQ ============ */ /* Le chevron tourne en CSS, piloté par aria-expanded : le JS n'a que l'état à changer. */ .bip-faq__chev{ transition:transform .25s ease; flex:none; } .bip-faq__btn[aria-expanded="true"] .bip-faq__chev{ transform:rotate(180deg); } .bip-faq__panel[hidden]{ display:none; } /* ============ Accessibilité (demandée par le README, absente des maquettes) ============ */ :where(a,button,input,select,textarea,summary):focus-visible{ outline:3px solid var(--bip-focus-ring); outline-offset:2px; } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; } html{ scroll-behavior:auto; } } /* Le header sticky fait ~79px : toutes les cibles d'ancre s'en écartent. */ [id]{ scroll-margin-top:100px; } /* ============ Header sticky ============ */ /* Valeurs reprises telles quelles des attributs style= de Landing.dc.html. */ .bip-hdr{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--bip-border); } .bip-hdr__inner{ max-width:1180px; margin:0 auto; padding:14px 22px; display:flex; align-items:center; gap:18px; } .bip-hdr__logo{ display:inline-flex; align-items:center; flex:none; } .bip-hdr__logo img{ height:50px; width:auto; display:block; } .bip-hdr__nav{ display:flex; align-items:center; gap:22px; margin-left:6px; font-family:var(--bip-font-sans); font-weight:600; font-size:15px; white-space:nowrap; flex:0 1 auto; min-width:0; overflow:hidden; } .bip-hdr__nav a{ color:var(--bip-ink); } .bip-hdr__actions{ margin-left:auto; display:flex; align-items:center; gap:13px; flex:none; } .bip-hdr__lang{ flex:none; display:inline-flex; border:1px solid var(--bip-border); border-radius:999px; overflow:hidden; font-weight:700; font-size:12px; } .bip-hdr__lang-cur{ padding:5px 11px; background:var(--bip-charcoal); color:#fff; } .bip-hdr__lang-alt{ padding:5px 11px; color:var(--bip-muted); } .bip-hdr__phone{ font-size:14px; flex:none; white-space:nowrap; } /* Le mobile n'est pas maquetté. Règle du README : « la nav du header est repliée, le bouton Appel découverte et le téléphone doivent rester visibles en permanence ». Sans cela les trois blocs de droite, en flex:none, imposaient au header une largeur minimale d'environ 520px — et donc au document entier, rognant chaque page sur un téléphone. */ @media (max-width:900px){ /* Les ancres de la nav restent atteignables en défilant ; le bouton et le téléphone, eux, sont la voie de conversion et ne bougent pas. */ .bip-hdr__nav{ display:none; } .bip-hdr__actions{ gap:10px; } } @media (max-width:640px){ /* Le header passe sur deux lignes au lieu de rogner : logo seul en haut, actions en dessous. C'est ce qui garantit qu'il tient à n'importe quelle largeur, y compris 320px, sans jamais imposer sa largeur minimale au reste du document. */ .bip-hdr__inner{ flex-wrap:wrap; padding:10px 16px; gap:10px; } .bip-hdr__logo img{ height:38px; } .bip-hdr__actions{ margin-left:0; width:100%; justify-content:flex-end; } /* Le numéro cède la place : l'icône du combiné l'identifie, et la barre CTA flottante comme le pied de page le répètent en clair. */ .bip-hdr__phone b{ display:none; } .bip-hdr__phone{ padding:8px 12px; } .bip-hdr__cta{ padding:10px 16px; font-size:13px; } .bip-hdr__lang{ font-size:11px; } .bip-hdr__lang-cur, .bip-hdr__lang-alt{ padding:4px 9px; } } /* ============ Bandeau de consentement (Loi 25) ============ */ /* Il partage le bas de l'écran avec la barre CTA flottante : il passe devant (z-index 70 contre 60) et la barre se décale de sa hauteur, mesurée par le JS. */ .bip-consent{ position:fixed; left:0; right:0; bottom:0; z-index:70; display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:16px 24px; background:rgba(15,16,25,.97); backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.82); } .bip-consent__text{ margin:0; flex:1 1 22em; font-size:14px; line-height:1.55; } .bip-consent__text a{ color:#fff; text-decoration:underline; } .bip-consent__actions{ display:flex; gap:10px; margin-left:auto; flex:none; } .bip-consent__refuse{ color:#fff; border-color:rgba(255,255,255,.42); } .bip-consent__refuse:hover{ background:rgba(255,255,255,.12); color:#fff; } .bip-consent-open #bip-cta-bar{ bottom:var(--bip-consent-h, 0px); } @media (max-width:560px){ .bip-consent{ padding:14px 18px; } .bip-consent__actions{ margin-left:0; width:100%; } .bip-consent__actions .bip-btn{ flex:1 1 auto; justify-content:center; } }