/* Black IP 360 — adaptation responsive du lot SEO (6 pages de service). * * Même principe que `pages.css` pour les 11 pages uniques : le balisage du handoff est servi * verbatim, styles en ligne intacts, parce que c'est ce qui garantit le 1:1 avec la maquette. * Un style en ligne ne se surcharge pas en media query, d'où les `!important`. * * Scopé à `.bip-seo`, jamais à `.bip-root`. Le handoff écrit ses règles sous `.bip-root`, or * `functions.php` pose cette classe sur le de TOUTES les pages : reprises telles * quelles, ces 25 lignes repeindraient les 38 pages existantes — 24px de padding sur chaque * `section > div`, et sous 680px un `padding:56px` et un H1 à 32px imposés aux deux moteurs. * `.bip-seo` est posée par `tools/generate-seo-pages.php` sur l'enveloppe de chaque page. * * Plus court que `pages.css` parce que le lot pilote son responsive par des attributs de * données (`data-g`, `data-hero`, `data-hero-img`, `data-scroll`) et non par des valeurs de * `style=` à faire correspondre. Les sélecteurs sont donc stables : ils survivent à un * changement de gouttière ou de largeur de colonne dans la maquette. * * NON reprises du bloc du handoff, déjà couvertes globalement par `base.css` — les dupliquer * ici ne ferait que créer deux endroits à corriger : * `*{box-sizing}` (:9) · `html{scroll-behavior}` (:114) · `a{color}` et `a:hover` (:10-11) * `.bip-on-dark a{color:#fff}` (:12) · `[id]{scroll-margin-top:100px}` (:119, la * recommandation du README, en mieux : globale) · `:focus-visible` (:109) · * `prefers-reduced-motion` (:113) · `.bip-btn`/`.bip-eyebrow` en `white-space:normal` * sous 640px (:92-97), ce qui règle la largeur incompressible des boutons du hero. * Et `.site-nav{display:none}` : c'est la nav du header du handoff, remplacée par celle du * site, qui a un vrai tiroir mobile — le README signalait justement sa disparition sans * remplacement sous 680px comme un défaut à traiter. */ /* ============ Conteneur de section ============ */ /* Le handoff applique le padding horizontal par une règle globale plutôt que sur chaque conteneur : ses `
` de section ne portent que `max-width:1180px;margin:0 auto`. */ .bip-seo section > div{ padding-left:24px !important; padding-right:24px !important; } /* ============ Accordéon de FAQ ============ */ /* `
`/`` natifs, sans JavaScript. Le moteur de landing du site construit au contraire un accordéon ARIA piloté par `bip360.js` ; les deux coexistent sans se gêner, ces règles ne visant que les `
` sous `.bip-seo`. */ .bip-seo details summary::-webkit-details-marker{ display:none; } .bip-seo details summary{ list-style:none; position:relative; } .bip-seo details summary::after{ content:"+"; position:absolute; right:26px; color:var(--bip-blue); font-weight:700; } .bip-seo details[open] summary::after{ content:"–"; } /* ============ ≤1000px : les grilles se resserrent ============ */ @media (max-width:1000px){ .bip-seo [data-g]{ grid-template-columns:repeat(2,1fr) !important; } .bip-seo [data-g="2"], .bip-seo [data-hero]{ grid-template-columns:1fr !important; } .bip-seo [data-hero]{ gap:32px !important; } .bip-seo [data-hero-img]{ height:300px !important; } } /* ============ ≤680px : une seule colonne ============ */ @media (max-width:680px){ .bip-seo [data-g]{ grid-template-columns:1fr !important; } .bip-seo section{ padding-top:56px !important; padding-bottom:56px !important; } .bip-seo .bip-h1{ font-size:32px !important; line-height:1.15 !important; } /* Les tableaux comparatifs portent un bloc interne à `min-width:660px` : sans cette règle ils élargissent le document au lieu de défiler. */ .bip-seo [data-scroll]{ overflow-x:auto; -webkit-overflow-scrolling:touch; } /* Défaut signalé par le README : à 300px, le visuel du hero arrive sous le texte et repousse le CTA loin sous la ligne de flottaison. 220px, comme `pages.css` le fait pour les heros des pages uniques au même point de rupture. */ .bip-seo [data-hero-img]{ height:220px !important; } }