/* Accueil 6 — BIO-DIGITAL, accueil temporaire pendant la refonte. * * Tout vit sous body.bd-a6 : rien ne sort de cette page, et rien n'est * restyle globalement. * * ⚠️ CETTE FEUILLE ARRIVE APRES css/bd-accueil-2.css (dependance declaree * dans functions-accueil-6.php). Elle s'appuie dessus : les boutons * (.bd-a2-btn), le libelle de section (.bd-a2-kicker), la carte de * l'interlocuteur (.bd-wc*), le grand lockup (.bd-a2-hero-logo), les champs * (.bd-a4-champ) et les retours d'envoi (.bd-a4-retour) sont deja habilles * la-bas. On ne les redessine pas, on les PLACE. * * ⚠️ LA CSS ADDITIONNELLE DU PERSONNALISATEUR (post 92) S'APPLIQUE AUSSI, * puisque le porte la classe bd-a2 : elle impose la police Geist en * !important et la graisse 300 aux paragraphes, 500 aux titres. Les regles * ci-dessous montent a deux classes la ou il faut la battre. Si un reglage * « ne prend pas » malgre une CSS correcte : regarder le post 92 EN PREMIER. */ /* ========================================================================= * Jetons. * * 🔑 DEPUIS LE 11/09 ILS NE FONT QUE POINTER VERS CEUX DE L'ACCUEIL 4. * La page avait sa propre palette (#0b1f33 pour les titres, #2b7a9b pour les * libelles, #e6eef4 pour les filets) : proche, mais jamais tout a fait la * meme, et les deux pages ne se superposaient pas. Benjamin a demande les * memes couleurs. Les noms --a6-* restent, parce qu'ils sont ecrits dans * cinquante regles plus bas et qu'un alias coute moins qu'un remplacement * massif — mais leur VALEUR est desormais celle de la charte, une seule fois. * ⚠️ Ne pas y remettre un code couleur en dur : la charte se change dans * body.bd-a2 (bd-accueil-2.css), pas ici. * ====================================================================== */ body.bd-a6 { --a6-titre: var(--ink); --a6-corps: var(--muted); --a6-trait: var(--line); --a6-rayon: 24px; /* L'ombre de la carte de l'accueil 4, au pixel (.bd-wc). */ --a6-ombre: 0 18px 40px -18px rgba(10, 23, 38, 0.28); /* Hauteur reelle de l'en-tete collant. Les ancres s'en servent pour ne pas passer dessous (scroll-margin-top). */ --a6-head: 64px; /* 🔑 LE RYTHME DE LA PAGE : L'ECART ENTRE DEUX SECTIONS, ECRIT UNE FOIS. 123px sur telephone, 145 a partir de 1440. Toutes les respirations verticales entre sections en decoulent : voir les quatre retraits plus bas, chacun ecrit en fonction de ce jeton et jamais en dur. Mesure du 11/09 au soir, avant reglage : les quatre ecarts valaient 248, 212, 216 et 72. Le dernier, avant le pied, decrochait completement. Egalises a 184-216, puis RESSERRES DE 33 % le 11/09 (sa demande) : 184 -> 123 et 216 -> 145, le jeton entier multiplie par 0,67. ⚠️ CE JETON EST LA SEULE VALEUR A TOUCHER pour aerer ou resserrer la page. En changer un retrait isolement casse l'egalite. ⚠️ IL NE PEUT PLUS DESCENDRE BEAUCOUP : « Parlons-en » apporte deja 120px de chaque cote (ses fondus), donc un jeton sous 120px rendrait les soustractions voisines negatives, et un padding negatif est SILENCIEUSEMENT IGNORE : l'ecart bondirait au lieu de retrecir. */ --a6-entre: clamp(123px, calc(115px + 2.04vw), 145px); /* Retrait du panneau du hero. Ce sont les valeurs de l'accueil 4. */ --a6-inset: 80px; /* 🔴 LA TAILLE DES GRANDS TITRES DE CETTE PAGE, SUR ORDINATEUR (12/09 soir). Demande : « baisse tres legerement la font-size du H1 », francais comme espagnol. Elle etait a --taille-h1 nu, le jeton de la charte : 51,09px a 1440 et 52 au plafond. 🔑 UN COEFFICIENT SUR LE JETON, PAS UNE VALEUR EN DUR. 0,95 vaut 48,53px a 1440 et 49,4 au plafond, soit un cran a peine visible — c'est ce qu'il demande. Et surtout la page continue de SUIVRE la charte : si --taille-h1 bouge, ce titre bouge avec, toujours 5 % en dessous. ⚠️ --taille-h1 N'EST PAS TOUCHE : il appartient a la charte et habille aussi les accueils 2 et 4, qui gardent leur titre tel quel. 🔑 UN SEUL JETON POUR LE H1 ET LES TROIS TITRES DE SECTION. Il a demande qu'ils aient exactement la meme taille : les lier par une variable est la seule facon de garantir qu'ils ne divergent pas au prochain reglage. ⚠️ SANS EFFET SUR TELEPHONE : sous 800px le H1 et les titres de section sont poses a 2,6rem en dur, une valeur qu'il a choisie sur maquette. */ --a6-h1: calc(var(--taille-h1) * 0.95); background: var(--page); color: var(--a6-corps); } /* ⚠️ Toutes les sections ciblees par une ancre reculent leur point d'arret de la hauteur de l'en-tete. Sans ca, « Auditer mon site » amenait le titre de la section SOUS la barre collante. */ body.bd-a6 [id] { scroll-margin-top: calc(var(--a6-head) + 12px); } /* 🔴 SAUF « PARLONS-EN », QUI S'ARRETAIT DANS LE VIDE. Sa bande bleue s'ouvre sur 120px de degrade : s'arreter a son bord, c'est s'arreter dans le fondu, et on arrivait sur une bande vide. MESURE a 1280, sous le bas de l'en-tete : la carte du formulaire tombait a 132px, contre 33px pour « Audit technique », qu'il donne en exemple. Sur telephone, le chapeau tombait a 132px contre 15px pour l'audit. On saute donc 100px : la carte arrive a 32px de l'en-tete des deux cotes, comme celle de l'audit, et il reste 20px de fondu visibles au-dessus, assez pour que la bande bleue ne commence pas par un bord net. ⚠️ Un scroll-margin NEGATIF, et c'est legitime : la propriete accepte les longueurs negatives, et c'est la seule facon de dire « arrete-toi PLUS BAS que le bord de l'element ». L'alternative aurait ete de deplacer l'ancre sur le contenu, ce qui changeait l'adresse #projet et tous les liens. ⚠️ SI LA HAUTEUR DU FONDU CHANGE (voir .bd-a6-projet), ce 100 est a remesurer : les deux vont ensemble. */ body.bd-a6 #projet { scroll-margin-top: calc(var(--a6-head) + 12px - 100px); } /* Le focus clavier, partout et visible. Il n'est jamais retire : c'est le seul reperage de qui navigue sans souris. */ body.bd-a6 a:focus-visible, body.bd-a6 button:focus-visible, body.bd-a6 input:focus-visible, body.bd-a6 textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } /* ========================================================================= * 🔴 RENDRE L'EN-TETE ET LE PIED A LA PAGE. * * bd-accueil-2.css porte, ligne 122 : « body.bd-a2 > header:not(.bd-a2-chrome), * body.bd-a2 > footer:not(.bd-a2-foot) { display: none !important } ». Elle * existe pour masquer le chrome du theme si get_header() etait appele. Notre * en-tete et notre pied sont des enfants directs du et ne portent pas * ces deux classes : ils etaient donc EFFACES, sans erreur et sans trace — * mesure a la capture, hauteur 0. * * On les rend en montant d'un cran la specificite (body.bd-a2.bd-a6, soit * trois classes contre deux) : la regle de l'accueil 2 continue de masquer ce * qu'elle doit masquer, on ne la touche pas. * ⚠️ Ne pas retirer ce bloc en « nettoyant » un !important qui a l'air inutile. * ====================================================================== */ body.bd-a2.bd-a6 > header.bd-a6-chrome, body.bd-a2.bd-a6 > footer.bd-a6-pied { display: block !important; } /* ========================================================================= * Couloir commun. Meme largeur que celui de l'accueil 4 (1160px) : les deux * pages doivent se superposer quand on passe de l'une a l'autre. * ⚠️ Le HERO ne le porte pas : c'est un panneau large, voir plus bas. * ====================================================================== */ body.bd-a6 .bd-a6-couloir { width: 100%; max-width: 1160px; margin: 0 auto; /* ⚠️ padding EN SIDE UNIQUEMENT : la gouttiere laterale ne doit jamais tomber a zero, quelle que soit la largeur. */ padding-left: 24px; padding-right: 24px; box-sizing: border-box; } /* ========================================================================= * EN-TETE COLLANT * ====================================================================== */ /* 🔑 LE VERRE TREMPE DE L'ACCUEIL 4, au reglage pres (demande du 11/09 au soir). Les valeurs sont celles, mesurees, de .bd-a2-chrome. ⚠️ MEME TEINTE AU REPOS ET AU DEFILEMENT : seul le FLOU s'ajoute. Pas de changement de couleur, pas d'ombre, pas de bordure coloree — c'est ce qui fait la difference entre du verre et une barre posee sur la page. L'en-tete d'ici portait un fond plus opaque (0,82) qui virait au blanc et se soulignait d'un filet au defilement : les trois sont partis. */ body.bd-a6 .bd-a6-chrome { position: sticky; top: 0; z-index: 50; 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; } /* Verre trempe des qu'on defile : le contenu passe derriere, nettoye. */ body.bd-a6 .bd-a6-chrome.is-glass { -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); } /* ⚠️ La barre d'admin de WordPress decale le document de 32px. Un en-tete collant a top:0 se retrouve dessous : on lui rend ses 32px. Invisible pour un visiteur, mais c'est l'apercu connecte qui sert de reference. */ @media screen and (min-width: 783px) { body.bd-a6.admin-bar .bd-a6-chrome { top: 32px; } } /* 🔑 PLEINE LARGEUR, COMME L'EN-TETE DE L'ACCUEIL 4 (demande du 11/09 au soir). Il y avait ici un couloir de 1160px centre, qui alignait le logo sur le contenu des sections ; .bd-a2-chrome, lui, va d'un bord a l'autre avec 28px de retrait. Le logo part donc a gauche de l'ecran et le bouton de menu a droite, quelle que soit la largeur. ⚠️ 28px, la valeur de l'accueil 4, et pas 24 : les deux en-tetes doivent se superposer quand on passe d'une page a l'autre. */ body.bd-a6 .bd-a6-chrome-inner { width: 100%; max-width: none; margin: 0; padding: 10px 28px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--a6-head); } body.bd-a6 .bd-a6-logo { display: flex; align-items: center; text-decoration: none; color: var(--a6-titre); flex-shrink: 0; } /* Le lockup navy (ratio 3.71:1). La hauteur pilote, la largeur suit. 32px : la valeur de .bd-a2-mark, le logo d'en-tete de l'accueil 4. */ body.bd-a6 .bd-a6-mark { display: block; height: 32px; width: auto; max-width: 220px; object-fit: contain; object-position: left center; } body.bd-a6 .bd-a6-word { font-size: 16px; font-weight: 600; letter-spacing: 0.01em; color: var(--a6-titre); } body.bd-a6 .bd-a6-word span { font-weight: 400; color: var(--a6-corps); } body.bd-a6 .bd-a6-chrome-droite { display: flex; align-items: center; gap: 12px; min-width: 0; } /* ⚠️ CE BADGE N'EST PLUS DANS L'EN-TETE depuis le 11/09 au soir : il vit au-dessus de la carte, dans le hero (voir .bd-a6-hero-cote). Le fond est blanc et non --ice : sur le panneau bleu du hero, une pastille bleu pale disparaissait. */ body.bd-a6 .bd-a6-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px; border-radius: 100px; background: #ffffff; border: 1px solid var(--a6-trait); color: var(--accent-dark); font-size: 12.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; } /* 🔑 LE POINT QUI RESPIRE (demande du 11/09 au soir). C'est un ::before et non un dans le markup : le badge est rendu a TROIS endroits — deux dans le hero, un dans le pied — et un pseudo-element les sert tous d'un coup. Il est purement decoratif, donc invisible aux lecteurs d'ecran par construction : rien a declarer. ⚠️ L'ANIMATION EST CELLE DES CHAPEAUX DE FORMULAIRE, bd-a6-pastille, et non une copie : meme halo bleu qui s'ouvre et se dissipe, meme duree. Une seconde definition aurait fait deux endroits a corriger. ⚠️ Le badge etant en flex, le point est un ELEMENT DE FLEX : c'est le gap de 8px qui l'ecarte du texte, pas une marge a lui. */ body.bd-a6 .bd-a6-badge::before { content: ""; width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--accent); animation: bd-a6-pastille 2.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { body.bd-a6 .bd-a6-badge::before { animation: none; } } body.bd-a6 .bd-a6-tel { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 100px; border: 1px solid var(--a6-trait); background: #ffffff; color: var(--a6-titre); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: border-color 0.25s ease; } body.bd-a6 .bd-a6-tel:hover { border-color: var(--ink); } /* ========================================================================= * MENU PLEIN ECRAN * ====================================================================== */ /* --- Les deux boutons du bas : a gauche, a leur largeur ---------------- * Demande du 11/09 au soir. bd-accueil-2.css les etire d'un bord a l'autre * (« width: 100% ») et centre leur libelle : dans le menu du theme, c'est le * dessin voulu. Ici les boutons de toute la page gardent leur largeur * naturelle, et le menu ne doit pas faire exception. * ⚠️ IL FAUT LES TROIS DECLARATIONS. « align-items: flex-start » seul ne * suffit pas : un enfant a width:100% reste large quoi qu'il arrive. Et sans * rendre le retrait a sa valeur de base, les boutons resteraient plus hauts * que partout ailleurs (le menu les epaissit a 0,95rem). * ====================================================================== */ body.bd-a6 .bd-a2-mm-actions { align-items: flex-start; } body.bd-a6 .bd-a2-mm-actions .bd-a2-btn { width: auto; justify-content: flex-start; padding: 0.75rem 1.15rem 0.75rem 1.4rem; } /* --- Les reseaux, alignes a gauche ------------------------------------- * Demande du 11/09 au soir, sur les deux tailles d'ecran. bd-accueil-2.css les * centre ; ici la navigation, les boutons et les reseaux partent tous du meme * bord gauche, et une rangee centree au milieu de trois blocs alignes se * lisait comme un oubli. * ====================================================================== */ body.bd-a6 .bd-a2-mm-socials { justify-content: flex-start; } /* --- Sur telephone : la navigation descend vers les boutons ------------ * Demande du 11/09 au soir. Elle etait collee en haut, loin des deux actions. * * 🔑 DEUX MARGES AUTOMATIQUES ET UN ECART FIXE : l'espace libre se partage * au-dessus des liens et sous les boutons, et les deux blocs restent souds * l'un a l'autre par les 40px du milieu. Le groupe descend donc vers le * centre bas de l'ecran, sans qu'aucune hauteur ne soit ecrite. * ⚠️ Le padding du bloc d'actions est remis a zero : sinon il s'ajouterait * aux 40px et l'ecart ne serait plus celui qu'on lit ici. * ====================================================================== */ @media (max-width: 899px) { body.bd-a6 .bd-a2-mm-links { margin-top: auto; } body.bd-a6 .bd-a2-mm-actions { margin-top: 40px; margin-bottom: auto; padding-top: 0; } body.bd-a6 .bd-a2-mm-socials { margin-top: 0; } } /* --- Sur grand ecran : le fond du hero --------------------------------- * Demande du 11/09 au soir. bd-accueil-2.css pose ici le fond de page plus un * halo bleu radial ; le menu prend desormais --panneau, le bleu du panneau * d'ouverture, comme le hero et comme le pied. La page entiere s'ouvre et se * ferme sur la meme couleur. * ⚠️ Le halo radial part avec : deux voiles bleus l'un sur l'autre donnaient * une tache plus claire au milieu du panneau. * ⚠️ Grand ecran seulement : sous 900px le menu occupe tout le telephone, et * un aplat bleu plein ecran y pese trop. * ====================================================================== */ /* Sur telephone le panneau est transparent et ne fait que porter les trois blocs : le menu y reste plein ecran, et c'est .bd-a2-mm qui garde son fond et son retrait. « flex: 1 » lui donne toute la hauteur, sans quoi les marges automatiques des blocs n'auraient rien a repartir. */ body.bd-a6 .bd-a6-mm-panneau { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; } @media (min-width: 900px) { /* 🔑 LE MENU N'OCCUPE PLUS LA PAGE : UN PANNEAU DE 33% A DROITE, ET UN * VOILE DE VERRE SUR LE RESTE (demande du 11/09 au soir). * * .bd-a2-mm cesse d'etre le menu pour devenir le VOILE : meme recette que * l'en-tete — rgba(244, 248, 252, 0.55) plus un flou de 16px et une * saturation de 130% — si bien que la page reste lisible derriere, mais * nettoyee. Son retrait passe au panneau, qui porte desormais le fond. * * ⚠️ « align-items: flex-end » et non « justify-content » : .bd-a2-mm est * une colonne, c'est donc l'axe TRANSVERSE qui pousse le panneau a droite. * ⚠️ Le bouton de fermeture est en absolu par rapport a .bd-a2-mm, a * l'emplacement exact du burger : le panneau etant a droite, il tombe * dessus sans rien a regler. * ⚠️ min-width : a 33%, un ecran de 1000px donnerait 330px de panneau, ou * « Prendre rendez-vous » (216px) et ses retraits tiennent mal. */ body.bd-a6 .bd-a2-mm { background: rgba(244, 248, 252, 0.55); -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); padding: 0; align-items: flex-end; /* 🔑 LE VOILE NE FAIT QUE SE FONDRE. La feuille partagee lui donne un « translateY(-8px) » pour le menu plein ecran du telephone ; ici il ferait descendre le panneau de 8px en meme temps qu'il glisse, et le mouvement paraitrait de travers. */ transform: none; /* 🔴 LA DUREE DOIT VALOIR CELLE DU PANNEAU, PAS MOINS. « visibility » ne s'interpole pas : elle bascule a la FIN de la transition. Laissee a 0,35s pendant que le panneau glisse en 0,42s, elle coupait la sortie net a 83% du chemin — le panneau disparaissait d'un coup au lieu de finir sa course. */ transition: opacity 0.42s ease, visibility 0.42s ease; } body.bd-a6 .bd-a6-mm-panneau { width: 33%; min-width: 380px; height: 100%; flex: none; box-sizing: border-box; padding: var(--head) 40px 32px; background: var(--panneau); /* Un filet a peine visible detache le panneau du verre, la ou les deux bleus se touchent. */ border-left: 1px solid rgba(10, 23, 38, 0.06); /* Le centrage vertical du contenu vivait sur .bd-a2-mm ; il descend ici avec les blocs. */ justify-content: center; /* 🔑 IL ENTRE PAR LA DROITE ET IL SORT PAR LA DROITE (demande du 12/09). Au repos il est range juste au-dela du bord : « 100% » vaut sa propre largeur, donc il se pose exactement hors champ quelle que soit la largeur de l'ecran — rien a recalculer si le 33% bouge. ⚠️ C'est « overflow: hidden » sur .bd-a2-mm qui empeche ce debordement de creer une barre de defilement horizontale. ⚠️ UNE SEULE DECLARATION, donc le MEME tempo a l'aller et au retour. C'est deliberé : un mouvement plus rapide dans un sens que dans l'autre est exactement ce qui avait ete juge « complique » sur le burger. Ne pas ajouter de transition propre a .is-open. La courbe part vite et se pose en douceur, sans rebond. */ transform: translateX(100%); transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } body.bd-a6 .bd-a2-mm.is-open .bd-a6-mm-panneau { transform: none; } /* ⚠️ LES LIENS NE GLISSENT PLUS A CONTRESENS. La feuille partagee les fait entrer par la GAUCHE (translateX(-12px)) : c'etait juste quand le menu occupait tout l'ecran, ca tire a l'envers du panneau qui vient de la droite. On garde la cascade en opacite, qui donne la vie, on retire le deplacement, qui donne le desordre. */ body.bd-a6 .bd-a2-mm-links a { transform: none; } /* Les trois blocs remplissent le panneau : leur plafond de 560px, prevu pour une page entiere, n'a plus lieu d'etre dans une colonne de 475px. */ body.bd-a6 .bd-a6-mm-panneau .bd-a2-mm-links, body.bd-a6 .bd-a6-mm-panneau .bd-a2-mm-actions, body.bd-a6 .bd-a6-mm-panneau .bd-a2-mm-socials { max-width: none; } /* 🔑 LES RESEAUX TOMBENT EN BAS DU PANNEAU (demande du 11/09 au soir). ⚠️ DEUX marges automatiques, pas une : avec la seule marge haute des reseaux, tout l'espace libre passerait la, et la navigation remonterait se coller au plafond. Avec les deux, l'espace se partage — au-dessus des liens et au-dessus des reseaux — le groupe navigation + boutons reste dans le haut du panneau et les icones se posent au fond. ⚠️ Le « justify-content: center » du panneau ne fait alors plus rien : des marges automatiques absorbent l'espace avant lui. Il est laisse en place comme filet, si les marges disparaissaient un jour. */ body.bd-a6 .bd-a6-mm-panneau .bd-a2-mm-links { margin-top: auto; } body.bd-a6 .bd-a6-mm-panneau .bd-a2-mm-socials { margin-top: auto; } } /* --- Le meme equilibre sur grand ecran ---------------------------------/* --- Le meme equilibre sur grand ecran --------------------------------- * Mesure a 1440 avant correction : 60px entre les liens et le premier bouton, * 20px entre le dernier et la rangee des reseaux. Trois fois plus en haut. * * 🔴 LE 60 NE SE LISAIT PAS DANS UNE SEULE DECLARATION : c'est la marge haute * de 36px du bloc d'actions PLUS son padding-top de 24px, pose dans la regle * de base. Mesurer la boite donnait 36 et laissait croire l'ecart correct ; * c'est le bord du BOUTON qu'il faut regarder. Le padding est donc remis a * zero et les deux ecarts sont ecrits en clair, a la meme valeur. * * ⚠️ Ici PAS de marges automatiques, contrairement au telephone : au-dessus de * 900px bd-accueil-2.css centre la colonne entiere (justify-content: center * sur .bd-a2-mm) et les trois blocs font leur hauteur naturelle. Il n'y a donc * aucun espace libre a partager — deux ecarts fixes et egaux sont la reponse. * ------------------------------------------------------------------ */ @media (min-width: 900px) { body.bd-a6 .bd-a2-mm-actions { margin-top: 36px; padding-top: 0; } body.bd-a6 .bd-a2-mm-socials { margin-top: 36px; } } /* ========================================================================= * Vocabulaire commun aux sections : titre, chapeau, listes. * * Le LIBELLE de section n'est pas ici : c'est .bd-a2-kicker, habille dans * bd-accueil-2.css. On ne le retouche pas. * ====================================================================== */ body.bd-a6 h1, body.bd-a6 h2, body.bd-a6 h3 { color: var(--a6-titre); letter-spacing: -0.025em; } /* 🔑 LE H1 PREND LE JETON DE L'ACCUEIL 4, --taille-h1, et non plus une fourchette a lui (demande du 11/09 au soir). Il y avait ici « clamp(2.1rem, 3.6vw, 3.2rem) », regle pour tomber sur les 51px de l'accueil 4 A 1440 — et seulement la. Ailleurs les deux titres divergeaient : 33,6px de plancher contre 44,8, et une pente differente. Le jeton, lui, vaut « clamp(2.8rem, calc((100vw - 616px) * 0.062), 3.25rem) » : les deux pages ont maintenant le meme titre a TOUTE largeur. ⚠️ Ne pas y remettre une valeur en dur : le jeton vit dans body.bd-a2, et si la charte le bouge, cette page doit suivre. L'interlettre passe aussi a -0.02em, celle du H1 de l'accueil 4 ; les titres de section gardent leur -0.03em, qui est leur reglage a eux. */ /* 🔴 LE H1 EST CELUI DE L'ACCUEIL 2, ET C'EST SA DEMANDE DU 12/09. Il y a eu ici, le 11/09 au soir, une specification au pixel : 2,2rem sur ordinateur, 2rem sur telephone, avec une largeur mesuree a 487px pour forcer la coupe des lignes. Rendu : « beaucoup trop petit », des deux cotes. La reponse tient en une phrase, la sienne : « regarde la page accueil-2 ». On reprend donc EXACTEMENT la robe de son H1 de hero, mesuree dans bd-accueil-2.css ligne 1206 : font-size : var(--taille-h1) <- le jeton de la charte line-height : 1.1 letter-spacing : -0.02em max-width : 20em --taille-h1 vaut « clamp(2.8rem, calc((100vw - 616px) * 0.062), 3.25rem) » : 44,8px au plancher, 51px a 1440, 52px au plafond. C'est le titre de l'accueil 2 et de l'accueil 4 ; les trois pages ont desormais le meme. ⚠️ --taille-h1 N'EST TOUJOURS PAS TOUCHE : on le LIT, on ne le redefinit pas. Le jour ou la charte le bouge, cette page suit toute seule. 🔴 LE max-width EST LA POUR EN DEFAIRE UN AUTRE. bd-accueil-2.css bride tout H1 a « max-width: 18ch », soit environ 496px a cette taille : la phrase s'y repliait en six lignes. Le hero de l'accueil 2 le desserre a 20em, et c'est cette valeur-la qu'on reprend — 20em suit la taille du texte au lieu d'etre un nombre fige, et a 51px elle vaut 1020px, bien plus que la colonne du hero (750px). Autrement dit : plus aucun plafond, c'est la colonne qui coupe. ⚠️ Plus de reglage separe pour le telephone : le clamp descend deja tout seul a 44,8px, comme sur l'accueil 2. ⚠️ La virgule apres « activite » fait partie du texte et doit y rester : c'est elle qui tient la respiration de la phrase. */ body.bd-a6 h1 { margin: 0 0 18px; font-size: var(--a6-h1); line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; max-width: 20em; } /* 🔴 UN CRAN EN DESSOUS SUR TELEPHONE : 2,6rem, choisi sur maquette le 12/09. Le jeton de la charte plancherait a 2,8rem (44,8px) jusqu'en bas, et c'est ce qu'il a juge « un petit peu grand » : la phrase est une enumeration, elle tenait sur CINQ lignes a 390px et le titre mangeait 197px de haut, soit un quart de l'ecran avant meme le paragraphe. Trois tailles lui ont ete montrees cote a cote, rendues dans la vraie page : 2,6rem (41,6px) -> 4 lignes, titre haut de 183px <- retenu 2,4rem (38,4px) -> 4 lignes, titre haut de 169px 2,2rem (35,2px) -> 4 lignes, titre haut de 155px 🔑 LE SAUT UTILE EST LE PREMIER : des qu'on descend d'un cran on passe de 5 a 4 lignes, et on y reste pour les trois. La cinquieme ligne ne tenait qu'a quelques pixels. Inutile, donc, de descendre plus bas que necessaire : le cran le plus HAUT des trois suffit a rendre cette ligne, et c'est celui qu'il a choisi — le titre garde toute sa presence. ⚠️ 799px ET NON 640 : c'est LA bascule de cette page, celle ou le hero passe en une colonne et ou la carte Benjamin descend sous les boutons (.bd-hc dans bd-accueil-2.css, et le logo du lockup ici). Poser une valeur differente ailleurs ferait changer le titre a un endroit ou rien d'autre ne change. ⚠️ En dur et non en clamp : au-dessus de 799px le jeton de la charte reprend la main tel quel, et les accueils 2, 4 et celui-ci restent identiques sur ordinateur. Ce reglage ne vaut QUE pour le telephone. ⚠️ L'interligne et l'interlettre ne bougent pas : ils sont hérités de la regle ci-dessus, et c'est ce qu'il a valide sur la maquette. */ /* 🔴 LA MESURE DU H1 SUR ORDINATEUR : 15,25em, ET C'EST UN CHIFFRE MESURE. Les deux langues portent un
avant leur dernier mot pour tenir sur trois lignes. Mais un
ne fixe que la DERNIERE coupe : les precedentes suivent la largeur de la colonne, qui va de 750px a 1440 jusqu'a 1040px a 1920. Sans borne, la premiere ligne avalait un mot de plus sur grand ecran et la deuxieme retombait a un fragment ridicule (« y auditoría », « activité, et audit »). Mesure des lignes a departager, identique a toutes les tailles de texte parce qu'exprimee en em : FR « Site web, SEO, logiciel intégré à » = 14,22em <- doit tenir FR « Site web, SEO, logiciel intégré à votre » = 16,80em <- ne doit pas ES « Página web, SEO, software para » = 14,52em <- doit tenir ES « Página web, SEO, software para su » = 15,96em <- ne doit pas La fenetre commune aux deux langues va donc de 14,52 a 15,96em. 15,25 tombe au milieu : 0,73em de marge d'un cote, 0,71 de l'autre. 🔑 UNE SEULE REGLE POUR LES DEUX LANGUES. Il y avait ici un selecteur html[lang^="es"] avec 15,4em, pose quand seul l'espagnol avait un
; des que le francais en a eu un, les deux fenetres se sont recouvertes et la distinction n'avait plus lieu d'etre. Une regle de moins a tenir a jour. 🔑 EN em ET SURTOUT PAS EN PIXELS : la mesure suit la taille du texte. Les quatre largeurs ci-dessus valent le meme nombre d'em a 42,56px comme a 49,4px — une valeur figee en pixels aurait ete juste sur un seul ecran. ⚠️ ORDINATEUR SEULEMENT : sur telephone la colonne fait 350px, bien moins que la borne, c'est elle qui commande de toute facon. ⚠️ Entre 1100 et 1400 de large, la carte Benjamin se place a cote du titre et la colonne tombe a 460-676px : c'est alors ELLE qui coupe, et le titre fait quatre lignes. Aucun reglage ne peut l'eviter a cette taille de texte, sinon reduire le titre. */ @media (min-width: 800px) { body.bd-a6 h1 { max-width: 15.25em; } } /* 🔴 LES SAUTS DE LIGNE ECRITS DANS LE TEXTE NE VALENT QUE SUR ORDINATEUR. Le H1 espagnol porte deux
pour tomber sur les trois lignes qu'il a demandees (voir inc/i18n-strings.php). Sur telephone la colonne fait 350px : ces coupes y creeraient des lignes absurdes, voire un debordement, alors que la phrase se replie tres bien toute seule. 🔑 « display: none » sur un
SUPPRIME reellement le saut, il ne fait pas que le cacher. Verifie au rendu : 4 lignes en espagnol a 390px, comme avant. ⚠️ La regle vise « h1 br » et pas « br » : le reste de la page a ses propres sauts de ligne, notamment dans les cartes de services. */ @media (max-width: 799px) { body.bd-a6 h1 br { display: none; } /* 🔑 ET UN INTERLIGNE PLUS OUVERT, +0,1 (12/09) : 1,1 -> 1,2. 1,1 est un interligne de TITRE COURT : il tient deux lignes serrees sur ordinateur. Sur telephone la meme phrase en fait quatre, et a quatre lignes un interligne aussi serre donne un pave. Les 0,1 supplementaires valent 4,2px par ligne a cette taille, soit 17px sur le bloc entier. ⚠️ TELEPHONE SEULEMENT : au-dessus de 799px le titre garde le 1,1 valide le 12/09, celui de l'accueil 2 et de l'accueil 4. */ body.bd-a6 h1 { font-size: 2.6rem; line-height: 1.2; } } /* 🔑 LES TITRES DE SECTION SONT CEUX DE L'ACCUEIL 4, AU REGLAGE PRES. --taille-clients est le jeton de bd-accueil-2.css (clamp 2.2rem / 4.3vw / 3.875rem, soit 62px a 1440) ; la graisse, l'interlettre et la hauteur de ligne sont celles, mesurees, de .bd-a4-tete h2. text-wrap: balance repartit les lignes au lieu de laisser un mot orphelin. ⚠️ NE PAS ecrire une taille en dur ici : le jour ou la charte bouge, le jeton bouge, et cette page doit suivre. */ body.bd-a6 h2 { margin: 0 0 14px; /* 🔴 12/09 AU SOIR : LES TITRES DE SECTION PRENNENT LA ROBE DU H1, SUR ORDINATEUR COMME SUR TELEPHONE. Sa demande, en deux temps : d'abord le telephone, puis « fais pareil en desktop ». Il y avait ici « var(--taille-clients) », le jeton des titres de section de l'accueil 4 : 61,92px a 1440 contre 51,09 pour le H1, soit 11px de plus que le titre de la page. Ils passent au jeton du H1. 🔑 UN JETON, PAS UNE VALEUR EN DUR : --taille-h1 est celui de la charte, partage avec les accueils 2 et 4. Le titre de section suit donc le H1 automatiquement, y compris si la charte bouge. C'est exactement ce qu'il demande : « la meme font-size que le H1 », pas « 51px ». ⚠️ --taille-clients n'est PAS supprime de la feuille : il habille encore d'autres blocs et il appartient a l'accueil 4. On cesse juste de le lire ici. ⚠️ Le bandeau cookies a son propre

et il est rattrape plus bas (« body.bd-a6 .bd-cc-copy h2 », 15px) : sans lui il prendrait ce jeton. / font-size: var(--a6-h1); font-weight: 700; letter-spacing: -0.03em; / 1,1 : celui du H1, la aussi. Il y avait 1,26 ici, herite de sa demande du 11/09 (« augmente l'interligne de 0,2 ») ; la nouvelle consigne est plus forte, c'est le H1 qui fait foi. / line-height: 1.1; text-wrap: balance; } / La seconde moitie du titre, en bleu : la signature des titres de l'accueil 4. Chaque section declare la sienne dans son markup. / body.bd-a6 h2 .bd-hl { color: var(--accent); } / Un fragment qu'on interdit de couper — un mot a trait d'union, par exemple : le navigateur coupe volontiers sur un trait d'union, et « De quoi avez- » en fin de ligne se lit mal. / body.bd-a6 .bd-a6-insec { white-space: nowrap; } / ⚠️ LES DEUX SECTIONS A DEUX COLONNES RESTENT PLUS SAGES, et c'est mesure : leur titre vit dans une colonne de 40%, soit 420px a 1440. A 62px, « De quoi avez-vous besoin ? » y tenait sur QUATRE lignes et poussait la liste hors de l'ecran. Le plafond descend donc a 2.6rem pour elles seules ; le plancher et la pente restent ceux du jeton, donc rien ne saute au retrecissement. La section Services, elle, occupe toute la largeur et garde les 62px. / / 🔴 ET LE BRIDAGE DES SECTIONS A DEUX COLONNES TOMBE (12/09 au soir). Il existait pour une raison precise, notee au-dessus : a 62px, « De quoi avez-vous besoin ? » tenait sur QUATRE lignes dans sa colonne de 420px et poussait la liste hors de l'ecran. Le H1 fait 51px, pas 62 : mesure refaite, le titre y tient sur TROIS lignes et la section respire. Le bridage n'a donc plus d'objet, et le garder ferait deux tailles de titre sur la meme page — exactement ce qu'il veut supprimer. ⚠️ SI LE JETON REMONTE UN JOUR au-dessus de ~55px, ce cas est a remesurer : c'est la colonne de 40% qui commande, pas la largeur de l'ecran. / body.bd-a6 .bd-a6-duo-mot h2 { font-size: var(--a6-h1); line-height: 1.1; } body.bd-a6 h3 { margin: 0 0 8px; font-size: 1.12rem; line-height: 1.3; font-weight: 600; } / Le chapeau du hero : 15px / 24 de hauteur de ligne, comme .bd-a2-hero-lead. / body.bd-a6 .bd-a6-lead { margin: 0 0 26px; max-width: 36em; font-size: 15px; line-height: 24px; color: var(--a6-corps); } body.bd-a6 .bd-a6-chapo { margin: 0 0 20px; max-width: 40em; font-size: 1rem; line-height: 1.62; color: var(--a6-corps); } body.bd-a6 .bd-a6-micro { margin: 18px 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--a6-corps); } / ========================================================================= * LE CHAPEAU DE SECTION — le rond navy au « + », celui de l'accueil 4. * * 🔑 CE BLOC EST UNE RECOPIE ASSUMEE, et c'est le seul de la feuille. * bd-accueil-2.css dessine ce rond pour une LISTE DE SECTIONS nommees une par * une (.bd-a2-clients, .bd-svc-head, .bd-a4-mal, .bd-a4-diag…). Nos sections * n'y sont pas et ne peuvent pas y etre sans modifier une feuille partagee * par quatre pages. On redessine donc le rond ici, a l'identique, pour nos * chapeaux de section seulement. * ⚠️ Si le dessin change la-bas, il faut le changer ICI AUSSI. C'est le prix * de ne pas toucher a la feuille des autres accueils. * * ⚠️ L'ANIMATION, ELLE, N'EST PAS RECOPIEE : .bd-kick-pret / .bd-kick-on et * leurs trois keyframes vivent dans bd-accueil-2.css et s'appliquent a tout * .bd-a2-kicker. C'est le script du gabarit qui pose les classes. * * ⚠️ Les chapeaux DANS les fiches de formulaire gardent la petite pastille * bleue de 6px : un rond de 22px au-dessus d'un champ de saisie ecrase la * carte. Le selecteur ne descend donc pas dans .bd-a6-fiche. * ====================================================================== / body.bd-a6 .bd-a6-tete .bd-a2-kicker, body.bd-a6 .bd-a6-duo-mot .bd-a2-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 30px; 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. Deux degrades en position « center » sont centres au pixel, quelle que soit la police. La rotation du survol est de 45° et non 90° : une croix symetrique tournee d'un quart de tour redonne la meme image, le survol ne se verrait plus. / body.bd-a6 .bd-a6-tete .bd-a2-kicker::before, body.bd-a6 .bd-a6-duo-mot .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; } / ⚠️ La rotation au survol se tient dans une regle SEPAREE : ajouter un chapeau au selecteur du dessus sans l'ajouter ici lui donnerait un rond fige. C'est la meme scission que dans bd-accueil-2.css. / body.bd-a6 .bd-a6-tete .bd-a2-kicker:hover::before, body.bd-a6 .bd-a6-duo-mot .bd-a2-kicker:hover::before { transform: rotate(45deg); } / ========================================================================= * LES CHAPEAUX DE FORMULAIRE — visibles d'emblee, pastille qui respire. * * « Composez votre projet » et « Recevoir mon constat » titrent un champ a * remplir : ils ne se decouvrent pas au defilement comme les chapeaux de * section. Le script du gabarit les EXCLUT (`:not(.bd-a6-kick-fixe)`), donc * ils n'ont ni .bd-kick-pret ni .bd-kick-on : rien a neutraliser ici, ils sont * simplement lisibles depuis le debut. * * En echange, leur pastille bleue de 6px respire — un halo qui s'ouvre et se * dissipe, comme le point vert du badge de disponibilite. C'est le seul * mouvement, et il attire l'oeil vers le formulaire sans rien cacher. * ⚠️ Ils gardent la PETITE pastille, pas le rond navy au « + » des chapeaux de * section : un rond de 22px au-dessus d'un champ de saisie ecrase la carte. * ====================================================================== / body.bd-a6 .bd-a6-kick-fixe::before { animation: bd-a6-pastille 2.4s ease-in-out infinite; } @keyframes bd-a6-pastille { 0% { box-shadow: 0 0 0 0 rgba(26, 161, 244, 0.5); } 70% { box-shadow: 0 0 0 7px rgba(26, 161, 244, 0); } 100% { box-shadow: 0 0 0 0 rgba(26, 161, 244, 0); } } @media (prefers-reduced-motion: reduce) { body.bd-a6 .bd-a6-kick-fixe::before { animation: none; } } / La note sous la liste du bloc « De quoi avez-vous besoin ? ». ⚠️ Les quatre lignes au-dessus, elles, passent par .bd-a6-liste, la liste commune : c'est voulu depuis le 11/09 au soir. Elles ont porte pendant une heure un style propre — citations en gras, guillemets francais, filets — qui a ete refuse. Ne pas le remettre : la page n'a qu'un dessin de liste. / body.bd-a6 .bd-a6-dit-fin { margin: 18px 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--muted); } / Les listes a coche : un dessin bleu, le texte a cote. / body.bd-a6 .bd-a6-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } body.bd-a6 .bd-a6-liste li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; line-height: 1.5; color: var(--a6-corps); } body.bd-a6 .bd-a6-coche { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--accent); } / ========================================================================= * 1. HERO — le panneau de l'accueil 4 * * Fond --panneau, coins a 32px, 80px de retrait tout autour : les trois * valeurs sont celles, mesurees, de .bd-a2-hero. Le panneau ne passe PAS par * .bd-a6-couloir, il va presque d'un bord a l'autre. * ⚠️ Le liseré de 4px sur les cotes est le --bord de l'accueil 4 : c'est lui * qui empeche le bleu de toucher le bord de la fenetre. * ====================================================================== / body.bd-a6 .bd-a6-hero { position: relative; z-index: 2; margin: 0 4px; padding: var(--a6-inset); box-sizing: border-box; background: var(--panneau); border-radius: 32px; } / 🔴 LA GRILLE PASSE DEVANT LA BRUME, et il faut LES DEUX declarations. .bd-fog est en position absolue ; dans un meme contexte d'empilement, un element POSITIONNE se peint apres les blocs non positionnes, quel que soit l'ordre du HTML. Sans « position: relative » ici, les trois nappes se poseraient PAR-DESSUS le titre et les boutons. / body.bd-a6 .bd-a6-hero-grille { position: relative; z-index: 1; display: grid; / ⚠️ minmax(0, …) sur la colonne de texte : sans lui, un mot long ou un bouton large fait deborder la grille au lieu de se replier. / grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; / ⚠️ « center » et non « start » : la carte est plus haute que la colonne de texte. Alignees en haut, elles laissaient un vide sous le texte et le hero avait l'air inacheve. / align-items: center; } body.bd-a6 .bd-a6-hero-mot { min-width: 0; } / --- Les deux exemplaires du badge « Site en refonte » ----------------- Un seul est affiche a la fois. Par defaut — grand ecran, hero en deux colonnes — c'est celui du bas, au-dessus de la carte. Celui du haut prend le relais quand le hero passe en une colonne : voir la requete media plus bas. ⚠️ Ne pas afficher les deux : le meme texte apparaitrait deux fois. / body.bd-a6 .bd-a6-badge--haut { display: none; margin-bottom: 22px; } / Le grand lockup. La TAILLE vient de .bd-a2-hero-logo (bd-accueil-2.css, « width: clamp(410px, 42vw, 605px) ») : ici, seulement l'air en dessous. ⚠️ La largeur EST redeclaree ci-dessous, mais seulement pour la reduire de 5 % : la valeur de reference reste dans bd-accueil-2.css, partagee avec l'accueil 4, et il n'y a donc toujours qu'un seul endroit ou changer la TAILLE de depart. / body.bd-a6 .bd-a6-lockup { margin: 0 0 38px; } / 🔑 LE LOGO DU HERO, 5 % PLUS PETIT (sa demande du 11/09), sur ordinateur COMME sur telephone. 🔴 IL Y A DEUX REGLAGES DANS bd-accueil-2.css, PAS UN, ET C'EST LE PIEGE : - au-dessus de 799px : width: clamp(410px, 42vw, 605px) ; - a 799px et en dessous : width: 78%, max-width: 300px. Un premier essai n'a repris que le premier, avec un selecteur plus fort et SANS media query : il ecrasait donc aussi le reglage mobile, et le logo a GROSSI sur telephone au lieu de retrecir (260 -> 317px, mesure). On reprend ici la MEME structure, au meme point de bascule, chaque valeur multipliee par 0,95. ⚠️ Le selecteur descend a « .bd-a2-hero-logo.bd-a6-lockup img » (0,3,1) : a egalite avec l'original (0,2,1) on ne gagnerait que par l'ordre des feuilles, ce qui casse au premier remaniement. ⚠️ NE PAS toucher a bd-accueil-2.css : l'accueil 4 prend le meme logo et doit garder sa taille. Verifie apres coup, elle n'a pas bouge d'un pixel. / body.bd-a6 .bd-a2-hero-logo.bd-a6-lockup img { / 410 -> 389,5 | 42vw -> 39,9vw | 605 -> 574,75 / width: clamp(389.5px, 39.9vw, 574.75px); max-width: 100%; } @media (max-width: 799px) { body.bd-a6 .bd-a2-hero-logo.bd-a6-lockup img { / 78 % -> 74,1 % | 300px -> 285px / width: 74.1%; max-width: 285px; } } body.bd-a6 .bd-a6-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; } / La carte a flip : 490px, la largeur de celle de l'accueil 4 au pixel. ⚠️ ELLE DOIT ETRE ECRITE ICI. .bd-wc-scene vise 570px — la largeur qu'il faudrait pour poser deux boutons sur une ligne — et cette page n'en a qu'un. A 570 la carte prendrait 80px au titre du hero. Meme choix, et meme valeur, que .bd-a4-hero-rdv sur l'accueil 4. 🔑 SPECIFICITE : « body.bd-a6 .bd-a6-carte » vaut exactement autant que « body.bd-a2 .bd-wc-scene », qui pose width:100%. C'est l'ORDRE des feuilles qui tranche — bd-accueil-6.css depend de bd-accueil-2.css, donc arrive apres. C'est le meme mecanisme que .bd-a4-hero-rdv. Ne pas deplacer ce bloc dans une feuille chargee plus tot. 🔑 PAS DE « --bd-wc-h » ICI, ET C'EST UNE MESURE, PAS UN OUBLI. En 3D les deux faces sont en position absolue, donc leur hauteur doit etre explicite : bd-accueil-2.css la regle sur le VERSO (308px a partir de 1280, 326 en dessous) en notant que le recto de l'accueil 4 n'en demande que 269. Le recto d'ici tient dans la meme enveloppe depuis qu'il porte DEUX arguments d'une ligne et UN bouton. Il avait fallu monter a 344px le jour ou il en portait trois : si un argument revient, remesurer et remettre la variable. / body.bd-a6 .bd-a6-carte { width: 490px; max-width: 490px; } / 🔑 LA CARTE DESCEND, COMME SUR L'ACCUEIL 4. Le groupe « badge + carte » est UN SEUL element de grille, cale sur le bas de la rangee (align-self: end) : son bord tombe donc au ras du bas du panneau, quelle que soit la hauteur du texte a cote. C'est le reglage de .bd-a4-hero-rdv, qui vit en « grid-row: 3 / -1 ; align-self: end » dans la grille du hero de la page 152. ⚠️ La grille du hero, elle, garde « align-items: center » pour la colonne de texte : c'est l'element qui se cale, pas la rangee. / body.bd-a6 .bd-a6-hero-cote { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; min-width: 0; justify-self: end; align-self: end; } / 🔑 LES DEUX BOUTONS DE LA CARTE S'EMPILENT, « Appelez-moi » AU-DESSUS. .bd-wc-btns est en « flex-wrap: wrap » dans bd-accueil-2.css : les deux boutons s'y mettent cote a cote des que la place suffit, et l'ordre vertical demande ne tiendrait plus. On force la colonne ici, pour cette page seulement. align-items: flex-start garde des boutons a leur largeur naturelle, pas etires sur toute la carte. / body.bd-a6 .bd-a6-carte .bd-wc-btns { flex-direction: column; align-items: flex-start; gap: 8px; } / ========================================================================= * 2. SERVICES * ====================================================================== / / 🔑 TROIS ECARTS EGAUX, PLUS UN VOLONTAIREMENT PLUS COURT. L'ecart hero -> services vaut --a6-entre x 0,67 depuis sa demande du 11/09 (« reduit l'espacement entre le hero et la section ce que je fais de 33 % »). C'est le SEUL ecart de la page qui ne vaut pas le jeton entier, et il reste ecrit EN FONCTION du jeton : bouger le jeton les bouge tous les quatre, dans le meme rapport. Les trois autres, eux, restent egaux entre eux. Ce n'est pas une incoherence : le hero est un panneau colore, sa frontiere basse est un bord franc, la ou les autres sections se separent par du vide. 🔑 CHACUN EST UNE SOUSTRACTION. Un ecart separe DEUX sections : il vaut le retrait bas de l'une plus le retrait haut de l'autre. Pour qu'il fasse --a6-entre, chaque retrait s'ecrit donc comme le jeton MOINS ce que l'autre apporte deja. ⚠️ « Parlons-en » apporte 120px de chaque cote, et ce n'est pas negociable : c'est exactement la hauteur des deux fondus de sa bande bleue, de sorte que son chapeau demarre la ou le fondu se termine. C'est donc lui la contrainte, et les sections voisines s'ajustent a lui. Avant le resserrement de 33 % il apportait 144px, soit 24px d'air apres le fondu : cet air est rendu. ⚠️ Aucune couleur ne bouge ici : ce bloc ne touche qu'a des retraits. / body.bd-a6 .bd-a6-svc { / 🔑 x 0,67 : l'ecart qui suit le hero est le seul a etre raccourci. Le hero n'apporte rien a cet ecart (son retrait interne s'arrete a son bord colore), donc ce retrait EST l'ecart, et le facteur s'applique ici et nulle part ailleurs. / padding-top: calc(var(--a6-entre) 0.67); /* Le reste de l'ecart, apres les 120px que « Parlons-en » apporte. / padding-bottom: calc(var(--a6-entre) - 120px); } body.bd-a6 .bd-a6-tete { margin-bottom: clamp(28px, 3.4vw, 44px); } body.bd-a6 .bd-a6-tete .bd-a6-chapo { margin-bottom: 0; } body.bd-a6 .bd-a6-svc-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } / 🔑 LES QUATRE CARTES ONT LA MEME HAUTEUR SANS HAUTEUR ECRITE : la grille etire ses cellules (align-items: stretch par defaut), la carte est en colonne, et c'est le pied qui pousse (margin-top: auto). Une hauteur en dur aurait derive au premier mot ajoute. La PEAU est celle de la carte de l'accueil 4 (.bd-wc) : blanc a 92% et flou, filet --line, coins a 24, meme ombre portee. / body.bd-a6 .bd-a6-svc-carte, body.bd-a6 .bd-a6-fiche { background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--a6-trait); border-radius: var(--a6-rayon); box-shadow: var(--a6-ombre); box-sizing: border-box; min-width: 0; } body.bd-a6 .bd-a6-svc-carte { display: flex; flex-direction: column; padding: 24px; } body.bd-a6 .bd-a6-svc-carte p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--a6-corps); } body.bd-a6 .bd-a6-svc-ico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-bottom: 14px; border-radius: 12px; background: var(--ice); color: var(--accent); } body.bd-a6 .bd-a6-svc-ico svg { width: 21px; height: 21px; } body.bd-a6 .bd-a6-svc-pied { margin-top: auto; padding-top: 20px; } / ========================================================================= * 3 et 4. Les deux blocs a deux colonnes (projet, audit). * * ~40 % pour la preuve, ~60 % pour la fiche : la demande de conversion passe * devant le discours. * ====================================================================== / / 🔑 « PARLONS-EN » EST UNE BANDE BLEUE, celle de « Par ou commencer » sur l'accueil 4 (demande du 11/09 au soir). Le degrade n'est pas decoratif : la bande s'ouvre et se ferme sur --page, la couleur des sections d'a cote, si bien que la jointure ne se voit pas et qu'aucune ligne n'apparait. ⚠️ SI LA SECTION VOISINE RECEVAIT UN FOND UN JOUR, il faudrait remettre les deux bouts du degrade sur SA couleur. C'est l'avertissement laisse sur la regle d'origine, et il vaut ici mot pour mot. ⚠️ LE RETRAIT VERTICAL SUIT, et ce n'est pas cosmetique : les deux fondus mangent 120px en haut et 120 en bas. Avec l'ancien retrait (72px au plus), le chapeau « Parlons-en » demarrait DANS le fondu. Le clamp est celui de la section d'origine. / body.bd-a6 .bd-a6-projet { / 🔑 LE RETRAIT VAUT EXACTEMENT LA HAUTEUR DU FONDU, 120px, ni plus ni moins, et ce n'est pas un choix esthetique libre : les deux fondus de la bande mangent 120px en haut et 120 en bas, en PIXELS et non en pourcentages, donc ils ne retrecissent pas sur telephone. A 120px, le chapeau « Parlons-en » demarre pile ou le fondu se termine. L'ancien reglage, celui de l'accueil 4, descendait a 88px : le chapeau demarrait DANS le fondu sur petit ecran. Le reglage du 11/09 montait a 144-192px (24px d'air en plus), air repris le meme soir quand il a demande de resserrer les ecarts de 33 %. ⚠️ Une valeur FIXE, plus un clamp : c'est elle qui fixe le plancher du jeton --a6-entre, puisque les sections voisines valent « jeton moins 120px ». ⚠️ Si la hauteur des fondus change dans le degrade ci-dessous, ce retrait doit suivre AU PIXEL : les deux vont ensemble. / padding-top: 120px; padding-bottom: 120px; background: linear-gradient( to bottom, var(--page) 0, var(--panneau) 120px, var(--panneau) calc(100% - 120px), var(--page) 100% ); } body.bd-a6 .bd-a6-audit { / Le reste de l'ecart, apres les 120px de retrait bas de « Parlons-en ». / padding-top: calc(var(--a6-entre) - 120px); / Avant le pied : le reste, apres le retrait haut du pied lui-meme. / padding-bottom: calc(var(--a6-entre) - clamp(40px, 5vw, 64px)); } body.bd-a6 .bd-a6-duo { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: clamp(28px, 3.6vw, 52px); align-items: start; } body.bd-a6 .bd-a6-duo-mot { min-width: 0; } body.bd-a6 .bd-a6-fiche { padding: clamp(20px, 2.4vw, 30px); } / Le libelle en tete de fiche est le kicker : il lui faut juste un peu d'air. / body.bd-a6 .bd-a6-fiche .bd-a2-kicker { margin-bottom: 16px; } body.bd-a6 .bd-a6-fiche-desc { margin: 0 0 12px; min-height: 3.2em; font-size: 0.95rem; line-height: 1.6; color: var(--a6-corps); } body.bd-a6 .bd-a6-fiche-desc strong { color: var(--a6-titre); font-weight: 600; } body.bd-a6 .bd-a6-fiche-aide { margin: 0 0 20px; padding: 11px 14px; border-radius: 12px; background: var(--ice); font-size: 0.88rem; line-height: 1.5; color: var(--a6-corps); } body.bd-a6 .bd-a6-fiche-aide a { color: var(--accent-dark); } / --- Les puces a cocher ------------------------------------------------- / body.bd-a6 .bd-a6-puces { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } / ⚠️ PAS DE CONTOUR EN POINTILLES, nulle part sur cette page : le trait est plein, et l'etat « retenu » se lit au remplissage, pas au style du trait. / body.bd-a6 .bd-a6-puce { padding: 9px 18px; border: 1px solid var(--a6-trait); border-radius: 100px; background: #ffffff; color: var(--a6-titre); font-size: 0.92rem; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } body.bd-a6 .bd-a6-puce:hover { border-color: var(--ink); } body.bd-a6 .bd-a6-puce[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #ffffff; } / --- Les formulaires ---------------------------------------------------- / / Les champs eux-memes viennent de .bd-a4-champ (bd-accueil-2.css) : label au-dessus, fond pale, trait clair, halo bleu au focus. On ne redessine ici que ce qui manque. / body.bd-a6 .bd-a6-form { margin: 0; } body.bd-a6 .bd-a6-option { color: var(--a6-corps) !important; font-weight: 400; } body.bd-a6 .bd-a6-err { display: block; font-size: 0.82rem; line-height: 1.4; color: #b42318; } body.bd-a6 .bd-a6-err:empty { display: none; } body.bd-a6 .bd-a6-faux { border-color: #e5776b !important; background: #fef6f5 !important; } body.bd-a6 .bd-a6-form-pied { margin-top: 18px; } body.bd-a6 .bd-a6-note { margin: 12px 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--a6-corps); } / 🔴 16px SUR TELEPHONE, ET C'EST UNE CORRECTION FONCTIONNELLE, PAS DU STYLE. Safari sur iOS ZOOME la page des qu'on met le doigt dans un champ dont le texte fait moins de 16px — la mise en page saute, et le visiteur doit pincer pour revenir. Les champs heritent de .bd-a4-champ, qui les pose a 0,95rem, soit 15,2px : juste en dessous du seuil. ⚠️ Ne pas « harmoniser » ces 16px avec le reste de la page : ce n'est pas une taille choisie a l'oeil, c'est un seuil impose par le navigateur. ⚠️ La modale de rendez-vous, elle, est deja a 16px (inc/rdv-modal.php, son CSS en ligne) : rien a faire de ce cote. Specificite : « body.bd-a6 .bd-a4-champ input » egale celle de la regle de l'accueil 2 ; c'est l'ordre des feuilles qui tranche, et la notre arrive apres. / / 🔑 DEUX CONDITIONS, ET IL FAUT LES DEUX. La largeur seule ratait la tablette en paysage ; « pointer: coarse » seul raterait une fenetre de bureau etroite, ou le zoom ne se produit pas mais ou les 16px ne genent personne. Mesure : a 768px de large, les champs calculaient encore 15,2px avec un seuil a 767. / @media (max-width: 1024px), (pointer: coarse) { body.bd-a6 .bd-a4-champ input, body.bd-a6 .bd-a4-champ textarea, body.bd-a6 .bd-a4-champ select { font-size: 16px; } } / ========================================================================= * 🔑 LA COLONNE DE TEXTE SUIT LE DEFILEMENT (demande du 11/09 au soir). * * Dans « Parlons-en » comme dans « Audit technique », le discours reste a * hauteur d'oeil pendant qu'on descend le formulaire d'en face : le visiteur * garde la promesse sous les yeux au moment ou il remplit. * * ⚠️ TROIS CONDITIONS, ET IL LES FAUT TOUTES TROIS : * 1. .bd-a6-duo est en « align-items: start » — sans quoi l'element occupe * toute la hauteur de la rangee et n'a plus de course a parcourir ; * 2. aucun parent entre lui et la section ne porte overflow (hidden, auto * ou clip), qui tuerait le collage sans aucun message d'erreur ; * 3. le « top » compte la hauteur de l'en-tete COLLANT, sinon le titre passe * dessous. * * ⚠️ SEULEMENT AU-DESSUS DE 900px. En une colonne le bloc est AU-DESSUS du * formulaire, pas a cote : le coller ferait un titre qui reste plante en haut * de l'ecran pendant qu'on saisit, et qui mange la moitie d'un ecran de * telephone. * ====================================================================== / @media (min-width: 901px) { / ⚠️ SEULEMENT « PARLONS-EN ». La section AUDIT avait le meme collage ; il a ete retire le 11/09 au soir, sur demande : son bloc de texte est desormais CENTRE en face du formulaire (voir plus bas). Les deux traitements ne peuvent pas coexister — un element colle se cale en haut de sa course, il ne peut pas etre centre dans sa rangee. / body.bd-a6 .bd-a6-projet .bd-a6-duo-mot { position: sticky; top: calc(var(--a6-head) + 28px); / 🔑 LES DEUX MARGES DECALENT LA COURSE, ET C'EST TOUT LEUR ROLE (demande du 11/09 au soir : « qu'il commence a peine plus bas, et qu'il finisse un peu plus haut ; pas a la meme hauteur que le bloc de gauche »). En haut : le chapeau ne demarre plus au ras du bord superieur de la fiche d'en face, il descend de 36px. Les deux blocs cessent de commencer sur la meme ligne. En bas : une marge REDUIT LA COURSE d'autant. Le collage s'arrete donc 72px avant le bas de la fiche, au lieu de finir bord a bord avec elle. ⚠️ Ce sont bien des MARGES et pas un padding : le padding agrandirait la boite collante sans rien deplacer, et le bloc reviendrait se caler exactement au meme endroit. / margin-top: 36px; margin-bottom: 72px; } / ⚠️ PAS DE max-height ICI, ET C'EST UN CHOIX. Il y en avait une, posee comme garde-fou au cas ou la colonne depasserait la hauteur de l'ecran. Elle ne protegeait de rien : sans overflow, une boite bridee laisse son contenu DEBORDER par-dessus la section suivante, en silence. Mesure du 11/09 : la colonne la plus haute fait 475px, contre 580 de plafond — le garde-fou ne servait donc jamais, mais il aurait mordu au premier paragraphe ajoute. Le comportement sans lui est le bon : si la colonne devient plus haute que l'ecran, son haut se colle et son bas reste simplement hors de vue tant qu'on n'a pas quitte la section. C'est le fonctionnement normal d'un element collant, et il est reversible au defilement. / / La barre d'admin de WordPress decale tout de 32px : le point d'arret collant doit suivre, comme l'en-tete lui-meme. / body.bd-a6.admin-bar .bd-a6-projet .bd-a6-duo-mot { top: calc(var(--a6-head) + 60px); } / 🔑 « AUDIT TECHNIQUE » : LE TEXTE EST CENTRE EN FACE DU FORMULAIRE. Demande du 11/09 au soir. Le bloc de gauche fait 475px, la fiche de droite 540 : aligne en haut, il laissait un vide sous lui et la section penchait. Le centrage se fait sur l'ELEMENT et non sur la grille (align-self, pas align-items) : la fiche, elle, doit rester en haut, sinon c'est elle qui flotte quand le texte s'allonge. / body.bd-a6 .bd-a6-audit .bd-a6-duo-mot { align-self: center; } } / 🔑 « PARLONS-EN » EST INVERSE : la fiche a gauche, le discours a droite (demande du 11/09 au soir). La section AUDIT, elle, garde l'ordre normal : les deux alternent, comme les sections de l'accueil 4. ⚠️ L'INVERSION EST FAITE EN CSS, PAS DANS LE MARKUP, et c'est voulu : en une colonne — telephone et tablette — on retombe alors sur l'ordre du DOM, c'est-a-dire le discours PUIS le formulaire. Inverser dans le HTML aurait mis le formulaire en premier sur mobile, avant d'avoir explique quoi que ce soit. ⚠️ Les deux pistes changent de taille EN MEME TEMPS que l'ordre : c'est la fiche qui doit garder les 60%, et elle est maintenant en premiere piste. / body.bd-a6 .bd-a6-projet .bd-a6-duo { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); } body.bd-a6 .bd-a6-projet .bd-a6-fiche { order: 1; } body.bd-a6 .bd-a6-projet .bd-a6-duo-mot { order: 2; } / --- La bande de verre du bas de fenetre ------------------------------- L'element et son habillage viennent de bd-accueil-2.css (.bd-a2-fade) ; le gabarit le pose, il n'y a rien a redessiner. Seule l'extinction est ecrite ici : voir le mot dans template-accueil-6.php sur les liens legaux qui se retrouvaient sous le flou. ⚠️ « body.bd-a6 .bd-a2-fade » vaut deux classes plus un element et bat donc la regle d'origine, qui n'en a qu'une. / body.bd-a6 .bd-a2-fade { transition: opacity 0.35s ease; } body.bd-a6 .bd-a2-fade.bd-a6-voile-off { opacity: 0; } / ========================================================================= * LE BOUTON « CONFIRMER » DU VERSO — le meme que « Prendre rendez-vous ». * * Demande du 11/09 au soir, pour les deux faces et a toutes les largeurs. * bd-accueil-2.css le rend en barre pleine largeur, texte centre, avec une * fleche nue : c'est le dessin de la carte de l'accueil 4. Ici tous les * boutons de la page ont la meme pastille blanche, et celui-la ne doit pas * faire exception. * * 🔑 LA PASTILLE EST FAITE AVEC LE SVG LUI-MEME : il n'y a pas de * enveloppe dans ce markup, contrairement a .bd-a2-btn. Un fond blanc, un * rayon de 50% et un retrait interne suffisent — a condition de poser * « box-sizing: border-box », sans quoi le retrait s'ajoute a la taille et le * rond deborde. * ⚠️ Les valeurs sont celles de .bd-a2-btn--sm : ce sont les boutons du meme * bloc, et c'est le format du recto sur ordinateur. Le telephone les repasse * en taille normale plus bas, comme les autres. * ⚠️ L'etat desactive garde son opacite : le bouton reste eteint tant qu'aucun * creneau n'est choisi, et c'est l'information la plus utile du verso. * ====================================================================== / body.bd-a6 .bd-wc-confirmer { align-self: flex-start; justify-content: flex-start; gap: 0.5rem; padding: 0.5rem 0.7rem 0.5rem 0.95rem; font-size: 12.5px; } body.bd-a6 .bd-wc-confirmer svg { width: 20px; height: 20px; padding: 5px; box-sizing: border-box; border-radius: 50%; background: #ffffff; color: var(--ink); } / ========================================================================= * 6. PIED — « carte de visite », trois colonnes. * * Maquette retenue le 11/09 au soir, sur deux montrees. Celle a quatre * colonnes a ete ecartee, sa CSS est partie avec elle : ne pas la remettre * sans le demander. * ====================================================================== / / 🔑 LE MEME FOND QUE LE HERO : --panneau, le bleu du panneau d'ouverture (demande du 11/09 au soir). La page se referme donc sur la couleur qui l'ouvre. Plus de filet en haut : le changement de couleur separe deja. ⚠️ Aucun retrait en bas : c'est la barre legale qui termine le pied, et elle a son propre fond. / / 🔑 LES DEUX COINS DU HAUT SONT ARRONDIS, comme le panneau du hero (demande du 11/09 au soir) : meme rayon de 32px, meme liseré de 4px sur les cotes. Le bas reste carre, la page s'arrete la. ⚠️ Les 4px de marge portent AUSSI sur la barre legale, qui est un enfant du pied. Cela ne se voit pas : son fond est --page, exactement la couleur de la page qui apparait dans ces 4px. ⚠️ La brume herite de ce rayon (border-radius: inherit sur .bd-fog) : elle ne debordera pas des coins. / body.bd-a6 .bd-a6-pied { / position: relative — la brume est en absolu, il lui faut ce repere. / position: relative; margin: 0 4px; background: var(--panneau); border-radius: 32px 32px 0 0; padding-top: clamp(40px, 5vw, 64px); padding-bottom: 0; } / 🔴 MEME REGLE QUE POUR LE HERO : le contenu doit etre POSITIONNE pour passer devant les nappes. La barre legale en particulier — son fond opaque masquerait la brume sous elle, mais son texte serait recouvert. / body.bd-a6 .bd-a6-pied > .bd-a6-couloir, body.bd-a6 .bd-a6-pied-barre { position: relative; z-index: 1; } / 1,4 / 1 / 1 : la premiere colonne porte le lockup et deux phrases, les deux autres une liste courte. A trois parts egales, la premiere cassait ses lignes et les deux autres flottaient. / body.bd-a6 .bd-a6-pied-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px 40px; padding-bottom: 34px; } / Le lockup, plus petit qu'en tete de page : ici il signe, il n'annonce pas. / body.bd-a6 .bd-a6-pied-logo { display: block; width: 176px; max-width: 100%; height: auto; margin: 0 0 14px; } body.bd-a6 .bd-a6-pied-mot { margin: 0 0 12px; font-size: 0.92rem; line-height: 1.5; color: var(--a6-titre); } body.bd-a6 .bd-a6-pied-qui { margin: 0; font-size: 0.88rem; line-height: 1.6; color: var(--a6-corps); } body.bd-a6 .bd-a6-pied-titre { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a6-titre); } / ⚠️ PLUS DE BOUTONS DANS LE PIED depuis le 11/09 au soir : « Me joindre » redit les trois chemins directs en clair, et .bd-a6-pied-actions comme .bd-a6-pied-wa sont partis avec eux. La mise en forme des trois lignes vient de la regle commune « .bd-a6-pied-grille ul », plus haut. / / --- Les trois canaux de « Me joindre » --------------------------------- Des pastilles cliquables, nommees par leur canal. Elles reprennent le vocabulaire des puces du composeur de projet — meme rayon, meme filet, meme fond blanc — pour que la page n'ait qu'un dessin d'etiquette. ⚠️ L'ECART DE 12px EST LA DEMANDE (« espace un peu plus entre chaque ligne ») : les trois lignes de texte qui les precedaient etaient a 9px, et des pastilles collees se lisent comme un seul bloc. / body.bd-a6 .bd-a6-pied-canaux { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } body.bd-a6 .bd-a6-pied-canal { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 100px; background: #ffffff; border: 1px solid var(--a6-trait); color: var(--a6-titre); font-size: 0.9rem; font-weight: 500; line-height: 1.2; text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease; } body.bd-a6 .bd-a6-pied-canal:hover { border-color: var(--accent); color: var(--accent-dark); } body.bd-a6 .bd-a6-pied-canal svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); } / 🔑 LE BADGE REPREND SON BLANC, exactement celui du hero. Il avait ete passe en --ice le temps ou le pied etait blanc ; depuis que le pied porte le bleu du panneau, le blanc ressort de nouveau et les deux badges de la page sont identiques au pixel. Rien a declarer ici : la regle de base suffit. / / Les quatre ronds des reseaux. Meme dessin que dans le menu plein ecran : c'est la seule autre page ou ils apparaissent. / / Les quatre ronds, desormais sous « A distance, ou que vous soyez », dans la colonne du logo. Un cran d'air de plus qu'avant : ils suivent un paragraphe et non une liste de liens. / body.bd-a6 .bd-a6-pied-soc { display: flex; gap: 8px; margin-top: 20px; } / ⚠️ FOND BLANC, depuis que le pied est bleu. Avec le seul filet --a6-trait sur le panneau, les quatre ronds ne se detachaient plus : deux clartes trop proches. Le blanc les rend a leur role de bouton, comme les pastilles des .bd-a2-btn ailleurs sur la page. / body.bd-a6 .bd-a6-pied-soc a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid transparent; background: #ffffff; color: var(--a6-titre); transition: border-color 0.2s ease, color 0.2s ease; } body.bd-a6 .bd-a6-pied-soc a:hover { border-color: var(--accent); color: var(--accent); } / 🔑 LE FILET AVANT L'ETOILE, repris du menu deplie (.bd-a2-mm-sep, 1px sur 24px de haut) : les trois premiers ronds sont des reseaux, le quatrieme est un avis Google, et le trait dit cette difference sans un mot. ⚠️ « flex: 0 0 1px » n'est pas decoratif : sans lui, le span est un element de flex comme les autres et se laisse ECRASER a 0 quand la place manque. / body.bd-a6 .bd-a6-pied-sep { flex: 0 0 1px; align-self: center; height: 24px; margin: 0 4px; background: var(--a6-trait); } / L'etoile Google garde sa couleur de marque, en dur. 🔴 LE SELECTEUR DESCEND JUSQU'AU « a », ET C'EST NECESSAIRE : ecrite « body.bd-a6 .bd-a6-pied-etoile », la regle vaut deux classes plus un element (0,2,1) et PERD contre « body.bd-a6 .bd-a6-pied-soc a » (0,2,2), qui pose la couleur des quatre ronds. L'etoile sortait navy, mesure a la capture. On monte a (0,3,2) plutot que de poser un !important. / body.bd-a6 .bd-a6-pied-soc a.bd-a6-pied-etoile, body.bd-a6 .bd-a6-pied-soc a.bd-a6-pied-etoile:hover { color: #FBBC05; } / --- La barre legale ---------------------------------------------------- 🔑 LE MEME FOND QUE L'EN-TETE (demande du 11/09 au soir). L'en-tete est en « rgba(244, 248, 252, 0.82) » : semi-transparent parce que le contenu defile derriere lui. Ici rien ne defile derriere, et cette valeur posee sur le bleu du pied virerait au bleu. On ecrit donc la couleur A LAQUELLE IL SE RESOUT au repos, --page (#f4f8fc), qui est le fond de la page sous lui. ⚠️ Ne pas recopier le rgba de l'en-tete « pour que ce soit pareil » : ce serait pareil dans le code et faux a l'ecran. ⚠️ La barre est HORS du couloir dans le gabarit : son fond va d'un bord a l'autre, et c'est .bd-a6-pied-barre-inner, un couloir a l'interieur, qui realigne son contenu. / body.bd-a6 .bd-a6-pied-barre { background: var(--page); padding-top: 22px; padding-bottom: 22px; } body.bd-a6 .bd-a6-pied-barre-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; } body.bd-a6 .bd-a6-pied-barre p { margin: 0; font-size: 0.84rem; color: var(--a6-corps); } body.bd-a6 .bd-a6-pied-barre nav { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.84rem; } body.bd-a6 .bd-a6-pied-barre a { color: var(--a6-corps); text-decoration: none; } body.bd-a6 .bd-a6-pied-barre a:hover { color: var(--accent-dark); } @media (max-width: 900px) { body.bd-a6 .bd-a6-pied-grille { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { body.bd-a6 .bd-a6-pied-barre-inner { flex-direction: column; align-items: flex-start; } } / 🔑 « La technique, au service de votre metier. » PREND SA LIGNE sur telephone (sa demande). Sur une seule ligne elle se coupait n'importe ou, apres « votre » le plus souvent. En bloc, elle se lit comme une signature. Le point median disparait avec elle : il ne separe plus rien. / @media (max-width: 640px) { body.bd-a6 .bd-a6-pied-point { display: none; } body.bd-a6 .bd-a6-pied-signature { display: block; } } / ========================================================================= * LA BASCULE « j'ai un site / je n'ai pas de site » — section Audit. * * Interface retenue le 11/09 au soir, sur trois maquettes montrees : la * question est posee EN TETE DE LA FICHE, la ou le visiteur remplit. Les deux * autres — un rail d'onglets sous le titre, deux cartes a choisir — ont ete * vues et ecartees. * ====================================================================== / / --- Le mecanisme ------------------------------------------------------ La section porte data-bd-a6-cas ; chaque bloc qui ne vaut que pour une situation porte data-bd-a6-vue. Une seule paire de regles suffit, et elle marche pour un paragraphe, une liste ou un champ. ⚠️ display:none et pas visibility : un champ seulement invisible garderait sa place et partirait quand meme dans le POST. Le script le DESACTIVE en plus — voir le mot dans functions-accueil-6.php. / body.bd-a6 [data-bd-a6-cas="site"] [data-bd-a6-vue="sans"], body.bd-a6 [data-bd-a6-cas="sans"] [data-bd-a6-vue="site"] { display: none; } / --- La question, en tete de fiche ------------------------------------- / body.bd-a6 .bd-a6-champ-choix { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--a6-trait); } body.bd-a6 .bd-a6-champ-choix-label { font-size: 0.84rem; font-weight: 600; color: var(--a6-titre); } / Le rail. Fond --page et non blanc : la fiche est deja blanche, un rail blanc sur blanc n'aurait plus de contour lisible. / body.bd-a6 .bd-a6-segment { display: inline-flex; gap: 4px; padding: 3px; border-radius: 100px; background: var(--page); border: 1px solid var(--a6-trait); } body.bd-a6 .bd-a6-segment-btn { padding: 7px 14px; border: 0; border-radius: 100px; background: transparent; color: var(--a6-corps); font-family: inherit; font-size: 0.82rem; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } body.bd-a6 .bd-a6-segment-btn.bd-actif { background: var(--ink); color: #ffffff; } / ========================================================================= * TABLETTE ET TELEPHONE * * Une colonne, boutons pleine largeur, puces qui se replient. Le couloir * garde 16px de gouttiere de chaque cote a toute largeur. * * ⚠️ CE BLOC DOIT RESTER LE DERNIER DE LA FEUILLE : ce sont des requetes * media qui redressent les regles de base, et elles perdraient si une regle * de base passait apres elles. * ====================================================================== / / 🔑 1119px EST UN SEUIL EMPRUNTE, PAS CHOISI : c'est celui auquel bd-accueil-2.css coupe la 3D de la carte (mode plat, les deux faces l'une apres l'autre dans le fil) ET fait passer .bd-wc-haut en colonne, photo pleine largeur au-dessus du texte. Si le hero restait a deux colonnes au-dela, la carte se retrouverait haute et etroite a cote du titre. Les trois doivent basculer ensemble. / @media (max-width: 1119px) { body.bd-a6 .bd-a6-hero-grille { grid-template-columns: minmax(0, 1fr); row-gap: 32px; } / 🔑 570px, LA VALEUR DE L'ACCUEIL 4 EN MODE PLAT : le recto ET le verso suivent la meme largeur, et leur hauteur redevient libre (min-height: 0 sur .bd-wc-flip). Le calendrier n'est plus enferme dans la hauteur d'une face absolue. / body.bd-a6 .bd-a6-carte { width: 100%; max-width: 570px; } / En une colonne il n'y a plus de bas de rangee sur lequel se caler, et le badge repasse a gauche, au-dessus de la carte. 🔴 « justify-self: stretch » ET « width: 100% », PAS « start ». Mesure a 390px : avec « start », l'element de grille se dimensionne sur son CONTENU, la carte demandait « width: 100% » de ce contenu — une boucle — et le groupe retombait a 296px quand la colonne en offrait 334. / body.bd-a6 .bd-a6-hero-cote { align-items: stretch; justify-self: stretch; align-self: auto; width: 100%; max-width: 570px; } / 🔑 LE BADGE PASSE EN TETE DE HERO, AU-DESSUS DU GROS LOGO (demande du 11/09 au soir). Des que le hero est en UNE colonne, le badge du bas n'est plus a cote de rien : il tombe au milieu de la page, entre le texte et la carte. En haut, il annonce le chantier avant tout le reste. ⚠️ Le seuil est 1119px, celui auquel le hero passe en une colonne, et non 640 : entre les deux, la mise en page est deja empilee et le probleme est le meme. / / 🔑 ALIGNE A DROITE (demande du 11/09 au soir). ⚠️ « display: flex » ET « width: fit-content » ET « margin-left: auto », les trois ensemble. En inline-flex, la pastille est une boite EN LIGNE : une marge automatique ne la pousse nulle part, et seul un text-align sur le parent la deplacerait — ce qui decalerait aussi le logo, le titre et tout le reste de la colonne. Passee en bloc, elle se retrecit a son contenu et la marge automatique la renvoie au bord droit, sans toucher a ses voisins. / body.bd-a6 .bd-a6-badge--haut { display: flex; width: fit-content; margin-left: auto; margin-right: 0; } body.bd-a6 .bd-a6-badge--cote { display: none; } body.bd-a6 .bd-a6-hero { --a6-inset: 48px; } / 🔴 LES DEUX FACES OCCUPENT LA MEME CELLULE, ET LA CARTE CESSE DE SAUTER. * * Mesure du 11/09 au soir : en mode plat, le recto fait 619px et le verso * 476 — la page RETRECISSAIT de 143 a 180px au retournement, et le * defilement partait tout seul sous le doigt. * * La cause : sous 1119px, bd-accueil-2.css sort de la 3D et cache la face * inactive en « display: none ». Les deux faces se succedent alors dans le * fil, chacune avec sa hauteur propre, et la page change de taille a chaque * bascule. * * 🔑 LE REMEDE EST UNE GRILLE A UNE SEULE CELLULE : les deux faces y sont * posees l'une SUR l'autre (grid-area: 1 / 1), donc la boite prend la * hauteur de LA PLUS HAUTE et n'en bouge plus. Meme largeur par * construction, elles s'etirent sur la meme colonne. * * ⚠️ « visibility: hidden » ET PAS « display: none » pour la face cachee : * c'est toute l'astuce. Une face en display:none ne compte plus dans la * hauteur, et le saut reviendrait. En visibility, elle garde sa place sans * se peindre — et elle sort quand meme du parcours clavier et de la lecture * d'ecran, ce qu'il fallait. * ⚠️ Le « display: flex » qui l'accompagne n'est pas decoratif : il ANNULE * le display:none de l'accueil 2, et c'est la valeur de .bd-wc. * ⚠️ Specificite egale a celle de la regle d'origine (4 classes, 1 * element) : c'est l'ORDRE des feuilles qui tranche, la notre arrivant * apres. Ne pas deplacer ce bloc dans une feuille chargee plus tot. / body.bd-a6 .bd-wc-flip { display: grid; } body.bd-a6 .bd-wc-face { grid-area: 1 / 1; } body.bd-a6 .bd-wc-scene:not(.is-flipped) .bd-wc-verso, body.bd-a6 .bd-wc-scene.is-flipped .bd-wc-recto { display: flex; visibility: hidden; } / 🔑 PLUS D'AIR ENTRE LES BLOCS DU VERSO (demande du 11/09 au soir). Les trois valeurs ci-dessous sont celles de bd-accueil-2.css, augmentees : 12 -> 26 sous l'en-tete, 14 -> 26 entre le calendrier et les creneaux, 14 -> 22 avant le bouton. Elles etaient reglees pour une carte qui s'ajustait a son contenu ; depuis que la hauteur est figee sur celle du recto, il y a de la place, et la respiration se prend la plutot que de s'accumuler en bas. Gain mesure : le vide du bas passe de 100 a 54px. / body.bd-a6 .bd-wc-tete { margin-bottom: 26px; } body.bd-a6 .bd-wc-scene.is-expanded .bd-wc-agenda { margin-top: 26px; padding-top: 26px; } body.bd-a6 .bd-wc-confirmer { margin-top: 22px; } / 🔑 LA CARTE RACCOURCIT — maquette retenue le 11/09 au soir, sur trois montrees. Le recto est la face la plus haute, donc c'est LUI qui fixe la hauteur des deux ; sa photo passe de 270 a 190px et la carte tombe de 619 a 539. Les deux autres pistes ont ete vues et ecartees : ecarter les blocs du verso (le vide se deplacait au milieu), et agrandir les cases du calendrier — celle-la butait sur la LARGEUR, une case etant un carre, et ne reprenait que 24px sur 116. 🔴 LE CADRAGE SE RECALCULE AVEC LA HAUTEUR, il ne suit pas tout seul. Le cadre fait 334px de large sur un telephone de 390 : la photo, qui est en portrait, est donc rendue sur 414px de haut et on n'en voit que 190. Le visage occupe de 10% a 62% du fichier, soit de 41 a 257px sur ces 414, son centre tombe a 149. Pour amener la fenetre de 190px autour de ce centre il faut la poser a 54px du haut, sur une course de 224 : 24%. A 18%, la valeur d'origine prevue pour un cadre de 270px, le menton sortait par le bas. ⚠️ Si la hauteur du cadre rebouge, ce pourcentage est a REFAIRE. / body.bd-a6 .bd-wc-photo { height: 190px; } body.bd-a6 .bd-wc-photo img { / 24 -> 32% le 11/09 au soir : « monte un peu plus le visage ». ⚠️ LE POURCENTAGE MONTE QUAND LE VISAGE MONTE, et c'est contre-intuitif : la valeur positionne l'IMAGE dans son cadre, et comme l'image est plus haute que le cadre, augmenter le chiffre la fait glisser vers le haut. On voit donc plus bas dans la photo, et le visage remonte a l'ecran. Mesure : 32% pose la fenetre a 72px du haut du rendu au lieu de 54, soit 18px de gagnes. / object-position: 50% 32%; } / ⚠️ LE VIDE SOUS LE CALENDRIER EST ASSUME. La face la plus courte laisse de la place sous son bouton, forcement : c'est le prix de la hauteur figee, et c'est ce vide qui empeche la page de sauter. 🔴 NE PAS LE CENTRER. Essaye et mesure le 11/09 au soir : centrer le contenu (sur .bd-wc-corps, seul endroit ou ca fait quelque chose, son flex-grow: 1 avalant toute la place) creuse un trou de 90px SOUS LE TITRE, qui se lit comme un element manquant. En bas, la meme place se lit comme la marge de la carte. Le defaut est le meilleur des deux. / } @media (max-width: 900px) { body.bd-a6 .bd-a6-duo, body.bd-a6 .bd-a6-svc-grille, body.bd-a6 .bd-a6-projet .bd-a6-duo { grid-template-columns: minmax(0, 1fr); } / 🔑 LES TITRES DES DEUX BLOCS A DEUX COLONNES REPRENNENT LA TAILLE DES AUTRES (demande du 11/09 au soir : la meme que « Un site, une visibilite, des outils… »). Ils sont brides plus haut dans la feuille, a 2,6rem, parce qu'ils vivent dans une colonne de 420px ou 62px les cassaient en quatre lignes. Cette raison DISPARAIT ICI : a partir de ce seuil la grille passe en une colonne, le titre a toute la largeur, et rien ne justifie plus qu'il soit plus petit que celui des Services. ⚠️ La hauteur de ligne revient aussi a 1.06, celle de la regle de base : sans elle les deux titres auraient la meme taille mais pas le meme interligne, et l'ecart se verrait sur trois lignes. / / 🔑 LES TROIS TITRES DE SECTION GROSSISSENT SUR TELEPHONE (demande du 11/09 au soir). Le jeton --taille-clients est regle pour un grand ecran : son plancher de 2,2rem (35,2px) sert sous 819px de large, et a cette taille un titre de section ne pesait pas plus qu'un paragraphe en gras. Le plancher passe a 2,6rem (41,6px) et la pente a 11vw, de sorte que le titre suit vraiment la largeur de l'ecran : 41,6px a 320, 42,9 a 390, 47,3 a 430, puis le plafond de 3,3rem (52,8px). ⚠️ La regle vise « h2 » ET « .bd-a6-duo-mot h2 » : le second a son propre bridage plus haut dans la feuille, et sans lui le nommer il resterait petit. Les deux doivent bouger ensemble, c'est tout l'objet du reglage. / / ⚠️ ET L'INTERLIGNE AUSSI : cette regle redeclare line-height, donc elle annulait le 1,26 pose plus haut et les trois titres retombaient a 1,06 sur telephone. Mesure faite : c'est ce qui manquait au premier essai. / / 🔴 REGLAGE DU 12/09 AU SOIR : LES TROIS TITRES DE SECTION PRENNENT LA TAILLE ET L'INTERLIGNE DU H1, A L'IDENTIQUE. Sa demande : « Un site, une visibilite, des outils », « De quoi avez-vous besoin ? » et « D'abord un constat, ensuite seulement si ca vaut le coup » doivent avoir la meme font-size et le meme line-height que le titre du hero. La fourchette d'avant, clamp(2,6rem, 11vw, 3,3rem), les faisait GROSSIR avec l'ecran : 41,6px a 320, 42,9 a 390, 47,3 a 430, puis 52,8 au plafond — donc plus gros que le H1 partout au-dessus de 320px, et jusqu'a 11px d'ecart a 430. Elle est remplacee par la valeur FIXE du H1. 🔑 LES DEUX VALEURS SONT CELLES DU H1 TELEPHONE, ecrites pareil : 2,6rem (41,6px) et 1,2. Si l'une des deux bouge la-haut, elle doit bouger ici — c'est le meme reglage, pas deux reglages qui se ressemblent. ⚠️ La regle vise « h2 » ET « .bd-a6-duo-mot h2 » : le second a son propre bridage plus haut dans la feuille (clamp 1,75rem / 3,1vw / 2,6rem), et sans le nommer il resterait plus petit que les deux autres. ⚠️ ET L'INTERLIGNE DOIT ETRE REDECLARE ICI : cette regle ecrase le 1,26 pose dans la regle de base. L'omettre ferait retomber les trois titres a 1,06. Piege deja rencontre le 11/09. ⚠️ Ce bloc va jusqu'a 900px alors que le H1 bascule a 799 : entre 800 et 900 les titres sont donc a 41,6/1,2 quand le H1 est a 44,8/1,1. Sur telephone, le cas qui l'interesse, les deux sont identiques. / body.bd-a6 h2, body.bd-a6 .bd-a6-duo-mot h2 { font-size: 2.6rem; line-height: 1.2; } / ⚠️ L'inversion de « Parlons-en » est ANNULEE en une colonne : on veut lire le discours avant le formulaire. C'est la raison pour laquelle elle se fait par « order » et non dans le markup. / body.bd-a6 .bd-a6-projet .bd-a6-fiche, body.bd-a6 .bd-a6-projet .bd-a6-duo-mot { order: 0; } body.bd-a6 .bd-a6-pied-grille { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { body.bd-a6 .bd-a6-couloir, body.bd-a6 .bd-a6-chrome-inner { padding-left: 16px; padding-right: 16px; } / Les retraits du panneau, valeurs de l'accueil 4 sous 800px. 🔴 LATERAUX RAMENES DE 24 A 20px LE 12/09, sur demande. Le titre est passe a quatre lignes serrees : chaque pixel rendu a la colonne compte, et 8px de largeur gagnes (4 de chaque cote) evitent une coupure de mot. ⚠️ LE HAUT ET LE BAS RESTENT A 40px : la demande porte sur les cotes. D'ou le raccourci a deux valeurs, « 40px 20px », et non un seul nombre. ⚠️ --a6-inset SUIT, sinon les deux se contredisent : c'est lui qui porte le retrait sur la regle de base (« padding: var(--a6-inset) »), et un ecran plus large que 640 le relirait a 24 alors que le raccourci local dit 20. Les deux ensemble, toujours. / body.bd-a6 .bd-a6-hero { --a6-inset: 20px; padding: 40px 20px; margin: 0 4px; } / 🔴 DE L'AIR ENTRE LE LOGO ET LE TITRE (12/09) : 26px -> 40px. Sur telephone le lockup etait PLUS SERRE que sur ordinateur (26 contre 38) alors que le titre y est devenu plus lourd — quatre lignes au lieu de deux. Les deux blocs se touchaient presque et le logo semblait coller au H1. 40px le detachent franchement, et passent meme au-dessus du reglage d'ordinateur : c'est voulu, un titre de quatre lignes demande plus de respiration qu'un titre de deux. ⚠️ C'est bien une marge BASSE du lockup, pas une marge haute du titre : le H1 n'a pas de marge en haut (« margin: 0 0 18px ») et lui en donner une ferait double emploi le jour ou le lockup disparait. / body.bd-a6 .bd-a6-lockup { margin-bottom: 40px; } / 🔴 PLUS AUCUN BOUTON EN PLEINE LARGEUR, SUR AUCUNE LARGEUR D'ECRAN (11/09 au soir). Les deux appels du hero et le bouton d'envoi des formulaires s'etiraient ici d'un bord a l'autre, pastille poussee a droite. Retire sur demande : « tous les boutons ne doivent pas etre en pleine largeur ». Ils gardent donc partout leur largeur naturelle, celle de leur libelle, et se replient a la ligne quand la place manque — .bd-a6-hero-cta est deja en flex-wrap. ⚠️ Ne pas remettre cette regle « pour le confort du pouce » : c'est un choix explicite, pas un oubli de responsive. / body.bd-a6 .bd-a6-carte { max-width: none; } / 🔑 SUR TELEPHONE, LES PETITS BOUTONS REPRENNENT LE GABARIT NORMAL. Demande du 11/09 au soir, precisee « uniquement sur mobile » : les boutons de la carte de l'interlocuteur et ceux des cartes de services portent .bd-a2-btn--sm, qui les descend a 12,5px de texte et 20px de pastille. Au doigt, c'est trop petit. On restitue donc ici les valeurs de .bd-a2-btn, et elles seules. ⚠️ CES QUATRE VALEURS SONT UNE RECOPIE de la regle de base de bd-accueil-2.css (gap, retrait, taille de texte, pastille de 25px et fleche de 10px). C'est le prix a payer pour annuler une classe sans toucher a une feuille partagee par quatre pages : si le bouton change la-bas, il faut le changer ICI AUSSI. Il n'y a pas de « unset » qui ferait le travail, --sm ne fait que surcharger. / body.bd-a6 .bd-a2-btn--sm { gap: 0.75rem; padding: 0.75rem 1.15rem 0.75rem 1.4rem; font-size: 14px; } body.bd-a6 .bd-a2-btn--sm .bd-a2-btnicon { width: 25px; height: 25px; } body.bd-a6 .bd-a2-btn--sm .bd-a2-btnsvg { width: 10px; height: 10px; } / Le bouton du verso suit la meme regle : il est du meme bloc que ceux du recto, il doit avoir la meme taille au doigt. / body.bd-a6 .bd-wc-confirmer { gap: 0.75rem; padding: 0.75rem 1.15rem 0.75rem 1.4rem; font-size: 14px; } body.bd-a6 .bd-wc-confirmer svg { width: 25px; height: 25px; padding: 7px; } body.bd-a6 .bd-a6-pied-barre-inner { flex-direction: column; align-items: flex-start; } } / ========================================================================= * LA FENETRE DE RENDEZ-VOUS, VERSION ACCUEIL 6. * * 🔴 CETTE FENETRE EST PARTAGEE PAR TOUT LE THEME. Elle est rendue UNE fois * dans le pied par inc/rdv-modal.php, et l'accueil 2, l'accueil 3, * l'accueil 4, l'en-tete et le bouton flottant l'ouvrent tous. Sa robe * d'origine est SOMBRE (boite #0f172a, voile rgba(2,6,23,.72)). * Tout ce qui suit est donc prefixe « body.bd-a6 » : ailleurs, rien ne bouge. * Le jour ou la nouvelle robe devra valoir partout, ce sera un passage a * part, dans inc/rdv-modal.php, et pas une levee de ce prefixe. * * 🔑 POURQUOI CE PREFIXE SUFFIT A GAGNER : la feuille d'origine est ECRITE * EN LIGNE dans le pied, donc APRES notre fichier dans l'ordre du document. * A specificite egale elle l'emporterait. Ses selecteurs valent une classe * (0,1,0) ou une classe plus un element (0,2,1) ; les notres ajoutent * « body.bd-a6 » et montent d'un cran a chaque fois. Mesure faite, pas * supposee. ⚠️ Ne jamais poser ici un selecteur SANS body.bd-a6 : il * perdrait, et le symptome serait une fenetre a moitie sombre. * * 🔑 AUCUNE REGLE @media de la feuille d'origine ne nous gene : une media * query ne change pas la specificite. Son « @media (min-width:721px) * .bd-rdv-box{max-width:780px} » vaut toujours (0,1,0) et perd. * ====================================================================== / / --- Le voile : celui du menu deplie, au pixel --------------------------- Repris de .bd-a2-mm : rgba(244,248,252,.55) + blur(16px) saturate(1.3). ⚠️ Ne pas recopier « a peu pres » : c'est la meme page, le raccord entre le menu et cette fenetre doit etre invisible. / body.bd-a6 .bd-rdv-overlay { / 🔴 100010 ET PAS 100000. MESURE : le bandeau cookies est a 100001 et son voile a 100002, donc la fenetre de rendez-vous d'origine passait DESSOUS des la premiere visite, a moitie recouverte. Le defaut existe sur tout le site ; il n'est corrige ici que pour cette page, comme le reste. 100010 est le rang deja retenu pour la fenetre de l'audit, meme raison. / z-index: 100010; align-items: center; padding: 22px 16px; background: rgba(244, 248, 252, 0.55); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); } / --- La boite : la couleur du hero -------------------------------------- / body.bd-a6 .bd-rdv-box { max-width: 470px; padding: 26px 22px 24px; color: var(--a6-titre); background: var(--panneau); border: 1px solid var(--a6-trait); border-radius: 32px; box-shadow: 0 30px 80px -28px rgba(10, 23, 38, 0.38); } @media (min-width: 760px) { body.bd-a6 .bd-rdv-box { max-width: 760px; padding: 32px 30px 28px; } } body.bd-a6 .bd-rdv-close { top: 16px; right: 16px; display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--a6-titre); background: rgba(255, 255, 255, 0.7); border: 1px solid var(--a6-trait); } body.bd-a6 .bd-rdv-close:hover { background: #ffffff; border-color: var(--accent); } body.bd-a6 .bd-rdv-title { margin: 0 46px 6px 0; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; color: var(--a6-titre); } / Le mot bleu du titre, pose par le script a chaque etape. / body.bd-a6 .bd-rdv-title b { color: var(--accent); font-weight: 700; } body.bd-a6 .bd-rdv-intro { margin: 0 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--a6-corps); } / --- Les deux temps ------------------------------------------------------ 🔑 LA BARRE A UNE MARGE A DROITE, PAS UN RETRAIT : un padding retrecirait la piste et le remplissage n'irait plus jusqu'au bout. Les 46px degagent la croix de fermeture, qui est en position absolue au-dessus. / body.bd-a6 .bd-a6-rdv-barre { height: 3px; margin: 6px 46px 14px 0; border-radius: 3px; background: var(--a6-trait); overflow: hidden; } body.bd-a6 .bd-a6-rdv-barre i { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.3s ease; } @media (prefers-reduced-motion: reduce) { body.bd-a6 .bd-a6-rdv-barre i { transition: none; } } body.bd-a6 .bd-a6-rdv-compte { margin: 0 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 1.75px; text-transform: uppercase; color: var(--a6-corps); } body.bd-a6 .bd-a6-rdv-etape[hidden] { display: none; } / --- Le rappel du creneau, quand on vient de la carte -------------------- / / 🔴 « hidden » NE CACHE RIEN SOUS UN display:flex : l'attribut ne vaut qu'un « display:none » de feuille utilisateur, que la moindre regle d'auteur ecrase. Les blocs masques par script ont donc chacun leur regle explicite. Symptome constate : le pied d'un temps restait visible pendant le precedent. / body.bd-a6 .bd-a6-rdv-pied[hidden], body.bd-a6 .bd-a6-rdv-retour[hidden] { display: none; } / --- Temps 2 : le type de projet, en cartes ------------------------------ 🔑 LE VRAI CHAMP EST LE