/* Accueil 2 — BIO-DIGITAL. Tout sous body.bd-a2 * * Passe 1 (30/08/2026) : palette g-fabrica-ice + bande logos clients. * Aucun restyle global : rien ne sort de body.bd-a2 / .bd-a2-*. */ /* 🔴 UN @import DE POLICE A ETE RETIRE ICI LE 12/09/2026. * Il demandait « Inter Tight » a fonts.googleapis.com. Trois raisons : * 1. la police n'est pas affichee : le CSS du personnalisateur (post 92) * impose « Geist » en !important sur body.bd-a2, verifie sur les 1 683 * familles calculees de la page rendue, pseudo-elements compris ; * 2. les pages qui ont besoin d'Inter Tight la demandent deja par un * wp_enqueue_style (poignee bd-a2-font), donc c'etait un DOUBLON ; * 3. un @import est le pire des chargements : le navigateur doit d'abord * recevoir et lire CETTE feuille avant de decouvrir l'autre, et les deux * bloquent l'affichage l'une apres l'autre. * ⚠️ Ne pas le remettre. Une police se declare avec wp_enqueue_style. */ /* ========================================================================= * Tokens — charte g-fabrica-ice * ====================================================================== */ body.bd-a2 { --page: #f4f8fc; --ink: #0a1726; --white: #ffffff; --muted: #4b5c6e; --accent: #1aa1f4; --accent-dark: #1483c4; --line: #d5e3ee; --ice: #e8f2fa; /* Le fond des deux GRANDS PANNEAUX — le hero et la boite « Pourquoi moi ». Plus bleu que --ice depuis le 31/08 : contre le fond de page, l'ecart de clarte passe de 2,4 a 4,1 (L*), et le bord du panneau se voit enfin. ⚠️ Jeton DISTINCT de --ice, qui sert aussi aux pastilles d'icones, au marqueur des questions et aux fonds d'image : les foncer aurait change quatre choses pour en corriger deux. ⚠️ Le hero le lit depuis la CSS ADDITIONNELLE du personnalisateur, qui force son fond en !important — c'est la que vivait le #E8F2FA en dur. Cette variable est desormais le seul endroit ou la teinte est ecrite. */ --panneau: #dfeefa; --shadow: 0 0 0 1px var(--line), 0 8px 28px -18px rgba(10, 23, 38, 0.35); /* Hauteur réelle du header : le panneau compense d'autant. Abaissee de 72 a 62px le 30/08. La CSS additionnelle s'appuie sur ce jeton pour la hauteur du hero : ne pas y remettre un 72 en dur. */ --head: 62px; /* Marge laterale du panneau : le hero ne touche plus tout a fait le bord. */ --marge: 4px; /* Retrait du contenu de la bande clients (titre ET rangee de cases) par rapport au bord du bleu. Une seule valeur pour les deux : ils doivent rester alignes l'un sur l'autre. En l'augmentant, on retrecit d'autant les cases, qui se partagent la largeur restante. */ --retrait-clients: 72px; /* Air SOUS la colonne de gauche, avant la section Projets. Mis a 0 : les 55px de remontee demandes sont pris ici (96) ET sur la marge basse de la section (72 -> 40), parce que le titre agrandi passe de 2 a 3 lignes et rallonge la colonne de 73px. Mesure : Projets etait a y=1451, il est a y=1396. */ --air-bas: 0px; /* Titre « Des artisans… ». ⚠️ Il PASSE DEVANT le H1 du hero (62px contre 45px a 1440) ET devant les chiffres +5 / 100% (54px) : c'est un choix assume, pas un oubli. Les deux regles d'avant — « reste sous le H1 » et « les chiffres depassent le titre » — ne tiennent plus. Ne pas les retablir sans le demander. 62px : mesure, c'est la taille qui donne quatre lignes pleines dans la colonne de 551px sans orphelin. A 68px la coupe devient bancale. */ --taille-clients: clamp(2.2rem, 4.3vw, 3.875rem); /* H1 du hero. 45px -> 52px a partir de 1470. Jeton distinct de --taille-clients et non le meme : le hero et les titres de section doivent pouvoir bouger separement. ⚠️ Il reste SOUS les titres de section (52 contre 62). Ce n'est pas un oubli, c'est la place disponible — voir juste en dessous. ⚠️ 52px n'est pas un chiffre choisi au hasard, c'est un PLAFOND MESURE. Le titre vit dans la colonne 1 de la grille du hero, large de 824px a 1440, et sa seconde ligne — « a votre activite, et audit technique. » — y occupe 702px a 45px. Le rapport donne 52,8px avant que la ligne ne se casse en trois. Ce qui bride la colonne, c'est la carte Benjamin en face : elle est en « grid-row: 2 / span 3 », donc a cote du titre, pas dessous. Pour aller plus loin il faut choisir : deplacer la coupure de ligne dans le contenu de la page pour equilibrer les deux lignes (~57px possibles), ou descendre la carte d'une rangee. Les deux se demandent. ⚠️ Le plancher est a 2.8rem = 44.8px, et non a une valeur ronde plus basse : c'est la taille que le titre avait AVANT sur mobile, et le terme en vw est regle pour qu'a 1280 on retombe sur ces 45px. Agrandir en haut ne doit rapetisser nulle part ailleurs. ⚠️ Le terme du milieu est un calc() et non un simple « Nvw », et c'est voulu. Ce qui limite le titre n'est pas la fenetre mais LA COLONNE, qui vaut « fenetre - 616px » : 8 de bordure, 16 de marges, 160 de padding, 32 de gouttiere et 400 de carte. ⚠️ CE 616 EST PERIME DEPUIS LE 01/09 AU SOIR, ET ON LE GARDE EXPRES. La carte ne fait plus 400px mais 580 : la vraie constante serait 796, qui donnerait 40px de titre a 1440 au lieu de 51. Le titre RETRECIRAIT donc tout seul. Benjamin a choisi l'inverse — garder la taille et accepter que le titre passe a 4 lignes. Ne « corriger » ce 616 que si l'on decide de rendre au titre ses deux lignes ; ce n'est pas une coquille. Un coefficient en vw pur ne suit pas cette droite — regle pour 1440 il cassait la seconde ligne a 1366, regle pour 1366 il perdait 2px a 1440. Le facteur 0,062 est le rapport mesure 45/702 (police / largeur de la 2e ligne) moins 3% de marge. */ --taille-h1: clamp(2.8rem, calc((100vw - 616px) * 0.062), 3.25rem); /* Chiffres +5 / 100% : ils ne suivent PLUS le titre, ils le depassent. C'est voulu depuis le 30/08 au soir — deux jetons, deux roles. */ --taille-chiffres: clamp(2.4rem, 4.8vw, 3.5rem); /* Liseré de fond autour du panneau ice : la bande logos qui passe DERRIERE ne touche jamais le panneau, il reste toujours ce filet de page. Il sert aussi de calage : le titre clients s'aligne sur le bord du bleu. */ --bord: 8px; /* Air entre le bas du panneau et « Ils me font confiance ». */ --air: 110px; } body.bd-a2 { margin: 0; background: var(--page); color: var(--ink); font-family: "Inter Tight", Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; /* ⚠️ « clip » ET NON « hidden ». Avec hidden, overflow-y se calcule en « auto » et le body devient un CONTENEUR DE DEFILEMENT : la chronologie de l'animation qui decouvre la bande clients s'y accrochait au lieu du document, et restait figee a 88,89% quoi qu'on fasse. « clip » rogne exactement pareil, sans creer de conteneur. Ne pas revenir a hidden. */ overflow-x: clip; } body.bd-a2 .bd-a2-main .wp-block-group { margin: 0; } /* Masquer le chrome du thème SI get_header était utilisé — le template ne l’appelle pas. */ body.bd-a2 > header:not(.bd-a2-chrome), body.bd-a2 > footer:not(.bd-a2-foot) { display: none !important; } /* ========================================================================= * Chrome (nav) * ====================================================================== */ .bd-a2-chrome { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; height: var(--head); padding: 0 28px; /* Même teinte au repos et au scroll : seul le flou s'ajoute. Pas de changement de couleur, pas d'ombre, pas de bordure colorée. */ background: rgba(244, 248, 252, 0.55); -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; transition: backdrop-filter 0.25s ease, -webkit-backdrop-filter 0.25s ease; } /* Preview connectee : WordPress affiche #wpadminbar (fixe, 32px) et pousse le document de 32px via html{margin-top}. Un header en position:fixed ignore ce decalage : il restait colle a y=0, sous la barre d'admin, et le panneau demarrait 32px plus bas — d'ou la bande --page visible entre les deux. Ni le theme ni cette feuille ne traitaient le cas. Invisible pour un visiteur non connecte, mais c'est la preview qui sert de reference. */ @media screen and (min-width: 783px) { body.bd-a2.admin-bar .bd-a2-chrome { top: 32px; } } /* Verre trempé : le contenu défile derrière, nettoyé. Classe posée au scroll. */ .bd-a2-chrome.is-glass { -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); } .bd-a2-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } /* Lockup navy HD (logo-navy-hd.png, ratio 3.71:1) — une seule image, pas de wordmark HTML à côté. La hauteur pilote, la largeur suit. */ .bd-a2-mark { display: block; height: 32px; width: auto; max-width: 220px; flex-shrink: 0; object-fit: contain; object-position: left center; } @media (max-width: 480px) { .bd-a2-mark { height: 27px; } } .bd-a2-word { font-weight: 600; font-size: 15px; letter-spacing: 0.02em; color: var(--ink); } .bd-a2-word span { font-weight: 400; color: var(--muted); } .bd-a2-nav { display: none; /* La nav PREND TOUTE LA PLACE QUI RESTE entre le logo et le burger, et ses liens s'y repartissent d'un bord a l'autre. Avant, c'etait une grappe serree de 446px au milieu d'un header de 1440, avec 390px de vide de chaque cote. Demande de Benjamin le 01/09 : « presque toute la largeur ». flex: 1 fait la largeur, space-between fait la repartition — et l'ecart entre onglets n'est donc plus un nombre ecrit ici, il DECOULE de la place disponible (mesure : 32px avant, ~137px a 1440 apres). ⚠️ gap reste declare : c'est le PLANCHER. space-between ne protege de rien quand la place manque ; sans lui, les libelles se toucheraient dans la bande 900-1100px. */ flex: 1; /* ⚠️ « center » ET NON « space-between », et c'est le point du reglage du 01/09 au soir. En space-between, l'ecart entre onglets etait un RESULTAT : la nav prenait toute la place et le vide se repartissait — 172px a 1440, 292px a 1920. Benjamin a trouve ca « beaucoup trop large » et a demande 30% de moins. Un ecart qu'on ne choisit pas ne se reduit pas de 30% : il fallait donc reprendre la main dessus, d'ou le centrage + un gap explicite. La nav reste en flex: 1 pour rester centree dans la place disponible. */ justify-content: center; /* 120px a 1440 = les 172px d'avant moins 30%, la demande au chiffre pres. En vw et non en dur : a 900px de fenetre, 120px d'ecart ne rentreraient pas (il faut 297px de libelles + 4 ecarts dans 617px de piste). Le terme du milieu vaut 8.35vw, soit 120,2px a 1440 et 75px a 900. Le plafond de 130px empeche les tres grands ecrans de reprendre le probleme d'avant. */ gap: clamp(24px, 8.35vw, 130px); /* Garde-fou : la nav ne touche jamais le logo ni le burger. */ margin: 0 32px; /* 14px : les 17px d'avant moins les 3 demandes. */ font-size: 14px; /* ⚠️ 500, ET C'EST UNE CORRECTION, PAS UN CHOIX. Il y avait 700 ici, qui n'a JAMAIS rien fait : la CSS additionnelle du personnalisateur (post 92) pose « body.bd-a2 .bd-a2-nav { font-weight: 500 } », soit deux classes plus un element — elle bat une classe seule. Les onglets calculent donc 500 depuis toujours. La valeur est remise a la verite pour qu'on ne croie pas, en lisant cette feuille, que la nav est en gras. 🔑 Regle generale sur cette page : quand un reglage « ne prend pas » malgre une CSS correcte, regarder le post 92 EN PREMIER. */ font-weight: 500; letter-spacing: -0.01em; } /* ⚠️ AUCUN effet au survol : c'est demande, ce n'est pas un oubli (01/09). Les onglets viraient au bleu avec un trait bleu dessous ; Benjamin a fait retirer les deux. Ne pas « remettre un petit hover » en passant. Les declarations qui n'existaient QUE pour ce survol sont parties avec lui : le border-bottom transparent, qui reservait la place du trait, et la transition qui l'animait. */ .bd-a2-nav a { position: relative; color: var(--ink); text-decoration: none; padding-bottom: 2px; } /* Le compteur, dans le coin haut-droit de l'onglet. ⚠️ En position absolue, donc il ne compte PAS dans la largeur du lien : les ecarts entre onglets restent ceux qui sont calcules plus haut, et ajouter un compteur sur un troisieme onglet ne deplacerait rien. La couleur est --muted, celle des paragraphes (demande de Benjamin), et elle est ECRITE ICI : sans ca elle serait heritee du lien, qui vire au bleu au survol, et le compteur virerait avec. */ .bd-a2-nav-nb { position: absolute; top: -5px; right: -9px; font-size: 10px; /* 300 = LA GRAISSE DES PARAGRAPHES de cette page, demandee le 01/09. Ce n'est pas une valeur choisie a l'oeil : la CSS additionnelle du personnalisateur (post 92) pose « body.bd-a2, ... p { font-weight: 300 } » et charge Geist en 200/300/400/500. Le paragraphe du hero, les arguments de la carte et la note Google calculent tous 300 — mesure au navigateur. Le compteur etait a 600, il tranchait avec eux. ⚠️ Si la graisse des paragraphes change dans le post 92, celle-ci ne suivra pas toute seule : les deux sont ecrites a deux endroits. */ font-weight: 300; line-height: 1; letter-spacing: 0; color: var(--muted); } /* Le focus CLAVIER reste, lui, et c'est volontaire : « pas d'effet au survol » vise la souris. Sans reperage au clavier, on ne saurait plus ou l'on est en tabulant. C'est le meme contour que les boutons de la page, pas un rappel du survol qui vient d'etre retire. */ .bd-a2-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } @media (min-width: 900px) { .bd-a2-nav { display: flex; } } /* Le burger — bouton ROND CERCLE a deux barres (choisi le 01/09, apres le modele a trois barres juge « pas du tout » par Benjamin). Le rond n'est pas un ornement : c'est le vocabulaire de toute la page — les pastilles blanches des boutons Appeler / Ecrire, les ronds des reseaux dans le menu. Le burger cesse d'etre trois traits poses dans un coin et devient un bouton, comme les autres. Il reste visible A TOUTE LARGEUR, y compris a cote de la nav : il n'ouvre pas la meme chose (le menu plein ecran porte aussi les actions et les reseaux). Ce n'est pas un doublon de la nav, c'est l'entree du menu. */ .bd-a2-burger { width: 44px; height: 44px; flex-shrink: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1.5px solid rgba(10, 23, 38, 0.22); border-radius: 50%; background: none; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease; } .bd-a2-burger span { display: block; /* DEUX barres courtes, pas trois longues : c'est ce qui fait la difference entre un burger dessine et un burger par defaut. */ width: 16px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.3s ease, background 0.25s ease; } /* Au survol, le rond se remplit et les traits s'inversent. 🔴 DEUX GARDES, POSEES LE 2026-09-12, POUR UNE MEME GENE : apres avoir referme le menu, le bouton restait sombre au lieu de redevenir un burger. La cause n'est pas l'etat ouvert — il se retire bien — c'est le SURVOL, qui porte exactement la meme robe (rond plein, barres blanches) et prend le relais sans qu'on voie la difference. 1. « (hover: hover) and (pointer: fine) » — un telephone n'a pas de survol, mais le navigateur en simule un au doigt et le LAISSE COLLE jusqu'au tap suivant. Sans cette garde, la croix refermee gardait sa robe d'ouverture indefiniment. 2. « :not(.bd-a2-burger--repos) » — a la souris, le pointeur est encore SUR le bouton au moment du second clic. La classe est posee a la fermeture et retiree des que le pointeur entre OU sort ; voir le script du gabarit. ⚠️ NE PAS « SIMPLIFIER » EN RETIRANT L'UNE DES DEUX : elles couvrent deux appareils differents, pas deux fois le meme. ⚠️ L'etat ouvert reste prioritaire : « body.bd-a6.bd-a2-menu-open .bd-a2-burger » pese plus lourd que ce selecteur, la croix garde donc sa robe meme si la classe de repos traine. */ @media (hover: hover) and (pointer: fine) { .bd-a2-burger:not(.bd-a2-burger--repos):hover { background: var(--ink); border-color: var(--ink); } .bd-a2-burger:not(.bd-a2-burger--repos):hover span { background: #ffffff; } } .bd-a2-burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Ouvert : les deux barres se croisent en X dans le rond. ⚠️ Les 3,5px sont calcules : deux barres de 2px separees de 5 font 9px de haut, les centres tombent donc a ±3,5 du milieu. Changer l'epaisseur ou l'ecart oblige a refaire ce calcul, sinon la croix ne se croise plus. */ body.bd-a2-menu-open .bd-a2-burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); } body.bd-a2-menu-open .bd-a2-burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .bd-a2-burger, .bd-a2-burger span { transition: none; } } /* Bande de verre collée au BAS DU VIEWPORT (pas du document) : ce qui passe dessous est flouté, ce qui en sort vers le haut redevient net. Overlay pur, aucune anim JS par carte. */ .bd-a2-fade { position: fixed; left: 0; right: 0; bottom: 0; /* 112px : un cran sous les 130 essayes, la bande n'a pas besoin d'etre haute pour que l'effet porte. */ height: 112px; z-index: 45; pointer-events: none; /* Meme recette que le verre du header (blur + saturate) mais pousse plus loin : sous cette bande, on ne doit plus rien pouvoir lire. */ -webkit-backdrop-filter: blur(34px) saturate(130%); backdrop-filter: blur(34px) saturate(130%); /* Le voile accompagne le flou, il ne le remplace pas : degrade, jamais un aplat, sinon la bande se lit comme une barre posee sur la page. */ background: linear-gradient(to top, rgba(244, 248, 252, 0.66), rgba(244, 248, 252, 0)); /* Le tiers bas est en verre PLEIN, puis une rampe longue et progressive eteint l'effet jusqu'a rien. C'est elle qui evite l'arete que ferait un bord franc : contrairement au header, cette bande ne doit avoir aucune delimitation haute — on ne doit pas pouvoir dire ou elle commence. */ -webkit-mask-image: linear-gradient( to top, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0.86) 45%, rgba(0, 0, 0, 0.62) 60%, rgba(0, 0, 0, 0.36) 74%, rgba(0, 0, 0, 0.16) 85%, rgba(0, 0, 0, 0.05) 93%, transparent 100% ); mask-image: linear-gradient( to top, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0.86) 45%, rgba(0, 0, 0, 0.62) 60%, rgba(0, 0, 0, 0.36) 74%, rgba(0, 0, 0, 0.16) 85%, rgba(0, 0, 0, 0.05) 93%, transparent 100% ); } @media (max-width: 799px) { .bd-a2-fade { height: 86px; } } @media (prefers-reduced-motion: reduce) { .bd-a2-chrome { transition: none; } } /* ========================================================================= * Menu plein ecran — namespace bd-a2-mm-* * * Reprise, regle pour regle, du menu mobile du theme (.bd-mobile-menu dans * style.css) : meme structure, memes animations, memes proportions. Seule la * PALETTE change — le theme est sombre (fond #040e1a, texte blanc), cette page * est claire. * * ⚠️ NE JAMAIS RENOMMER EN bd-mm-*. style.css est charge sur cette page et * habille deja ces classes en sombre : le menu deviendrait noir, ou pire, les * deux feuilles se disputeraient les memes selecteurs. * * ⚠️ Il remplace .bd-a2-overlay, dont il ne reste rien — pas deux menus. * ====================================================================== */ .bd-a2-mm { position: fixed; inset: 0; /* Au-dessus du header (60) et de la bande de verre du bas (45). Sous la modale de rendez-vous du theme, que le bouton du bas ouvre PAR-DESSUS. */ z-index: 200; display: flex; flex-direction: column; /* Le haut vaut la hauteur du header : le contenu du menu commence donc juste sous la croix, qui est posee en absolu a l'emplacement EXACT du burger (voir .bd-a2-mm-close). */ padding: var(--head) 28px calc(24px + env(safe-area-inset-bottom)); /* Le fond clair de la page, plus un halo bleu tres doux en haut — c'est la transposition du halo radial du menu sombre, qui y est a 0,18 d'opacite. Ici 0,13 : sur un fond clair, le meme voile bleu marque BEAUCOUP plus. */ background: radial-gradient(circle at 50% 12%, rgba(26, 161, 244, 0.13), transparent 55%), var(--page); /* Fermeture en fondu. ⚠️ visibility, et pas seulement opacity : sans elle le menu resterait cliquable et dans le parcours clavier une fois ferme. Et surtout PAS display:none / [hidden], qui supprimerait la transition. */ opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease; overscroll-behavior: none; overflow: hidden; /* 100vh puis 100svh — tous deux STATIQUES. Surtout pas 100dvh : il varie quand la barre d'URL du mobile se retracte, et les boutons du bas sautaient. Meme raison que dans le menu du theme. */ min-height: 100vh; min-height: 100svh; } .bd-a2-mm.is-open { opacity: 1; visibility: visible; transform: none; } /* Croix de fermeture. Elle est posee en ABSOLU, aux coordonnees exactes du burger : meme largeur (44), meme hauteur (44), meme bord droit (28px de padding du header), et top = (62 - 44) / 2 = 9px, le centrage vertical du burger dans le header. ⚠️ Ce n'est pas de la coquetterie. Le menu passe DEVANT le header, donc le burger — qui se plie en croix — est cache dessous et son animation ne se voit jamais. En faisant tomber cette croix-ci pile a sa place, le burger a l'air de se transformer. Avant, elle etait 15px plus bas et la croix paraissait sauter. Si la hauteur du header (--head) ou la taille du burger changent, ces 9px sont a recalculer. */ .bd-a2-mm-close { position: absolute; top: 9px; right: 28px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; /* Le MEME bouton rond que le burger, au meme endroit : c'est ce qui fait lire la transformation. Un rond qui deviendrait un carre arrondi casserait l'illusion aussi surement qu'un decalage de position. */ border: 1.5px solid rgba(10, 23, 38, 0.22); border-radius: 50%; background: none; color: var(--ink); cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease; } .bd-a2-mm-close svg { width: 18px; height: 18px; } .bd-a2-mm-close:hover { background: var(--ink); border-color: var(--ink); color: #ffffff; } .bd-a2-mm-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Les liens, en cascade a l'ouverture. */ .bd-a2-mm-links { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; } .bd-a2-mm-links a { color: var(--ink); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; padding: 14px 0; /* Le filet du theme est en blanc a 7% sur fond sombre ; ici c'est --line, le trait clair de la charte. */ border-bottom: 1px solid var(--line); opacity: 0; transform: translateX(-12px); transition: opacity 0.3s ease, transform 0.3s ease, color 0.18s ease; } .bd-a2-mm-links a:last-child { border-bottom: none; } .bd-a2-mm-links a:hover, .bd-a2-mm-links a:focus-visible { color: var(--accent-dark); } .bd-a2-mm.is-open .bd-a2-mm-links a { opacity: 1; transform: none; } /* La cascade : un cran de retard par lien. Cinq liens, cinq delais — le menu du theme en a sept, on n'en garde que ce qui sert. */ .bd-a2-mm.is-open .bd-a2-mm-links a:nth-child(1) { transition-delay: 0.09s; } .bd-a2-mm.is-open .bd-a2-mm-links a:nth-child(2) { transition-delay: 0.18s; } .bd-a2-mm.is-open .bd-a2-mm-links a:nth-child(3) { transition-delay: 0.27s; } .bd-a2-mm.is-open .bd-a2-mm-links a:nth-child(4) { transition-delay: 0.36s; } .bd-a2-mm.is-open .bd-a2-mm-links a:nth-child(5) { transition-delay: 0.45s; } @media (prefers-reduced-motion: reduce) { .bd-a2-mm, .bd-a2-mm-links a { transition: none; } .bd-a2-mm-links a { opacity: 1; transform: none; } } /* Les deux actions, ancrees en BAS (margin-top: auto). */ .bd-a2-mm-actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 24px; } /* ⚠️ Le bouton plein n'est PAS redecrit : c'est .bd-a2-btn, celui de toute la page. Seule sa mise en pleine largeur vit ici. */ .bd-a2-mm-actions .bd-a2-btn { justify-content: center; width: 100%; padding: 0.95rem 1.15rem 0.95rem 1.4rem; } /* Le bouton contour. Le theme le fait en blanc a 35% sur fond sombre ; ici c'est un contour navy sur fond clair, qui s'inverse au survol. */ .bd-a2-mm-ghost { width: 100%; padding: 13px; border: 1.5px solid rgba(10, 23, 38, 0.28); border-radius: 999px; background: none; color: var(--ink); font-family: inherit; font-size: 14px; font-weight: 600; text-align: center; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .bd-a2-mm-ghost:hover { background: var(--ink); border-color: var(--ink); color: #ffffff; } .bd-a2-mm-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Les reseaux, puis l'etoile des avis Google. */ .bd-a2-mm-socials { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; } .bd-a2-mm-socials a { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); transition: border-color 0.3s ease, color 0.3s ease; } .bd-a2-mm-socials a:hover { border-color: var(--accent); color: var(--accent); } /* Grand ecran. Le menu du theme est un menu MOBILE (il est en xl:hidden) : il n'a jamais eu a tenir sur 1440. Ici le burger reste visible a toute largeur, donc le menu s'ouvre aussi sur grand ecran — et tel quel, les liens et les deux boutons s'etiraient sur 1440px, avec 500px de vide au milieu. On ne change ni la structure ni la cascade : on borne la colonne et on la centre, verticalement comme horizontalement. Sous 900px, rien de tout ceci ne s'applique et le menu est exactement celui du theme. */ @media (min-width: 900px) { .bd-a2-mm { justify-content: center; } .bd-a2-mm-links, .bd-a2-mm-actions, .bd-a2-mm-socials { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; } /* ⚠️ Annule le « margin-top: auto » qui colle les boutons en bas : c'est lui qui creusait le vide. Le bloc entier est centre a la place. */ .bd-a2-mm-actions { margin-top: 36px; } .bd-a2-mm-links a { font-size: 26px; } } .bd-a2-mm-socials svg { width: 18px; height: 18px; } .bd-a2-mm-sep { width: 1px; height: 24px; margin: 0 2px; background: var(--line); } /* L'etoile garde le jaune des avis Google — c'est une couleur de marque, EN DUR, la meme que les etoiles de la carte du hero. ⚠️ Le selecteur DOIT etre « .bd-a2-mm-socials a.bd-a2-mm-star » et pas « .bd-a2-mm-star » seul : la regle des reseaux juste au-dessus vise « .bd-a2-mm-socials a », soit une classe + un element, ce qui pese plus qu'une classe seule. Ecrite simplement, la regle etait perdue et l'etoile sortait grise — constate a l'ecran le 01/09. */ .bd-a2-mm-socials a.bd-a2-mm-star, .bd-a2-mm-socials a.bd-a2-mm-star:hover { color: #FBBC05; border-color: rgba(251, 188, 5, 0.45); } .bd-a2-mm-socials a.bd-a2-mm-star:hover { border-color: #FBBC05; } /* ========================================================================= * Layout contenu * ====================================================================== */ /* Le
va d'un bord à l'autre avec 6px de gouttière : c'est le panneau hero qui a besoin de toute la largeur. padding-top 0 = panneau collé au header, aucune bande --page entre les deux. */ body.bd-a2 .bd-a2-main { max-width: none; margin: 0; /* padding-top = hauteur exacte du header fixe (--head, box-sizing border-box) : le panneau commence pile sous lui, sans recouvrement ni trou. Plus de gouttiere laterale : le hero touche les deux bords de l'ecran, la marge visible est son lisere (--bord). Les 18px d'avant sont rendus aux autres sections, dans la regle suivante (14 + 18 = 32). */ padding: var(--head) 0 64px; } /* Les autres sections retrouvent leur colonne de 1160px, centrée, avec la respiration latérale que portait le
avant (1188 - 2x14 = 1160). */ body.bd-a2 .bd-a2-main > .wp-block-group { /* 1160 de contenu + 2 x 32 de retrait : la colonne des autres sections ne bouge pas d'un pixel malgre la gouttiere retiree du
. */ max-width: 1224px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; /* Le header étant fixe, une ancre (#realisations, #contact) doit s'arrêter sous lui et non dessous. */ scroll-margin-top: calc(var(--head) + 16px); } /* Les deux seules sections qui sortent de la colonne de 1224px et prennent toute la page : le hero, et la boite « Pourquoi moi » qui doit lui repondre exactement. Une seule regle pour les deux — leurs bords doivent tomber au meme pixel, ce qu'aucune valeur recopiee ne garantit dans la duree. */ body.bd-a2 .bd-a2-main > .bd-a2-hero, body.bd-a2 .bd-a2-main > .bd-a2-about { max-width: none; margin-left: var(--marge); margin-right: var(--marge); } /* Le hero pose son lisere de page en BORDURE ; la section « Pourquoi moi », qui n'en a pas, le pose en retrait. Meme largeur visible au bout : le panneau ice du hero et la boite brumeuse font tous deux 1416px a 1440. */ body.bd-a2 .bd-a2-main > .bd-a2-about { padding-left: var(--bord); padding-right: var(--bord); } /* La bande clients sort de DERRIERE le panneau : elle prend donc la largeur du hero (et non la colonne de 1188px), ses bords tombant sur ceux du bleu, une fois le liseré franchi. Le padding haut porte l'air sous le panneau. */ body.bd-a2 .bd-a2-main > .bd-a2-clients { max-width: none; /* marge du panneau + lisere : les cases tombent pile sur les bords du bleu. Le bas ouvre l'air avant la section suivante (qui ajoute encore ses 72px de marge : la separation vaut donc --air-bas + 72). */ padding: var(--air) calc(var(--marge) + var(--bord)) var(--air-bas); } body.bd-a2 .bd-a2-main > .wp-block-group, body.bd-a2 .bd-a2-section { margin-bottom: 72px !important; } /* L'air sous le panneau est posé UNE seule fois, par la bande clients. Cette règle vient APRES celle des 72px : même spécificité, même !important, c'est l'ordre qui tranche — la déplacer plus haut la rendrait sans effet. */ body.bd-a2 .bd-a2-main > .bd-a2-hero { margin-bottom: 0 !important; } /* Meme histoire pour la bande clients : 40px au lieu des 72 communs, seconde moitie de la remontee de la section Projets. Placee ICI, apres la regle des 72px — mise plus haut, elle etait sans effet (constate a l'ecran). */ body.bd-a2 .bd-a2-main > .bd-a2-clients { margin-bottom: 0 !important; } body.bd-a2 h1, body.bd-a2 h2, body.bd-a2 h3, body.bd-a2 p, body.bd-a2 li { font-family: inherit; } body.bd-a2 h1, body.bd-a2 h2, body.bd-a2 h3 { color: var(--ink); } body.bd-a2 h1 { font-size: clamp(1.8rem, 4.2vw, 3.1rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; max-width: 18ch; margin: 0.4em 0 0.6em; } body.bd-a2 h2 { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 500; letter-spacing: -0.03em; line-height: 0.95; margin: 0 0 0.4em; } /* Kicker : point accent, texte muted. L’accent reste un signe, pas un aplat. */ body.bd-a2 .bd-a2-kicker { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; } body.bd-a2 .bd-a2-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); flex-shrink: 0; } /* --- La levee du panneau : le hero decouvre la bande clients ------------ * * ⚠️ CE MOUVEMENT NE DOIT PAS ETRE PILOTE EN JAVASCRIPT. Mesure du 31/08 : * avec un transform pose dans un requestAnimationFrame, la bande arrivait une * image APRES le defilement — et comme elle avance a une autre vitesse que la * page, la meme position de defilement rendait le titre a deux endroits selon * le sens d'arrivee, jusqu'a 47px d'ecart. C'est ce qu'on sentait en remontant * puis redescendant. * * Une animation liee au defilement tourne sur le COMPOSITEUR, exactement comme * le defilement lui-meme : elle ne peut pas etre en retard, quelle que soit la * vitesse ou le sens. Le JavaScript reste en secours pour les navigateurs qui * ne connaissent pas animation-timeline (voir template-accueil-2.php). * * --bd-ecart est pose UNE FOIS par le JavaScript : c'est la distance mesuree * entre le bas du panneau et le haut de la rangee de cases, sans transformation. * ---------------------------------------------------------------------- */ @supports (animation-timeline: view()) and (timeline-scope: --bd-hero) { body.bd-a2 .bd-a2-main { timeline-scope: --bd-hero; } body.bd-a2 .bd-a2-hero { view-timeline-name: --bd-hero; } body.bd-a2 .bd-a2-reveal { /* Deux exigences, et il faut les DEUX — chaque fois qu'on en a tenu une seule, le saut est revenu sous une autre forme. 1. Pente NULLE aux deux bouts, sinon marche de vitesse a l'entree et a la sortie de la course (« linear » : le titre passait de 0,48x a 1x en un cran de molette). 2. Pente MAXIMALE contenue au milieu. (0.5, 0, 0.5, 1) montait a 2,0 fois la moyenne ; avec l'ecart de 330px cela donnait une vitesse a l'ecran de -0,08x — le bloc REMONTAIT pendant qu'on descendait. Celle-ci plafonne a 1,34 fois la moyenne. Le reste du reglage est le plafond de --bd-ecart, pose par le JS. Les deux se tiennent : changer l'un oblige a remesurer l'autre. */ animation: bd-a2-decouvrir cubic-bezier(0.25, 0, 0.75, 1) both; animation-timeline: --bd-hero; /* ⚠️ 140%, ET LE DEPASSEMENT DE 100% EST LE POINT IMPORTANT. La bande doit parcourir l'ecart mesure — environ 330px — pendant que le panneau sort. Ce que coute ce trajet depend donc de la LONGUEUR de la course, et la course, bornee a la sortie du panneau, vaut la hauteur du panneau : elle RETRECIT quand la fenetre est courte. Mesure du 31/08, vitesse du bloc a l'ecran au plus lent : fenetre 1080 -> 0,57x | 900 -> 0,47x | 760 -> 0,37x | 700 -> 0,31x Autrement dit : correct sur un grand ecran, FIGE sur la hauteur utile d'un portable ordinaire — 1440x900 moins les barres du navigateur font environ 750px. C'est la que le « clac » se voit. Un pourcentage superieur a 100 prolonge la phase par extrapolation : la course gagne 40%, sans toucher a l'amplitude, donc sans rouvrir le trou de page sous le panneau. Meme mesure avec 140% : fenetre 900 -> 0,62x | 700 -> 0,51x ⚠️ Ne pas revenir a 100% « pour faire propre » : c'est la hauteur de fenetre du visiteur qui decide, pas la notre. */ animation-range: exit 0% exit 140%; } @keyframes bd-a2-decouvrir { from { transform: translateY(calc(-1 * var(--bd-ecart, 0px))); } to { transform: translateY(0); } } /* Les deux classes du secours n'existent que HORS de ce bloc : le navigateur qui lit @supports ne les pose jamais. Elles sont neutralisees ici par precaution, pour qu'une classe oubliee ne se batte pas avec l'animation. */ body.bd-a2 .bd-a2-reveal--pret, body.bd-a2 .bd-a2-reveal--fait { transition: none; } @media (prefers-reduced-motion: reduce) { body.bd-a2 .bd-a2-reveal { animation: none; } } } /* --- Bande clients : le titre et le paragraphe glissent hors du meme masque que « Projets. » et « Services. ». Le paragraphe suit le titre, il ne part pas avec lui. Les cases logos se posent ensuite, l'une apres l'autre. --- */ body.bd-a2 .bd-a2-clients-desc .bd-mask .bd-inner { transition-delay: 0.45s; } /* L'etat de depart n'existe que sous .bd-logos-pret, posee en JavaScript : sans script, les cases restent simplement visibles. */ body.bd-a2 .bd-a2-logos-track.bd-logos-pret > * { opacity: 0; transform: translateY(16px); transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); /* --i est le rang de la case, pose par le JavaScript et plafonne : au-dela de dix, la cascade s'eterniserait. */ /* 0,35s d'attente commune : les cases arrivent APRES le titre, pas en meme temps que lui. Puis le rang echelonne la cascade. */ transition-delay: calc(0.35s + var(--i, 0) * 55ms); } body.bd-a2 .bd-a2-logos-track.bd-logos-on > * { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { body.bd-a2 .bd-a2-logos-track.bd-logos-pret > * { opacity: 1; transform: none; transition: none; } } /* --- Apparition des chapeaux (« Ils me font confiance », « Ce que je fais ») Trois temps : le rond arrive seul en tournant sur lui-meme et en depassant largement sa taille, puis un rectangle gris balaie le libelle de gauche a droite, et le titre reste derriere lui. ⚠️ L'etat de depart (rond a zero, libelle masque) n'est pose QUE par la classe .bd-kick-pret, ajoutee en JavaScript. Sans JavaScript, aucune des deux classes n'existe et le chapeau s'affiche normalement — un chapeau invisible faute de script serait bien pire que pas d'animation. Le balai n'existe lui non plus que sous .bd-kick-pret. ---------------- */ body.bd-a2 .bd-kick-mot { position: relative; display: inline-block; /* de l'air vertical : le balai deborde un peu du texte, et les jambages ne doivent pas etre rognes par le masque. */ padding: 0.35em 0; margin: -0.35em 0; } body.bd-a2 .bd-kick-txt { display: inline-block; } /* --- au repos, avant d'etre vu --- */ body.bd-a2 .bd-a2-kicker.bd-kick-pret::before { transform: scale(0); } body.bd-a2 .bd-a2-kicker.bd-kick-pret .bd-kick-txt { clip-path: inset(0 100% 0 0); } body.bd-a2 .bd-a2-kicker.bd-kick-pret .bd-kick-mot::after { content: ""; position: absolute; inset: 0; background: var(--muted); border-radius: 2px; transform: scaleX(0); transform-origin: left center; pointer-events: none; } /* --- a l'entree dans l'ecran --- */ body.bd-a2 .bd-a2-kicker.bd-kick-on::before { transform: scale(1); /* « linear » ici : la souplesse est portee par les keyframes elles-memes, une par une. Avec une courbe globale qui rebondit, le tour sur soi-meme se faisait en 80ms — mesure — et ne se voyait pas. */ animation: bd-kick-pop 0.7s linear; } body.bd-a2 .bd-a2-kicker.bd-kick-on .bd-kick-txt { clip-path: inset(0 0 0 0); animation: bd-kick-voile 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.42s both; } body.bd-a2 .bd-a2-kicker.bd-kick-on .bd-kick-mot::after { animation: bd-kick-balai 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.42s; } /* Le rond double de taille et fait les trois quarts d'un tour sur lui-meme. La rotation est etalee sur toute la premiere moitie pour qu'on la VOIE ; le « + » etant symetrique, il retombe exactement dans sa position d'origine. */ @keyframes bd-kick-pop { 0% { transform: scale(0) rotate(-270deg); animation-timing-function: cubic-bezier(0.2, 0.75, 0.3, 1); } 55% { transform: scale(2) rotate(-30deg); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } 100% { transform: scale(1) rotate(0deg); } } /* Le balai : il se deploie depuis la gauche, puis se retire par la droite. C'est le changement d'origine a mi-course qui donne la traversee. */ @keyframes bd-kick-balai { 0% { transform: scaleX(0); transform-origin: left center; } 48% { transform: scaleX(1); transform-origin: left center; } 52% { transform: scaleX(1); transform-origin: right center; } 100% { transform: scaleX(0); transform-origin: right center; } } /* Le titre se decouvre exactement dans le sillage du balai. */ @keyframes bd-kick-voile { 0%, 48% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } } @media (prefers-reduced-motion: reduce) { body.bd-a2 .bd-a2-kicker.bd-kick-pret::before, body.bd-a2 .bd-a2-kicker.bd-kick-pret .bd-kick-txt { transform: none; clip-path: none; } body.bd-a2 .bd-a2-kicker.bd-kick-pret .bd-kick-mot::after { display: none; } body.bd-a2 .bd-a2-kicker.bd-kick-on::before, body.bd-a2 .bd-a2-kicker.bd-kick-on .bd-kick-txt { animation: none; } } body.bd-a2 p { color: var(--muted); font-size: 15px; line-height: 1.65; } body.bd-a2 a { color: var(--ink); } /* ========================================================================= * Boutons — accent #1AA1F4, texte encre. Plus de pill noir. * ====================================================================== */ body.bd-a2 .wp-block-button__link, body.bd-a2 .wp-element-button { border-radius: 999px !important; padding: 12px 22px !important; font-size: 14px !important; font-weight: 600 !important; background: var(--accent) !important; color: var(--ink) !important; border: 0 !important; text-decoration: none !important; transition: background-color 0.18s ease, color 0.18s ease; } body.bd-a2 .wp-block-button__link:hover, body.bd-a2 .wp-block-button__link:focus-visible, body.bd-a2 .wp-element-button:hover, body.bd-a2 .wp-element-button:focus-visible { background: var(--accent-dark) !important; color: var(--white) !important; } body.bd-a2 .is-style-outline .wp-block-button__link, body.bd-a2 .wp-block-button.is-style-outline .wp-block-button__link { background: transparent !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--ink); } /* Ghost : filet navy stable, pas de remplissage au survol. */ body.bd-a2 .is-style-outline .wp-block-button__link:hover, body.bd-a2 .wp-block-button.is-style-outline .wp-block-button__link:hover { background: transparent !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--ink); } body.bd-a2 .wp-block-button__link:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 3px; } /* ========================================================================= * Bouton pastille + flèche (« Devis gratuit », « On en parle ») * Adapté d'un composant Uiverse de Creatlydev (uiverse.io) : flèche déplacée * à droite du label, palette navy au lieu du violet d'origine. * ====================================================================== */ body.bd-a2 .bd-a2-btn { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.15rem 0.75rem 1.4rem; border: 0; border-radius: 10rem; background: var(--ink); color: #ffffff; font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; } /* Aucun changement de fond ni de texte au survol : seule la fleche bouge. La pastille reste blanche, la fleche navy. */ body.bd-a2 .bd-a2-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } body.bd-a2 .bd-a2-btn__label { display: block; } /* Pastille ronde à DROITE du label. */ body.bd-a2 .bd-a2-btn__icon { display: grid; place-items: center; width: 25px; height: 25px; flex-shrink: 0; border-radius: 50%; background: #ffffff; color: var(--ink); overflow: hidden; } /* Les deux flèches sont superposées sur la même cellule de grille. */ body.bd-a2 .bd-a2-btn__svg { grid-area: 1 / 1; transition: transform 0.3s ease-in-out; } body.bd-a2 .bd-a2-btn__svg--copy { transform: translate(-150%, 150%); } body.bd-a2 .bd-a2-btn:hover .bd-a2-btn__svg, body.bd-a2 .bd-a2-btn:focus-visible .bd-a2-btn__svg { transform: translate(150%, -150%); } body.bd-a2 .bd-a2-btn:hover .bd-a2-btn__svg--copy, body.bd-a2 .bd-a2-btn:focus-visible .bd-a2-btn__svg--copy { transform: translate(0); transition-delay: 0.1s; } /* Variante compacte : carte Benjamin. */ body.bd-a2 .bd-a2-btn--sm { gap: 0.5rem; padding: 0.5rem 0.7rem 0.5rem 0.95rem; font-size: 12.5px; } body.bd-a2 .bd-a2-btn--sm .bd-a2-btn__icon { width: 20px; height: 20px; } body.bd-a2 .bd-a2-btn--sm .bd-a2-btn__svg { width: 9px; height: 9px; } @media (prefers-reduced-motion: reduce) { body.bd-a2 .bd-a2-btn, body.bd-a2 .bd-a2-btn__svg { transition: none; } body.bd-a2 .bd-a2-btn:hover .bd-a2-btn__svg { transform: none; } body.bd-a2 .bd-a2-btn:hover .bd-a2-btn__svg--copy { transform: translate(-150%, 150%); } } /* --- Secours : la levee se DECLENCHE, elle ne suit pas le defilement ----- * * Pour les navigateurs sans animation liee au defilement. Le JavaScript pose * « --pret » au chargement et ajoute « --fait » une seule fois, quand le bas * du panneau passe au-dessus des trois quarts de l'ecran. Tout le mouvement * est dans cette transition : rien ne se recalcule a chaque image, donc rien * ne peut arriver en retard. * La courbe freine longuement en fin de course — c'est un mouvement qu'on * REGARDE, pas un mouvement qu'on pilote a la molette. * ------------------------------------------------------------------------ */ body.bd-a2 .bd-a2-reveal--pret { transform: translateY(calc(-1 * var(--bd-ecart, 0px))); transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } body.bd-a2 .bd-a2-reveal--fait { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { body.bd-a2 .bd-a2-reveal--pret, body.bd-a2 .bd-a2-reveal--fait { transform: none; transition: none; } } /* ========================================================================= * Hero * ====================================================================== */ /* Panneau : un cran plus foncé que la page, coins hauts arrondis, coins bas à plat — il « pose » sur la suite du document. Le header flotte au-dessus, il n'appartient pas au panneau. */ body.bd-a2 .bd-a2-hero { /* 80px tout autour du panneau (30/08). Les trois variables valent la meme chose et restent distinctes : la liste haut-droite, posee en absolu, lit --bd-a2-top et --bd-a2-right, et la requete mobile plus bas les reduit toutes les trois d'un coup. ⚠️ La gauche valait « max(28px, (100% - 1160px)/2) », ce qui alignait le texte du hero sur la colonne des autres sections (136px a 1440). A 80px, cet alignement tombe : le H1 demarre plus a gauche que « Projets. » ou « Services ». C'est demande, ce n'est pas un oubli. */ --bd-a2-inset: 80px; --bd-a2-top: 80px; --bd-a2-right: 80px; position: relative; /* Au-dessus de la bande logos, qui vient se glisser sous son bord bas. */ z-index: 2; /* Liseré de la couleur du fond : quand la bande logos se decouvre derriere le panneau, elle ne vient jamais coller au bleu. Rien en HAUT : le bleu demarre au ras du header, sans bande de fond entre les deux. */ border: var(--bord) solid var(--page); border-top: 0; /* Plus de plancher 78vh : il laissait un mou sous le contenu, si bien que la marge basse VISIBLE valait ce mou + le padding, jamais la marge haute. Le panneau epouse desormais son contenu, et haut = bas au pixel. Retablir « min-height: 78vh » si l'on veut a nouveau que le hero remplisse le premier ecran — mais l'egalite verticale tombe avec. */ margin-bottom: 0 !important; background: var(--ice); /* Les 4 coins identiques, plus prononces. */ border-radius: 32px; /* Haut ET droite = --bd-a2-top, a la meme valeur : le coin haut-droit a le meme air des deux cotes, au pixel. La gauche garde --bd-a2-inset pour aligner la colonne de texte sur les autres sections. Le retrait droit est porte ICI et non par une marge sur les enfants : un pourcentage dans --bd-a2-inset se resout sur l'element qui l'utilise, et sur une colonne de grille il donnait une valeur aberrante. */ padding: var(--bd-a2-top) var(--bd-a2-right) var(--bd-a2-top) var(--bd-a2-inset) !important; /* Grille 2 colonnes : colonne 1 = lockup / H1 / paragraphe / CTA, colonne 2 = liste haut-droite (rangee 1) et carte Benjamin (rangee 4). Les alignements demandes en decoulent tout seuls, a toute hauteur de fenetre : haut de liste = haut du lockup, bas de la carte = bas des CTA. Le contenu est CENTRE verticalement dans le panneau (30/08) : le hero ayant une hauteur plancher d'un ecran, « start » laissait tout le mou en bas. Le centrage etait impossible tant que la liste haut-droite vivait dans la grille — elle serait descendue avec le reste. Elle est donc epinglee en absolu juste en dessous, ce qui rend le centrage libre. */ display: grid; grid-template-columns: minmax(0, 1fr) auto; /* SIX pistes et non quatre : une piste souple (1fr) AVANT et une APRES les quatre pistes de contenu. Les deux valant 1fr, elles se partagent le mou a parts egales — le contenu reste donc centre exactement comme avant. Ce qu'elles apportent : la derniere piste descend jusqu'au BAS de la zone de contenu du panneau, ce qui donne enfin un bord bas sur lequel caler la carte de l'interlocuteur. Sans elles, « align-self: end » ne pouvait la caler que sur le bas des CTA, a une distance du bord qui variait avec la hauteur de la fenetre (mesure : 118px a 768 de haut, 262px a 1080). ⚠️ Les pistes de contenu sont donc numerotees 2, 3, 4 et 5 — pas 1 a 4. align-content garde sa valeur mais ne fait plus rien : les 1fr absorbent tout le mou. Le laisser est un filet, si les 1fr disparaissaient un jour. */ grid-template-rows: 1fr auto auto auto auto 1fr; align-content: center; column-gap: 32px; } @media (max-width: 799px) { body.bd-a2 .bd-a2-hero { --bd-a2-inset: 20px; --bd-a2-top: 40px; --bd-a2-right: 20px; /* Une seule colonne, flux naturel : la liste est masquee et la carte Benjamin passe sous les CTA. */ display: block; border-radius: 24px; padding: var(--bd-a2-top) var(--bd-a2-inset) !important; } } /* Largement décollé du lockup ; la taille vit dans --taille-h1. */ body.bd-a2 .bd-a2-hero h1 { font-size: var(--taille-h1); /* 1.2 passait a 45px ; a 52px l'interligne se voyait comme un trou, et le titre ne tenait plus ensemble a cote des titres de section, qui sont a 1.08 et 1.12. */ line-height: 1.1; letter-spacing: -0.02em; max-width: 20em; margin: clamp(40px, 4vw, 56px) 0 0.45em; } /* Respiration entre le paragraphe et la rangee de CTA. Les boutons eux-memes ne sont pas retouches. ⚠️ L'ecart REEL vaut ceci PLUS les 4px de marge basse du paragraphe : 22px avant, 34px maintenant a 1440 comme a 1920. Demande du 31/08, « un petit peu plus, tres subtil » — d'ou un cran et non un bond. */ body.bd-a2 .bd-a2-hero > .wp-block-group__inner-container > .wp-block-buttons, body.bd-a2 .bd-a2-hero > .wp-block-buttons { margin-top: clamp(20px, 2.1vw, 30px); } /* Paragraphe d'accroche sous le H1 : muted, plus petit, colonne courte. */ body.bd-a2 .bd-a2-hero-lead { max-width: 52ch; margin: 0 0 4px; color: var(--muted); font-size: 15px; line-height: 1.6; } body.bd-a2 .bd-a2-hero-logo { grid-column: 1; grid-row: 2; align-self: start; } /* ⚠️ NE PAS mettre « grid-column: 1 / -1 » sur ce H1 pour le laisser grandir. Essaye et mesure le 31/08 : le titre s'etend bien, la liste haut-droite n'est pas touchee — mais la CARTE BENJAMIN est en « grid-row: 3 / -1 », c'est-a-dire A COTE DU TITRE sur toute sa hauteur, et la seconde ligne passait DESSOUS, 143px cachés derriere un fond blanc opaque. Le commentaire plus haut, qui annonce la carte en rangee 4, decrit une version anterieure de la grille : c'est la carte qu'il faut regarder, pas lui. */ body.bd-a2 .bd-a2-hero h1 { grid-column: 1; grid-row: 3; } body.bd-a2 .bd-a2-hero-lead { grid-column: 1; grid-row: 4; } /* align-self:start — CTA et carte sont tous deux ancres EN HAUT de la rangee 4, donc juste sous le paragraphe : c'est ce qui les remonte, et la carte suit le meme mouvement. Les caler en bas les enfoncait de toute la hauteur de la carte. Sans align-self, la rangee etirerait la barre de boutons a la hauteur de la carte et grandirait les CTA. */ body.bd-a2 .bd-a2-hero > .wp-block-group__inner-container > .wp-block-buttons, body.bd-a2 .bd-a2-hero > .wp-block-buttons { grid-column: 1; grid-row: 5; align-self: start; } /* Lockup officiel, une seule image, mis à l'échelle EN BLOC : la hauteur pilote, la largeur suit. Aucune extraction de l'arbre, aucun scale local. */ body.bd-a2 .bd-a2-hero-logo { margin: 0; } /* Le logo est pilote par la LARGEUR, plus par la hauteur. ⚠️ Ce n'est pas un detail de style, c'est une correction. Avec une hauteur imposee, une largeur automatique et max-width:100%, des que la colonne devenait plus etroite que le logo, max-width rognait la largeur SANS que la hauteur suive : le logo s'ecrasait. Mesure a 900px de fenetre : 284x100, soit un rapport de 2.84 la ou le fichier vaut 3.711. En pilotant la largeur avec height:auto, le rapport est tenu a toute largeur, par construction. 605px de large a 1440 (163px de haut) au lieu de 494 : +22%. */ body.bd-a2 .bd-a2-hero-logo img { display: block; width: clamp(410px, 42vw, 605px); max-width: 100%; height: auto; } @media (max-width: 799px) { body.bd-a2 .bd-a2-hero h1 { margin-top: 32px; } body.bd-a2 .bd-a2-hero-logo img { width: 78%; max-width: 300px; height: auto; } } body.bd-a2 .bd-a2-hero-tools { /* Epinglee en haut a droite du panneau, HORS de la grille : c'est le seul bloc qui ne suit pas le centrage vertical du reste. Un enfant absolu sans placement de grille se positionne sur la boite de padding du conteneur, donc ces deux valeurs le laissent exactement ou il etait. Air haut = air droite, comme avant. */ position: absolute; top: var(--bd-a2-top); right: var(--bd-a2-right); text-align: right; font-size: 16px; line-height: 1.5; color: var(--muted); margin-top: 0; margin-bottom: 0; } @media (max-width: 799px) { body.bd-a2 .bd-a2-hero-tools { display: none; } /* padding-bottom aligne sur --bd-a2-top : haut = bas en mobile aussi. */ body.bd-a2 .bd-a2-hero { padding-bottom: var(--bd-a2-top) !important; } } /* WordPress emballe les enfants de chaque core/group dans un .wp-block-group__inner-container. Nos grilles/flex portaient donc sur ce seul wrapper au lieu des blocs : d'où la carte Benjamin empilée et la bande logos en colonne. display:contents fait disparaître le wrapper de la mise en page sans toucher au DOM ni au contenu. */ body.bd-a2 .bd-a2-hero > .wp-block-group__inner-container, body.bd-a2 .bd-a2-clients-inner > .wp-block-group__inner-container, body.bd-a2 .bd-a2-clients-left > .wp-block-group__inner-container, body.bd-a2 .bd-a2-clients-right > .wp-block-group__inner-container { display: contents; } /* ========================================================================= * Carte de l'interlocuteur — hero, en bas a droite. Namespace bd-hc-* * * Le markup est rendu par PHP ([bd_a2_hero_carte], functions-accueil-2.php) : * il contient des SVG, que WordPress efface a l'enregistrement du contenu. * Elle remplace .bd-a2-chip, faite de blocs Gutenberg, dont il ne reste rien. * * ⚠️ Les deux boutons ne sont PAS decrits ici : ce sont des .bd-a2-btn--sm, * definis une seule fois plus haut avec tous les boutons de la page. Seuls * leur rangement (la ligne, l'ecart) et le nowrap vivent dans ce bloc. * ====================================================================== */ body.bd-a2 .bd-hc { display: flex; flex-direction: column; background: var(--white); border-radius: 24px; padding: 18px; box-shadow: 0 8px 26px -12px rgba(10, 23, 38, 0.1), 0 0 0 1px rgba(10, 23, 38, 0.05); /* Sous 900px de fenetre, la carte fait EXACTEMENT la largeur de son contenu. max-content et non un nombre en dur : elle suit toute seule si un libelle change. ⚠️ La rangee la plus large n'est PLUS celle des deux boutons (199px) mais le BADGE de disponibilite, qui tient sur une seule ligne et mesure 258px. C'est lui qui commande desormais la largeur de la carte. ⚠️ Le hero est une grille « minmax(0, 1fr) auto » : la carte EST la piste auto, et chaque pixel qu'elle prend est pris au titre. Ne pas elargir cette carte sans regarder le titre — voir le bloc 900px. */ width: max-content; max-width: 100%; } @media (min-width: 800px) { body.bd-a2 .bd-hc { /* Colonne 2, et la carte descend jusqu'a la DERNIERE piste (« -1 »), celle qui touche le bas de la zone de contenu du panneau. Calee en bas de cette piste, son bord bas tombe donc a 80px du bord bas du panneau — c'est le padding du hero — quelle que soit la hauteur de la fenetre. Les 4px de marge basse portent l'ecart demande a 84px. ⚠️ Avant, la carte s'arretait au bas des CTA : l'ecart au bord variait de 118 a 262px selon la hauteur de la fenetre. C'est ce que les deux pistes 1fr, plus haut, sont venues corriger. */ grid-column: 2; grid-row: 3 / -1; justify-self: end; align-self: end; margin: 0 0 4px; } } @media (min-width: 900px) { /* 490px — LA LARGEUR EXACTE DU CONTENU, PAS UN PIXEL DE PLUS. C'est la rangee la plus large qui la fixe, et c'est le BADGE : « Disponible pour de nouveaux projets » mesure 258px en nowrap, contre 199px pour les deux boutons. 258 + 172 de photo + 24 de gouttiere + 36 de padding = 490. Le bord droit de la carte tombe donc au ras du badge. ⚠️ POURQUOI UN NOMBRE EN DUR ET NON « max-content » : le texte du badge CHANGE avec le reglage Reglages -> Bio Digital. « Indisponible pour le moment » ne fait que 209px ; en max-content la carte MAIGRIRAIT de 49px des que Benjamin bascule l'interrupteur, et la mise en page du hero bougerait avec. La largeur est donc figee sur le texte le PLUS LONG des deux, pour que la carte ne bronche pas quand on bascule. ⚠️ Si un jour l'un des deux textes s'allonge, ce 490 est a REMESURER — sinon le badge deborde ou le blanc revient a droite. Consequence sur le titre : le hero est une grille « minmax(0, 1fr) auto », la carte EST la piste auto, donc chaque pixel qu'elle prend est pris au H1 d'en face. Mesure du 01/09 : le H1 passe de 2 a 3 lignes des 428px de carte a 1440 (426px a 1366). A 490px il tient sur 3 lignes ; il en faisait 4 quand la carte etait a 580. Ramener le titre a 2 lignes imposerait de descendre --taille-h1 a 47px (mesure a 490) — pas tranche. Le cran ne vaut qu'a partir de 900px de fenetre : en dessous, la carte reste calee sur son contenu (width: max-content plus haut). */ body.bd-a2 .bd-hc { width: 490px; } } @media (max-width: 799px) { /* Le hero repasse en une colonne : la carte descend sous les CTA. */ body.bd-a2 .bd-hc { margin: 28px 0 0; width: 100%; } } /* Badge de disponibilite. Il vit DANS la colonne de droite, entre les arguments et les boutons, et son texte est commande par le reglage Reglages -> Bio Digital (voir bd_a2_dispo_badge() dans functions-accueil-2). Les quatre couleurs — deux par etat — sont EN DUR et non prises dans les variables de la charte : ce sont des signaux d'etat, pas des couleurs de marque, et elles ne doivent pas suivre un changement de palette. ⚠️ white-space: nowrap : le badge tient sur UNE ligne, c'est demande. Il mesure 258px ainsi, ce qui en fait la rangee la plus large de la carte et donc CE QUI FIXE SA LARGEUR. Le retirer laisserait la carte retomber a ~431px — et rendrait au H1 du hero ses deux lignes. */ body.bd-a2 .bd-hc-statut { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; /* La marge est en HAUT depuis que le badge est passe sous les arguments. Rien en bas : c'est .bd-hc-btns qui porte l'ecart avec les boutons. */ margin: 12px 0 0; padding: 6px 13px; border-radius: 100px; background: #e8f7ee; color: #1a7a3c; font-size: 12.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; } /* Etat « indisponible » : orange, et le point NE PULSE PAS. L'absence d'animation est voulue — le clignotement est un appel a l'action, il n'a pas de sens quand Benjamin ne prend plus de projets. */ body.bd-a2 .bd-hc-statut--indispo { background: #fef3e2; color: #b45309; } body.bd-a2 .bd-hc-point { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: #22c55e; animation: bd-hc-pulse 2s infinite; } body.bd-a2 .bd-hc-statut--indispo .bd-hc-point { background: #d97706; animation: none; } @keyframes bd-hc-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } @media (prefers-reduced-motion: reduce) { body.bd-a2 .bd-hc-point { animation: none; } } /* Photo a gauche, colonne d'information a droite. La photo s'ETIRE sur la hauteur du texte (align-items: stretch par defaut) : les deux cotes de la carte finissent donc au meme niveau, sans hauteur codee en dur qui aurait derive au premier mot ajoute. */ body.bd-a2 .bd-hc-haut { display: flex; /* La gouttiere entre la photo et la colonne de texte. 18px au depart, passee a 24px le 01/09 : demande de Benjamin, « un peu plus d'espace ». ⚠️ La carte etant en width: max-content, ces 6px s'ajoutent a sa largeur (393 -> 399px a 1440). On reste sous les 440px a partir desquels le H1 du hero passe a 3 lignes — mais la marge est mince : au dela de ~64px de gouttiere, c'est le titre qui paie. */ gap: 24px; } body.bd-a2 .bd-hc-photo { /* 172px : la valeur du fichier de reference. La vignette de mediatheque servie est 'medium' (242x300), donc toujours plus large que l'affichage — pas de flou. Ne pas monter au-dela de 242 sans passer a 'large'. */ width: 172px; flex-shrink: 0; /* Plancher : ce que la photo mesure meme si la colonne de texte devenait plus courte. Elle grandit au-dela toute seule. */ min-height: 186px; border-radius: 16px; overflow: hidden; background: var(--ice); } body.bd-a2 .bd-hc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; /* Le cadre de la photo (172x213) a presque exactement le rapport du fichier de mediatheque (242x300) : « cover » ne recadrait donc RIEN, on voyait le portrait entier et le sujet paraissait loin. C'est ce zoom qui rapproche le visage, pas object-fit. L'origine descend quand le zoom monte, et c'est ce qui garde de l'air au-dessus du crane : le point d'origine est le seul qui ne bouge pas, donc plus on grossit, plus il faut le remonter dans l'image. A 1,2 il etait a 32% de la hauteur ; a 1,6 il est a 22%. A 50% (le centre), n'importe quel zoom mange le sommet du crane. Valeurs essayees a l'oeil le 01/09 : 1,0 / 1,2 / 1,3 / 1,35 / 1,45 / 1,6. ⚠️ La NETTETE ne se regle pas ici. Elle se regle dans le 'sizes' de wp_get_attachment_image() (functions-accueil-2.php) : c'est lui qui dit au navigateur quel fichier du srcset prendre. Tant qu'il annoncait 242px, le navigateur telechargeait le fichier 242x300 de 5,7 Ko et le zoom le transformait en bouillie. Augmenter le zoom SANS toucher au 'sizes' rend la photo un peu plus floue a chaque fois. */ transform: scale(1.6); transform-origin: 50% 22%; } body.bd-a2 .bd-hc-info { display: flex; flex-direction: column; flex: 1; min-width: 0; } body.bd-a2 .bd-hc-role { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--muted); } body.bd-a2 .bd-hc-nom { margin: 4px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; color: var(--ink); white-space: nowrap; } /* Note Google : les etoiles en #FBBC05, la couleur de la marque, EN DUR. */ body.bd-a2 .bd-hc-note { display: flex; align-items: center; gap: 7px; margin: 8px 0 0; } body.bd-a2 .bd-hc-etoiles { color: #FBBC05; font-size: 13px; letter-spacing: 1.5px; line-height: 1; } body.bd-a2 .bd-hc-note-txt { font-size: 12.5px; line-height: 1; color: var(--muted); } /* « sur 5 » n'est la que pour les lecteurs d'ecran : les etoiles le disent deja a l'oeil. Pas de display:none, qui l'aurait retire de la lecture. */ body.bd-a2 .bd-hc-sur5 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Les deux arguments, icone bleue (--accent) + texte. */ body.bd-a2 .bd-hc-args { display: flex; flex-direction: column; gap: 5px; margin: 11px 0 0; padding: 0; list-style: none; } body.bd-a2 .bd-hc-arg { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; line-height: 1.35; color: var(--muted); } body.bd-a2 .bd-hc-arg svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--accent); } /* Les deux boutons, cote a cote, jamais l'un sous l'autre : c'est la largeur de la carte qui est dimensionnee pour eux, pas l'inverse. margin-top: auto les colle en bas de la colonne, donc au bas de la photo. */ body.bd-a2 .bd-hc-btns { display: flex; flex-wrap: nowrap; gap: 9px; margin-top: auto; padding-top: 14px; } body.bd-a2 .bd-hc-btns .bd-a2-btn { white-space: nowrap; } /* Sous 860px la carte passe en colonne : photo pleine largeur au-dessus, information dessous. Le seuil est celui de la CARTE, pas celui du hero (799px) : entre les deux, la colonne de texte serait trop etroite. */ /* Sous 380px de large, la carte n'a plus les 258px que reclame le badge sur une ligne : on le laisse passer sur deux plutot que deborder de la carte. Le nowrap n'a de sens que tant qu'il rentre. */ @media (max-width: 380px) { body.bd-a2 .bd-hc-statut { white-space: normal; } } @media (max-width: 860px) { body.bd-a2 .bd-hc-haut { flex-direction: column; } body.bd-a2 .bd-hc-photo { width: 100%; /* 270px et non 200 : a 200 le cadre etait TROP PLAT pour la tete. Le calcul, a 430px de fenetre : la photo fait 354 de large, donc « cover » rend le portrait en 354x439 et n'en montre que la hauteur du cadre. La tete occupe de 10% a 62% de la photo, soit 52% de sa hauteur : il faut donc au moins 0,52 x 439 = 228px de cadre pour qu'elle tienne, et un peu plus pour l'air au-dessus. A 200px le haut du crane etait coupe — c'etait deja le cas avant le 01/09. */ height: 270px; min-height: 0; } /* Le zoom du grand ecran est ANNULE ici, et ce n'est pas un oubli : le cadre est en paysage, donc « cover » recadre deja fort tout seul. Le 1,6 par-dessus donnait un gros plan sur le visage. object-position remonte le cadrage a 18% au lieu du centre : centre, la photo montrait des sourcils aux epaules. */ body.bd-a2 .bd-hc-photo img { transform: none; object-position: 50% 18%; } body.bd-a2 .bd-hc-nom { white-space: normal; } } /* Widget flottant de prise de RDV du thème (bouton rond #1AA1F4 en bas à droite, émis par wp_footer) : masqué SUR CETTE PAGE UNIQUEMENT. Le plugin n'est pas désinstallé et le widget reste actif partout ailleurs. */ body.bd-a2 .bd-float, body.bd-a2 .bd-float-overlay, body.bd-a2 .bd-popup-rdv { display: none !important; } /* ========================================================================= * Bande logos clients — fond page, cases blanches * ====================================================================== */ body.bd-a2 .bd-a2-clients { background: var(--page); /* La section passe SOUS le panneau ice (z-index 1 contre 2). Elle ne remonte plus par une marge negative : c'est le bloc interne .bd-a2-reveal que le script tient en place pendant que le hero se leve, puis relache. */ position: relative; z-index: 1; } /* Bloc porte par le script : titre + defile. Il tient sa position a l'ecran pendant qu'il se decouvre, en grossissant legerement jusqu'a sa taille reelle. Sans JS il reste a sa place, sans transformation : la bande est simplement posee sous le hero. */ body.bd-a2 .bd-a2-reveal { transform-origin: 50% 50%; will-change: transform; } /* --- Titre « Ils me font confiance » : même famille/graisse que le ghost, précédé d'un plus dans un rond navy qui pivote au survol. Les chapeaux « Ce que je fais » (Services) et « Pourquoi moi » partagent ces trois regles : meme dessin, meme rotation, aucune duplication. ---- */ body.bd-a2 .bd-a2-clients .bd-a2-kicker, body.bd-a2 .bd-svc-head .bd-a2-kicker, body.bd-a2 .bd-why-grid .bd-a2-kicker { display: inline-flex; align-items: center; gap: 10px; /* Le retrait lateral est desormais porte par .bd-a2-clients-inner, commun aux deux colonnes. Ici, seul l'air avant le titre. */ margin: 0 0 34px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; line-height: 1.2; text-transform: uppercase; color: var(--muted); cursor: default; } /* La croix est DESSINEE, plus ecrite : un glyphe « + » se cale sur la ligne de base de la police, jamais sur le centre geometrique du rond — d'ou le decentrage, visible surtout pendant la rotation. Deux degrades en position « center » sont centres au pixel, quelle que soit la police. La rotation est de 45° et non 90° : une croix parfaitement symetrique tournee d'un quart de tour redonne la meme image, le survol ne se verrait plus. A 45°, le plus devient une croix de fermeture. */ body.bd-a2 .bd-a2-clients .bd-a2-kicker::before, body.bd-a2 .bd-svc-head .bd-a2-kicker::before, body.bd-a2 .bd-proc-tete .bd-a2-kicker::before, body.bd-a2 .bd-a2-faq-section .bd-a2-kicker::before, body.bd-a2 .bd-why-grid .bd-a2-kicker::before, /* Les quatre sections propres a l'accueil-4, ajoutees le 02/09 : elles avaient la petite pastille bleue de 6px du chapeau ordinaire, alors que le reste de la page portait deja le rond. Elles n'existent que sur la page 152, d'ou l'absence de .bd-a4 dans le selecteur : rien d'autre ne peut les atteindre. L'animation du texte, elle, tournait DEJA : le script enveloppe tous les .bd-a2-kicker de la page, sans liste a tenir a jour. */ body.bd-a2 .bd-a4-mal .bd-a2-kicker::before, body.bd-a2 .bd-a4-diag .bd-a2-kicker::before, body.bd-a2 .bd-a4-qui .bd-a2-kicker::before, body.bd-a2 .bd-a4-preuves .bd-a2-kicker::before, /* « On en parle », ajoute le 02/09 : c'etait le DERNIER chapeau de la page reste sur la petite pastille de 6px. Plus aucun ecart. */ body.bd-a2 .bd-a4-cta .bd-a2-kicker::before { content: ""; display: inline-block; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(#ffffff, #ffffff) center / 9px 1.6px no-repeat, linear-gradient(#ffffff, #ffffff) center / 1.6px 9px no-repeat, var(--ink); transition: transform 0.3s ease-in-out; } body.bd-a2 .bd-a2-clients .bd-a2-kicker:hover::before, body.bd-a2 .bd-svc-head .bd-a2-kicker:hover::before, body.bd-a2 .bd-proc-tete .bd-a2-kicker:hover::before, body.bd-a2 .bd-a2-faq-section .bd-a2-kicker:hover::before, body.bd-a2 .bd-why-grid .bd-a2-kicker:hover::before, /* ⚠️ La rotation au survol se tient dans une regle SEPAREE : ajouter une section a la liste du dessus sans l'ajouter ici lui donnerait un rond fige, different de tous les autres. Les deux listes vont ensemble. */ body.bd-a2 .bd-a4-mal .bd-a2-kicker:hover::before, body.bd-a2 .bd-a4-diag .bd-a2-kicker:hover::before, body.bd-a2 .bd-a4-qui .bd-a2-kicker:hover::before, body.bd-a2 .bd-a4-preuves .bd-a2-kicker:hover::before, body.bd-a2 .bd-a4-cta .bd-a2-kicker:hover::before { transform: rotate(45deg); } /* --- Cases blanches du defile : taille fixe, elles ne s'etirent pas. ---- */ body.bd-a2 .bd-a2-logo-case { display: flex; align-items: center; justify-content: center; width: 200px; height: 108px; flex: 0 0 auto; padding: 18px 16px; background: var(--white); /* Pas de filet : une ombre douce suffit a detacher la case du fond. */ border-radius: 16px; box-shadow: 0 10px 22px -14px rgba(10, 23, 38, 0.5); text-align: center; transition: box-shadow 0.18s ease; } body.bd-a2 .bd-a2-logo-case:hover { box-shadow: 0 14px 26px -14px rgba(10, 23, 38, 0.6); } body.bd-a2 .bd-a2-logo-case img { max-height: 50px; max-width: 100%; width: auto; object-fit: contain; display: block; } /* ========================================================================= * Bande clients — accroche et chiffres (ajout du 30/08) * * ⚠️ Les deux blocs de premier niveau (.bd-a2-clients-intro, .bd-a2-proof) * sont des groupes Gutenberg : leur selecteur DOIT passer par .bd-a2-main, * sinon la regle « body.bd-a2 .bd-a2-main .wp-block-group { margin: 0 } » * (en tete de feuille, plus specifique) ecrase leurs marges. Piege deja * rencontre le meme jour sur .bd-a2-logos. * ====================================================================== */ body.bd-a2 .bd-a2-main .bd-a2-clients-intro { margin: 0; max-width: none; } body.bd-a2 .bd-a2-clients-title { margin: 0 0 14px; font-size: var(--taille-clients); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; color: var(--ink); /* A cette taille le titre tient sur quatre lignes : sans equilibrage, la derniere se reduisait au seul mot « site. ». */ text-wrap: balance; } body.bd-a2 .bd-a2-clients-title .bd-a2-hl { color: var(--accent); } body.bd-a2 .bd-a2-clients-desc { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--muted); max-width: 34rem; } body.bd-a2 .bd-a2-main .bd-a2-proof { display: flex; gap: 2.5rem; margin: 34px 0 0; padding-top: 24px; border-top: 1px solid var(--line); } /* Gutenberg enveloppe les enfants dans un conteneur interne : le flex doit alors etre porte par lui, sinon les deux chiffres s'empilent. */ body.bd-a2 .bd-a2-proof .wp-block-group__inner-container { display: flex; gap: 2.5rem; } body.bd-a2 .bd-a2-proof-item { display: flex; flex-direction: column; } body.bd-a2 .bd-a2-proof-num { /* Chiffres a chasse fixe : sans cela, le nombre saute en largeur a chaque pas du comptage et le libelle dessous tremble. */ font-variant-numeric: tabular-nums; font-size: var(--taille-chiffres); font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--ink); } body.bd-a2 .bd-a2-proof-num .bd-a2-proof-u { color: var(--accent); } body.bd-a2 .bd-a2-proof-lbl { margin-top: 6px; font-size: 0.82rem; color: var(--muted); max-width: 11rem; } /* ========================================================================= * Bande clients — deux colonnes : le discours a gauche, le defile a droite * ====================================================================== */ body.bd-a2 .bd-a2-main .bd-a2-clients-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: center; margin: 0 var(--retrait-clients); } /* Sans min-width:0, la colonne s'etire a la largeur de la piste (~2900px) et fait deborder la page : une piste en width:max-content ne se laisse pas comprimer par defaut dans une grille. */ body.bd-a2 .bd-a2-clients-right { min-width: 0; } /* --- Configurateur « Composez votre projet » ---------------------------- * * ⚠️ La reference appelait --bd-card, --bd-faint et --bd-line-2. Ces trois * jetons N'EXISTENT PAS dans ce theme et ne sont pas inventes ici : on lit * --white, --muted et --line, qui sont les equivalents deja en place. * Le bouton, lui, n'est pas redecrit : c'est .bd-a2-btn, celui du hero, rendu * par bd_a2_projets_bouton(). Cette feuille ne fait que le placer. * ------------------------------------------------------------------------ */ body.bd-a2 .bd-cfg-eye { margin: 0 0 0.6rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; /* Le seul chapeau BLEU de la page : les autres sont navy. C'est ce qui dit « ici on agit » plutot que « ici on lit ». */ color: var(--accent); } /* ⚠️ LES TAILLES SUIVENT CELLES DES CARTES, mesurees le 31/08 a 1440 : titre de carte 27,2px (1.7rem), texte de carte 16px (1rem), etiquette « Ce que ca inclut » 0.7rem. Le configurateur etait plus petit partout — 22,4 / 14,7 / 13,6 — et paraissait secondaire a cote de l'accordeon. Changer l'une de ces valeurs sans l'autre rouvre l'ecart. */ body.bd-a2 .bd-cfg h3 { margin: 0 0 0.5rem; font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } body.bd-a2 .bd-cfg-hint { margin: 0 0 1.1rem; font-size: 1rem; color: var(--muted); } body.bd-a2 .bd-cfg-opts { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.3rem; } body.bd-a2 .bd-cfg-opt { display: inline-flex; align-items: center; padding: 0.4rem 0.8rem; background: var(--white); border: 1.5px solid var(--line); border-radius: 10px; font: inherit; font-size: 0.85rem; font-weight: 600; line-height: 1.2; color: var(--ink); cursor: pointer; user-select: none; transition: background 0.2s, border-color 0.2s, color 0.2s; } body.bd-a2 .bd-cfg-opt:hover { border-color: var(--accent); } body.bd-a2 .bd-cfg-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } body.bd-a2 .bd-cfg-opt.bd-on { background: var(--ice); border-color: var(--accent); color: var(--accent-dark); } /* L'audit est a part, et il le MONTRE : retenu, il passe en navy plein, la seule option qui ne se combine avec rien. La barre verticale dit la meme chose en silence. */ body.bd-a2 .bd-cfg-opt.bd-cfg-audit.bd-on { background: var(--ink); border-color: var(--ink); color: var(--white); } body.bd-a2 .bd-cfg-vbar { width: 1px; height: 28px; margin: 0 0.3rem; background: var(--line); } /* min-height : les huit textes n'ont pas la meme longueur. Sans reserve, le bouton remonterait et descendrait a chaque clic. */ body.bd-a2 .bd-cfg-desc { margin: 0 0 1.4rem; min-height: 5.5em; font-size: 1rem; color: var(--muted); line-height: 1.55; } body.bd-a2 .bd-cfg-desc strong { color: var(--ink); font-weight: 600; } body.bd-a2 .bd-a2-btn.bd-cfg-cta { width: fit-content; } @media (prefers-reduced-motion: reduce) { body.bd-a2 .bd-cfg-opt { transition: none; } } /* --- Carrousel d'avis Google, colonne de gauche ------------------------- * * SANS FOND : un filet en haut, et le contenu pose a meme la page. La maquette * appelait --bd-card, --bd-faint et --bd-line-2 ; ces trois jetons N'EXISTENT * PAS dans ce theme et ils ne sont pas inventes ici — on lit --white, --muted * et --line, qui sont les equivalents deja en place. Les etoiles gardent le * jaune Google #FBBC05 et le G ses quatre couleurs de marque : ce sont des * couleurs de MARQUE, pas des couleurs de charte, elles restent en dur. * ------------------------------------------------------------------------ */ /* ⚠️ LE TRAIT FAIT LA LARGEUR VISIBLE DU TITRE, PAS CELLE DE SA BOITE. La boite du titre prend toute la colonne — 767px a 1920 — alors que le texte s'arrete ou la derniere ligne se termine. Un filet cale sur la boite depassait donc le titre par la droite. --bd-trait est pose par le JavaScript (voir template-accueil-2.php) : il vaut la ligne RENDUE la plus longue. A 1920 c'est « comptent sur leur site. », donc le filet s'arrete pile au point. Le repli 30rem sert le temps que le script mesure, et si le script ne tourne pas : le filet garde alors une largeur sensee. Le contenu, lui, ne depasse jamais 30rem : une ligne d'avis courant sur 767px serait penible a lire. */ body.bd-a2 .bd-a2-avis { max-width: var(--bd-trait, 30rem); margin-top: 1.8rem; /* 2,5rem : le trait respirait a peine au-dessus de la pastille. */ padding-top: 2.5rem; border-top: 1px solid var(--line); } body.bd-a2 .bd-a2-avis > *, body.bd-a2 .bd-a2-avis-vue > * { max-width: min(30rem, 100%); } /* Le calque qui glisse. --bd-sens vaut 1 vers l'avant, -1 vers l'arriere : l'avis suivant entre par la DROITE et sort par la gauche, le precedent fait l'inverse. Un seul jeu de regles pour les deux sens. ⚠️ overflow-x: clip sur le parent, et non hidden : « hidden » ferait de la carte un conteneur de defilement — la meme lecon que sur le body. */ body.bd-a2 .bd-a2-avis { overflow-x: clip; } body.bd-a2 .bd-a2-avis-vue { transition: transform 0.24s ease, opacity 0.24s ease; } body.bd-a2 .bd-a2-avis-vue.est-sortie { transform: translateX(calc(var(--bd-sens, 1) * -30px)); opacity: 0; } /* L'etat d'entree est pose SANS transition, le temps d'un calcul : le calque saute du cote d'ou il doit venir, puis la classe est retiree et il revient en glissant. Sans le « transition: none », il glisserait aussi pour aller se placer, et l'avis traverserait la carte de part en part. */ body.bd-a2 .bd-a2-avis-vue.est-entree { transform: translateX(calc(var(--bd-sens, 1) * 30px)); opacity: 0; transition: none; } @media (prefers-reduced-motion: reduce) { body.bd-a2 .bd-a2-avis-vue, body.bd-a2 .bd-a2-avis-vue.est-sortie, body.bd-a2 .bd-a2-avis-vue.est-entree { transform: none; opacity: 1; transition: none; } } body.bd-a2 .bd-a2-avis-tete { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.8rem; } /* La pastille : l'initiale sur un rond de couleur, comme chez Google. La teinte vient du PHP, une par avis — elle change avec le nom, sinon les cinq avis se ressembleraient tous. */ body.bd-a2 .bd-a2-avis-pastille { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: 700; font-size: 1.1rem; line-height: 1; } body.bd-a2 .bd-a2-avis-qui { flex: 1; min-width: 0; display: flex; flex-direction: column; } body.bd-a2 .bd-a2-avis-nom { font-weight: 700; font-size: 0.95rem; line-height: 1.3; } body.bd-a2 .bd-a2-avis-date { font-size: 0.78rem; color: var(--muted); } body.bd-a2 .bd-a2-avis-g { width: 22px; height: 22px; flex-shrink: 0; } body.bd-a2 .bd-a2-avis-etoiles { margin: 0 0 0.6rem; color: #fbbc05; font-size: 1rem; letter-spacing: 2px; line-height: 1; } /* min-height : les cinq avis n'ont pas la meme longueur. Sans reserve, la colonne sautait d'une hauteur a l'autre a chaque clic sur une fleche. */ body.bd-a2 .bd-a2-avis-texte { margin: 0 0 1rem; min-height: 6em; font-size: 0.95rem; color: var(--muted); line-height: 1.55; } body.bd-a2 .bd-a2-avis-nav { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; } body.bd-a2 .bd-a2-avis-btn { width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); font-size: 1.1rem; line-height: 1; cursor: pointer; transition: border-color 0.2s, color 0.2s; } body.bd-a2 .bd-a2-avis-btn:hover { border-color: var(--accent); color: var(--accent); } body.bd-a2 .bd-a2-avis-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } body.bd-a2 .bd-a2-avis-rang { font-size: 0.8rem; color: var(--muted); } @media (prefers-reduced-motion: reduce) { body.bd-a2 .bd-a2-avis-btn { transition: none; } } /* --- Badge d'avis Google, au-dessus du defile --------------------------- * * Il vit DANS .bd-a2-clients-right, c'est-a-dire dans le conteneur du bandeau * lui-meme : son bord droit est donc celui du defile par construction, a * toute largeur, sans aucune valeur recopiee. Rien du bandeau n'est touche. * * ⚠️ La largeur est posee sur l'IMAGE et la hauteur laissee en auto ; les * attributs width/height du HTML portent la taille reelle du fichier * (594x98). Le rapport est donc tenu par le navigateur, et la place est * reservee avant meme que l'image arrive. * * ⚠️ Le fichier est la version DETOUREE (media 134), pas celle d'origine : le * badge fourni portait une carte blanche a bord gris CUITE DANS L'IMAGE, que * ni la CSS ni un fond transparent ne pouvaient retirer. La version detouree * a ete demattee depuis le blanc — recomposee sur blanc elle redonne * l'original au pixel pres — puis rognee sur son contenu. L'original (media * 132) est conserve intact dans la mediatheque. * ------------------------------------------------------------------------ */ body.bd-a2 .bd-a2-note { display: flex; justify-content: flex-end; /* 2,5rem et non 1 : sans sa carte blanche, le badge n'a plus de marge propre, et il touchait presque les cases du defile. */ margin: 0 0 2.5rem; } body.bd-a2 .bd-a2-note img { display: block; /* 260px et non 210 : la carte retiree, le contenu utile occupe toute la largeur au lieu de 82% — a taille egale le badge aurait paru a peine plus grand. 260 le rend une fois et demie plus lisible qu'avant. */ width: 260px; height: auto; max-width: 100%; } /* En une colonne, le badge se range a gauche comme le reste du discours. */ @media (max-width: 860px) { body.bd-a2 .bd-a2-note { justify-content: flex-start; } } /* --- « Rejoignez-les », sous le bandeau de logos ------------------------ * * ⚠️ LA MARGE EST LA MEME QUE CELLE DU BADGE, ET C'EST LE POINT. * Le badge pose 2,5rem SOUS lui ; le bouton pose 2,5rem AU-DESSUS. Le bandeau * respire donc pareil des deux cotes — c'est ce qui a ete demande, et ca ne * tient que si les deux valeurs restent egales. Changer l'une oblige a * changer l'autre (voir .bd-a2-note, margin: 0 0 2.5rem). * * Aucune propriete d'apparence ici : le bouton EST celui du hero, rendu par * bd_a2_projets_bouton(). Cette regle ne fait que le placer. * ------------------------------------------------------------------------ */ body.bd-a2 .bd-a2-btn.bd-a2-rejoindre { margin-top: 2.5rem; } /* La fenetre du defile. ⚠️ La div porte AUSSI la classe .bd-a2-logos : c'est l'ancre que cherche le script de revelation du gabarit. La retirer casse l'effet EN SILENCE (le script sort sans rien faire). */ body.bd-a2 .bd-a2-logos-marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } /* Defile perpetuel : aucune pause, ni au survol ni ailleurs. La pause au survol qui existait ici donnait justement l'impression que le defile n'etait pas infini — curseur pose sur la bande, elle se figeait. */ body.bd-a2 .bd-a2-logos-track { display: flex; gap: 0.9rem; width: max-content; animation: bd-a2-scroll 30s linear infinite; } /* Le tiers de la piste vaut 5 cases + 4,67 ecarts, alors qu'il en faut 5 + 5 pour boucler sans couture : d'ou le tiers d'ecart en plus (0,9rem / 3). Sans lui, la piste sursaute d'environ 5px a chaque tour. */ @keyframes bd-a2-scroll { to { transform: translateX(calc(-100% / 3 - 0.3rem)); } } @media (prefers-reduced-motion: reduce) { body.bd-a2 .bd-a2-logos-track { animation: none; } } @media (max-width: 860px) { body.bd-a2 .bd-a2-main .bd-a2-clients-inner { grid-template-columns: 1fr; gap: 2rem; } } /* ========================================================================= * Grids réalisations / services * ====================================================================== */ body.bd-a2 .bd-a2-card { margin-bottom: 24px; } body.bd-a2 .bd-a2-card img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 20px; display: block; background: var(--ice); } body.bd-a2 .bd-a2-cta-card { background: var(--white); border-radius: 24px; padding: 32px 24px; box-shadow: var(--shadow); min-height: 240px; display: flex; flex-direction: column; justify-content: center; } /* Stats */ body.bd-a2 .bd-a2-stat { font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 500; line-height: 1; color: var(--ink); margin: 0; } body.bd-a2 .bd-a2-bio img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 24px; background: var(--ice); } /* ========================================================================= * FAQ — filets discrets, chevron accent * ====================================================================== */ body.bd-a2 .wp-block-details { border-top: 1px solid var(--line); padding: 18px 0; } body.bd-a2 .wp-block-details:last-child { border-bottom: 1px solid var(--line); } body.bd-a2 .wp-block-details summary { font-size: 16px; font-weight: 500; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; } body.bd-a2 .wp-block-details summary::-webkit-details-marker { display: none; } body.bd-a2 .wp-block-details summary::after { content: "⌄"; color: var(--accent); transition: transform 0.2s; } body.bd-a2 .wp-block-details[open] summary::after { transform: rotate(180deg); } /* ========================================================================= * Footer — carte claire, plus de pavé noir * ====================================================================== */ .bd-a2-foot { margin: 0 12px 12px; background: var(--ice); color: var(--ink); border: 1px solid var(--line); border-radius: 28px; padding: 40px 28px 20px; } .bd-a2-foot a { color: var(--ink); text-decoration: none; } .bd-a2-foot a:hover, .bd-a2-foot a:focus-visible { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; } .bd-a2-foot p { color: var(--muted); } .bd-a2-foot .bd-a2-word { color: var(--ink); } .bd-a2-foot-inner { display: grid; gap: 24px; } @media (min-width: 800px) { .bd-a2-foot-inner { grid-template-columns: 1.4fr 1fr 1fr; } } .bd-a2-foot nav { display: flex; flex-direction: column; gap: 6px; } .bd-a2-copy { font-size: 12px; color: var(--muted); margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); } .bd-a2-foot-logo { display: block; height: 32px; width: auto; max-width: 100%; margin: 0 0 14px; } body.bd-a2 ::selection { background: var(--accent); color: var(--ink); } /* ========================================================================= * Section « Projets » — cartes givrees (shortcode [bd_a2_projets]) * * Reprise du fichier de reference (maquette home.html) avec les JETONS DE LA * PAGE : --bd-accent -> --accent, --bd-ink -> --ink, --bd-muted -> --muted, * --bd-line et --bd-line-2 -> --line, --bd-card -> --white, #2a2d33 -> --ink. * La palette est donc plus froide que la maquette (bleutee, pas beige) : * c'est voulu, la page a ses propres couleurs. * * ⚠️ CHAQUE regle est prefixee « body.bd-a2 ». Sans cela, « body.bd-a2 h2 » * (0,1,2) l'emporte sur « .bd-real-big » (0,1,0) et le titre geant retombe a * la taille d'un h2 ordinaire ; de meme « body.bd-a2 a { color: var(--ink) } » * rendrait illisible le texte blanc du bouton « Voir le site ». * ====================================================================== */ body.bd-a2 .bd-real { /* Haut abaisse de 2,5rem a 1rem le 31/08 : la remontee de la section se prend ici, la marge basse de la bande clients etant deja a zero. C'est le SEUL air entre la bande clients et le titre geant. */ padding: 1rem 0 4rem; } /* Toutes les sections portent 72px de marge basse : ici le padding suffit, sinon l'air s'additionne. */ body.bd-a2 .bd-a2-main > .bd-a2-realisations { margin-bottom: 0 !important; } /* --- Titre « Projets. » : le mot glisse hors de son masque au defilement. -- */ /* Repere du circuit : c'est par rapport a CE bloc que le SVG se positionne, et c'est sa largeur que le JavaScript lit pour calculer le trace. ------------------------------------------------------------------------ Le COULOIR est la bande de gauche ou vit le circuit. Il est pris dans la GOUTTIERE DE PAGE, pas sur les cartes : le bloc s'elargit vers la gauche (margin negative) et rend aussitot l'espace en padding, si bien que la grille garde exactement la largeur et la position qu'elle avait. Sans ce couloir, le tronc et ses branches n'avaient nulle part ou aller et se posaient SUR la premiere colonne de cartes. Le clamp ne prend jamais plus que la gouttiere disponible ; les 10px retranches couvrent la barre de defilement, comptee par 100vw mais pas par la mise en page. En dessous de ~1260px de large il ne reste plus assez de gouttiere : le JavaScript cesse alors de dessiner (seuil de 40px), plutot que de laisser le circuit empieter a nouveau. */ body.bd-a2 .bd-real-wrap { position: relative; /* Plafond a 240px : sur un ecran large la gouttiere est vaste (380px a 1920) et le circuit peut vraiment respirer. A 1440 elle ne fait que 140px — on en prend 136, c'est TOUT ce qui existe sans mordre sur les cartes. */ --couloir: clamp(0px, (100vw - 100%) / 2 - 4px, 240px); margin-left: calc(-1 * var(--couloir)); padding-left: var(--couloir); } /* La piste passe SOUS les barres blanches et ressort dans la gouttiere centrale, comme une piste de circuit qui plonge sous un composant. Sans cela elle barrait les titres des cartes de gauche : les deux cartes d'une rangee ont leurs barres a la meme hauteur, et pour rejoindre la colonne de droite le trait doit traverser la gauche. */ body.bd-a2 .bd-case-bar { position: relative; z-index: 1; } body.bd-a2 .bd-real-head { text-align: right; /* Air entre le mot « Projets. » et la premiere rangee de cartes. */ margin-bottom: 4rem; /* Le titre quitte la colonne pour venir se caler a 80px du bord DROIT DE LA PAGE — comme le titre « Des artisans... » de la bande clients, qui est a 84px du bord gauche, mais de l'autre cote. Il ne suit donc plus la grille des cartes : sans cela il restait a 320px du bord sur un 1920. Le clamp l'empeche de partir a l'envers quand la fenetre est plus etroite que la colonne (il revient alors simplement dans la colonne). */ margin-right: calc(-1 * clamp(0px, (100vw - 100%) / 2 - 80px, 100vw)); /* Au-dessus du circuit, qui passe derriere le mot. */ position: relative; z-index: 2; } /* --- Circuit imprime ----------------------------------------------------- Le trait part de la haste du « P », descend en escalier, court a l'horizontale sous le titre, puis redescend en tronc a gauche en piquant vers chaque barre de carte. Il se trace au defilement (stroke-dashoffset), et une branche ne s'allume QUE lorsque le trait principal a depasse son point d'ancrage — d'ou les longueurs cumulees posees par le JavaScript. Le SVG est vide dans le HTML : tout est construit a l'execution. ----- */ body.bd-a2 .bd-circuit { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; /* z-index 1 et non 0 : la carte CTA est positionnee (elle porte sa lueur), elle se peindrait donc PAR-DESSUS le circuit et couperait en deux le point pose sur son arete. A 1, le circuit passe devant elle — et reste derriere les barres blanches, qui sont a 1 elles aussi mais viennent apres dans le document. */ z-index: 1; /* Les branches du tronc partent vers la gauche et sortent du cadre. */ overflow: visible; } /* ⚠️ Selecteur de CLASSE et non d'ID : il y a DEUX circuits sur la page — celui de Projets et son prolongement dans Services — et ils doivent se dessiner exactement pareil. Un « #bdWire » n'aurait habille que le premier. */ body.bd-a2 .bd-circuit .bd-wire { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; /* --len est pose par le JavaScript : la longueur reelle du trace. */ stroke-dasharray: var(--len); stroke-dashoffset: var(--len); } /* Le PROLONGEMENT dans la section Services. C'est un second SVG, independant de celui de Projets, et ce choix est deliberatif : le trace de Projets est pilote par un COUT de defilement mesure au pixel (voir POIDS_H et FIN dans template-accueil-2.php, avec les six pourcentages releves carte par carte). Rallonger son chemin de ~1000px aurait augmente le cout total, donc DECALE tous les branchements deja regles. Un second circuit ne touche a rien de tout cela. ⚠️ z-index 0 et non 1 : contrairement a celui de Projets, ce trace longe des cartes. A 0 il passe DERRIERE elles — s'il en frole une, il disparait dessous au lieu de lui passer sur le ventre. */ body.bd-a2 .bd-circuit-svc { z-index: 0; } body.bd-a2 .bd-circuit .bd-branch { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--blen); stroke-dashoffset: var(--blen); transition: stroke-dashoffset 0.5s ease; } body.bd-a2 .bd-circuit .bd-branch.bd-on { stroke-dashoffset: 0; } body.bd-a2 .bd-circuit .bd-branch.bd-prim { stroke-width: 2.5; opacity: 0.75; } body.bd-a2 .bd-circuit .bd-branch.bd-sec { stroke-width: 1.3; opacity: 0.45; } body.bd-a2 .bd-circuit .bd-btip { fill: var(--accent); opacity: 0; transition: opacity 0.3s 0.3s; } body.bd-a2 .bd-circuit .bd-btip.bd-on { opacity: 0.65; } /* Le theme n'a pas de jeton « bg » : le fond du noeud est celui de la page (--page), pour que l'anneau lise comme un trou perce dans le trait. */ body.bd-a2 .bd-circuit .bd-cnode { fill: var(--page); stroke: var(--accent); stroke-width: 2.5; opacity: 0; transition: opacity 0.3s; } body.bd-a2 .bd-circuit .bd-cnode.bd-on { opacity: 1; } body.bd-a2 .bd-circuit .bd-cnode-core { fill: var(--accent); opacity: 0; transition: opacity 0.35s; } body.bd-a2 .bd-circuit .bd-cnode-core.bd-on { opacity: 1; } body.bd-a2 .bd-real-big { margin: 0; /* 9rem depuis le 31/08 (etait 10rem = 160px a 1440, juge trop gros). Reste au-dessus de « Services. », qui plafonne a 8rem. */ font-size: clamp(3.6rem, 11.7vw, 9rem); font-weight: 700; letter-spacing: -0.05em; line-height: 0.85; } body.bd-a2 .bd-real-big .bd-real-hl { color: var(--accent); } body.bd-a2 .bd-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; } body.bd-a2 .bd-mask .bd-inner { display: inline-block; transform: translateY(130%); /* 0,25s d'attente avant que le mot ne demarre : le masque vide est vu une fraction de seconde, puis le mot monte. Sans ce retard, la glisse est deja bien avancee quand le regard arrive dessus. */ transition: transform 1.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s; } /* Le masque du titre enferme un MOT : inline-block lui suffit. Autour d'un bloc de texte de plusieurs lignes il doit passer en block, sinon il se reduit au contenu et le paragraphe ne prend plus toute la colonne. Rien d'autre ne change : meme glisse, meme courbe. ⚠️ Placee APRES « .bd-mask .bd-inner » : meme specificite (0,3,1), c'est l'ordre qui tranche. Remontee plus haut, elle serait sans effet et .bd-inner resterait inline-block. */ body.bd-a2 .bd-mask--bloc, body.bd-a2 .bd-mask--bloc > .bd-inner { display: block; } /* Le paragraphe de Services part APRES son titre : 0,45s contre 0,25s. On voit le titre arriver, puis le texte le rejoindre — les deux d'un coup auraient annule l'effet de decalage. Specificite (0,4,1) : passe devant la regle de repos (0,3,1) qui pose les 0,25s. */ body.bd-a2 .bd-svc-intro .bd-mask .bd-inner { transition-delay: 0.45s; } /* Volontairement NON scopee a .bd-real-head : les titres « Projets. » et « Services. » partagent ce masque, une seule regle les revele tous les deux. Sa specificite (0,4,1) passe devant celle du repos (0,3,1). */ body.bd-a2 .bd-fissure-in .bd-mask .bd-inner { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { body.bd-a2 .bd-mask .bd-inner { transform: none; } /* Le circuit est un pur mouvement : sans mouvement, il n'a plus d'objet. */ body.bd-a2 .bd-circuit { display: none; } } /* --- Grille : 5 projets + la carte CTA, deux par rangee. ---------------- */ body.bd-a2 .bd-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; } body.bd-a2 .bd-case { cursor: pointer; } /* --- Barre de titre : blanche, detachee de 10px, ombre et pas de filet. -- */ body.bd-a2 .bd-case-bar { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 10px; padding: 0.85rem 1.2rem; background: var(--white); border-radius: 13px; box-shadow: 0 6px 20px -8px rgba(18, 20, 24, 0.18), 0 1px 2px rgba(18, 20, 24, 0.06); transition: box-shadow 0.25s; } body.bd-a2 .bd-case:hover .bd-case-bar { box-shadow: 0 12px 30px -10px rgba(18, 20, 24, 0.28), 0 2px 4px rgba(18, 20, 24, 0.08); } body.bd-a2 .bd-dots { display: flex; gap: 6px; flex-shrink: 0; } body.bd-a2 .bd-dots span { width: 11px; height: 11px; border-radius: 50%; background: var(--line); transition: background 0.25s; } body.bd-a2 .bd-case:hover .bd-dots span:nth-child(1), body.bd-a2 .bd-case.bd-hovered .bd-dots span:nth-child(1) { background: #ff5f57; } body.bd-a2 .bd-case:hover .bd-dots span:nth-child(2), body.bd-a2 .bd-case.bd-hovered .bd-dots span:nth-child(2) { background: #febc2e; } body.bd-a2 .bd-case:hover .bd-dots span:nth-child(3), body.bd-a2 .bd-case.bd-hovered .bd-dots span:nth-child(3) { background: #28c840; } body.bd-a2 .bd-case-bar .bd-nm { font-weight: 700; font-size: 1.02rem; } body.bd-a2 .bd-case-bar .bd-nm .bd-pt { color: var(--accent); } body.bd-a2 .bd-case-bar .bd-ty { margin-left: 0.3rem; font-size: 0.83rem; font-weight: 500; color: var(--muted); } /* --- Recto : capture du site livre + logo client blanchi. --------------- */ body.bd-a2 .bd-frost { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; /* PAS de bordure ici, et c'est deliberé. Avec un filet d'1px, le rayon interieur tombe a 15px alors que le verso et le givre arrondissent a 16 : il restait un croissant de photo visible dans les quatre angles au survol, plus le filet clair tout autour du verso. Sans bordure, la boite de padding et la boite de bordure se confondent, les rayons coincident, et l'ombre suffit a detacher la carte. Ne pas la remettre. */ box-shadow: 0 10px 30px -12px rgba(18, 20, 24, 0.2); isolation: isolate; } body.bd-a2 .bd-frost .bd-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* Overlay UNIFORME sous le logo : il rattrape les captures claires (Seb-Troc et B2GI sont des sites a fond blanc, ou le logo blanc se perdrait) sans rien dessiner de visible. Ni ombre portee sur le logo, ni voile radial : le halo sombre qui creusait le centre a ete retire le 30/08 — c'est un aplat, un point c'est tout. Le navy est celui de --ink (#0a1726), ecrit en dur : une variable ne se glisse pas dans un rgba(). Il s'efface au survol, le givre prend le relais. */ body.bd-a2 .bd-frost .bd-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(10, 23, 38, 0.30); transition: opacity 0.4s; } body.bd-a2 .bd-case:hover .bd-frost .bd-veil, body.bd-a2 .bd-case.bd-hovered .bd-frost .bd-veil { opacity: 0; } body.bd-a2 .bd-frost .bd-logo-c { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; transition: opacity 0.4s; } body.bd-a2 .bd-frost .bd-logo-c img { max-width: 38%; max-height: 34%; filter: brightness(0) invert(1); } body.bd-a2 .bd-case:hover .bd-frost .bd-logo-c, body.bd-a2 .bd-case.bd-hovered .bd-frost .bd-logo-c { opacity: 0; } /* Le givre : RIEN au repos (largeur et hauteur nulles), il gagne toute la carte au survol. C'est une absence, pas un `if` — ne rien ajouter ici. */ body.bd-a2 .bd-frost::before, body.bd-a2 .bd-frost::after { content: ""; position: absolute; width: 0; height: 0; z-index: 3; pointer-events: none; background: rgba(226, 236, 244, 0.82); -webkit-backdrop-filter: blur(15px) saturate(150%); backdrop-filter: blur(15px) saturate(150%); transition: all 0.55s cubic-bezier(0.4, 0, 0.2, 1); } body.bd-a2 .bd-frost::before { top: 0; right: 0; border-radius: 0 16px 0 100%; } body.bd-a2 .bd-frost::after { bottom: 0; left: 0; border-radius: 0 100% 0 16px; } body.bd-a2 .bd-case:hover .bd-frost::before, body.bd-a2 .bd-case:hover .bd-frost::after, body.bd-a2 .bd-case.bd-hovered .bd-frost::before, body.bd-a2 .bd-case.bd-hovered .bd-frost::after { width: 100%; height: 100%; border-radius: 16px; } /* --- Verso : glace bleutee, halo flottant, carte de France, texte. ------ */ body.bd-a2 .bd-back { position: absolute; /* -1px et non 0 : le verso deborde d'un pixel de tous les cotes, et c'est le rognage du parent qui dessine seul la courbe. A inset:0, deux arrondis se superposaient (celui du verso et celui du rognage), et leurs lissages laissaient passer un cheveu de la photo dans les quatre angles. */ inset: -1px; z-index: 5; opacity: 0; pointer-events: none; overflow: hidden; border-radius: 16px; background: linear-gradient(135deg, #e4eef7, #d3e6f5); transition: opacity 0.4s 0.2s; } body.bd-a2 .bd-case:hover .bd-back, body.bd-a2 .bd-case.bd-hovered .bd-back { opacity: 1; pointer-events: auto; } body.bd-a2 .bd-back .bd-glow { position: absolute; left: -30px; bottom: -40px; width: 170px; height: 170px; border-radius: 50%; filter: blur(38px); background: rgba(26, 161, 244, 0.32); animation: bd-float1 5s ease-in-out infinite; } @keyframes bd-float1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(14px); } } body.bd-a2 .bd-fmap { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 36%; z-index: 2; } body.bd-a2 .bd-fmap svg { width: 100%; height: auto; overflow: visible; } body.bd-a2 .bd-fmap .fr { fill: rgba(26, 161, 244, 0.07); stroke: rgba(26, 161, 244, 0.45); stroke-width: 0.8; stroke-linejoin: round; } body.bd-a2 .bd-fmap .halo { fill: var(--accent); opacity: 0.5; animation: bd-pulse 2.2s ease-out infinite; } body.bd-a2 .bd-fmap .dot { fill: var(--ink); } @keyframes bd-pulse { 0%, 100% { r: 2; opacity: 0.5; } 50% { r: 4.5; opacity: 0; } } @media (prefers-reduced-motion: reduce) { body.bd-a2 .bd-back .bd-glow, body.bd-a2 .bd-fmap .halo { animation: none; } } body.bd-a2 .bd-content { position: relative; z-index: 3; height: 100%; max-width: 58%; display: flex; flex-direction: column; justify-content: center; padding: 1.6rem 1.8rem; color: var(--ink); } body.bd-a2 .bd-metier { display: inline-flex; align-items: center; margin-bottom: 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-dark); } body.bd-a2 .bd-content h3 { margin: 0 0 0.2rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; } body.bd-a2 .bd-content .bd-ville { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.7rem; font-size: 0.82rem; color: var(--muted); } body.bd-a2 .bd-content .bd-ville svg { width: 12px; height: 12px; } body.bd-a2 .bd-content p { margin: 0 0 1.1rem; font-size: 0.86rem; line-height: 1.5; color: var(--ink); } body.bd-a2 .bd-hint { position: absolute; right: 0.9rem; bottom: 0.7rem; z-index: 6; padding: 0.25rem 0.6rem; border-radius: 100px; background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-size: 0.7rem; color: var(--ink); transition: opacity 0.3s; } body.bd-a2 .bd-case:hover .bd-hint, body.bd-a2 .bd-case.bd-hovered .bd-hint { opacity: 0; } /* --- Carte CTA : meme glace que les versos, aucune barre blanche. ------- */ /* La carte CTA se cale sur le VISUEL de sa voisine, pas sur toute la cellule : meme proportion (16/10 comme .bd-frost) et collee en bas de la rangee, donc meme haut et meme bas que l'image du 3e RPIMa, barre de titre exclue. Aucune valeur en dur : la colonne dicte la largeur, la proportion la hauteur. */ body.bd-a2 .bd-case-cta { display: flex; align-items: flex-end; cursor: default; } body.bd-a2 .bd-case-cta .bd-cta-body { width: 100%; /* aspect-ratio ne s'impose QUE si le contenu tient dedans : sinon la boite grandit et la carte redevient plus haute que le visuel voisin (mesure : 380px au lieu de 355). D'ou l'air resserre juste en dessous — c'est le prix de l'alignement exact demande. */ aspect-ratio: 16 / 10; display: flex; flex-direction: column; justify-content: center; gap: 0.45rem; padding: 2.1rem 2.4rem; border-radius: 16px; border: 1px solid rgba(26, 161, 244, 0.15); background: linear-gradient(135deg, #e4eef7, #d3e6f5); color: var(--ink); /* repere de la lueur ; z-index 0 pour rester SOUS le circuit */ position: relative; z-index: 0; transition: box-shadow 0.5s, border-color 0.5s; } /* --- La luminosite : elle n'arrive QU'AU branchement, et elle part du point d'entree. C'est la seule recompense visible du parcours du circuit. ----- */ body.bd-a2 .bd-cta-body::after { content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; background: radial-gradient(360px 220px at var(--prise, 84%) 0%, rgba(26, 161, 244, 0.3), rgba(26, 161, 244, 0) 70%); opacity: 0; transition: opacity 0.7s; } body.bd-a2 .bd-cta-body.bd-branche { border-color: rgba(26, 161, 244, 0.45); box-shadow: 0 0 0 1px rgba(26, 161, 244, 0.3), 0 0 70px -12px rgba(26, 161, 244, 0.5), 0 24px 50px -20px rgba(10, 23, 38, 0.22); } body.bd-a2 .bd-cta-body.bd-branche::after { opacity: 1; } @media (prefers-reduced-motion: reduce) { } body.bd-a2 .bd-case-cta .bd-k { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-dark); } body.bd-a2 .bd-case-cta h3 { margin: 0; font-size: 1.7rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } body.bd-a2 .bd-case-cta p { margin: 0; max-width: 30rem; font-size: 0.92rem; line-height: 1.55; color: var(--muted); } body.bd-a2 .bd-cta-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.6rem; } body.bd-a2 .bd-cta-btn { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px; font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: background 0.2s, border-color 0.2s; } body.bd-a2 .bd-cta-btn svg { width: 15px; height: 15px; } /* Le verso est une colonne flex : sans cela le bouton s'etire sur toute la largeur (273px mesures pour un libelle de 69px). L'ancien bouton avait un « width: fit-content » qui a disparu avec lui. */ body.bd-a2 .bd-content .bd-a2-btn { align-self: flex-start; } /* Le bouton a fleche reprend la hauteur de la rangee : le ghost et les deux ronds font 46px, il doit s'aligner sur eux. */ body.bd-a2 .bd-cta-actions .bd-a2-btn { height: 46px; padding: 0 1.15rem 0 1.4rem; } body.bd-a2 .bd-cta-btn--ghost { background: transparent; border-color: rgba(18, 20, 24, 0.2); color: var(--ink); } body.bd-a2 .bd-cta-btn--ghost:hover { border-color: var(--ink); } body.bd-a2 .bd-cta-sep { width: 1px; height: 28px; margin: 0 0.2rem; background: rgba(18, 20, 24, 0.15); } body.bd-a2 .bd-cta-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid rgba(18, 20, 24, 0.2); border-radius: 50%; color: var(--ink); transition: background 0.2s, border-color 0.2s, color 0.2s; } body.bd-a2 .bd-cta-icon:hover { background: var(--ink); border-color: var(--ink); color: #ffffff; } body.bd-a2 .bd-cta-icon svg { width: 17px; height: 17px; } body.bd-a2 .bd-cta-reassure { display: flex; flex-wrap: wrap; gap: 1.3rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(26, 161, 244, 0.18); } body.bd-a2 .bd-cta-reassure span { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--muted); } body.bd-a2 .bd-mini-plus { position: relative; flex-shrink: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--ink); } body.bd-a2 .bd-mini-plus::before, body.bd-a2 .bd-mini-plus::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #ffffff; } body.bd-a2 .bd-mini-plus::before { width: 5px; height: 1.2px; } body.bd-a2 .bd-mini-plus::after { width: 1.2px; height: 5px; } @media (max-width: 760px) { body.bd-a2 .bd-cases { grid-template-columns: 1fr; } body.bd-a2 .bd-content { max-width: 70%; } body.bd-a2 .bd-fmap { width: 42%; } /* Une colonne : le tronc et ses branches n'ont plus de gouttiere ou vivre, et le titre reste dans la colonne. */ body.bd-a2 .bd-circuit { display: none; } body.bd-a2 .bd-real-head { margin-right: 0; } body.bd-a2 .bd-real-wrap { margin-left: 0; padding-left: 0; } /* Un seul endroit pour annuler le debord : l'en-tete ET la grille suivent. */ body.bd-a2 .bd-svc { --svc-debord: 0px; } } /* ========================================================================= * Section « Services » — accordéon horizontal ([bd_a2_services]) * * Disposition v2 : en-tête EN HAUT (chapeau, titre, deux paragraphes), un * filet de séparation, puis l'accordéon PLEINE LARGEUR en dessous. * * Quatre cartes légèrement superposées (margin-left: -16px). Au repos : icône, * numéro, titre à la verticale. Au survol / clic / focus, la carte prend * flex 3, se couvre d'un givré bleuté et révèle son texte ; les voisines se * compriment. La première est active au chargement, posée par PHP : sans * JavaScript, la section reste lisible telle quelle. * * ⚠️ Comme pour la section Projets, CHAQUE règle est préfixée « body.bd-a2 » : * sans cela « body.bd-a2 h2 » (0,1,1) l'emporterait sur « .bd-svc-head h2 » * et le titre reprendrait la taille d'un h2 ordinaire. * * Écarts assumés avec la maquette : * — --ice (#e8f2fa) du thème remplace le #eef2f5 de la maquette : plus * bleuté, c'est la couleur de cette page ; * — le thème n'a pas de jeton « faint » : le numéro des cartes prend * --muted, déjà la couleur du chapeau ; * — le givré de la carte active et le #22303c de son texte sont écrits en * dur : ce sont des valeurs de la maquette, sans équivalent dans la charte. * Elles ne vivent QUE dans cette section ; * — padding vertical à 0 au lieu des 5rem de la maquette : les sections de * cette page portent déjà 72px de marge basse, sinon l'air s'additionne. * ====================================================================== */ body.bd-a2 .bd-svc { /* Ancre du circuit qui prolonge celui de Projets (.bd-circuit-svc, pose en absolu juste en dessous). Sans « relative », il se calerait sur le premier ancetre positionne et le dessin partirait ailleurs. ⚠️ N'a AUCUN effet sur la mise en page de la section. */ position: relative; /* 8rem EN HAUT ET EN BAS. En haut, c'est l'air qui aere la transition depuis Projets ; en bas, c'est le seul air entre la derniere carte et le panneau « Pourquoi moi ? », car .bd-a2-services annule la marge de 72px des autres sections (voir juste apres) et .bd-why n'a aucun padding. Il valait 5rem, soit 80px mesures : la section respirait 128px en haut et 80 en bas, plus serree en sortie qu'en entree. Meme valeur des deux cotes = 128px mesures, et la section est symetrique. ⚠️ Un seul endroit commande cet ecart : ne pas ajouter de padding-top sur .bd-why, l'air s'additionnerait sans qu'on sache d'ou il vient. */ padding: 8rem 0; /* LE DEBORD VERS LA GAUCHE, POSE UNE SEULE FOIS. L'en-tete ET la grille le lisent : le titre « Services. » et la premiere carte commencent donc au meme pixel, par construction. Il etait porte par l'en-tete seule, et les cartes restaient dans la colonne — 300px plus a droite que le titre a 1920, 140 a 1600, 60 a 1440. ⚠️ ECRIT SANS « 100% », ET C'EST INDISPENSABLE. Une variable est substituee la ou on l'UTILISE : un « 100% » dedans se resoudrait sur l'enfant qui la lit, pas sur la section. Tant que les deux enfants faisaient la meme largeur ca passait ; des qu'on s'en sert sur la colonne du configurateur, large de 300px, le calcul devient faux. La largeur de la colonne de page est donc ecrite en clair : mesure du 31/08, elle vaut 1160px, et 100vw - 64px en dessous de 1280. */ --svc-colonne: min(1160px, 100vw - 64px); --svc-debord: clamp(0px, (100vw - var(--svc-colonne)) / 2 - 80px, 100vw); /* La largeur de l'accordeon, FIGEE sur la geometrie d'avant l'elargissement a droite : la colonne de page, plus le debord gauche, moins l'ancienne gouttiere de 5rem, fois 3/3,85. C'est ce qui garantit que les cartes ne bougent PAS d'un pixel quand le configurateur s'elargit ou que la gouttiere grandit — tout est pris sur la place gagnee a droite. */ --svc-acc: calc((var(--svc-colonne) + var(--svc-debord) - 5rem) * 3 / 3.85); } /* Toutes les sections portent 72px de marge basse : ici les 5rem de padding suffisent, sinon l'air s'additionne. Meme raison, meme forme que pour .bd-a2-realisations plus haut. */ body.bd-a2 .bd-a2-main > .bd-a2-services { margin-bottom: 0 !important; } /* --- En-tête : chapeau, titre, les deux temps du discours, puis le filet. - */ body.bd-a2 .bd-svc-head { /* Le filet horizontal sous l'en-tete a ete RETIRE le 31/08 : il coupait la section en deux alors que le titre et les cartes sont maintenant alignes sur le meme bord. L'air suffit a separer. */ margin-bottom: 3.2rem; padding-bottom: 0; /* Symetrique du titre « Projets. » : le chapeau, le titre et le paragraphe quittent la colonne pour se caler a 80px du bord GAUCHE de la page. */ margin-left: calc(-1 * var(--svc-debord)); } body.bd-a2 .bd-svc-head h2 { /* Double de la v3 (2,4 / 5,5vw / 4rem). Reste sous « Projets. », qui monte a 10rem : les deux titres ne sont pas de la meme taille. */ font-size: clamp(4.8rem, 11vw, 8rem); font-weight: 700; letter-spacing: -0.035em; line-height: 0.95; margin: 1rem 0 1.4rem; } body.bd-a2 .bd-svc-head h2 .bd-pt { color: var(--accent); } body.bd-a2 .bd-svc-intro { /* Le texte ne file pas sur toute la largeur de la page : au-delà de ~52rem la ligne devient trop longue pour être lue d'un trait. */ max-width: 52rem; } body.bd-a2 .bd-svc-intro p { font-size: 0.98rem; color: var(--muted); line-height: 1.6; margin: 0 0 0.8rem; } body.bd-a2 .bd-svc-intro p:last-child { margin-bottom: 0; } body.bd-a2 .bd-svc-intro p strong { color: var(--ink); font-weight: 600; } /* --- L'accordéon, pleine largeur sous le filet. ------------------------- */ /* Deux colonnes : l'accordeon a gauche, le configurateur a droite. Le configurateur est plus etroit — c'est un formulaire, pas une vitrine. */ body.bd-a2 .bd-svc-layout { /* Le meme debord que l'en-tete : les cartes s'alignent sur le titre. */ margin-left: calc(-1 * var(--svc-debord)); display: grid; /* ⚠️ LE CONFIGURATEUR DEBORDE A DROITE, LES CARTES NE BOUGENT PAS. La grille sort de la colonne de page des DEUX cotes, mais la piste de gauche est FIGEE EN PIXELS (--svc-acc, calculee sur la geometrie d'avant cet elargissement) : toute la place gagnee a droite, et toute la gouttiere qu'on ajoute, sont prises sur le configurateur seul. C'est la raison d'etre de --svc-acc ; remettre ici deux « fr » ferait grandir les cartes en meme temps, ce qu'on ne veut pas. Le 3/3,85 de --svc-acc est MESURE, pas choisi. La maquette pose 1.5fr, mais ses cartes n'ont ni boutons ni etiquettes. Avec les deux, la rangee la plus longue — Vitrine, Refonte, WordPress, Responsive — demande 436px, plus 77px de marges interieures : il faut 513px de carte pour la tenir sur UNE rangee. Mesure a 1920 : 1.5fr -> 358px, 2.2 -> 483, 2.6 -> 503, 3 -> 520. C'est a 3fr que ca passe. Au-dela on ne gagne plus rien. Mesure du 31/08 apres elargissement, a 1920 : le bord droit passe de 1540 a 1840 — a 80px du bord de page, comme le titre a gauche — les cartes gardent 520px et le configurateur passe de 305 a 553px. */ margin-right: calc(-1 * var(--svc-debord)); grid-template-columns: var(--svc-acc) minmax(0, 1fr); /* Plus d'air de part et d'autre du filet : il est centre dans la gouttiere, donc l'elargir ecarte a la fois les cartes du filet et le filet du configurateur. Plancher a 5rem, l'ANCIENNE valeur : sous 1333px le 6vw passait dessous et la gouttiere retrecissait au lieu de grandir, ce qui est l'inverse de ce qui est demande. Plafond a 7rem pour que le configurateur garde de quoi vivre. */ gap: clamp(5rem, 6vw, 7rem); align-items: center; } /* Le filet VERTICAL entre les cartes et le configurateur : court et centre, il separe sans cloisonner. Pose en ::before du configurateur plutot qu'en element : il ne porte aucun sens, il ne doit donc pas exister dans le document. Il vit au MILIEU de la gouttiere — la moitie du gap, soit 40px. */ body.bd-a2 .bd-cfg { position: relative; } body.bd-a2 .bd-cfg::before { content: ""; position: absolute; /* La MOITIE de la gouttiere ci-dessus, pour rester au milieu quoi qu'elle vaille : memes bornes divisees par deux. */ left: calc(-1 * clamp(2.5rem, 3vw, 3.5rem)); top: 50%; width: 1px; height: 140px; margin-top: -70px; background: var(--line); } /* ⚠️ 480px ET NON 440. La maquette pose 440 parce qu'elle n'a PAS de boutons dans les cartes ; ils sont revenus le 31/08. Mesure : entre 940 et 1280px de fenetre, la carte se resserre, le texte prend une ligne de plus et le contenu montait a 474px — les boutons passaient sous le bord, ou « overflow: hidden » les coupait. Le contenu est en position absolue : la carte ne peut PAS grandir toute seule, c'est donc ici que ca se regle. Ne pas redescendre a 440 sans remesurer la bande 940-1280. */ body.bd-a2 .bd-svc-accordion { display: flex; height: 480px; } /* La hauteur suit la largeur, par paliers. Le contenu est en position absolue : la carte ne grandit pas toute seule, c'est donc ici que ca se regle. Mesure du 31/08, APRES l'elargissement de la carte ouverte (flex 6) — hauteur reelle du contenu, la plus haute des quatre cartes : 1920 -> 412 | 1600 a 1280 -> 453 | 1150 -> 549 | 1024 -> 574 | 940 -> 615 ⚠️ CES CHIFFRES BOUGENT DES QU'ON TOUCHE A LA LARGEUR. Ils ont ete refaits trois fois le 31/08 : a chaque fois qu'on elargit la carte le contenu se raccourcit, et a chaque fois qu'on la retrecit il s'allonge. Un palier laisse soit du vide, soit des etiquettes coupees — remesurer, ne pas deviner. */ @media (max-width: 1250px) { body.bd-a2 .bd-svc-accordion { height: 640px; } } body.bd-a2 .bd-svc-card { position: relative; flex: 1; min-width: 0; background: var(--white); border: 1px solid var(--line); cursor: pointer; overflow: hidden; transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s; /* Les cartes se chevauchent de 16px : le bord de la voisine passe dessous, l'accordéon lit comme un jeu de cartes en main. */ margin-left: -16px; } body.bd-a2 .bd-svc-card:first-child { margin-left: 0; border-radius: 20px 0 0 20px; } body.bd-a2 .bd-svc-card:last-child { border-radius: 0 20px 20px 0; } body.bd-a2 .bd-svc-card.bd-active { /* ⚠️ 2.6, LA PROPORTION D'ORIGINE. Essai du 31/08 a 6 : la carte ouverte passait a 692px et ecrasait les trois autres a 122px — trop large, et ce n'est pas la bonne facon d'elargir. C'est la COLONNE de l'accordeon qu'on elargit (voir grid-template-columns), pas la part d'une carte. */ flex: 2.6; box-shadow: 0 24px 50px -20px rgba(10, 23, 38, 0.32); z-index: 2; border-color: var(--accent); border-radius: 20px; /* LE fond des grands panneaux, pas un degrade a elle. Il y avait ici deux valeurs en dur, #e4eef7 et #d3e6f5, qui rendaient la carte plus grise et moins bleue que la boite « Pourquoi moi » — mesure : canal bleu a 245-247 contre 250-252. Le jeton et les nappes remplacent les deux. */ background: var(--panneau); } /* Les nappes ne se voient que sur la carte ouverte, et arrivent avec elle. */ body.bd-a2 .bd-svc-card .bd-fog { --bd-flou: 30px; opacity: 0; transition: opacity 0.3s; } body.bd-a2 .bd-svc-card.bd-active .bd-fog { opacity: 1; } /* Le focus clavier active la carte (voir template-accueil-2.php) : l'anneau par défaut suffit, mais il doit rester visible par-dessus les voisines. */ body.bd-a2 .bd-svc-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; z-index: 3; } /* --- État replié : icône, numéro, titre à la verticale. ------------------ */ body.bd-a2 .bd-card-collapsed { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 2rem 1rem; transition: opacity 0.3s; } body.bd-a2 .bd-svc-card.bd-active .bd-card-collapsed { opacity: 0; pointer-events: none; } body.bd-a2 .bd-svc-ico { width: 48px; height: 48px; border-radius: 13px; background: var(--ice); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; } body.bd-a2 .bd-svc-ico svg { width: 24px; height: 24px; } body.bd-a2 .bd-svc-num { font-size: 0.8rem; font-weight: 600; color: var(--muted); margin-top: 1rem; } body.bd-a2 .bd-svc-h-vert { writing-mode: vertical-rl; transform: rotate(180deg); margin: 1.5rem 0 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; } /* --- État déployé : icône, titre, texte, pastilles. ---------------------- */ body.bd-a2 .bd-card-expanded { position: absolute; inset: 0; padding: 2.4rem; display: flex; flex-direction: column; opacity: 0; /* 0,15s d'attente : la carte a le temps de s'élargir avant que le texte n'apparaisse, sinon il se déplie dans une carte encore étroite. */ transition: opacity 0.4s 0.15s; pointer-events: none; } body.bd-a2 .bd-svc-card.bd-active .bd-card-expanded { opacity: 1; pointer-events: auto; } body.bd-a2 .bd-exp-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } body.bd-a2 .bd-exp-top .bd-svc-num { margin-top: 0; } body.bd-a2 .bd-svc-card.bd-active .bd-exp-top .bd-svc-ico { background: var(--ink); color: var(--white); } body.bd-a2 .bd-card-expanded h3 { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.7rem; } body.bd-a2 .bd-card-expanded p { font-size: 1rem; /* Valeur de la maquette, en dur : sur le givré, --muted (#4b5c6e) est trop clair et --ink (#0a1726) trop dur. Elle ne sert QUE sur cette carte. */ color: #22303c; line-height: 1.55; margin: 0 0 1.6rem; max-width: 30rem; } /* Les deux boutons de chaque carte. REMIS le 31/08 a la demande : la maquette finale les avait retires, Benjamin les veut. Seules les etiquettes « Ce que ca inclut » restent parties. ⚠️ « margin-top: auto » et non une marge fixe : les quatre descriptions n'ont pas la meme longueur, et sans ca les rangees de boutons ne tombaient pas a la meme hauteur d'une carte a l'autre. */ body.bd-a2 .bd-svc-btns { display: flex; flex-wrap: wrap; gap: 0.7rem; /* ⚠️ « auto » est passe aux ETIQUETTES, qui sont maintenant le dernier bloc de la carte : deux « margin-top: auto » dans la meme colonne flex se partagent l'espace libre, et les boutons remontaient au milieu. */ margin-top: 1.4rem; } body.bd-a2 .bd-svc-cats { margin-top: auto; padding-top: 1.4rem; } body.bd-a2 .bd-cats-lbl { display: block; margin-bottom: 0.6rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-dark); } body.bd-a2 .bd-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; } body.bd-a2 .bd-pill { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem; font-size: 0.82rem; /* Blanc translucide : la pastille laisse voir le givre au travers, elle ne le masque pas. Le filet est --accent a 20 %. */ background: rgba(255, 255, 255, 0.6); color: var(--ink); border: 1px solid rgba(26, 161, 244, 0.2); border-radius: 100px; /* Le mini rond navy + croix qui precede le libelle est .bd-mini-plus, deja defini plus haut pour la carte CTA de Projets : meme dessin au pixel, on ne le redefinit pas. */ } body.bd-a2 .bd-svc-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 600; font-size: 0.88rem; border: 1px solid transparent; /* « body.bd-a2 a » ne remet pas text-decoration : sans cette ligne les deux boutons sont soulignes comme des liens ordinaires. */ text-decoration: none; transition: border-color 0.2s; } body.bd-a2 .bd-svc-btn--ghost { background: transparent; border-color: rgba(18, 20, 24, 0.22); color: var(--ink); } body.bd-a2 .bd-svc-btn--ghost:hover { border-color: var(--ink); } body.bd-a2 .bd-svc-btn--ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } body.bd-a2 .bd-svc-btns .bd-a2-btn { height: 44px; padding: 0 1.15rem 0 1.4rem; } @media (prefers-reduced-motion: reduce) { body.bd-a2 .bd-svc-btn { transition: none; } } /* --- Repli mobile : l'accordéon s'empile, les cartes redeviennent des cartes ordinaires — plus de superposition, plus de titre couché. -------- */ @media (max-width: 900px) { /* Une colonne : le configurateur passe SOUS l'accordeon. */ body.bd-a2 .bd-svc-layout { grid-template-columns: 1fr; gap: 2rem; } body.bd-a2 .bd-svc-accordion { flex-direction: column; height: auto; gap: 0.8rem; } body.bd-a2 .bd-svc-card { margin-left: 0; border-radius: 16px !important; flex: none !important; } /* ⚠️ « relative », et surtout PAS « static ». Mesure du 31/08 a 600px : en statique, le contenu de la carte est peint AVANT la brume — c'est l'ordre de peinture du CSS, un element positionne a z-index 0 passe devant le texte en flux — et le titre « Creation de sites internet » sortait delave sur toute sa moitie gauche. En desktop le probleme n'existe pas : le contenu y est en absolu, donc deja positionne, et il vient apres la brume dans le DOM. ⚠️ Ne pas chercher ce defaut avec elementFromPoint : la brume porte pointer-events:none, le test la traverse et repond toujours « devant ». Il se voit en comparant les pixels du texte, brume affichee puis masquee. */ body.bd-a2 .bd-card-collapsed { position: relative; z-index: 1; flex-direction: row; gap: 1rem; align-items: center; } body.bd-a2 .bd-svc-num { margin-top: 0; } body.bd-a2 .bd-svc-h-vert { writing-mode: horizontal-tb; transform: none; margin: 0; } body.bd-a2 .bd-svc-card:not(.bd-active) .bd-card-expanded { display: none; } body.bd-a2 .bd-svc-card.bd-active .bd-card-collapsed { display: none; } body.bd-a2 .bd-card-expanded { position: relative; z-index: 1; opacity: 1; pointer-events: auto; } } /* Mouvement réduit : la carte change toujours, mais d'un coup — ni glissement de largeur, ni fondu du texte. */ @media (prefers-reduced-motion: reduce) { body.bd-a2 .bd-svc-card, body.bd-a2 .bd-card-collapsed, body.bd-a2 .bd-card-expanded { transition: none; } } /* ========================================================================= * Section « Pourquoi moi » — boite brumeuse ([bd_a2_pourquoi]) * * Une boite arrondie posee sur le fond de page, remplie d'ice et parcourue de * trois nappes floutees. A gauche le discours et la carte de l'interlocuteur, * a droite les quatre arguments. * * ⚠️ CHAQUE regle est prefixee « body.bd-a2 », comme partout sur cette page : * sans cela « body.bd-a2 h2 » (0,1,1) l'emporterait sur « .bd-why-left h2 ». * * Ecarts assumes avec la maquette : * — le chapeau est le .bd-a2-kicker du theme (rond navy 22px + croix), pas le * .bd-eyebrow de la maquette : meme dessin, une seule definition, et il * herite de l'animation d'apparition des autres chapeaux ; * — le theme n'a pas de jeton « faint » : les micro-libellés prennent * --muted, deja la couleur du chapeau. * ====================================================================== */ body.bd-a2 .bd-why { padding: 0; } body.bd-a2 .bd-why-box { position: relative; background: var(--panneau); border-radius: 28px; overflow: hidden; /* 80px sur les quatre cotes, comme le hero (--bd-a2-inset). Les deux panneaux ont la meme largeur et desormais le meme retrait : leur contenu demarre a la meme distance du bord. */ padding: 80px; } /* --- La brume. GENERIQUE et non prefixee « why » : c'est le fond prevu pour le hero dans la maquette, qui est encore un aplat en ligne. Le jour ou il le portera, il n'y aura rien a reecrire ici. Purement decorative : aucune de ces nappes ne porte de contenu. -------- */ body.bd-a2 .bd-fog { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; /* Les nappes suivent les coins arrondis de la boite qui les porte : 28px pour « Pourquoi moi », 32px pour le hero. Une seule declaration. */ border-radius: inherit; } /* ⚠️ LE HERO PREND LA BRUME EN z-index NEGATIF, et c'est la seule facon. Son contenu n'est PAS positionne, donc une brume a z-index 0 se peindrait PAR-DESSUS le titre. Et on ne peut pas positionner le conteneur interne pour le faire remonter : « .bd-a2-hero-tools », la liste posee en haut a droite, se cale sur le HERO — lui donner un nouveau parent de reference la deplacerait de tout le retrait du panneau. A -1, la brume se glisse entre le fond du hero et son contenu, sans qu'un seul element ait a bouger. Le hero est bien un contexte d'empilement (position relative + z-index), la nappe ne peut donc pas passer derriere la page. */ body.bd-a2 .bd-a2-hero > .bd-fog { z-index: -1; } /* Le rayon du flou est un JETON et non plus 70px en dur : les nappes sont dimensionnees en POURCENTAGE de leur boite, donc sur une carte de 600px de large un flou de 70px les ecrase en aplat, la ou sur un panneau de 1416px il les laisse lisibles. Le jeton garde 70px par defaut — hero et « Pourquoi moi » ne bougent pas d'un pixel — et la carte le redescend a l'echelle. */ body.bd-a2 .bd-fog { --bd-flou: 70px; } body.bd-a2 .bd-fog span { position: absolute; border-radius: 50%; filter: blur(var(--bd-flou)); } body.bd-a2 .bd-fog .a { width: 60%; height: 80%; left: -12%; top: -15%; background: radial-gradient(circle, rgba(255, 255, 255, 0.9), transparent 65%); } body.bd-a2 .bd-fog .b { width: 55%; height: 75%; left: 52%; top: 12%; background: radial-gradient(circle, rgba(185, 229, 251, 0.55), transparent 66%); } body.bd-a2 .bd-fog .c { width: 48%; height: 60%; left: 22%; top: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.7), transparent 67%); } /* Le contenu passe DEVANT la brume. */ body.bd-a2 .bd-why-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.1fr; column-gap: 3.5rem; } /* Le chapeau occupe seul la premiere ligne, a gauche. La seconde ligne porte le discours et les arguments : ils demarrent donc au meme pixel, quel que soit ce que le chapeau mesure. */ body.bd-a2 .bd-why-grid > .bd-a2-kicker { grid-column: 1; grid-row: 1; } body.bd-a2 .bd-why-left { grid-column: 1; grid-row: 2; /* ⚠️ min-width:0 n'est PAS cosmetique. Le minimum automatique d'une piste « 1fr » est la taille min-content de son contenu : quand la carte a flip s'etend a 780px, la colonne de gauche grossissait pour la contenir et TOUTE la grille se reorganisait (les arguments retrecissaient, la section changeait de hauteur). Avec 0, la piste garde ses 571px et la carte deborde par-dessus — le comportement voulu. */ min-width: 0; } body.bd-a2 .bd-args { grid-column: 2; grid-row: 2; } /* --- Colonne de gauche : le discours, la carte, les deux chiffres. ------- */ body.bd-a2 .bd-why-left h2 { /* LE JETON, et pas une valeur recopiee : ce titre doit faire exactement la meme taille que « Des artisans et des entreprises… ». Les deux bougeront donc ensemble, sans qu'on ait a se souvenir du second. */ font-size: var(--taille-clients); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; /* Plus de marge HAUTE : elle decalerait le titre par rapport aux arguments, qui partagent sa ligne de grille. L'air au-dessus vient du chapeau. */ margin: 0 0 1.1rem; /* A cette taille il tient sur plusieurs lignes : sans equilibrage, la derniere se reduisait a un mot. */ text-wrap: balance; } body.bd-a2 .bd-why-left h2 .bd-hl { color: var(--accent); } body.bd-a2 .bd-why-chapo { font-size: 1rem; color: var(--muted); max-width: 26rem; margin: 0 0 1.6rem; } /* ========================================================================= * SECTION FAQ — habillage clair du systeme FAQ du theme * * 🔑 Aucune classe nouvelle pour l'accordeon : .bd-faq / .bd-faq-item / * .bd-faq-q / .bd-faq-a sont celles de front-page.php, et c'est * assets/js/faq.js qui les pilote (mono-ouverture, aria-expanded), deja mis * en file sur toutes les pages. On ne fait que les REHABILLER ici. * * 🔴 style.css est charge sur cette page ET habille ces memes classes pour un * fond SOMBRE — avec trois « !important » sur les couleurs de texte : * .bd-faq .bd-faq-q, .bd-faq .bd-faq-q > span -> #ffffff !important * .bd-faq .bd-faq-ic -> #1AA1F4 !important * .bd-faq .bd-faq-a p -> rgba(255,255,255,.82) !important * Sur le fond clair d'accueil-2 cela donnerait du blanc sur blanc. La * specificite ne suffit pas contre !important : les trois regles ci-dessous * en portent un aussi, strictement limite a ces trois proprietes. * ⚠️ Ne pas les « nettoyer » : sans elles la FAQ devient illisible. * ====================================================================== */ body.bd-a2 .bd-a2-faq-section { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 4rem; align-items: start; /* La largeur et l'air de la page, pas ceux de la home : style.css cale .bd-faq sur 1000px et 4rem de marge haute. */ max-width: 1160px; margin: 0 auto; padding: clamp(3.5rem, 8vh, 6.5rem) 32px; } /* --- Colonne de gauche, collante ---------------------------------------- */ body.bd-a2 .bd-a2-faq-section .bd-faq-side { position: sticky; /* Sous le header FIXE du theme, sinon le titre passe dessous. */ top: calc(var(--head) + 24px); } body.bd-a2 .bd-a2-faq-section .bd-a2-kicker { display: inline-flex; margin-bottom: 20px; } body.bd-a2 .bd-a2-faq-section .bd-faq-title { margin: 0 0 1rem; font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--ink); } body.bd-a2 .bd-a2-faq-section .bd-faq-title .bd-hl { color: var(--accent); } body.bd-a2 .bd-a2-faq-section .bd-faq-text { margin: 0 0 1.7rem; max-width: 24rem; font-size: 0.98rem; line-height: 1.6; color: var(--muted); } /* --- L'accordeon --------------------------------------------------------- */ /* Le theme dessine des cartes navy detachees ; ici, des lignes separees par un filet, comme le reste de la page. */ body.bd-a2 .bd-a2-faq-section .bd-faq-item { margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; transform: none; transition: none; } body.bd-a2 .bd-a2-faq-section .bd-faq-item:first-child { border-top: 1px solid var(--line); } body.bd-a2 .bd-a2-faq-section .bd-faq-item:hover { transform: none; box-shadow: none; border-color: var(--line); } body.bd-a2 .bd-a2-faq-section .bd-faq-item:first-child:hover { border-top-color: var(--line); } body.bd-a2 .bd-a2-faq-section .bd-faq-q { gap: 1.5rem; padding: 1.4rem 0; font-size: 1.08rem; font-weight: 600; } /* 🔴 !important assume : voir l'avis en tete de bloc. */ body.bd-a2 .bd-a2-faq-section .bd-faq-q, body.bd-a2 .bd-a2-faq-section .bd-faq-q > span { color: var(--ink) !important; } body.bd-a2 .bd-a2-faq-section .bd-faq-a p { margin: 0; padding: 0 0 1.4rem; max-width: 38rem; font-size: 0.96rem; line-height: 1.65; color: var(--muted) !important; } body.bd-a2 .bd-a2-faq-section .bd-faq-a p strong { color: var(--ink); font-weight: 600; } /* --- Le « + » : le rond navy des chapeaux de la page --------------------- Deux pseudo-elements et non un glyphe « + » : un glyphe se cale sur la ligne de base de la police, jamais sur le centre du rond — le decentrage se verrait pendant la rotation. Meme raison que pour .bd-a2-kicker::before. */ body.bd-a2 .bd-a2-faq-section .bd-a2-faq-plus { position: relative; display: block; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: var(--ink); transition: transform 0.3s ease; } body.bd-a2 .bd-a2-faq-section .bd-a2-faq-plus::before, body.bd-a2 .bd-a2-faq-section .bd-a2-faq-plus::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #ffffff; } body.bd-a2 .bd-a2-faq-section .bd-a2-faq-plus::before { width: 10px; height: 2px; } body.bd-a2 .bd-a2-faq-section .bd-a2-faq-plus::after { width: 2px; height: 10px; transition: transform 0.3s ease; } /* Ouvert : la barre verticale se retracte, le « + » devient « − ». */ body.bd-a2 .bd-a2-faq-section .bd-faq-item.is-open .bd-a2-faq-plus { transform: rotate(180deg); } body.bd-a2 .bd-a2-faq-section .bd-faq-item.is-open .bd-a2-faq-plus::after { transform: translate(-50%, -50%) scaleY(0); } @media (prefers-reduced-motion: reduce) { body.bd-a2 .bd-a2-faq-section .bd-a2-faq-plus, body.bd-a2 .bd-a2-faq-section .bd-a2-faq-plus::after { transition: none; } } /* --- Sous 860px : une colonne, la gauche au-dessus et non collante ------- */ @media (max-width: 860px) { body.bd-a2 .bd-a2-faq-section { grid-template-columns: 1fr; gap: 2rem; padding: 3.5rem 20px; } /* ⚠️ style.css remonte la liste au-dessus du texte (order:1/2) pour la home. Ici on veut l'ordre naturel : le titre d'abord. */ body.bd-a2 .bd-a2-faq-section .bd-faq-side { position: static; order: 0; } body.bd-a2 .bd-a2-faq-section .bd-faq-list { order: 0; } } /* ========================================================================= * SECTION « COMMENT CA MARCHE » — le process en 4 etapes. Namespace bd-proc-* * * 🔴 CETTE SECTION NE BLOQUE PLUS RIEN ET NE DOIT JAMAIS RECOMMENCER. * Premiere version : piste de 280vh, bloc en position:sticky, revelation * pilotee par le scroll, et un verrou de scroll pendant l'animation finale. * Trois defauts VECUS, tous supprimes : * - une section collee ne bouge pas quand on defile : y remonter donnait la * sensation d'etre bloque sur 2 500px ; * - l'etat « anime » restait pose, donc en remontant l'en-tete et la frise * avaient disparu ; * - le verrou, meme court et relache, restait une gene. * ⚠️ Ne pas reintroduire ici : height en vh, position:sticky, overflow:hidden * sur le bloc, ni preventDefault sur wheel/touchmove/keydown. * La frise et l'animation se jouent SEULES a l'entree a l'ecran (deux * IntersectionObserver dans le script) et l'on defile librement dans les deux * sens, a tout moment. * * ⚠️ AUCUNE classe bd-rdv-* dans ce bloc : le CSS du systeme de rendez-vous * est en ligne dans le pied de page (#bd-rdv-css) et habille la MODALE. * * Les jetons de la maquette de reference (--bg, --card, --faint, --cyan) * N'EXISTENT PAS dans ce theme (verifie) : remplaces par --page, --white, * --muted et une valeur en dur pour le degrade du trace. * ====================================================================== */ body.bd-a2 .bd-proc-piste { position: relative; } body.bd-a2 .bd-proc-bloc { padding: clamp(3.5rem, 8vh, 6.5rem) 0; } body.bd-a2 .bd-proc-inner { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 32px; } /* --- En-tete centre ------------------------------------------------------ Le chapeau est le .bd-a2-kicker du theme, pas un « eyebrow » redeclare : meme rond navy, meme animation d'apparition, une seule definition. */ body.bd-a2 .bd-proc-tete { text-align: center; margin-bottom: 3.4rem; } body.bd-a2 .bd-proc-tete .bd-a2-kicker { display: inline-flex; /* 34px : le meme air qu'entre le chapeau et le titre des autres sections (voir .bd-why-grid .bd-a2-kicker). C'etait 14px, le chapeau collait. */ margin-bottom: 34px; } body.bd-a2 .bd-proc-tete h2 .bd-hl { /* .bd-hl n'est pas une classe generique : elle n'existe qu'en portee .bd-why-left h2. On la declare ici pour notre titre. */ color: var(--accent); } body.bd-a2 .bd-proc-tete h2 { /* LE JETON, pas une valeur recopiee : ce titre doit faire exactement la meme taille que « Un vrai interlocuteur… » et « Des artisans… ». */ margin: 0; font-size: var(--taille-clients); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; } /* --- La frise horizontale ------------------------------------------------ */ body.bd-a2 .bd-proc-frise { --bd-proc-rond: 58px; /* L'avancee du trait, de 0 a 1, posee par le script. UNE seule valeur : la CSS en fait une LARGEUR en frise horizontale et une HAUTEUR en colonne — le script n'a pas deux calculs a garder d'accord. */ --bd-proc-avance: 0; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-bottom: 3rem; } /* Le trait gris de fond. Il s'arrete a 8% de chaque bord pour tomber sous les ronds des colonnes extremes, pas dans le vide. */ body.bd-a2 .bd-proc-frise::before { content: ""; position: absolute; top: calc(var(--bd-proc-rond) / 2); left: 8%; right: 8%; height: 2px; background: var(--line); z-index: 0; } /* Le trait bleu qui se TRACE. Element a part et non un degrade anime : un trait qui avance se lit, une couleur qui glisse ne se lit pas. */ body.bd-a2 .bd-proc-trace { position: absolute; top: calc(var(--bd-proc-rond) / 2); left: 8%; width: calc(84% * var(--bd-proc-avance)); height: 2px; background: linear-gradient(90deg, var(--accent), #3bb3f7); transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); z-index: 0; } body.bd-a2 .bd-proc-etape { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; transform: translateX(-30px); transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } body.bd-a2 .bd-proc-etape.is-on { opacity: 1; transform: translateX(0); } body.bd-a2 .bd-proc-rond-boite { margin-bottom: 1.1rem; } body.bd-a2 .bd-proc-rond { display: flex; align-items: center; justify-content: center; width: var(--bd-proc-rond); height: var(--bd-proc-rond); border-radius: 50%; background: var(--white); border: 2px solid var(--line); color: var(--accent); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; transform: scale(0.6); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } body.bd-a2 .bd-proc-etape.is-on .bd-proc-rond { transform: scale(1); } /* ⚠️ PAS de « .is-on » devant : la maquette ecrivait « .step.on .step-body { display:flex } », donc le corps ne devenait une colonne qu'une fois l'etape revelee — sa mise en page changeait sous l'oeil. */ body.bd-a2 .bd-proc-corps { display: flex; flex-direction: column; min-width: 0; } body.bd-a2 .bd-proc-etape h3 { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 700; color: var(--ink); } body.bd-a2 .bd-proc-etape p { margin: 0 auto; max-width: 15rem; font-size: 0.85rem; line-height: 1.5; color: var(--muted); } /* --- L'animation finale -------------------------------------------------- ⚠️ Ce bloc est HORS de la frise. Dans la maquette il en etait le cinquieme enfant, donc coince dans une cellule d'un quart de large. */ /* Deux colonnes : la fenetre a gauche, le message a droite. Empiles, les deux faisaient 458px de haut et la section paraissait interminable. flex-wrap plutot qu'un point de rupture : quand la place manque, les deux colonnes repassent l'une sous l'autre d'elles-memes. */ body.bd-a2 .bd-proc-final { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.8rem, 3.4vw, 3.4rem); text-align: left; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } body.bd-a2 .bd-proc-final.is-on { opacity: 1; transform: translateY(0); } /* La fenetre de navigateur : 560px et centree (la maquette en faisait 420). */ body.bd-a2 .bd-proc-fenetre { position: relative; flex: 0 1 560px; max-width: 100%; margin: 0; border-radius: 14px; overflow: hidden; background: var(--white); border: 1px solid var(--line); box-shadow: 0 30px 60px -25px rgba(10, 23, 38, 0.4); opacity: 0; transform: scale(0.85) translateY(10px); } body.bd-a2 .bd-proc-final.is-on .bd-proc-fenetre { animation: bd-proc-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards; } @keyframes bd-proc-pop { 0% { opacity: 0; transform: scale(0.85) translateY(10px); } 60% { opacity: 1; transform: scale(1.03) translateY(0); } 100% { opacity: 1; transform: scale(1) translateY(0); } } body.bd-a2 .bd-proc-barre { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; background: #eef2f5; } body.bd-a2 .bd-proc-barre > span { width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; background: #cbd5e1; } body.bd-a2 .bd-proc-url { display: flex; align-items: center; flex: 1; height: 25px; margin-left: 8px; padding: 0 12px; border-radius: 7px; background: var(--white); font-size: 0.78rem; line-height: 1; color: var(--muted); text-align: left; white-space: nowrap; overflow: hidden; } body.bd-a2 .bd-proc-ecran { position: relative; display: flex; align-items: center; justify-content: center; height: 260px; background: linear-gradient(160deg, #eaf2fb, #dce9f6); } body.bd-a2 .bd-proc-halo { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(26, 161, 244, 0.35), transparent 60%); opacity: 0; transition: opacity 1s ease; } body.bd-a2 .bd-proc-fenetre.is-chargee .bd-proc-halo { opacity: 1; } /* Le site n'apparait qu'une fois l'URL tapee : c'est .is-chargee qui le dit. */ body.bd-a2 .bd-proc-site { position: relative; opacity: 0; transform: scale(0.9); } body.bd-a2 .bd-proc-fenetre.is-chargee .bd-proc-site { animation: bd-proc-site 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes bd-proc-site { 0% { opacity: 0; transform: scale(0.9); } 60% { opacity: 1; transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } } body.bd-a2 .bd-proc-logo { font-size: 1.6rem; font-weight: 700; color: var(--ink); } body.bd-a2 .bd-proc-logo b { color: var(--accent); } /* Titre, texte et boutons arrivent en cascade APRES la fenetre. Les delais sont cales sur la frappe de l'URL : 500ms d'attente + 20 caracteres a 70ms + 250ms de chargement = le site apparait vers 2,15 s. */ body.bd-a2 .bd-proc-titre, body.bd-a2 .bd-proc-texte, body.bd-a2 .bd-proc-cta { opacity: 0; transform: translateY(16px); filter: blur(3px); } body.bd-a2 .bd-proc-final.is-on .bd-proc-titre { animation: bd-proc-monte 0.7s cubic-bezier(0.22, 1, 0.36, 1) 2.6s forwards; } body.bd-a2 .bd-proc-final.is-on .bd-proc-texte { animation: bd-proc-monte 0.7s cubic-bezier(0.22, 1, 0.36, 1) 2.9s forwards; } body.bd-a2 .bd-proc-final.is-on .bd-proc-cta { animation: bd-proc-monte 0.7s cubic-bezier(0.22, 1, 0.36, 1) 3.2s forwards; } @keyframes bd-proc-monte { to { opacity: 1; transform: translateY(0); filter: blur(0); } } body.bd-a2 .bd-proc-titre { margin: 0 0 0.35rem; font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); } body.bd-a2 .bd-proc-texte { margin: 0 0 1.4rem; max-width: 32rem; font-size: 1rem; color: var(--muted); } body.bd-a2 .bd-proc-mot { flex: 1 1 330px; min-width: 0; } body.bd-a2 .bd-proc-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; } /* --- Mouvement reduit : tout est la, rien ne bouge ------------------------ */ @media (prefers-reduced-motion: reduce) { body.bd-a2 .bd-proc-etape, body.bd-a2 .bd-proc-final, body.bd-a2 .bd-proc-fenetre, body.bd-a2 .bd-proc-site, body.bd-a2 .bd-proc-titre, body.bd-a2 .bd-proc-texte, body.bd-a2 .bd-proc-cta { opacity: 1; transform: none; filter: none; animation: none; transition: none; } body.bd-a2 .bd-proc-rond { transform: none; transition: none; } body.bd-a2 .bd-proc-halo { opacity: 1; transition: none; } body.bd-a2 .bd-proc-trace { transition: none; } } /* --- Sous 860px : frise VERTICALE ---------------------------------------- */ @media (max-width: 860px) { body.bd-a2 .bd-proc-bloc { padding: 3.5rem 0; } body.bd-a2 .bd-proc-inner { padding: 0 20px; } /* Les gros titres passent a GAUCHE : centres, ils flottaient au-dessus d'une frise alignee a gauche. */ body.bd-a2 .bd-proc-tete { text-align: left; margin-bottom: 2rem; } body.bd-a2 .bd-proc-frise { grid-template-columns: 1fr; gap: 0; padding-left: 4px; } /* La ligne verticale s'ARRETE au centre du dernier rond : --bd-proc-tl est pose par le script. Le repli couvre le cas ou il n'aurait pas tourne. */ body.bd-a2 .bd-proc-frise::before { top: calc(var(--bd-proc-rond) / 2); left: calc(var(--bd-proc-rond) / 2 - 1px); right: auto; width: 2px; height: var(--bd-proc-tl, calc(100% - 150px)); } /* La meme avancee devient une HAUTEUR. Le trait bleu suivait la frise sur grand ecran mais restait invisible ici : il gardait sa hauteur nulle. */ body.bd-a2 .bd-proc-trace { top: calc(var(--bd-proc-rond) / 2); left: calc(var(--bd-proc-rond) / 2 - 1px); width: 2px; height: calc(var(--bd-proc-tl, 0px) * var(--bd-proc-avance)); background: linear-gradient(180deg, var(--accent), #3bb3f7); transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1); } body.bd-a2 .bd-proc-etape { flex-direction: row; align-items: flex-start; gap: 1.1rem; padding: 0.9rem 0; text-align: left; transform: translateY(20px); } body.bd-a2 .bd-proc-etape.is-on { transform: none; } body.bd-a2 .bd-proc-rond-boite { margin-bottom: 0; flex-shrink: 0; } body.bd-a2 .bd-proc-etape p { margin: 0; max-width: none; } body.bd-a2 .bd-proc-final { gap: 1.6rem; } body.bd-a2 .bd-proc-ecran { height: 190px; } body.bd-a2 .bd-proc-titre { font-size: 1.6rem; } } /* ========================================================================= * Carte de l'interlocuteur — section « Pourquoi moi ». Namespace bd-wc-* * * 🔴 C'EST UNE COPIE DELIBEREE DE .bd-hc (la carte du hero), PAS UN OUBLI DE * FACTORISATION. Benjamin veut aujourd'hui la meme carte aux deux endroits, * mais il veut pouvoir les faire DIVERGER : celle-ci va grossir et recevoir * d'autres descriptions. Fusionner les deux jeux de regles — ou faire de * bd-wc un simple alias de bd-hc — relierait ce qu'il a demande de separer. * NE PAS LE FAIRE. Si les deux cartes doivent changer ensemble, c'est qu'on * s'est trompe : elles changeront separement. * * Le SEUL lien voulu est le badge de disponibilite : les deux suivent * l'interrupteur Reglages -> Bio Digital, parce que les deux appellent * bd_a2_dispo_badge() — mais avec leur propre prefixe de classes. * * ⚠️ Les boutons ne sont PAS redecrits ici : ce sont des .bd-a2-btn--sm, * comme partout ailleurs sur la page. * ====================================================================== */ body.bd-a2 .bd-wc { display: flex; flex-direction: column; /* 490px : la largeur de la colonne de gauche a 1280 (495px) moins un filet. C'est aussi, aujourd'hui, celle de la carte du hero — par coincidence de contenu, pas par dependance. */ width: 100%; max-width: 490px; margin: 0; padding: 18px; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 18px 40px -18px rgba(10, 23, 38, 0.28); } /* Badge de disponibilite. Couleurs EN DUR : signal d'etat, pas couleur de charte. Meme valeurs que dans le hero, ecrites ici a part — voir l'avis en tete de bloc. */ body.bd-a2 .bd-wc-statut { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin: 12px 0 0; padding: 6px 13px; border-radius: 100px; background: #e8f7ee; color: #1a7a3c; font-size: 12.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; } body.bd-a2 .bd-wc-statut--indispo { background: #fef3e2; color: #b45309; } body.bd-a2 .bd-wc-point { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: #22c55e; animation: bd-wc-pulse 2s infinite; } /* Etat « indisponible » : le point ne pulse pas. L'absence d'animation est voulue — le clignotement est un appel a l'action. */ body.bd-a2 .bd-wc-statut--indispo .bd-wc-point { background: #d97706; animation: none; } /* ⚠️ Keyframes PROPRE a cette carte, et non « bd-hc-pulse » reutilise : un nom partage serait le dernier fil entre les deux cartes. */ @keyframes bd-wc-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } @media (prefers-reduced-motion: reduce) { body.bd-a2 .bd-wc-point { animation: none; } } body.bd-a2 .bd-wc-haut { display: flex; gap: 24px; } body.bd-a2 .bd-wc-photo { width: 172px; flex-shrink: 0; min-height: 186px; border-radius: 16px; overflow: hidden; background: var(--ice); } body.bd-a2 .bd-wc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; /* Meme cadrage que le hero : le cadre a presque le rapport du fichier, donc « cover » ne recadre rien et le sujet parait loin. C'est ce zoom qui rapproche le visage. L'origine remonte quand le zoom monte. */ transform: scale(1.6); transform-origin: 50% 22%; } body.bd-a2 .bd-wc-info { display: flex; flex-direction: column; flex: 1; min-width: 0; } body.bd-a2 .bd-wc-role { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--muted); } body.bd-a2 .bd-wc-nom { margin: 4px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; color: var(--ink); white-space: nowrap; } /* Note Google : les etoiles en #FBBC05, la couleur de la marque, EN DUR. */ body.bd-a2 .bd-wc-note { display: flex; align-items: center; gap: 7px; margin: 8px 0 0; } body.bd-a2 .bd-wc-etoiles { color: #FBBC05; font-size: 13px; letter-spacing: 1.5px; line-height: 1; } body.bd-a2 .bd-wc-note-txt { font-size: 12.5px; line-height: 1; color: var(--muted); } /* « sur 5 » n'est la que pour les lecteurs d'ecran. Pas de display:none, qui l'aurait retire de la lecture. */ body.bd-a2 .bd-wc-sur5 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } body.bd-a2 .bd-wc-args { display: flex; flex-direction: column; gap: 5px; margin: 11px 0 0; padding: 0; list-style: none; } body.bd-a2 .bd-wc-arg { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; line-height: 1.35; color: var(--muted); } body.bd-a2 .bd-wc-arg svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--accent); } body.bd-a2 .bd-wc-btns { display: flex; /* ⚠️ wrap et non nowrap : sous ~1409px de fenetre la colonne de gauche passe sous 556px et les deux boutons ne tiennent plus cote a cote. Ils s'empilent alors — « Discutons-en » au-dessus — au lieu de sortir de la carte. Repli choisi par Benjamin le 01/09. */ flex-wrap: wrap; gap: 9px; margin-top: auto; padding-top: 14px; } body.bd-a2 .bd-wc-btns .bd-a2-btn { white-space: nowrap; } /* Sous 1120px la carte passe en colonne : photo pleine largeur au-dessus. 🔑 Le seuil est MESURE, pas choisi : « Prendre rendez-vous » fait 178px et ne rentre plus a cote de la photo en dessous (185px de place a 1120, 176 a 1100). Il valait 860 tant que les boutons s'appelaient « Appeler » et « Ecrire » ; c'est le libelle plus long qui l'a fait remonter. */ @media (max-width: 1119px) { body.bd-a2 .bd-wc-haut { flex-direction: column; } body.bd-a2 .bd-wc-photo { width: 100%; height: 270px; min-height: 0; } body.bd-a2 .bd-wc-photo img { transform: none; object-position: 50% 18%; } body.bd-a2 .bd-wc-nom { white-space: normal; } } @media (max-width: 380px) { body.bd-a2 .bd-wc-statut { white-space: normal; } } /* ========================================================================= * LA CARTE A FLIP — scene 3D, verso « Reserver un appel », colonne creneaux * * Quatre bandes de comportement, et c'est VOLONTAIRE — la largeur disponible * ne permet pas le meme geste partout. Tous les seuils sont MESURES : * * >= 1420px : flip 3D, les deux boutons cote a cote, carte a 288px de haut, * et elle s'allonge a 820px : elle recouvre alors 193px de la * colonne des arguments, qui s'estompent. Assume. * 1280-1419 : pareil, mais les boutons s'empilent (la colonne passe sous * 556px) et la carte monte a 326px. * 1120-1279 : flip 3D, boutons empiles, mais les creneaux passent SOUS le * calendrier — la colonne est trop etroite pour l'extension. * <= 1119px : plus de 3D du tout (mode plat) et photo au-dessus du texte : * « Prendre rendez-vous » ne rentre plus a cote de la photo. * Meme chemin que prefers-reduced-motion. * * ⚠️ Le calendrier garde sa largeur (452px) quand la carte s'allonge : seule * la colonne des creneaux apparait. Sans ce verrou la grille se reflow sous * l'oeil de l'utilisateur pendant qu'il vise un jour. * * ⚠️ AUCUNE classe bd-rdv-* ici. Le CSS du systeme de rendez-vous est en * ligne dans le pied de page (#bd-rdv-css) et habille la MODALE ; les deux * jeux ne doivent jamais se croiser. * ====================================================================== */ body.bd-a2 .bd-wc-scene { /* DEUX contraintes, pas une — et elles ne tombent pas au meme endroit : - sous ~1409px les deux boutons s'empilent et le recto reclame 326px ; - au-dessus ils tiennent sur une ligne, et c'est alors le CALENDRIER qui fixe le plancher. ⚠️ La photo ne commande RIEN : elle s'etire pour remplir la carte. Pour la raccourcir il faut baisser la carte, donc compacter le verso — c'est pour cela que la barre du mois est remontee dans l'en-tete. */ --bd-wc-h: 326px; /* 32px, et c'est un COTE de carre : la case fait 32 de large comme de haut. Le plafond vient de la HAUTEUR, jamais de la largeur : six semaines (6x32) plus les gouttieres (18) et les initiales (16) font 226px, et c'est ce que la carte doit reserver sous l'en-tete. Grossir encore = monter la carte d'autant. */ --bd-wc-case: 32px; position: relative; width: 100%; /* 570px : il faut 556px pour poser « Discutons-en » (135) et « Prendre rendez-vous » (178) sur une ligne, a cote de la photo (172) et de sa gouttiere (24). A 490 le second bouton DEBORDAIT de 65px. 570 est aussi le plafond utile : c'est la largeur de la colonne a 1440. */ max-width: 570px; perspective: 1600px; transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1); } /* 🔑 LA CARTE NE S'ALLONGE PLUS DU TOUT. Depuis que les cases du calendrier sont CARREES, la grille ne fait plus que 214px de large au lieu de 532 : la colonne des creneaux se loge dans la place deja disponible. Plus de debordement sur les arguments, donc plus rien a estomper. C'est ce que Benjamin avait vu venir en demandant les cases carrees. ⚠️ Ne pas « remettre » une largeur ici sans verifier que 214 + 41 + la colonne des creneaux depasse vraiment la carte. */ body.bd-a2 .bd-wc-scene.is-expanded { /* z-index conserve : la carte reste au-dessus de la brume decorative. */ z-index: 5; } body.bd-a2 .bd-wc-flip { position: relative; min-height: var(--bd-wc-h); transform-style: preserve-3d; /* min-height dans la transition : sur ecran moyen la carte n'a pas la meme hauteur au recto et au verso, et le passage doit accompagner le retournement au lieu de sauter. */ transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.5s cubic-bezier(0.22, 1, 0.36, 1); } body.bd-a2 .bd-wc-scene.is-flipped .bd-wc-flip { transform: rotateY(180deg); } /* Les deux faces occupent la meme boite. max-width et width sont REMIS a zero : .bd-wc les fixe a 490px, ce qui empecherait la face de suivre l'extension. */ body.bd-a2 .bd-wc-face { position: absolute; inset: 0; width: auto; max-width: none; backface-visibility: hidden; -webkit-backface-visibility: hidden; } body.bd-a2 .bd-wc-verso { transform: rotateY(180deg); } /* Le recto occupe toute la hauteur imposee : la photo s'etire, les boutons restent colles en bas (margin-top:auto, deja porte par .bd-wc-btns). */ body.bd-a2 .bd-wc-recto .bd-wc-haut { flex: 1 1 auto; min-height: 0; } body.bd-a2 .bd-wc-recto .bd-wc-photo { min-height: 0; } /* Le bloc de texte est CALE EN BAS, pas colle en haut : le vide de la carte remonte au-dessus du role, et il ne reste qu'un filet d'air avant les boutons. ⚠️ margin-top:auto doit sauter, sinon il reabsorbe tout l'espace et le bloc remonte comme avant. */ body.bd-a2 .bd-wc-recto .bd-wc-info { justify-content: flex-end; } body.bd-a2 .bd-wc-recto .bd-wc-btns { margin-top: 0; padding-top: 18px; } /* --- Bouton contour « Discutons-en ». Variante du bouton de la page, pas un nouveau bouton : seules les trois couleurs changent. ------------------- */ body.bd-a2 .bd-a2-btn--ghost { background: transparent; border: 1.5px solid rgba(10, 23, 38, 0.22); color: var(--ink); } body.bd-a2 .bd-a2-btn--ghost:hover { border-color: var(--ink); } body.bd-a2 .bd-a2-btn--ghost .bd-a2-btn__icon { background: var(--ink); color: #ffffff; } /* --- Verso : en-tete ---------------------------------------------------- */ body.bd-a2 .bd-wc-tete { display: flex; align-items: center; /* OPTION C, retenue par Benjamin le 01/09 : le mois passe SOUS le titre, en plus petit et en gris. Sur la ligne du titre il finissait au-dessus de la colonne des creneaux une fois celle-ci ouverte, comme s'il les etiquetait. « Retour » est pousse a droite par sa marge automatique. */ justify-content: flex-start; align-items: flex-start; /* wrap : sur telephone les trois elements (titre, mois, retour) ne tiennent pas sur 277px. Le mois passe dessous — sans cout, la hauteur y est libre puisque le mode plat n'impose plus de hauteur. */ flex-wrap: wrap; gap: 6px 12px; /* PAS de margin-bottom : elle s'ajoutait a l'air que le centrage laisse au-dessus de la grille, et le desequilibrait de 12px (29 dessus contre 18 dessous, mesure). Sans elle, le centrage repartit tout a parts egales, quel que soit le nombre de semaines du mois. */ margin-bottom: 0; } body.bd-a2 .bd-wc-tete-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; } body.bd-a2 .bd-wc-titre { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); } body.bd-a2 .bd-wc-titre span { color: var(--accent); } body.bd-a2 .bd-wc-retour { margin-left: auto; margin-top: 1px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 2px; border: 0; background: none; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; } body.bd-a2 .bd-wc-retour:hover { color: var(--ink); } body.bd-a2 .bd-wc-retour:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } body.bd-a2 .bd-wc-vide { margin: 0; padding: 14px; border-radius: 12px; background: var(--ice); font-size: 13.5px; line-height: 1.5; color: var(--muted); } /* --- Verso : corps ------------------------------------------------------ */ body.bd-a2 .bd-wc-corps { display: flex; flex: 1 1 auto; min-height: 0; /* Centre dans les deux etats : seul au repos, le calendrier est au milieu de la carte ; une fois les creneaux ouverts, c'est le COUPLE qui se centre. Le calendrier glisse donc vers la gauche pour faire de la place, au lieu que la carte s'allonge. */ justify-content: center; } /* La grille ne prend que sa largeur propre : c'est ce qui libere la place pour les creneaux sans agrandir la carte. 🔑 PLUS DE CENTRAGE VERTICAL ICI. La taille de case est choisie pour que la grille remplisse EXACTEMENT le corps, et l'air est porte par le padding du corps — que la colonne des creneaux subit aussi. C'est ce qui fait tomber le bas de la derniere semaine PILE sur le bas du bouton « Confirmer » (demande de Benjamin le 01/09). Un centrage remettrait un decalage entre les deux colonnes. */ body.bd-a2 .bd-wc-cal { flex: 0 0 auto; } body.bd-a2 .bd-wc-cal-nav { display: flex; align-items: center; justify-content: flex-start; gap: 8px; } body.bd-a2 .bd-wc-cal-mois { /* Sous le titre : une precision, pas un second titre. */ font-size: 12px; font-weight: 500; color: var(--muted); } body.bd-a2 .bd-wc-cal-fleche { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); font-family: inherit; font-size: 14px; line-height: 1; color: var(--ink); cursor: pointer; } body.bd-a2 .bd-wc-cal-fleche:disabled { opacity: 0.35; cursor: default; } body.bd-a2 .bd-wc-cal-fleche:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } body.bd-a2 .bd-wc-cal-grille { display: grid; /* ⚠️ repeat(7, var(--bd-wc-case)) et NON repeat(7, 1fr) : c'est la seule facon d'avoir des cases carrees. En 1fr la colonne s'etirait a toute la largeur disponible et les cases faisaient 73x28. */ grid-template-columns: repeat(7, var(--bd-wc-case)); gap: 3px; } body.bd-a2 .bd-wc-cal-grille[hidden] { display: none; } body.bd-a2 .bd-wc-dow { text-align: center; font-size: 10.5px; font-weight: 600; color: var(--muted); padding-bottom: 2px; } /* Une case : bouton quand elle est cliquable, simple sinon. Les deux partagent la meme boite pour que la grille reste reguliere. */ body.bd-a2 .bd-wc-case { position: relative; display: flex; align-items: center; justify-content: center; height: var(--bd-wc-case); padding: 0; border: 0; border-radius: 8px; background: none; font-family: inherit; font-size: 12.5px; line-height: 1; color: var(--muted); } body.bd-a2 .bd-wc-case--passe { opacity: 0.4; } body.bd-a2 .bd-wc-case--vide { visibility: hidden; } body.bd-a2 .bd-wc-case--dispo { background: var(--ice); color: var(--ink); font-weight: 700; cursor: pointer; transition: background 0.2s, color 0.2s; } /* Le point : c'est le signal « il y a des creneaux ce jour-la ». Il est decoratif — l'information est aussi dans l'aria-label du bouton, qui annonce le jour ET le nombre de creneaux. */ body.bd-a2 .bd-wc-case--dispo::after { content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 3px; height: 3px; border-radius: 50%; background: var(--accent); } body.bd-a2 .bd-wc-case--dispo:hover { background: #d7e9f8; } body.bd-a2 .bd-wc-case--dispo.is-sel { background: var(--accent); color: #ffffff; } body.bd-a2 .bd-wc-case--dispo.is-sel::after { background: #ffffff; } body.bd-a2 .bd-wc-case--dispo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* --- Verso : la colonne des creneaux ------------------------------------ */ body.bd-a2 .bd-wc-agenda { display: flex; flex-direction: column; /* flex-basis et non width : la colonne doit pouvoir RETRECIR quand la carte est etroite (a 1280 il ne reste que 202px apres le calendrier). flex-basis s'anime, contrairement a une largeur « auto ». */ flex: 0 0 0px; min-width: 0; overflow: hidden; opacity: 0; border-left: 1px solid transparent; transition: flex-basis 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s, padding 0.5s, margin 0.5s; } body.bd-a2 .bd-wc-scene.is-expanded .bd-wc-agenda { /* 215 et non 250 : Benjamin voulait la colonne plus etroite. Les pastilles tiennent toujours a deux par rangee, et le bloc entier se centre dans la carte au lieu d'en toucher les deux bords. */ flex: 0 1 215px; margin-left: 20px; padding-left: 20px; opacity: 1; border-left-color: var(--line); } body.bd-a2 .bd-wc-jour[hidden] { display: none; } body.bd-a2 .bd-wc-jour-lbl { margin: 0 0 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } body.bd-a2 .bd-wc-heures { display: flex; flex-wrap: wrap; gap: 6px; } body.bd-a2 .bd-wc-heure { padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-family: inherit; /* 11.5px : la colonne des creneaux a maigri au profit du calendrier, les pastilles doivent tenir a deux par rangee. Graisse MEDIUM et non semi-gras : a cette taille le 600 se lisait comme du gras et tirait l'oeil avant le calendrier. */ font-size: 11.5px; font-weight: 500; line-height: 1.2; color: var(--ink); white-space: nowrap; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; } body.bd-a2 .bd-wc-heure:hover { border-color: var(--accent); } body.bd-a2 .bd-wc-heure.is-sel { background: var(--accent); border-color: var(--accent); color: #ffffff; } body.bd-a2 .bd-wc-heure:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } body.bd-a2 .bd-wc-confirmer { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; padding: 11px 14px; border: 0; border-radius: 999px; background: var(--ink); font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; color: #ffffff; white-space: nowrap; cursor: pointer; transition: opacity 0.25s; } body.bd-a2 .bd-wc-confirmer:disabled { opacity: 0.4; cursor: default; } body.bd-a2 .bd-wc-confirmer:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* --- 1280-1419px : meme calage, mais sur une carte de 326px --------------- Dans cette bande les deux boutons du recto s'empilent, la carte fait donc 326px et non 308 : le corps laisse 250px et non 232. La case ET l'air changent donc tous les deux — sinon le bas de la grille ne tombe plus sur le bas du bouton « Confirmer ». 5 semaines : 21 + 5x32 + 12 = 193 -> (250 - 193) / 2 = 28,5 d'air 6 semaines : 21 + 6x30 + 15 = 216 -> (250 - 216) / 2 = 17 d'air ⚠️ La case plafonne a 32 par la LARGEUR : a 1280 la carte ne fait que 495px et la colonne des creneaux tomberait sous 170. */ @media (min-width: 1280px) and (max-width: 1419px) { body.bd-a2 .bd-wc-verso--5sem { --bd-wc-case: 32px; } body.bd-a2 .bd-wc-verso--5sem .bd-wc-corps { padding: 28.5px 0; } body.bd-a2 .bd-wc-verso--6sem { --bd-wc-case: 30px; } body.bd-a2 .bd-wc-verso--6sem .bd-wc-corps { padding: 17px 0; } } /* --- 861-1279px : le flip reste, l'extension passe en dessous ------------ La colonne de gauche n'atteint 490px qu'a partir d'environ 1245px de fenetre ; en dessous, s'elargir a 780px deborderait du panneau. */ @media (max-width: 1279px) { /* ⚠️ Accroche a .is-flipped et NON a .is-expanded : depuis que le premier jour libre est choisi d'emblee, .is-expanded est pose en permanence — le recto aurait herite de cette hauteur et se serait retrouve avec 200px de vide. Ici la carte ne grandit qu'en montrant son verso. */ body.bd-a2 .bd-wc-scene.is-flipped { /* 444px : le contenu le plus haut de cette bande mesure 389px du haut de l'en-tete au bas du bouton (a 1120px, ou les six pastilles du samedi 5 passent sur deux rangees), plus 12px d'air sous le titre et les 38px de padding et filet, plus 14px de marge (a 444 il n'en restait que 6, trop juste face aux variations de rendu de police). Mesure, pas estime. En 3D les faces sont en position absolue : la hauteur DOIT etre explicite. ⚠️ Depend de --bd-wc-case et du nombre de semaines du mois — la revoir si l'un des deux bouge. */ --bd-wc-h: 452px; } body.bd-a2 .bd-wc-corps { flex-direction: column; align-items: center; justify-content: flex-start; } /* En pile, la grille n'est plus centree dans une hauteur libre : le centrage ne peut plus fournir l'air sous le titre, on le remet. */ body.bd-a2 .bd-wc-tete { margin-bottom: 12px; } body.bd-a2 .bd-wc-scene:not(.is-expanded) .bd-wc-agenda { display: none; } body.bd-a2 .bd-wc-scene.is-expanded .bd-wc-agenda { flex: 0 0 auto; margin: 14px 0 0; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line); } body.bd-a2 .bd-wc-confirmer { margin-top: 14px; } } /* --- Mode plat : petits ecrans ET mouvement reduit ------------------------ Plus de 3D, plus de hauteur imposee : les deux faces prennent leur place dans le fil, l'une apres l'autre. C'est aussi le repli demande pour le telephone — un demi-tour de carte n'a pas de sens sur 360px de large. */ @media (max-width: 1119px), (prefers-reduced-motion: reduce) { body.bd-a2 .bd-wc-scene, body.bd-a2 .bd-wc-scene.is-expanded { width: 100%; max-width: 570px; perspective: none; transition: none; } body.bd-a2 .bd-wc-flip { min-height: 0; transform: none !important; transform-style: flat; transition: none; } body.bd-a2 .bd-wc-face { position: static; transform: none !important; backface-visibility: visible; -webkit-backface-visibility: visible; } body.bd-a2 .bd-wc-scene:not(.is-flipped) .bd-wc-verso, body.bd-a2 .bd-wc-scene.is-flipped .bd-wc-recto { display: none; } body.bd-a2 .bd-wc-corps { flex-direction: column; align-items: center; justify-content: flex-start; } /* En pile, la grille n'est plus centree dans une hauteur libre : le centrage ne peut plus fournir l'air sous le titre, on le remet. */ body.bd-a2 .bd-wc-tete { margin-bottom: 12px; } body.bd-a2 .bd-wc-scene:not(.is-expanded) .bd-wc-agenda { display: none; } body.bd-a2 .bd-wc-scene.is-expanded .bd-wc-agenda { flex: 0 0 auto; margin: 14px 0 0; padding: 14px 0 0; opacity: 1; border-left: 0; border-top: 1px solid var(--line); transition: none; } } @media (prefers-reduced-motion: reduce) { body.bd-a2 .bd-wc-case--dispo, body.bd-a2 .bd-wc-heure, body.bd-a2 .bd-wc-confirmer { transition: none; } } /* Au-dela de 1420px de fenetre la colonne de gauche depasse 556px, les deux boutons tiennent sur une ligne, et le recto n'a plus besoin de ses 326px : c'est le calendrier qui fixe alors le plancher. 288px = en-tete (40) + grille six semaines (202) + 38 de padding et filet, plus une marge. ⚠️ Le seuil est celui du passage a la ligne des boutons, PAS un rond de maquette : le recalculer si un libelle de bouton change. */ @media (min-width: 1420px) { /* 🔑 LE CALAGE, en deux valeurs qui vont TOUJOURS PAR PAIRE. Le corps laisse 232px sous l'en-tete. La grille doit le remplir exactement, air compris, pour que son bas tombe sur celui du bouton « Confirmer » — la colonne des creneaux subit le meme padding. Hauteur de grille = 21 (ligne des initiales, MESUREE — pas 16) + nb_semaines x case + (nb_semaines - 1) x 3. 5 semaines : 21 + 5x33 + 12 = 198 -> (232 - 198) / 2 = 17 d'air 6 semaines : 21 + 6x30 + 15 = 216 -> (232 - 216) / 2 = 8 d'air ⚠️ Changer la case SANS changer l'air casse l'alignement, et changer --bd-wc-h ci-dessous casse les deux. Les trois se recalculent ensemble. ⚠️ La classe est sur le VERSO, pas sur la grille : l'air est porte par le corps, la case par la grille. */ body.bd-a2 .bd-wc-verso--5sem { --bd-wc-case: 33px; } body.bd-a2 .bd-wc-verso--5sem .bd-wc-corps { padding: 17px 0; } body.bd-a2 .bd-wc-verso--6sem { --bd-wc-case: 30px; } body.bd-a2 .bd-wc-verso--6sem .bd-wc-corps { padding: 8px 0; } body.bd-a2 .bd-wc-scene { /* 308px = en-tete (28) + six semaines de 32px (226) + 8px d'air de part et d'autre + 38 de padding et filet. Les 8px sont le minimum du PIRE cas (six semaines) ; un mois de cinq semaines repartit ses 35px de reste a parts egales, en haut comme en bas. C'est le VERSO qui commande : le recto n'a besoin que de 269 quand ses boutons tiennent sur une ligne. */ --bd-wc-h: 308px; } } /* Sur un vrai telephone les cases doivent rester visables au doigt. */ @media (max-width: 560px) { body.bd-a2 .bd-wc-scene { --bd-wc-case: 38px; } } /* --- Colonne de droite : les quatre arguments, separes par un filet. ----- */ body.bd-a2 .bd-args { display: flex; flex-direction: column; /* Les quatre arguments se repartissent la hauteur de la colonne de gauche au lieu de s'entasser en haut : les deux blocs finissent ensemble, et l'air entre les arguments vient de la place disponible, pas d'une valeur posee au jugé. */ justify-content: space-between; } body.bd-a2 .bd-arg { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); align-items: start; } body.bd-a2 .bd-arg:first-child { padding-top: 0; } body.bd-a2 .bd-arg-ico { width: 46px; height: 46px; border-radius: 12px; background: var(--white); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; } body.bd-a2 .bd-arg-ico svg { width: 22px; height: 22px; } body.bd-a2 .bd-arg h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.3rem; display: flex; align-items: center; gap: 0.5rem; } body.bd-a2 .bd-arg h3 .bd-n { font-size: 0.75rem; color: var(--muted); font-weight: 500; } body.bd-a2 .bd-arg p { font-size: 0.92rem; color: var(--muted); line-height: 1.5; margin: 0; } @media (max-width: 860px) { body.bd-a2 .bd-why-box { padding: 2.5rem 1.6rem; } body.bd-a2 .bd-why-grid { grid-template-columns: 1fr; row-gap: 2.2rem; } /* En une colonne, plus de lignes a tenir : chacun reprend sa place dans le fil, et les arguments cessent de s'etirer. */ body.bd-a2 .bd-why-grid > .bd-a2-kicker, body.bd-a2 .bd-why-left, body.bd-a2 .bd-args { grid-column: 1; grid-row: auto; } body.bd-a2 .bd-args { justify-content: flex-start; } } /* ========================================================================= * « Pour qui » — la bande des profils (accueil-3, page 147) * * Meme couloir et meme respiration que « Comment ca marche » (.bd-proc-*) : * 1160px, 32px de garde, et le titre au JETON --taille-clients pour qu'il * fasse exactement la taille des autres H2 de la page. Aucune valeur de * taille recopiee a la main. * * Les pastilles sont les .bd-svc-ico de la section Services, reprises telles * quelles : rien a styler ici, elles portent deja leur rond --ice et leur * trait --accent. * * ⚠️ .bd-hl n'est pas une classe generique du theme : elle n'existe qu'en * portee .bd-why-left h2 et .bd-proc-tete h2. On la redeclare ici pour notre * titre, comme le fait deja la section process. * ====================================================================== */ body.bd-a2 .bd-pq { padding: clamp(3.5rem, 8vh, 6.5rem) 0; } body.bd-a2 .bd-pq-inner { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 32px; } /* --- En-tete centre ---------------------------------------------------- */ body.bd-a2 .bd-pq-tete { text-align: center; margin-bottom: 2.8rem; } body.bd-a2 .bd-pq-tete .bd-a2-kicker { /* inline-flex : sinon le chapeau prend toute la largeur et son rond navy part se coller au bord gauche au lieu de suivre le texte centre. */ display: inline-flex; margin-bottom: 34px; } body.bd-a2 .bd-pq-tete h2 { margin: 0; font-size: var(--taille-clients); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; } body.bd-a2 .bd-pq-tete h2 .bd-hl { color: var(--accent); } body.bd-a2 .bd-pq-chapo { font-size: 1rem; color: var(--muted); max-width: 38rem; margin: 1.1rem auto 0; } /* --- Les six familles --------------------------------------------------- Trois par ligne et non six de front : a six colonnes, « Professions liberales » se cassait en trois lignes et la rangee devenait illisible. Cases alignees a GAUCHE : ce sont des paragraphes courts, pas des vignettes — centres, les exemples partaient en escalier. */ body.bd-a2 .bd-pq-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } body.bd-a2 .bd-pq-case { background: var(--white); border-radius: 18px; box-shadow: var(--shadow); padding: 24px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } body.bd-a2 .bd-pq-titre { font-weight: 700; color: var(--ink); font-size: 1.02rem; line-height: 1.25; letter-spacing: -0.01em; } body.bd-a2 .bd-pq-ex { font-size: 0.9rem; line-height: 1.45; color: var(--muted); /* PAS de margin-top: auto ici. Essaye puis retire : cale en bas, les exemples des titres courts descendaient jusqu'au bord et laissaient un trou sous leur titre. L'oeil suit le HAUT des cases, pas leur bas : mieux vaut des bas irreguliers qu'un blanc au milieu. */ } /* --- La ligne de sortie ------------------------------------------------- */ body.bd-a2 .bd-pq-pied { margin: 2.2rem 0 0; text-align: center; color: var(--muted); font-size: 0.96rem; } body.bd-a2 .bd-pq-pied strong { color: var(--ink); font-weight: 600; } @media (max-width: 900px) { body.bd-a2 .bd-pq-liste { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { body.bd-a2 .bd-pq-liste { grid-template-columns: 1fr; } body.bd-a2 .bd-pq-inner { padding: 0 20px; } } /* --- Variante fondue dans « Ils me font confiance » ---------------------- La bande porte deja son chapeau et son titre : la section arrive donc SANS tete, juste une amorce d'une ligne puis les six cases. Elle ne reprend pas non plus le grand rythme vertical — elle est DANS un bloc, pas a cote. ⚠️ Elle se pose APRES .bd-a2-clients-inner, jamais avant : --bd-ecart est mesure sur la position de .bd-a2-logos (voir template-accueil-2.php), et tout ce qui s'inserre AU-DESSUS de cette rangee decalerait la levee du panneau du hero. En dessous, la mesure ne bouge pas. */ body.bd-a2 .bd-pq--nu { /* 3rem EN BAS, pas zero : une fois le hero remonte, la sortie de bande arrive a 1828px et Services commence a 1828 aussi — le bouton collait au bord. Mesure faite dans l'etat POSE, pas au repos. */ padding: 2.6rem 0 3rem; } body.bd-a2 .bd-pq--nu .bd-pq-inner { /* Le couloir de la bande clients, pas celui des sections a part : les cases doivent tomber sur les memes bords que le titre et les logos au-dessus. C'est LE JETON de la bande (--retrait-clients: 72px), pas une valeur recopiee : le jour ou le retrait bouge, la rangee suit. */ max-width: none; padding: 0; margin: 0 var(--retrait-clients); /* ⚠️ width: auto OBLIGATOIRE. La version autonome pose width: 100% ; avec les deux marges de 72px, la rangee mesurait 1416px dans un couloir de 1272 et la 6e case sortait de l'ecran (mesure : x=84, largeur=1416). */ width: auto; } body.bd-a2 .bd-pq-amorce { margin: 0 0 1.4rem; font-size: 0.98rem; color: var(--muted); } body.bd-a2 .bd-pq-amorce strong { color: var(--ink); font-weight: 600; } body.bd-a2 .bd-pq--nu .bd-pq-liste { /* Six de front dans la bande : on ne refait pas deux rangees a l'interieur d'un bloc qui en compte deja. A l'etroit, les media queries plus bas reprennent la main. */ grid-template-columns: repeat(6, 1fr); gap: 12px; } body.bd-a2 .bd-pq--nu .bd-pq-case { padding: 18px 16px; gap: 10px; } body.bd-a2 .bd-pq--nu .bd-pq-titre { font-size: 0.94rem; } body.bd-a2 .bd-pq--nu .bd-pq-ex { font-size: 0.82rem; } body.bd-a2 .bd-pq--nu .bd-pq-pied { margin-top: 1.6rem; text-align: left; } @media (max-width: 1100px) { body.bd-a2 .bd-pq--nu .bd-pq-liste { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { body.bd-a2 .bd-pq--nu .bd-pq-liste { grid-template-columns: repeat(2, 1fr); } } /* --- Sortie de bande : la phrase et le bouton sur une ligne -------------- Le bouton quitte la colonne de droite, ou il flottait seul sous les logos. flex-wrap : sous 900px la phrase reprend toute la largeur et le bouton passe dessous, plutot que de comprimer le texte a trois mots par ligne. */ body.bd-a2 .bd-pq-sortie { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; margin-top: 1.6rem; } body.bd-a2 .bd-pq-sortie .bd-pq-pied { margin: 0; flex: 1 1 32rem; } body.bd-a2 .bd-pq-sortie .bd-a2-rejoindre { flex: 0 0 auto; } /* --- Logos descendus, accueil-3 seulement ------------------------------- ⚠️ Classe posee sur la page 147 (bd-a2-clients--a3), PAS sur .bd-a2-clients : la bande de l'accueil-2 ne doit pas bouger. ⚠️ Cette marge ne change RIEN au repos : --bd-ecart se mesure sur la position naturelle des logos et le bloc est remonte d'autant, donc les logos affleurent toujours le bas du hero. Elle agit dans l'etat POSE, celui que le visiteur regarde une fois le hero remonte. */ body.bd-a2 .bd-a2-clients--a3 .bd-a2-logos { margin-top: 34px; } /* ========================================================================= * ACCUEIL 4 (page 148) — les sept sections propres a cette page * * Tout est prefixe bd-a4- et ne sort jamais de cette portee : l'accueil-2 et * l'accueil-3 n'appellent aucun de ces shortcodes, donc aucune de ces regles * ne les atteint. Les seules classes partagees reutilisees ici sont celles du * theme (.bd-a2-kicker, .bd-svc-ico, .bd-a2-btn), volontairement : ce sont * les memes objets, pas des copies. * * ⚠️ Aucun jeton invente. --page --ink --white --muted --accent --line --ice * --panneau --shadow --taille-clients existent tous dans body.bd-a2. * ====================================================================== */ /* --- Couloir et en-tete communs aux sections de la page ------------------ Meme largeur et meme respiration que « Comment ca marche » : les sections de l'accueil-4 doivent tomber sur les memes bords que celles reprises de l'accueil-2, sinon la page zigzague. */ body.bd-a2 .bd-a4-couloir { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 32px; } body.bd-a2 .bd-a4-tete { text-align: center; margin-bottom: 3rem; } body.bd-a2 .bd-a4-tete .bd-a2-kicker { display: inline-flex; margin-bottom: 34px; } body.bd-a2 .bd-a4-tete h2 { margin: 0; font-size: var(--taille-clients); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; } /* .bd-hl n'est pas generique : chaque section declare la sienne. */ body.bd-a2 .bd-a4-tete h2 .bd-hl { color: var(--accent); } body.bd-a2 .bd-a4-chapo { font-size: 1rem; color: var(--muted); max-width: 40rem; margin: 1.1rem auto 0; } /* --- 2. Barre de preuve ------------------------------------------------- Les trois chiffres (5 sites / 5,0 sur Google / 48 h) ont vecu jusqu'au 02/09 : ils sont reverses dans le paragraphe de la bande, et leurs quatre regles sont parties avec eux. Rien d'autre a nettoyer ici, le titre et le paragraphe reutilisent les classes de l'accueil-2. */ /* --- Les chapeaux de l'accueil-4 : UN SEUL DESSIN, 13px ------------------ Demande du 02/09, en deux temps qui n'en font qu'un : « augmente de deux pixels » (11 → 13) et « mets "Ils me font confiance" et "Ce que je fais" de la meme facon que les autres ». 🔑 Mesure faite avant de toucher a quoi que ce soit : la page portait DEUX dessins de chapeau. Sept a 11px / graisse 300 / gap 8px (le dessin commun, celui de la FAQ), et deux a 12,48px / graisse 600 / gap 10px (« Ils me font confiance » et « Ce que je fais », qui ont leur propre regle plus haut dans cette feuille). Monter les seuls quatre chapeaux retouches aurait laisse TROIS tailles sur la page : on aligne donc tout le monde. ⚠️ Scopees en .bd-a4 : la regle du dessin a part est PARTAGEE avec l'accueil-2 et l'accueil-3, ou « Ils me font confiance » et « Ce que je fais » doivent garder leur 12,48px en graisse 600. Specificite (0,4,1) contre (0,3,1) : c'est ce qui permet de la neutraliser ici sans la modifier la-bas. */ body.bd-a2.bd-a4 .bd-a2-kicker { font-size: 13px; } /* Les deux exceptions rejoignent le rang. On redit chaque propriete que la regle a part imposait, sinon elle continue de s'appliquer : le dessin commun ne les redeclare pas, il se contente de ne rien poser. */ body.bd-a2.bd-a4 .bd-a2-clients .bd-a2-kicker, body.bd-a2.bd-a4 .bd-svc-head .bd-a2-kicker { display: flex; gap: 8px; font-size: 13px; font-weight: inherit; letter-spacing: 0.16em; margin: 0 0 34px; } /* --- Le badge et la respiration du carrousel, ACCUEIL-4 SEULEMENT -------- ⚠️ Scopees en .bd-a4 a dessein : .bd-a2-note et .bd-a2-rejoindre sont partagees par l'accueil-2 et l'accueil-3, qui ne doivent pas bouger d'un pixel. Les specificites sont calculees pour passer devant les regles de base : (0,3,2) contre (0,2,2) pour l'image, (0,3,1) contre (0,2,1) pour le badge, (0,4,1) contre (0,3,1) pour le bouton. 🔑 LES DEUX MARGES RESTENT EGALES, et c'est le point : le badge pose son espace SOUS lui, le bouton pose le sien AU-DESSUS, le carrousel respire donc pareil des deux cotes. 2,5rem (40px) a l'origine, 3rem (48px) ici, demande du 02/09 (« augmente tres legerement cet espace »). Changer l'une sans l'autre casse la symetrie. */ body.bd-a2.bd-a4 .bd-a2-note img { width: 285px; } body.bd-a2.bd-a4 .bd-a2-note { margin-bottom: 3rem; } body.bd-a2.bd-a4 .bd-a2-btn.bd-a2-rejoindre { margin-top: 3rem; } /* La promesse de delai, seule sur sa ligne sous le paragraphe. Elle sort du gris du paragraphe (--ink contre --muted) et se detache par la marge. */ body.bd-a2 .bd-a4-preuve-reponse { margin: 0.9rem 0 0; font-size: 1rem; line-height: 1.6; color: var(--ink); max-width: 34rem; } /* 🔴 LA GRAISSE DOIT ETRE FIXEE ICI, le ne suffit pas. Mesure sur la page : le strong sortait a 500, pas en gras. Le reset de Tailwind embarque dans assets/dist/main.css pose « b,strong{font-weight:bolder} », et bolder est RELATIF au parent : il ne garantit aucune valeur. Le reste dans le markup pour l'insistance semantique (un lecteur d'ecran doit l'entendre), il ne porte plus l'apparence. 🔴 500 : LE MAXIMUM REEL, il n'y a rien au-dessus. La CSS additionnelle du personnalisateur (post 92) ne charge Geist qu'en 200/300/400/500, si bien que 500, 600, 700 et 800 rendent TOUS le meme dessin. Ecrire 700 ici ne serait pas plus gras, seulement trompeur. Trois valeurs essayees le 02/09, dans cet ordre : 700, puis 600 (« diminue legerement le gras » — n'a RIEN change a l'ecran, Benjamin l'a vu tout de suite, d'ou la decouverte ci-dessus), puis 400, puis 500 sur sa demande. Les seuls crans reels au-dessus du texte courant (300) sont 400 et 500. ⚠️ Ne jamais « ajuster » une graisse de ce theme entre 500 et 800 : c'est une valeur qui ne se voit pas. Verifier d'abord ce que le post 92 charge. */ body.bd-a2 .bd-a4-preuve-reponse strong { font-weight: 500; } /* --- 3. Douleurs -------------------------------------------------------- Fond --ice : la section doit se distinguer du hero juste au-dessus sans passer en navy, qui est reserve au header et aux boutons. */ body.bd-a2 .bd-a4-mal { padding: clamp(4rem, 9vh, 7rem) 0; background: var(--ice); } body.bd-a2 .bd-a4-mal-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } body.bd-a2 .bd-a4-mal-case { background: var(--white); border-radius: 18px; box-shadow: var(--shadow); padding: 26px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } body.bd-a2 .bd-a4-mal-dit { margin: 0; font-size: 1.04rem; font-weight: 700; color: var(--ink); line-height: 1.35; letter-spacing: -0.01em; } body.bd-a2 .bd-a4-mal-cout { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--muted); } /* --- 5. Diagnostic ------------------------------------------------------ ⚠️ NI FOND NI COINS ICI : ils sont portes par le BLOC .bd-a4-diagnostic (voir « Par ou commencer : bande pleine page », plus bas dans cette feuille). La section n'a garde que sa respiration verticale, augmentee le 02/09 a sa demande (« un peu plus d'espace ») : le clamp est passe de 4/9vh/7rem a 5,5/11vh/9rem. Il lui faut cet air en plus parce que les degrades des deux bords mangent une centaine de pixels en haut et en bas ; sans cela le contenu commencerait dans le fondu. */ body.bd-a2 .bd-a4-diag { padding: clamp(5.5rem, 11vh, 9rem) 0; } body.bd-a2 .bd-a4-diag-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } body.bd-a2 .bd-a4-diag-bloc { background: var(--white); border-radius: 22px; box-shadow: var(--shadow); padding: 30px 28px; } /* Le bloc de droite porte l'action : c'est lui qu'on doit voir en premier. 🔴 IL NE PORTE PLUS DE FOND PROPRE (02/09). Il etait en --panneau, ce qui marchait tant que la section « Par ou commencer » etait sur le fond de page. Depuis qu'elle est devenue une BANDE en --panneau, ce bloc avait exactement la couleur de son propre fond : mesure identique au pixel, et a l'ecran ses contours disparaissaient. Il reprend donc le blanc de .bd-a4-diag-bloc, qui est aussi celui des cartes de la section Services (sa demande : « le meme background que les cartes qu'il y a dans les services »). 🔑 La hierarchie ne se perd pas, elle se DEPLACE : elle ne tient plus a la couleur mais a l'ombre, plus profonde ici que sur le bloc de gauche. Sur un fond bleu, un bloc blanc ressort de toute facon plus qu'un bloc bleu. ⚠️ Si la bande repassait un jour sur le fond de page, ce bloc pourrait retrouver son --panneau : les deux reglages vont ensemble. */ body.bd-a2 .bd-a4-diag-bloc--fort { box-shadow: 0 0 0 1px var(--line), 0 18px 40px -26px rgba(10, 23, 38, 0.45); } body.bd-a2 .bd-a4-diag-bloc h3 { margin: 0 0 1.2rem; font-size: 1.15rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; } body.bd-a2 .bd-a4-liste-cochee { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } body.bd-a2 .bd-a4-liste-cochee li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; line-height: 1.45; color: var(--muted); } body.bd-a2 .bd-a4-liste-cochee svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--accent); } body.bd-a2 .bd-a4-diag-prix { margin: 1.6rem 0 1.2rem; font-weight: 600; color: var(--ink); font-size: 0.98rem; } body.bd-a2 .bd-a4-diag-actions { display: flex; flex-wrap: wrap; gap: 12px; } /* --- 8. Pour qui / pas pour qui ----------------------------------------- ⚠️ PAS DE FOND, et c'est voulu (02/09) : le --ice qui etait ici est passe a « Pourquoi moi », juste en dessous. Ne pas le remettre « pour harmoniser », les deux sections se suivent et deux fonds colles feraient un seul bloc. */ body.bd-a2 .bd-a4-qui { padding: clamp(4rem, 9vh, 7rem) 0; } body.bd-a2 .bd-a4-qui-grille { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; } body.bd-a2 .bd-a4-qui-col { background: var(--white); border-radius: 22px; box-shadow: var(--shadow); padding: 30px 28px; } body.bd-a2 .bd-a4-qui-col h3 { margin: 0 0 1.4rem; display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; } body.bd-a2 .bd-a4-pastille { width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 700; flex-shrink: 0; } body.bd-a2 .bd-a4-pastille--oui { background: var(--ice); color: var(--accent); } /* Le refus se dit en gris, pas en rouge : on ecarte des projets, on n'alerte personne. Un rouge ici ferait accusation. */ body.bd-a2 .bd-a4-pastille--non { background: #e7ecf2; color: var(--muted); } body.bd-a2 .bd-a4-qui-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; } body.bd-a2 .bd-a4-qui-liste li { display: flex; flex-direction: column; gap: 3px; } body.bd-a2 .bd-a4-qui-liste strong { font-size: 0.96rem; color: var(--ink); font-weight: 700; letter-spacing: -0.01em; } body.bd-a2 .bd-a4-qui-liste span { font-size: 0.86rem; line-height: 1.45; color: var(--muted); } body.bd-a2 .bd-a4-qui-liste--non { grid-template-columns: 1fr; gap: 12px; } body.bd-a2 .bd-a4-qui-liste--non li { padding-left: 16px; position: relative; } body.bd-a2 .bd-a4-qui-liste--non li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 2px; border-radius: 2px; background: var(--line); } body.bd-a2 .bd-a4-qui-note { margin: 1.6rem 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--muted); border-top: 1px solid var(--line); padding-top: 1.1rem; } /* --- 9. Trois preuves --------------------------------------------------- PANNEAU recupere de « Pour qui / pas pour qui » le 02/09, a sa demande. ⚠️ CELLE-CI A BESOIN D'UNE LARGEUR, les deux autres non : mesuree a 1416px contre 1160px pour « Ce que j'entends » et le Diagnostic. Son bloc parent ne la bride pas. Sans max-width, son panneau serait plus large que les autres et l'alignement sauterait a l'oeil. Son couloir interne fait deja 1160px, comme celui du modele : le contenu ne bouge pas. */ body.bd-a2 .bd-a4-preuves { padding: clamp(4rem, 9vh, 7rem) 0; background: var(--panneau); border-radius: 32px; max-width: 1160px; margin-inline: auto; } body.bd-a2 .bd-a4-preuves-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } body.bd-a2 .bd-a4-preuve-case { background: var(--white); border-radius: 22px; box-shadow: var(--shadow); padding: 30px 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } body.bd-a2 .bd-a4-preuve-chiffre { margin: 0 0 4px; display: flex; align-items: baseline; gap: 8px; } body.bd-a2 .bd-a4-preuve-chiffre strong { font-size: 2.6rem; font-weight: 700; color: var(--accent); letter-spacing: -0.04em; line-height: 1; } body.bd-a2 .bd-a4-preuve-chiffre span { font-size: 0.86rem; color: var(--muted); } body.bd-a2 .bd-a4-preuve-case h3 { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1.3; } body.bd-a2 .bd-a4-preuve-txt { margin: 0; font-size: 0.93rem; line-height: 1.55; color: var(--muted); } body.bd-a2 .bd-a4-preuve-lien { margin-top: auto; padding-top: 0.8rem; display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 600; color: var(--accent); text-decoration: none; } body.bd-a2 .bd-a4-preuve-lien svg { width: 15px; height: 15px; } body.bd-a2 .bd-a4-preuve-lien:hover { text-decoration: underline; } /* --- 11. CTA final + formulaire ----------------------------------------- */ body.bd-a2 .bd-a4-cta { padding: clamp(4rem, 9vh, 7rem) 0; background: var(--ice); } body.bd-a2 .bd-a4-cta-grille { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: start; } body.bd-a2 .bd-a4-cta-mot h2 { margin: 0; font-size: var(--taille-clients); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; } body.bd-a2 .bd-a4-cta-mot h2 .bd-hl { color: var(--accent); } body.bd-a2 .bd-a4-cta-mot .bd-a4-chapo { margin-left: 0; max-width: 30rem; } body.bd-a2 .bd-a4-cta-rassure { list-style: none; margin: 1.8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } body.bd-a2 .bd-a4-cta-rassure li { display: flex; align-items: center; gap: 9px; font-size: 0.94rem; color: var(--muted); } body.bd-a2 .bd-a4-cta-rassure svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; } body.bd-a2 .bd-a4-cta-direct { margin: 1.8rem 0 0; display: flex; flex-wrap: wrap; gap: 18px; font-size: 0.94rem; } body.bd-a2 .bd-a4-cta-direct a { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 600; text-decoration: none; } body.bd-a2 .bd-a4-cta-direct svg { width: 15px; height: 15px; color: var(--accent); } body.bd-a2 .bd-a4-cta-direct a:hover { color: var(--accent); } body.bd-a2 .bd-a4-cta-form { background: var(--white); border-radius: 22px; box-shadow: var(--shadow); padding: 30px 28px; } body.bd-a2 .bd-a4-form-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } body.bd-a2 .bd-a4-champ { margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; } body.bd-a2 .bd-a4-champ label { font-size: 0.84rem; font-weight: 600; color: var(--ink); } body.bd-a2 .bd-a4-champ label span { color: var(--accent); } body.bd-a2 .bd-a4-champ input, body.bd-a2 .bd-a4-champ textarea { width: 100%; font: inherit; font-size: 0.95rem; color: var(--ink); background: var(--page); border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; } body.bd-a2 .bd-a4-champ textarea { resize: vertical; min-height: 96px; } body.bd-a2 .bd-a4-champ input:focus, body.bd-a2 .bd-a4-champ textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26, 161, 244, 0.18); } /* Le piege a robots : hors ecran plutot que display:none, qui fait sauter certains bots au-dessus du champ. Il reste hors tabulation par tabindex. */ body.bd-a2 .bd-a4-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } body.bd-a2 .bd-a4-form-pied { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 0.4rem; } body.bd-a2 .bd-a4-form-note { font-size: 0.84rem; color: var(--muted); } /* --- 12. Pied utile ----------------------------------------------------- */ body.bd-a2 .bd-a4-pied { padding: clamp(3rem, 7vh, 5rem) 0; border-top: 1px solid var(--line); } body.bd-a2 .bd-a4-pied-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } body.bd-a2 .bd-a4-pied h3 { margin: 0 0 1rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 700; } body.bd-a2 .bd-a4-pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } body.bd-a2 .bd-a4-pied li, body.bd-a2 .bd-a4-pied a { font-size: 0.92rem; color: var(--muted); line-height: 1.4; text-decoration: none; } body.bd-a2 .bd-a4-pied a:hover { color: var(--accent); } /* Le bouton de rendez-vous doit se lire comme les liens voisins, pas comme un bouton de formulaire : on remet a plat ce que le navigateur ajoute. */ body.bd-a2 .bd-a4-pied-rdv { appearance: none; background: none; border: 0; padding: 0; font: inherit; font-size: 0.92rem; color: var(--accent); font-weight: 600; cursor: pointer; text-align: left; } /* --- Adaptations en largeur --------------------------------------------- */ @media (max-width: 1000px) { body.bd-a2 .bd-a4-mal-liste, body.bd-a2 .bd-a4-preuves-liste { grid-template-columns: repeat(2, 1fr); } body.bd-a2 .bd-a4-diag-grille, body.bd-a2 .bd-a4-qui-grille, body.bd-a2 .bd-a4-cta-grille { grid-template-columns: 1fr; } body.bd-a2 .bd-a4-pied-grille { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { body.bd-a2 .bd-a4-couloir { padding: 0 20px; } body.bd-a2 .bd-a4-mal-liste, body.bd-a2 .bd-a4-preuves-liste, body.bd-a2 .bd-a4-qui-liste, body.bd-a2 .bd-a4-form-duo { grid-template-columns: 1fr; } body.bd-a2 .bd-a4-pied-grille { grid-template-columns: 1fr; } } /* ========================================================================= * ACCUEIL 4 — remodelage CRO (02/09) * Formulaire d'audit dans le diagnostic, CTA final a deux actions, barre * collante mobile. Rien ici ne sort de la portee .bd-a4-*. * ====================================================================== */ /* --- Le formulaire d'audit, dans le bloc « Ce que vous recevez » -------- */ body.bd-a2 .bd-a4-diag-bloc--fort .bd-a4-form { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); } body.bd-a2 .bd-a4-diag-ou { margin: 1.1rem 0 0; font-size: 0.88rem; color: var(--muted); } /* Le lien de repli se lit comme du texte, pas comme un second bouton : il ne doit pas concurrencer l'action principale juste au-dessus. */ body.bd-a2 .bd-a4-diag-rdv { appearance: none; background: none; border: 0; padding: 0; font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--accent); cursor: pointer; text-decoration: underline; } /* --- Retour d'envoi ------------------------------------------------------ */ body.bd-a2 .bd-a4-retour { margin: 0 0 1rem; padding: 11px 14px; border-radius: 12px; font-size: 0.92rem; line-height: 1.45; } body.bd-a2 .bd-a4-retour--ok { background: var(--ice); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); } body.bd-a2 .bd-a4-retour--err { background: #fdf0ee; color: #8a3324; box-shadow: inset 0 0 0 1px #f0c9c1; } /* --- CTA final : la colonne d'actions ------------------------------------ */ body.bd-a2 .bd-a4-cta-actions { background: var(--white); border-radius: 22px; box-shadow: var(--shadow); padding: 30px 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } body.bd-a2 .bd-a4-cta-actions .bd-a2-btn { width: auto; } body.bd-a2 .bd-a4-cta-zone { margin: 0; font-size: 0.86rem; color: var(--muted); } body.bd-a2 .bd-a4-cta-actions .bd-a4-cta-direct { margin: 0.6rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); width: 100%; } /* --- Barre d'action collante, sous 760px seulement ---------------------- ⚠️ Cachee par defaut, y compris a l'impression : elle n'existe que sur la page 152 et seulement sur petit ecran. Le padding-bottom du corps evite qu'elle recouvre le pied de page. */ body.bd-a2 .bd-a4-collante { display: none; } @media (max-width: 760px) { body.bd-a2 .bd-a4-collante { display: flex; align-items: center; gap: 10px; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; padding: 10px; border-radius: 999px; background: var(--white); box-shadow: 0 0 0 1px var(--line), 0 12px 30px -12px rgba(10, 23, 38, 0.45); } body.bd-a2 .bd-a4-collante-tel { width: 44px; height: 44px; flex-shrink: 0; border-radius: 999px; background: var(--ice); color: var(--accent); display: flex; align-items: center; justify-content: center; } body.bd-a2 .bd-a4-collante-tel svg { width: 20px; height: 20px; } body.bd-a2 .bd-a4-collante-cta { flex: 1; text-align: center; padding: 13px 16px; border-radius: 999px; background: var(--ink); color: var(--white); font-weight: 700; font-size: 0.95rem; text-decoration: none; } body.bd-a2 .bd-a4-pied { padding-bottom: 6rem; } } @media print { body.bd-a2 .bd-a4-collante { display: none; } } /* --- La bascule « j'ai un site » / « je n'en ai pas » -------------------- * ⚠️ On ne se sert PAS de l'attribut hidden pour cacher les vues : dans ce * theme, des parents en display:flex le neutralisent. C'est une regle de * classe qui decide, et elle gagne parce qu'elle est plus specifique. * Etat de depart cote serveur : « site ». Sans JavaScript, la vue « site » * reste affichee et le formulaire part normalement. * ====================================================================== */ body.bd-a2 .bd-a4-bascule { display: inline-flex; gap: 4px; margin-top: 1.8rem; padding: 4px; border-radius: 999px; background: var(--white); box-shadow: 0 0 0 1px var(--line); } body.bd-a2 .bd-a4-bascule-btn { appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--muted); background: transparent; padding: 9px 18px; border-radius: 999px; transition: background 0.18s ease, color 0.18s ease; } body.bd-a2 .bd-a4-bascule-btn:hover { color: var(--ink); } body.bd-a2 .bd-a4-bascule-btn.bd-actif { background: var(--ink); color: var(--white); } /* Les vues : celle du cas actif s'affiche, l'autre sort du flux. */ body.bd-a2 .bd-a4-diag .bd-a4-cas { display: none; } body.bd-a2 .bd-a4-diag[data-bd-cas="site"] .bd-a4-cas[data-bd-cas-vue="site"], body.bd-a2 .bd-a4-diag[data-bd-cas="sans"] .bd-a4-cas[data-bd-cas-vue="sans"] { display: flex; } /* Le champ du formulaire est un

: il reprend la mise en colonne des autres champs, pas le flex des listes. */ body.bd-a2 .bd-a4-diag[data-bd-cas="site"] p.bd-a4-cas[data-bd-cas-vue="site"], body.bd-a2 .bd-a4-diag[data-bd-cas="sans"] p.bd-a4-cas[data-bd-cas-vue="sans"] { display: flex; flex-direction: column; } @media (max-width: 560px) { body.bd-a2 .bd-a4-bascule { display: flex; width: 100%; } body.bd-a2 .bd-a4-bascule-btn { flex: 1; padding: 10px 8px; font-size: 0.84rem; } } /* --- Equilibre des deux cartes du diagnostic ---------------------------- * Mesure du 02/09 : 299px a gauche contre 713 a droite. La carte de gauche * s'arretait en l'air et laissait 414px de vide sous elle. * * Deux gestes, dans cet ordre : * 1. les cartes s'etirent a la meme hauteur (stretch), donc plus de trou * ENTRE elles ; * 2. le contrepoint « ce que je ne fais pas » se cale en bas de la carte, * et l'espace restant tombe au MILIEU, entre la liste et lui. Un blanc * au milieu se lit comme une respiration ; un blanc sous une carte se * lit comme une erreur. * ====================================================================== */ body.bd-a2 .bd-a4-diag-grille { align-items: stretch; } body.bd-a2 .bd-a4-diag-bloc { display: flex; flex-direction: column; } /* La liste respire un peu plus : six lignes serrees dans une carte deux fois plus haute que leur contenu, ca se voyait. */ body.bd-a2 .bd-a4-diag-bloc .bd-a4-liste-cochee { /* 20px et non 12 : six lignes serrees en haut d'une carte deux fois plus haute que leur contenu, ca se voyait. Chaque pas d'ecart ici retire autant au blanc du milieu. */ gap: 20px; } /* * 🔑 L'ESPACE SE PARTAGE EN DEUX, IL NE S'ENTASSE PAS EN UN SEUL TROU. * * MESURE DU 11/09 : en ajoutant l'extrait de constat, la carte de droite est * passee de 729 a 916px. La carte de gauche s'etire a la meme hauteur (c'est * le stretch voulu depuis le 02/09, qui empeche une carte de s'arreter en * l'air), et tout l'espace en trop tombait d'un bloc avant le contrepoint : * 119px de blanc avant, 338px apres. Un trou, au milieu d'une carte. * * Deux marges automatiques dans un meme conteneur flex se partagent l'espace * libre A PARTS EGALES : la phrase de methode en prend une moitie, le * contrepoint l'autre. La carte respire au lieu de bailler, et la hauteur * totale ne bouge pas d'un pixel. * * ⚠️ LA PHRASE DE METHODE SEULEMENT, PAS TOUT `.bd-a4-comment`. La note * « Pas de PDF long » du parcours sans site porte la meme classe mais vit * dans la carte de DROITE, ou elle doit rester collee sous les livrables. * D'ou le passage par le corps du pli, qui n'existe qu'a gauche. */ body.bd-a2 .bd-a4-plus-corps > .bd-a4-comment { margin-top: auto; } body.bd-a2 .bd-a4-nope { margin-top: auto; padding-top: 1.4rem; border-top: 1px solid var(--line); } body.bd-a2 .bd-a4-diag[data-bd-cas="site"] .bd-a4-nope[data-bd-cas-vue="site"], body.bd-a2 .bd-a4-diag[data-bd-cas="sans"] .bd-a4-nope[data-bd-cas-vue="sans"] { display: block; } body.bd-a2 .bd-a4-nope-titre { margin: 0 0 0.9rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 700; } body.bd-a2 .bd-a4-nope ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } body.bd-a2 .bd-a4-nope li { position: relative; padding-left: 18px; font-size: 0.9rem; line-height: 1.45; color: var(--muted); } /* Un trait, pas une croix rouge : on ecarte des pratiques, on n'alerte pas. Meme parti pris que la colonne « pas pour vous » plus bas dans la page. */ body.bd-a2 .bd-a4-nope li::before { content: ""; position: absolute; left: 0; top: 10px; width: 9px; height: 2px; border-radius: 2px; background: var(--line); } /* La methode : une phrase entre la liste et le contrepoint. Elle est en retrait (fond ice, filet a gauche) pour se distinguer des puces sans ajouter un troisieme titre dans une carte qui en a deja deux. */ body.bd-a2 .bd-a4-comment { margin: 1.8rem 0 0; padding: 18px 18px; border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--ice); font-size: 0.9rem; line-height: 1.5; color: var(--muted); } body.bd-a2 .bd-a4-diag[data-bd-cas="site"] p.bd-a4-comment[data-bd-cas-vue="site"], body.bd-a2 .bd-a4-diag[data-bd-cas="sans"] p.bd-a4-comment[data-bd-cas-vue="sans"] { display: block; } /* ========================================================================= * ACCUEIL 4 — L'ORDRE DE LECTURE DE LA SECTION D'AUDIT (11/09) * * 🔴 LE PROBLEME, MESURE SUR TELEPHONE : sous 1000px la grille passe en UNE * colonne, et le bloc « Ce que je regarde » vient AVANT « Ce que vous * recevez ». L'artisan faisait donc defiler six puces, une phrase de methode * et trois contrepoints avant d'apercevoir le formulaire. Le mur de texte * passait devant l'action, sur l'ecran ou l'on a le moins de patience. * * Deux gestes, un par largeur, et rien d'autre ne bouge. * ====================================================================== */ /* --- Petites largeurs : le formulaire d'abord --------------------------- */ @media (max-width: 1000px) { /* 🔑 `order` ET PAS UN DEPLACEMENT DANS LE HTML. Le DOM garde l'ordre de lecture du desktop, ou les deux cartes sont cote a cote et se lisent de gauche a droite. Ici, une seule colonne : c'est l'ACTION qui monte. 🔴 L'ORDRE DES DEUX LIGNES CI-DESSOUS EST LE CORRECTIF. Le bloc fort porte LES DEUX classes (`bd-a4-diag-bloc bd-a4-diag-bloc--fort`), et les deux selecteurs ont exactement la meme specificite : c'est donc le DERNIER declare qui gagne. Ecrite en premier, la regle `--fort` etait annulee par la generale, les deux cartes recevaient `order: 2`, et l'ordre du DOM restait — mesure a 390px, le formulaire toujours sous le mur de puces. La generale d'abord, l'exception ensuite. */ body.bd-a2 .bd-a4-diag-bloc { order: 2; } body.bd-a2 .bd-a4-diag-bloc--fort { order: 1; } /* Replie, la carte de detail n'a plus besoin de sa hauteur de carte. */ body.bd-a2 .bd-a4-plus.bd-replie { margin: 0; } /* 🔴 LE PLI SE FERME ICI, ET NULLE PART AILLEURS. Le corps porte un `display: flex` : l'attribut `hidden` du HTML n'aurait aucun effet sous un display explicite. Et la regle vit DANS ce media query, pour ne jamais contredire le `display: contents` du grand ecran. */ body.bd-a2 .bd-a4-plus.bd-replie .bd-a4-plus-corps { display: none; } } /* --- Grandes largeurs : le formulaire suit le regard -------------------- */ @media (min-width: 1001px) { /* * 🔴 UN ITEM ETIRE NE PEUT PAS GLISSER. `align-items: stretch` (la mesure * du 02/09, qui a supprime les 414px de vide entre les deux cartes) donne * a chaque carte la hauteur de la LIGNE : un `sticky` n'a alors plus rien * a parcourir, il ne colle jamais. * * 🔑 D'OU `align-self: start` SUR CE SEUL BLOC. La carte de gauche garde * le `stretch` de la grille, donc elle continue de s'etirer a la hauteur * de la ligne : le trou du 02/09 ne revient pas. Et comme c'est ce bloc-ci * qui est le plus haut des deux, c'est encore lui qui FIXE cette hauteur — * a l'ecran, rien ne bouge tant qu'on n'a pas fait defiler. * * ⚠️ `top` reprend le calcul de la colonne collante de la FAQ, au mot * pres : le theme a un header FIXE de --head, et une valeur ecrite deux * fois finirait par diverger d'un pixel a la premiere retouche. */ body.bd-a2 .bd-a4-diag-bloc--fort { align-self: start; position: sticky; top: calc(var(--head) + 24px); } } /* --- Le pli « Voir ce que je regarde » ---------------------------------- */ /* 🔑 Il est rendu OUVERT par le serveur et referme par le script sous 1000px. Sans JavaScript, la carte reste donc exactement celle d'avant. */ body.bd-a2 .bd-a4-plus { display: flex; flex-direction: column; flex: 1; } body.bd-a2 .bd-a4-plus-corps { display: flex; flex-direction: column; flex: 1; } body.bd-a2 .bd-a4-plus-tete { /* Un vrai