/* style.css — be. Feuille ECRITE depuis le releve du Framer source,
jamais copiee d une coquille voisine.
Ce qu elle ne fait pas, et pourquoi :
- aucune palette en :root : render.mjs injecte les huit jetons APRES ce
, une palette ici les ecraserait selon l ordre des feuilles ;
- aucun @font-face ni @import : la feuille n embarque ni ne telecharge de
fonte. La famille relevee est demandee par render.mjs dans le , et
citee ici en tete d une pile systeme qui tient si le telechargement echoue ;
- aucun background-image: url() : R1. Le seul motif tolere est un
mask-image en data URI pose sur un aplat ;
- aucune peinture du cadre VIDE : _lib/cadre-vide.css tient l etat de repos
en (0,1,2) et sera pose en queue par poser-cadre-vide.mjs ;
- aucun overflow-x sur body : cela aveuglerait R2 par le parcours
d ancetres de clippe(). */
:root {
--cont: 1340px;
--ray: 12px;
--ray-btn: 12px;
--ray-pst: 20px;
--pas: 100px;
--ombre: rgba(178, 178, 178, 0.447) 0px 2.97876px 15.915px 0px;
}
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
margin: 0;
background: var(--fond);
color: var(--texte);
font-family: "League Spartan", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 19px;
line-height: 1.3;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0 }
ul, ol { margin: 0; padding: 0; list-style: none }
a { color: inherit; text-decoration: none }
img, svg, video { display: block; max-width: 100% }
button, input, textarea, select { font: inherit; color: inherit }
address { font-style: normal }
:focus-visible { outline: 2px solid var(--marque); outline-offset: 3px }
.be-corps { display: block }
.be-in { width: min(100% - 40px, var(--cont)); margin-inline: auto }
.be-bd {
position: relative;
/* Deux FACTEURS, pas deux longueurs : le jeton de pas garde ses deux
reductions de point de rupture (0,79 en tablette, 0,63 en telephone) et
le rythme propre au role se multiplie par-dessus. Poser des pixels ici
rendrait la coquille rigide sur mobile. */
padding: calc(var(--pas) * var(--pash, 1)) 0 calc(var(--pas) * var(--pasb, 1));
background: var(--fond);
}
/* Rythme des fonds : releve bande par bande sur la source (fond de section). */
.be-hr { background: var(--texte) }
.be-is,
.be-ul,
.be-cb,
.be-fc { background: var(--texte); color: var(--fond) }
.be-is .be-sur,
.be-ul .be-sur,
.be-cb .be-sur,
.be-fc .be-sur,
.be-is .be-chapo,
.be-ul .be-chapo,
.be-cb .be-chapo,
.be-fc .be-chapo,
.be-is .be-tt__ac,
.be-ul .be-tt__ac,
.be-cb .be-tt__ac,
.be-fc .be-tt__ac { color: var(--fond) }
.be-is .be-btn,
.be-ul .be-btn,
.be-cb .be-btn,
.be-fc .be-btn {
background: var(--fond); border-color: var(--fond); color: var(--texte);
}
.be-is .be-tel,
.be-ul .be-tel,
.be-cb .be-tel,
.be-fc .be-tel {
background: transparent; border-color: var(--fond); color: var(--fond);
}
.be-tt, .be-hr__tt, .be-ar__h1 {
font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 400;
line-height: 1;
letter-spacing: 0em;
/* Un mot qui ne tient pas dans sa colonne se coupe plutot que de deborder :
aquix (5 sept 2026), titre de 64px dans le flanc de 330px du bloc tarifs,
« titreAccent » du temoin (11 lettres, 495px) sortait de la fenetre a 1440
et a 360, gate-debordement ROUGE sur 18 controles du temoin. Ne joue que
quand aucune cesure de mot n est possible. */
overflow-wrap: anywhere;
}
.be-tt { font-size: clamp(28px, 3.2vw, 40px) }
.be-hr__tt {
font-size: clamp(26px, 4.5vw, 65px);
line-height: 1.14;
letter-spacing: -.015em;
}
.be-ar__h1 {
font-size: clamp(31px, 3.7vw, 45px);
letter-spacing: -.015em;
}
.be-tt__ac { font-style: normal; color: var(--encre-marque, var(--marque)) }
.be-sur {
font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 13px;
letter-spacing: .11em;
text-transform: uppercase;
color: var(--accent);
}
.be-chapo { font-size: 20px; color: var(--texte-doux); max-width: 84ch }
.be-mnt { font-size: 13px; color: var(--texte-doux) }
.be-maj { font-size: 14px; color: var(--texte-doux) }
/* R7 : une porte non habillee n est PAS comptee comme porte. .be-tel doit
donc porter un fond ou un bord visible partout ou il apparait, sans quoi
toutes les pages sortent rouges faute d appel. */
.be-btn, .be-tel {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: var(--ray-btn);
font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1;
text-align: center;
cursor: pointer;
}
.be-btn {
padding: 18px 10px;
border: 1px solid var(--marque);
background: var(--marque);
color: var(--sur-marque);
}
.be-tel {
padding: 14px 26px;
border: 1px solid var(--bordure);
background: var(--fond);
color: var(--encre-marque, var(--marque));
}
.be-btn:hover, .be-tel:hover { filter: brightness(.94) }
.be-btn--hd { padding: 15px 10px; font-size: 16px }
.be-btn--hr { padding: 18px 10px; font-size: 16px }
.be-tel--hd { padding: 15px 26px; font-size: 16px }
.be-tel--hr { padding: 18px 26px; font-size: 16px }
/* R7 : les deux portes vont ensemble, donc elles se tiennent dans le meme
contenant — la mesure juge sur le PARENT DIRECT de l appel. stretch leur
donne la meme hauteur malgre deux rembourrages differents. */
.be-paire {
display: flex;
flex-wrap: wrap;
/* R7 impose que l appel et le devis partagent le MEME contenant ; elle
n impose pas qu ils aient la meme hauteur. Le modele mesure 46,5 et
50,5 dans son heros et les centre : « stretch » etirait le plein a la
hauteur du fantome et effacait cette difference relevee. */
align-items: center;
gap: 12px;
}
.be-ic, .be-chev, .be-fl { flex: 0 0 auto }
.be-ic { width: 17px; height: 12px; color: var(--encre-marque, var(--marque)) }
.be-chev { width: 12px; height: 8px; transition: transform .2s ease }
.be-fl { width: 18px; height: 12px }
/* Le PICTOGRAMME tient les cotes RELEVES sur le modele, pas une taille de
maison : la bande a icones de la reference dessine des glyphes de 22px, la
bande d avantages des glyphes de 24. La PASTILLE, elle, est une affordance
de lecture : rond plein d accent, glyphe blanc, posee au coin bas d une
carte photographique et en fin de colonne partout ailleurs. */
.be-pic { display: inline-flex; flex: 0 0 auto; width: var(--lpic, 24px); height: var(--hpic, 24px); color: var(--accent) }
.be-pic svg { width: 100%; height: 100%; fill-rule: evenodd;
fill: var(--pic-plein, currentColor); stroke: var(--pic-encre, none);
stroke-width: var(--pic-trait, 0); stroke-linecap: var(--pic-bout, round);
stroke-linejoin: var(--pic-angle, round) }
.be-pst { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
width: calc(var(--lpic, 16px) + 26px); height: calc(var(--lpic, 16px) + 26px);
border-radius: 999px; background: var(--accent); color: var(--sur-marque) }
.be-pst svg { width: var(--lpic, 16px); height: var(--hpic, 16px) }
/* Sur une carte a fond, la pastille suit le meme regime que le texte juste
au-dessus : la carte porte un voile sombre et passe ses intitules en blanc,
donc un rond plein d accent y hurle. Le modele pose un rond BLANC A 20%,
ancre au coin BAS-droit (mesure sur le Framer en ligne : carte 304x378,
pastille 38x38, 24px du bord droit ET du bord bas). Le haut est reserve
a la vignette. Ailleurs — carte claire, fin de colonne — l aplat d accent
reste le bon choix, d ou une regle portee par la seule branche --fond. */
/* LA PASTILLE DE LA CARTE A FOND EST DANS LE FLUX, apres le texte, calee a droite :
posee en absolu au coin bas-droit, elle recouvrait les dernieres lignes du texte
des que la carte se remplissait (renovix, 6 sept 2026 : 40 RECOUVERT par svg /
path / span.X-pst). Meme taille, meme coin, plus de chevauchement possible. */
.be-crt--fond .be-pst { position: static; justify-self: end; margin-top: 10px; z-index: 2; width: calc(var(--lpic, 16px) + 22px); height: calc(var(--lpic, 16px) + 22px); background: rgba(255, 255, 255, .2); color: #fff }
.be-crt:not(.be-crt--fond) .be-pst { margin-top: 4px }
/* Un seul point d entree pour la hauteur d un cadre : --h quand un ancetre
la pose en ligne (duo, bandeau, hero, blocsSeo), --hv de la bande sinon
(cartes, visuel de chiffres — emis HORS de la liste — et blogArticle).
La hauteur ne bouge PAS aux points de rupture : seules les colonnes
respirent. Deux mesures differentes du meme emplacement feraient deux
ratios pour un seul data-slot, et R5a les compare. */
.be-vue {
display: grid;
place-items: center;
overflow: hidden;
border-radius: var(--ray);
min-width: 24px;
min-height: 24px;
height: var(--h, var(--hv, 220px));
}
.be-vue img { width: 100%; height: 100%; object-fit: cover }
.be-hd { --hv: 32px }
.be-hr { --hv: 760px }
.be-pd { --hv: 32px }
.be-fa { --hv: 32px }
.be-pr { --hv: 340px }
.be-bss { --hv: 400px }
.be-bss { --hic: 25px; --lic: 25px }
.be-ar { --hv: 360px }
.be-ar { --hic: 25px; --lic: 25px }
.be-ct { --hv: 460px }
.be-ch { --hv: 260px }
.be-mq { --hv: 24px }
.be-mq { --hic: 25px; --lic: 25px }
.be-cps { --hv: 420px }
.be-fc { --hv: 32px }
.be-lg { --hv: 340px }
.be-wh { --hv: 440px }
.be-xp { --hv: 460px }
.be-ul { --hv: 380px }
.be-fp { --hv: 480px }
.be-fp { --hic: 25px; --lic: 25px }
.be-sv { --hv: 340px }
.be-re { --hv: 340px }
.be-mt { --hv: 220px }
.be-mt { --hic: 25px; --lic: 25px }
.be-cr { --hv: 340px }
.be-b2 { --hv: 340px }
.be-zn { --hv: 340px }
.be-ma { --hv: 340px }
.be-bl { --hv: 340px }
.be-gp { --hv: 340px }
.be-tr { --hv: 340px }
.be-ad { --hv: 24px }
.be-ad { --hic: 25px; --lic: 25px }
.be-av { --hv: 340px }
.be-sp { --hv: 340px }
.be-cb { --hv: 400px }
.be-ur { --hv: 376px }
.be-vlt__vt .be-vue { height: 150px }
/* T4 : le marqueur des puces est le Coche() du gabarit, jamais un glyphe de
liste — d ou le list-style: none global. */
.be-pucs { display: grid; gap: 9px; margin-top: 4px }
.be-pucs li {
display: grid;
grid-template-columns: 17px minmax(0, 1fr);
gap: 11px;
align-items: start;
font-size: 15px;
color: var(--texte-doux);
}
.be-pucs .be-ic { margin-top: 6px }
.be-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px }
.be-tags li {
padding: 5px 11px;
border: 1px solid var(--bordure);
border-radius: 999px;
font-size: 12px;
color: var(--texte-doux);
}
/* R3 : pistes strictement egales. minmax(0, 1fr) et jamais min()/max-content,
qui donneraient des largeurs voisines mais inegales. Le --col pose en ligne
par le gabarit tient la mesure ; les points de rupture ecrivent --cols, qui
passe devant sans avoir a battre un style en ligne. */
.be-gr {
display: grid;
grid-template-columns: repeat(var(--cols, var(--col, 3)), minmax(0, 1fr));
/* --gtr = ecart RELEVE sur la bande, pose en ligne (varGtr). Sans jeton, la
gouttiere globale d avant, octet pour octet. */
gap: var(--gtr, 24px);
margin-top: 44px;
/* meme garde que .rgs : sans jeton --lrg, min(100%, 100%) vaut 100% et
margin-inline: auto ne deplace rien. Avec le jeton, la rangee se resserre
a l emprise relevee et se recentre. */
width: min(100%, var(--lrg, 100%));
margin-inline: auto;
}
/* LE FLANC. Toutes les bandes ne posent pas leur titre AU-DESSUS de la grille :
certaines le posent A COTE. Le mot --gauche nomme le cote du TEXTE, pas celui
des cartes — la grille prend ce qui reste. Sans conteneur, titre et grille
resteraient deux freres empiles : une classe seule ne suffit pas. */
.be-flc {
display: grid;
grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
gap: 56px;
align-items: start;
}
.be-flc--droite { grid-template-columns: minmax(0, 1fr) minmax(0, 330px) }
.be-flc--droite .be-flc__tx { order: 2 }
/* La colonne de texte du flanc est BORNEE par sa piste : sans piste declaree, la
grille interne prend la largeur max-content de son enfant le plus large —
aquix (5 sept 2026) : un chapo « max-width: 48ch » (438px a 20px) dans une
piste de 330px, texte a 1030..1469 sur une fenetre de 1440, gate-debordement
ROUGE. minmax(0, 1fr) : la piste ne depasse jamais le conteneur. */
.be-flc__tx { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start }
/* Au flanc, la grille n a plus de titre au-dessus : la marge qui l en
separait ne separe plus rien. */
.be-flc .be-gr { margin-top: 0 }
.be-tt + .be-flc, .be-chapo + .be-flc { margin-top: 28px }
/* LA PEAU DE LA CARTE SE MESURE, ELLE NE S INVENTE PAS. Le cadre blanc borde
arrondi ombre etait pose d office sur toutes les grilles ; les cartes du
modele n en portent aucun. Chaque trait passe donc par une variable que la
regle de bande, ecrite depuis le releve, remplace quand la carte du modele
est NUE. Les valeurs par defaut restent celles du cadre : une coquille dont
le modele borde vraiment ses cartes ne change pas. */
.be-crt {
display: grid;
align-content: start;
min-height: var(--hc, 0px);
background: var(--crt-fond, var(--carte));
border: var(--crt-bord, 1px) solid var(--bordure);
border-radius: var(--crt-ray, var(--ray));
box-shadow: var(--crt-ombre, var(--ombre));
overflow: hidden;
}
/* Une carte nue ne porte plus la forme : c est son VISUEL qui la porte. */
.be-crt .be-vue { border-radius: var(--crt-rayv, 0) }
/* Le cadre LIBRE (carte sans photographie mesuree sur le modele) tient une
proportion declaree au lieu de flotter avec la largeur de colonne. Les deux
jetons sont poses ENSEMBLE par l emetteur, ou pas du tout : sans eux la
regle retombe mot pour mot sur le comportement d avant — proportion auto et
hauteur --hv du cadre generique. */
.be-crt:not(.be-crt--fond) .be-vue:not(.be-vue--ic) {
aspect-ratio: var(--ratv, auto);
height: var(--ratv-h, var(--h, var(--hv, 220px)));
}
/* Un PICTOGRAMME n est pas une photographie : il se pose en pastille en tete de
carte, il ne remplit pas un cadre pleine largeur. --hv mesure ici la hauteur
du DESSIN, pas celle d une vignette. */
.be-crt .be-vue--ic {
/* La pastille a la taille du DESSIN releve (--lic x --hic) plus son air,
vide comme pleine : c est un cadre a FORME, pas une boite qui suit son
contenu. Avant : width max-content — a vide la pastille s etirait sur
sa legende (418 px sur servix, la largeur d un alt), a plein elle prenait
la proportion de la photo versee (0.76 a 1.36 selon la photo) ; aucun
contrat R5a ne pouvait la tenir, et R5b reclamait 836 px de source pour
un cadre de 133 (3 septembre 2026). content-box : lic x hic est la
place du dessin, quel que soit l air pose par --ic-pad (y compris 0). */
box-sizing: content-box;
width: var(--lic, 60px);
height: var(--hic, 44px);
padding: var(--ic-pad, 14px);
margin: var(--ic-mrg, 24px 24px 0);
background: var(--ic-fond, var(--fond-2));
border-radius: var(--crt-ray, var(--ray));
}
.be-crt .be-vue--ic img { width: 100%; height: 100%; object-fit: contain }
.be-crt__cp { display: var(--crt-disp, grid); flex-direction: column;
gap: var(--crt-ecartt, 10px); align-content: start;
padding: var(--crt-pad, 24px);
text-align: var(--crt-ali, start) }
/* Les deux respirations de la carte a pictogramme. --pic-sous vaut la
difference entre l ecart large du modele (sous le glyphe) et son interligne
de texte ; --pic-just centre le seul glyphe quand la carte du modele centre
ses enfants, le bloc de texte gardant son propre alignement. Les deux jetons
sont absents par defaut : la regle est alors sans effet. */
.be-crt__cp > .be-pic { justify-self: var(--pic-just, start); margin-bottom: var(--pic-sous, 0) }
/* LA CARTE A FOND. Quand le releve dit que le visuel COUVRE la carte, la carte
n est plus une plaque surmontee d une image : elle EST l image, et le contenu
se pose dessus, en bas. Rendue en coiffe, la grille de services sortait en
plaques blanches a vignette — l ecart de qualite visible avec le modele.
Le voile sombre est obligatoire : sans lui le titre passe sur n importe quel
pixel de la photographie et devient illisible une fois sur deux. */
.be-crt--fond {
position: relative;
/* LE RAPPORT D ASPECT N EST PLUS SUR LA CARTE : il est porte par ::before,
pose dans la meme case de grille que le bloc de texte (voir plus bas).
Troisieme mesure (cleannovaa, 4 sept 2026, 18h46) : avec min-height:
max-content l article restait a 249px pour 341px de contenu — sur une
boite a rapport d aspect de largeur definie, les mots-cles intrinseques de
l axe de bloc se TRANSFERENT par le rapport (CSS Sizing 4 §5), ils ne
mesurent pas le contenu. La carte mesure desormais max(rapport, contenu). */
/* LA CARTE GRANDIT AVEC SON TEXTE. .X-crt pose min-height: var(--hc, 0px) :
un minimum EXPLICITE de 0 eteint le minimum automatique de la grille, et
une boite de pur rapport d aspect ne grandit alors plus jamais pour son
contenu — elle le coupe (overflow: hidden). Mesure du 4 septembre 2026
sur cleannovaa, grilleProduits compose sur la tuile de services (rapport
1,36) : article 338x249, contenu 341px, h3 coupe sur 7 controles. On
rend donc le minimum automatique a la carte a fond ; le plafond --hcm
d hier devient le PLANCHER du bloc de texte (voir .X-crt__cp plus bas) :
la hauteur relevee sur le modele est la constante du dessin, elle ne peut
etre qu un minimum, jamais une coupe.
Deuxieme mesure, meme soir : min-height: auto ne suffit pas — .X-crt est
overflow: hidden, donc un CONTENEUR DE DEFILEMENT, et le minimum
automatique d un conteneur de defilement vaut zero (CSS Grid §6.6, CSS
Sizing). Les 7 COUPE de cleannovaa sont restes apres le premier rejeu.
On ecrit donc le minimum en clair : max-content, la hauteur intrinseque du
contenu, que le rapport d aspect ne peut plus ecraser. */
min-height: auto;
align-content: end;
/* PIEGE PAYE (30 aout 2026) : le second sol etait le PLATEAU d une carte tant
que le sol des bandes etait blanc. Depuis que la palette porte un sol
teinte et que les bandes alternent fond/fond-2, la carte a fond posee sur
une bande fond-2 devient invisible — meme couleur qu elle. Elle prend le
jeton de CARTE quand le modele en declare un. */
background: var(--fond-2);
border: 0;
/* LE RAYON EST REDECLARE ICI, pour la meme raison que la marge plus bas.
La peau de bande pose « --crt-ray: 0 » des que la carte du modele est NUE
— pas de plaque, pas de bord — et deporte la forme sur le visuel via
« --crt-rayv ». Vrai d une carte a coiffe : c est la vignette qui est
arrondie, pas la carte, qui n existe pas. FAUX d une carte a fond : elle
EST l image, donc c est elle qui porte la forme, et le visuel pose en
inset:0 doit rester carre pour ne pas doubler l arrondi. Sans cette
ligne, le 16px que le releve a bel et bien lu sur le modele n atterrit
nulle part et la grille de services sort a angles droits. */
border-radius: var(--crt-rayv, var(--ray));
}
/* LE CADRE DE LA CARTE A FOND GARDE SON RAPPORT quand la carte grandit pour son
texte : ancre en haut, il mesure le rapport releve (--rat), jamais la carte
entiere. cleannovaa (5 sept 2026) : la carte grandissant avec le texte (voir
::before), le cadre en inset:0 suivait et R5a lisait 0,87 a 1,28 pour un
rapport declare de 1,36 sur douze pages de produits. Quand le texte tient,
carte et cadre coincident comme avant ; quand il deborde, le bas de la carte
montre son sol sous le texte, et le cadre reste ce qu il declare. */
.be-crt--fond .be-vue { position: absolute; top: 0; left: 0; right: 0; height: auto; aspect-ratio: var(--rat, .8); max-height: 100%; border-radius: 0 }
.be-crt--fond::before { content: ''; grid-area: 1 / 1; aspect-ratio: var(--rat, .8); min-height: var(--hcm, 0px) }
.be-crt--fond > .be-crt__cp { grid-area: 1 / 1; align-self: end }
.be-crt--fond::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .30) 46%, rgba(0, 0, 0, 0) 78%);
}
/* La marge interieure est REDECLAREE ici et ne peut pas venir de la peau de
bande. La peau mesure la carte a COIFFE du modele — une photo, puis du texte
dessous, donc une marge de 18px en tete et RIEN sur les cotes, le texte est
deja aligne sur le bord de la photo. Posee telle quelle sur une carte a
fond, cette meme valeur colle le titre au bord du cadre. */
.be-crt--fond .be-crt__cp { position: relative; z-index: 1; align-content: end; min-height: var(--hcm, 0px); padding: var(--crtf-pad, 24px) }
.be-crt--fond .be-crt__tt,
.be-crt--fond .be-crt__tx,
.be-crt--fond .be-crt__mt,
.be-crt--fond .be-crt__ln { color: #fff }
.be-crt__mt {
font-size: 13px;
letter-spacing: -0.01em;
text-transform: uppercase;
font-weight: 400;
color: var(--encre-marque, var(--marque));
}
.be-crt__tt {
font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: var(--crt-tt-fw, 400);
font-size: var(--crt-tt-fs, 24px);
line-height: var(--crt-tt-lh, 1.28); letter-spacing: 0em;
}
.be-crt__px { font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400; font-size: 20px }
.be-crt__px span { font-size: 14px; font-weight: 300; color: var(--texte-doux) }
.be-crt__tx {
color: var(--texte-doux); font-size: var(--crt-tx-fs, 15px);
font-weight: var(--crt-tx-fw, inherit); line-height: var(--crt-tx-lh, 1.5);
}
.be-crt__ln {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 4px;
font-weight: 400;
font-size: 15px;
color: var(--encre-marque, var(--marque));
}
.be-bss .be-crt, .be-bss .be-rg { --crt-bord: 0; --crt-ombre: none }
.be-ar .be-crt, .be-ar .be-rg { --crt-bord: 0; --crt-ombre: none }
.be-mq .be-crt, .be-mq .be-rg { --crt-bord: 0; --crt-ombre: none }
.be-is .be-crt, .be-is .be-rg { --crt-fond: transparent; --crt-bord: 0; --crt-ombre: none; --crt-ray: 0; --crt-pad: 18px 0 0; --ic-fond: transparent; --ic-pad: 0; --ic-mrg: 0 }
.be-fp .be-crt, .be-fp .be-rg { --crt-bord: 0; --crt-ombre: none }
.be-mt .be-crt, .be-mt .be-rg { --crt-bord: 0; --crt-ombre: none }
.be-ad .be-crt, .be-ad .be-rg { --crt-bord: 0; --crt-ombre: none }
.be-is .be-crt, .be-is .be-rg { --crt-tt-fs: 32px; --crt-tt-fw: 400; --crt-tt-lh: 1 }
@media (min-width: 901px) {
.be-bss .be-rg { transform-origin: 50% 50%; transition: transform .25s ease }
.be-bss .be-crt { transform-origin: 50% 50%; transition: transform .25s ease }
.be-bss .be-crt:nth-child(2n+2) { transform: rotate(-2.99deg) }
.be-bss .be-rg:nth-child(2n+2) { transform: rotate(-2.99deg) }
.be-bss .be-crt:hover { transform: rotate(0deg) }
.be-bss .be-rg:hover { transform: rotate(0deg) }
}
@media (min-width: 901px) {
.be-ar .be-rg { transform-origin: 50% 50%; transition: transform .25s ease }
.be-ar .be-crt { transform-origin: 50% 50%; transition: transform .25s ease }
.be-ar .be-crt:nth-child(2n+2) { transform: rotate(-2.99deg) }
.be-ar .be-rg:nth-child(2n+2) { transform: rotate(-2.99deg) }
.be-ar .be-crt:hover { transform: rotate(0deg) }
.be-ar .be-rg:hover { transform: rotate(0deg) }
}
@media (min-width: 901px) {
.be-mq .be-rg { transform-origin: 50% 50%; transition: transform .25s ease }
.be-mq .be-crt { transform-origin: 50% 50%; transition: transform .25s ease }
.be-mq .be-crt:nth-child(2n+2) { transform: rotate(-2.99deg) }
.be-mq .be-rg:nth-child(2n+2) { transform: rotate(-2.99deg) }
.be-mq .be-crt:hover { transform: rotate(0deg) }
.be-mq .be-rg:hover { transform: rotate(0deg) }
}
@media (min-width: 901px) {
.be-fp .be-rg { transform-origin: 50% 50%; transition: transform .25s ease }
.be-fp .be-crt { transform-origin: 50% 50%; transition: transform .25s ease }
.be-fp .be-crt:nth-child(2n+2) { transform: rotate(-2.99deg) }
.be-fp .be-rg:nth-child(2n+2) { transform: rotate(-2.99deg) }
.be-fp .be-crt:hover { transform: rotate(0deg) }
.be-fp .be-rg:hover { transform: rotate(0deg) }
}
@media (min-width: 901px) {
.be-mt .be-rg { transform-origin: 50% 50%; transition: transform .25s ease }
.be-mt .be-crt { transform-origin: 50% 50%; transition: transform .25s ease }
.be-mt .be-crt:nth-child(2n+2) { transform: rotate(-2.99deg) }
.be-mt .be-rg:nth-child(2n+2) { transform: rotate(-2.99deg) }
.be-mt .be-crt:hover { transform: rotate(0deg) }
.be-mt .be-rg:hover { transform: rotate(0deg) }
}
@media (min-width: 901px) {
.be-ad .be-rg { transform-origin: 50% 50%; transition: transform .25s ease }
.be-ad .be-crt { transform-origin: 50% 50%; transition: transform .25s ease }
.be-ad .be-crt:nth-child(2n+2) { transform: rotate(-2.99deg) }
.be-ad .be-rg:nth-child(2n+2) { transform: rotate(-2.99deg) }
.be-ad .be-crt:hover { transform: rotate(0deg) }
.be-ad .be-rg:hover { transform: rotate(0deg) }
}
.be-pr { --pasb: 0.35 }
.be-bss { --pasb: 0.35 }
.be-ar { --pasb: 0.35 }
.be-ct { --pasb: 0.35 }
.be-ch { --pasb: 0.35 }
.be-mq { --pasb: 0.35 }
.be-cps { --pasb: 0.35 }
.be-lg { --pasb: 0.35 }
.be-wh { --pasb: 0.35 }
.be-xp { --pasb: 0.35 }
.be-fp { --pasb: 0.35 }
.be-sv { --pasb: 0.35 }
.be-re { --pasb: 0.35 }
.be-mt { --pasb: 0.35 }
.be-cr { --pasb: 0.35 }
.be-b2 { --pasb: 0.35 }
.be-zn { --pasb: 0.35 }
.be-ma { --pasb: 0.35 }
.be-bl { --pasb: 0.35 }
.be-gp { --pasb: 0.35 }
.be-tr { --pasb: 0.35 }
.be-ad { --pasb: 0.35 }
.be-fq { --pasb: 0.35 }
.be-av { --pasb: 0.35 }
.be-sp { --pasb: 0.35 }
.be-ur { --pasb: 0.35 }
.be-pr > .be-in > .be-sur, .be-pr > .be-in > .be-tt, .be-pr > .be-in > .be-chapo { text-align: center; margin-inline: auto }
.be-ch > .be-in > .be-sur, .be-ch > .be-in > .be-tt, .be-ch > .be-in > .be-chapo { text-align: center; margin-inline: auto }
.be-cps > .be-in > .be-sur, .be-cps > .be-in > .be-tt, .be-cps > .be-in > .be-chapo { text-align: center; margin-inline: auto }
.be-fc > .be-in > .be-sur, .be-fc > .be-in > .be-tt, .be-fc > .be-in > .be-chapo { text-align: center; margin-inline: auto }
.be-lg > .be-in > .be-sur, .be-lg > .be-in > .be-tt, .be-lg > .be-in > .be-chapo { text-align: center; margin-inline: auto }
.be-wh > .be-in > .be-sur, .be-wh > .be-in > .be-tt, .be-wh > .be-in > .be-chapo { text-align: center; margin-inline: auto }
.be-xp > .be-in > .be-sur, .be-xp > .be-in > .be-tt, .be-xp > .be-in > .be-chapo { text-align: center; margin-inline: auto }
.be-ul > .be-in > .be-sur, .be-ul > .be-in > .be-tt, .be-ul > .be-in > .be-chapo { text-align: center; margin-inline: auto }
.be-sv > .be-in > .be-sur, .be-sv > .be-in > .be-tt, .be-sv > .be-in > .be-chapo { text-align: center; margin-inline: auto }
.be-re > .be-in > .be-sur, .be-re > .be-in > .be-tt, .be-re > .be-in > .be-chapo { text-align: center; margin-inline: auto }
.be-cr > .be-in > .be-sur, .be-cr > .be-in > .be-tt, .be-cr > .be-in > .be-chapo { text-align: center; margin-inline: auto }
.be-b2 > .be-in > .be-sur, .be-b2 > .be-in > .be-tt, .be-b2 > .be-in > .be-chapo { text-align: center; margin-inline: auto }
.be-zn > .be-in > .be-sur, .be-zn > .be-in > .be-tt, .be-zn > .be-in > .be-chapo { text-align: center; margin-inline: auto }
.be-ma > .be-in > .be-sur, .be-ma > .be-in > .be-tt, .be-ma > .be-in > .be-chapo { text-align: center; margin-inline: auto }
.be-bl > .be-in > .be-sur, .be-bl > .be-in > .be-tt, .be-bl > .be-in > .be-chapo { text-align: center; margin-inline: auto }
.be-gp > .be-in > .be-sur, .be-gp > .be-in > .be-tt, .be-gp > .be-in > .be-chapo { text-align: center; margin-inline: auto }
.be-tr > .be-in > .be-sur, .be-tr > .be-in > .be-tt, .be-tr > .be-in > .be-chapo { text-align: center; margin-inline: auto }
.be-fq > .be-in > .be-sur, .be-fq > .be-in > .be-tt, .be-fq > .be-in > .be-chapo { text-align: center; margin-inline: auto }
.be-av > .be-in > .be-sur, .be-av > .be-in > .be-tt, .be-av > .be-in > .be-chapo { text-align: center; margin-inline: auto }
.be-sp > .be-in > .be-sur, .be-sp > .be-in > .be-tt, .be-sp > .be-in > .be-chapo { text-align: center; margin-inline: auto }
.be-cb .be-bnd { justify-items: center; text-align: center }
.be-cb .be-bnd .be-pucs { text-align: start }
.be-ur .be-bnd { justify-items: center; text-align: center }
.be-ur .be-bnd .be-pucs { text-align: start }
.be-rgs {
display: grid;
grid-template-columns: repeat(var(--cols, var(--col, 1)), minmax(0, 1fr));
/* meme jeton que .gr : l accordeon du modele est a 6px, pas a 14. */
gap: var(--gtr, 14px);
margin-top: 40px;
/* Sans jeton --lrg, min(100%, 100%) vaut 100% : le bloc garde la pleine
colonne, octet pour octet comme avant. Avec le jeton, il se resserre a la
largeur relevee et se recentre — et la borne 100% garde le repli mobile. */
width: min(100%, var(--lrg, 100%));
margin-inline: auto;
}
.be-rg {
display: var(--crt-disp, grid);
flex-direction: column;
gap: var(--crt-ecartt, 8px);
align-content: start;
min-height: var(--hr, 0px);
/* Le rang lit le MEME vocabulaire de peau que la carte — un seul jeu de
jetons pour les deux familles d elements repetes — mais garde SES propres
valeurs par defaut : sans mesure, rien ne bouge. */
padding: var(--crt-pad, 24px 26px);
background: var(--crt-fond, var(--carte));
border: var(--crt-bord, 1px) solid var(--bordure);
border-radius: var(--crt-ray, var(--ray));
}
.be-rg__n {
font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 14px;
letter-spacing: -0.01em;
color: var(--marque);
}
.be-rg__av {
display: inline-grid;
place-items: center;
width: var(--lic, 44px);
height: var(--hic, 44px);
border-radius: 999px;
background: var(--fond-2);
color: var(--encre-marque, var(--marque));
font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 400;
}
.be-rg__nt { font-size: 14px; letter-spacing: -0.01em; color: var(--marque) }
.be-rg__tt {
font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: var(--crt-tt-fw, 400);
font-size: var(--crt-tt-fs, 24px);
line-height: var(--crt-tt-lh, 1.3); letter-spacing: 0em;
}
.be-rg__tx {
color: var(--texte-doux); font-size: var(--crt-tx-fs, 15px);
font-weight: var(--crt-tx-fw, inherit); line-height: var(--crt-tx-lh, 1.5);
}
.be-rg__au { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--texte-doux) }
.be-rg__au span { font-weight: 400; color: var(--texte) }
.be-rg__vl { font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400 }
/* Le repli d une FAQ ouvre un : summary garde sa puce native meme
sous ul { list-style: none }, il faut la couper sur l element lui-meme. */
.be-rg--pli { padding: 0 }
.be-rg--pli summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: var(--crt-pli-pad, 22px 26px);
cursor: pointer;
list-style: none;
font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: var(--crt-ln-fw, 400);
font-size: var(--crt-ln-fs, 18px);
line-height: var(--crt-ln-lh, 1.4);
}
.be-rg--pli summary::-webkit-details-marker { display: none }
.be-rg--pli details[open] summary .be-chev { transform: rotate(180deg) }
.be-rg__rp { padding: 0 26px 24px; color: var(--texte-doux) }
/* Le cote est deja dans l ordre du DOM (le gabarit emet le cadre avant le
texte quand il est a gauche) : aucun order CSS, qui desaccorderait l ordre
visuel de l ordre de lecture. Le partage des deux colonnes et la gouttiere
arrivent en variables, mesurees sur la bande donneuse ; sans mesure, la
feuille garde le partage egal et les 56px d avant. */
.be-duo {
display: grid;
grid-template-columns: minmax(0, var(--dc1, 1fr)) minmax(0, var(--dc2, 1fr));
gap: var(--dgtr, 56px);
align-items: center;
}
.be-duo__cp { display: grid; gap: 14px; align-content: center }
.be-atts { display: grid; gap: 16px; margin-top: 8px }
.be-att h3 { font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 300; font-size: 30px }
.be-att p { margin-top: 4px; color: var(--marque); font-weight: 400; font-size: 12px }
.be-adr { margin-top: 6px; color: var(--texte-doux) }
.be-px { font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400; font-size: clamp(24px, 2.6vw, 32px) }
.be-px span { font-size: 14px; font-weight: 300; color: var(--texte-doux) }
.be-bnd {
display: grid;
gap: 16px;
justify-items: start;
align-content: center;
min-height: var(--h, 0px);
}
.be-bnd__tx { max-width: 84ch; color: var(--texte-doux) }
.be-bnd__ou { font-size: 14px; color: var(--texte-doux) }
.be-frm { display: grid; gap: 16px; width: 100% }
.be-frm--pl {
padding: 28px;
background: var(--carte);
border: 1px solid var(--bordure);
border-radius: var(--ray);
}
.be-frm label { display: grid; gap: 7px; font-size: 14px; font-weight: 400 }
.be-frm input, .be-frm textarea {
width: 100%;
padding: 13px 14px;
background: var(--carte);
border: 1px solid var(--bordure);
border-radius: var(--ray);
font-weight: 300;
}
.be-frm textarea { resize: vertical; min-height: 120px }
.be-frm .be-btn, .be-frm .be-tel { width: 100% }
.be-prz { display: grid; gap: 14px; max-width: 103ch; margin-top: 28px }
.be-prz__tt { font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400; font-size: 20px; margin-top: 18px }
.be-prz__p { color: var(--texte-doux) }
.be-is .be-in { display: grid; gap: 14px; max-width: 103ch; margin-inline: auto }
/* Hero pleine : le cadre est pose en absolu contre la SECTION (.be-in reste
statique) pour couvrir toute la bande — R5c lit alors forme: fond. Le voile
est un aplat, jamais une image : R1. */
.be-hr .be-in {
display: grid;
grid-template-columns: minmax(0, 770fr) minmax(0, 514fr);
gap: 56px;
align-items: center;
}
.be-hr__cp { display: grid; gap: 16px; align-content: center; justify-items: start }
.be-hr__ss { font-size: 20px; font-weight: 300; line-height: 1.2; color: var(--texte-doux); max-width: 842px }
.be-hr__ats {
grid-column: 1 / -1;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 24px;
margin-top: 20px;
padding-top: 28px;
border-top: 1px solid var(--bordure);
}
.be-hr__at-tt { font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400; font-size: 16px; margin-bottom: 8px }
/* Le gabarit emet TOUJOURS le texte avant le cadre, pour que le h1 ouvre la
page a la lecture. Quand la source pose la scene a gauche, c est donc la
grille qui deplace le cadre, jamais l ordre du DOM. */
.be-hr--gauche .be-vue { grid-column: 1; grid-row: 1 }
.be-hr--gauche .be-hr__cp { grid-column: 2; grid-row: 1 }
/* Affiche EMPILEE (voir l emetteur) : une colonne, la tete centree a la
largeur que le modele lui donne (part de la bande relevee), le cadre
pleine largeur dessous. */
.be-hr--empile .be-in { grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: start }
.be-hr--empile .be-hr__cp { justify-items: center; text-align: center; width: min(100%, 1006px) }
.be-hr--empile .be-hr__cp > .be-hr__ss, .be-hr--empile .be-hr__cp > .be-chapo { margin-inline: auto }
.be-hr--empile .be-vue { grid-column: 1; width: 100%; height: var(--h, var(--hv, 480px)) }
.be-hr--empile .be-hr__ats { grid-column: 1 }
.be-hr--pleine .be-in { grid-template-columns: minmax(0, 1fr); align-items: center }
/* Affiche pleine, scindee en deux rangees : la SCENE (rangee 1) porte le
min-height releve sur le modele et recoit le fond, le mot et le voile ; le
BANDEAU d atouts prend la rangee 2, pleine largeur, sous la scene. Colles au
flanc du titre, les atouts ecrivaient du texte dans les colonnes que le
modele donne a la photo — et la fenetre de fidelite lisait du texte la ou le
releve ne montre que de la matiere. Le fond couvre toujours toute la
section, donc R5c tient ; le bandeau se pose dessus avec son propre sol. */
.be-hr--pleine {
min-height: var(--h, 560px);
display: grid;
grid-template-rows: minmax(var(--h, 560px), auto) auto;
/* Le retrait ne se pose pas sur la rangee entiere mais sur le MOT SEUL : le
modele fait monter sa scene jusqu au bord haut de la fenetre et n abaisse
que la colonne de texte. Centrer la RANGEE descend les deux colonnes
ensemble, ouvre l affiche sur une bande vide et fait tomber le titre une
rangee trop bas a la mesure de fidelite — donc jamais center ici.
Mais start ne convenait pas non plus : la rangee se repliait sur son
contenu et le mot ne POUVAIT pas s ancrer en bas, d ou les 350px de voile
vide sous les boutons. stretch donne a la boite interieure toute la
hauteur de la scene ; c est elle, et elle seule, qui pose ensuite le mot
en bas (align-items: end, plus haut). La scene, elle, monte toujours au
bord haut : c est le cadre en absolu qui la porte, pas cet alignement. */
align-items: stretch;
padding-top: 0;
/* Et le retrait BAS a zero, pour la meme raison exactement. La peau de bande
pose un padding-bottom sur la section ; les deux rangees, elles, s arretent
a la fin du bandeau d atouts. Le cadre plein cadre (inset: 0) peignait donc
dans ce retrait : une bande sombre de 60 px sous le bandeau, sur toute la
largeur, que rien ne venait couvrir. La respiration du bas appartient a la
SCENE (voir le padding-bottom de __cp), pas a l apres-bandeau. */
padding-bottom: 0;
}
/* Le retrait du mot, et sa LARGEUR. Etiree sur toute la rangee, la colonne de
texte ecrivait jusqu a x=820 — la septieme colonne de la fenetre de
fidelite — la ou le modele donne cette colonne-la a sa scene. Bornee a
600px le mot s arrete a x=660 et rend les deux dernieres rangees a la
matiere : F1 tombe de 32 % a 18 % (seuil 25 %). Valeur de SOCLE, pas de
modele : c est la largeur ou le titre du corpus de demo tient sans deborder
sur la scene, et template-14 y arrive par un autre chemin (une case a 52 %
qui laisse 614px au mot) — deux coquilles independantes convergent sur la
meme mesure. Si un jour un modele ecrit demonstrativement plus large, cette
valeur devra venir d une mesure : le releve ne prend pas encore l etendue
du h1, alors qu il prend deja celle des visuels (voir cadreDe dans
ingest-relever.mjs). */
.be-hr--pleine .be-hr__cp {
padding-top: 104px;
padding-bottom: 56px;
max-width: 1081px;
}
.be-hr--pleine .be-hr__atbd { position: relative; z-index: 2; background: var(--fond-2) }
.be-hr--pleine .be-hr__atbd .be-hr__ats { margin-top: 0; border-top: 0 }
.be-hr--pleine .be-vue {
position: absolute;
inset: 0;
z-index: 0;
height: auto;
border-radius: 0;
}
.be-hr--pleine::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: rgba(16, 16, 16, .78);
}
/* La scene et son voile ne couvrent que la RANGEE DE SCENE (#26). Un enfant
absolu d une grille positionnee, place par grid-row / grid-column, prend
son AIRE DE GRILLE pour bloc conteneur : la rangee des atouts, elle, garde
son sol. Le rayon bas vient du releve (rayonBas), jamais d un nombre.
Les DEUX lignes se nomment : pour un enfant absolu, une fin de placement
laissee a auto ne vaut pas « une rangee » mais « le bord du conteneur »
(Grid §9) — grid-row: 1 seul couvrait donc encore la rangee des atouts. */
.be-hr--pleine .be-vue, .be-hr--pleine::after { grid-row: 1 / 2; grid-column: 1 / 2; }
/* .in est un enfant de grille : z-index agit sans positionnement. Le rendre
relatif en ferait le bloc contenant du cadre pleine bande. */
.be-hr--pleine .be-in { z-index: 2 }
.be-hr--pleine .be-hr__tt,
.be-hr--pleine .be-hr__ss,
.be-hr--pleine .be-chapo,
.be-hr--pleine .be-sur,
.be-hr--pleine .be-tt__ac { color: #FFFFFF }
.be-cb--pleine, .be-ur--pleine { min-height: var(--hv, 400px); display: grid; align-items: center }
/* Les quatre --ci-... viennent du cadre INSCRIT releve sur la bande donneuse
(varCadre). Replis = plein cadre a rayon nul : le rendu d avant, intact. */
.be-cb--pleine .be-vue, .be-ur--pleine .be-vue {
position: absolute;
inset: var(--ci-t, 0) var(--ci-r, 0) var(--ci-b, 0) var(--ci-l, 0);
z-index: 0;
height: auto;
border-radius: var(--ci-ray, 0);
}
.be-cb--pleine::after, .be-ur--pleine::after {
content: '';
position: absolute;
inset: var(--ci-t, 0) var(--ci-r, 0) var(--ci-b, 0) var(--ci-l, 0);
z-index: 1;
border-radius: var(--ci-ray, 0);
background: var(--ci-vl, rgba(16, 16, 16, .78));
}
.be-cb--pleine .be-in, .be-ur--pleine .be-in { z-index: 2 }
.be-cb--pleine .be-tt,
.be-cb--pleine .be-sur,
.be-cb--pleine .be-bnd__tx,
.be-cb--pleine .be-bnd__ou,
.be-cb--pleine .be-bnd__cl-tt,
.be-cb--pleine .be-bnd__cl-tx,
.be-ur--pleine .be-tt,
.be-ur--pleine .be-sur,
.be-ur--pleine .be-bnd__tx,
.be-ur--pleine .be-bnd__ou { color: #FFFFFF }
/* R10 : une entete collante doit etre OPAQUE, sinon le texte qui defile
dessous la traverse. var(--fond) et var(--marque) sont des hex pleins. */
.be-hd {
position: sticky;
top: 0;
z-index: 40;
background: var(--texte);
color: var(--fond);
border-bottom: 1px solid var(--bordure);
}
/* LE HEROS PLEINE BANDE COMMENCE A y=0, SOUS L ENTETE.
Le releve donne « haut 0 » pour la bande du heros du modele : sa premiere
bande part du bord haut de la page et l entete se pose PAR-DESSUS. Chez
nous l entete collante occupait 80px de flux AU-DESSUS du heros, et
ce decalage se payait deux fois dans la meme mesure :
1. F1 lisait un aplat en rangee 0 la ou le modele lit de la matiere — la
sonde ne s arrete jamais sur un aplat (« le texte prime », l aplat
continue de descendre la pile), donc une image posee SOUS une pastille
opaque compte quand meme comme matiere. Il suffit que le decor existe
a cette hauteur, pas qu il soit visible ;
2. le mot ancre en bas descendait d autant, et tombait une rangee trop bas
par rapport au modele.
On remonte donc le heros de la hauteur exacte de l entete. L entete reste
OPAQUE et COLLANTE — R10 n a rien a redire, gate-recouvrement exempte par
contrat tout recouvreur sticky — elle couvre simplement les 80
premiers pixels du decor, exactement ce que fait le modele.
Sous 900px la pastille redevient une barre a plat (voir hdPlat) : la
remontee est annulee, sinon le mot du heros passerait sous la barre sur les
ecrans etroits ou il manque de place. */
.be-hr--pleine { margin-top: -80px }
@media (max-width: 900px) { .be-hr--pleine { margin-top: 0 } }
.be-hd__in { min-height: 79px; position: relative; display: flex; align-items: center; gap: 40px; padding: 16px 0 }
.be-hd__mq { font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400; font-size: 20px; letter-spacing: -.01em }
/* La barre etire sa nav sur toute sa hauteur, et chaque entree avec elle :
le volet pend du bas de l ENTREE, pas du bas du mot. Sans cet etirement le
mot est centre dans une barre plus haute que lui, la souris qui descend
traverse une bande morte, et le volet se referme sous elle. */
/* La nav porte la liste ET la paire d appels (lot des paliers) : sous le
seuil doigt la paire suit la liste dans le panneau quand le modele ne la
montre plus dans sa barre. La NAV est le bloc conteneur des volets
(right: 0) : elle est etiree sur la hauteur de la barre, donc le volet
pend du bas de l entree (trou 0, gate-dropdown), et son bord droit est
celui de la barre, jamais au-dela de la fenetre. Ancrer sur la LISTE
seule — ce que faisait la matrice jusqu au 3 septembre 2026 — envoyait
un volet de 723px a gauche de la fenetre des que la liste finissait avant
723px (roofar : liste [322..657], volet [-67..657] ; homota [-12..687] ;
cleanza) : gate-debordement ROUGE sur les 12 pages du temoin a 1440. */
.be-hd__nv { position: relative; margin-left: auto; align-self: stretch; display: flex; align-items: stretch; gap: 40px }
.be-hd__nv > .be-paire--hd { align-self: center; flex: none }
.be-hd__ls { position: static; display: flex; align-items: stretch; gap: 24px }
.be-hd__it { position: relative; display: flex; align-items: center }
.be-hd__ln {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 15px;
font-weight: 300;
}
.be-hd__ln:hover { color: var(--encre-marque, var(--marque)) }
.be-hd__bt { padding: 0; background: none; border: 0; cursor: pointer }
.be-hd__bg { display: none }
/* Contrat du volet : il touche son declencheur (top: 100%, l air est du
padding INTERIEUR, jamais une marge qui creerait un trou ou le survol
retombe), la vitrine est a COTE des colonnes, et sous le seuil doigt il se
replie a plat dans le flux.
Le repos est visibility/opacity/pointer-events et NON display:none : un
volet en display:none n a pas de boite, sa vitrine mesure 0, elle n entre
donc jamais dans slots.json et le contrat visuel perd un cadre en silence.
L entree ET la liste portent position:static : le volet s ancre sur la
NAV .be-hd__nv (relative, etiree sur la barre) et se cale a DROITE de
la barre, donc il ne deborde jamais de la fenetre (R2) et pend du bas de
l entree (trou 0). */
.be-hd__it--vlt { position: static }
.be-vlt {
position: absolute;
top: 100%;
/* La BOITE du volet couvre toute la largeur de la nav ; le PANNEAU
(.vlt__in) se cale a droite dedans. Ainsi le point sous N IMPORTE QUELLE
entree a volet tombe dans la boite : la souris qui descend du mot ne
traverse jamais de vide (gate-dropdown « se ferme sous la souris »,
servix 3 septembre 2026 : premiere entree a 620px, panneau cale a droite
a partir de 677px). Sous le seuil doigt, position static : sans effet. */
left: 0;
right: 0;
z-index: 3;
padding-top: 16px;
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.be-vlt__in {
display: flex;
gap: 26px;
width: max-content;
margin-left: auto;
max-width: min(100%, 92vw, 900px);
min-width: min(480px, 100%);
padding: 22px;
background: var(--carte);
color: var(--texte);
border: 1px solid var(--bordure);
border-radius: var(--ray);
box-shadow: var(--ombre);
}
.be-vlt__vt { flex: 0 0 232px; min-width: 0 }
.be-vlt__vtt { margin-top: 11px; font-size: 15px; font-weight: 400 }
.be-vlt__vtx { margin-top: 4px; font-size: 13px; line-height: 1; color: var(--texte-doux) }
.be-vlt__cs { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 26px; min-width: 0 }
.be-vlt__c { flex: 1 1 168px; min-width: 0 }
.be-vlt__ct {
margin-bottom: 11px;
font-size: 12px;
font-weight: 300;
letter-spacing: 0em;
text-transform: uppercase;
color: var(--texte-doux);
}
.be-vlt__ls { display: grid; gap: 10px }
.be-vlt__ln { font-size: 15px; color: var(--texte-doux) }
.be-vlt__ln:hover { color: var(--encre-marque, var(--marque)) }
.be-hd__bt[aria-expanded="true"] + .be-vlt,
.be-hd__it--vlt.est-ouvert > .be-vlt { visibility: visible; opacity: 1; pointer-events: auto }
/* R3 : les colonnes du pied partagent une signature (div.be-pd__cl) et sont
trois ou plus. grid-auto-columns: minmax(0, 1fr) les rend strictement
egales ; un flex: 1 sur la meme fratrie sortirait rouge. */
/* LE PIED NE CHOISIT NI SA TEINTE NI SON TRAIT — IL LES RECOIT DE LA MESURE.
tonDe rend TROIS valeurs : sombre, doux, et nu — ce dernier voulant dire
« meme teinte que la page, aucun changement ». Le ternaire n en lisait que
deux : tout ce qui n etait pas sombre tombait sur --fond-2, et le nu mesure
etait jete en silence. Le pied de roofar est justement nu (bande 11 relevee
a #F6F3EF, exactement le fond de page, comme la bande d appel final juste
au-dessus) : le modele ne change pas de teinte du tout, il separe par un gap
de 101px. Nous le repeignions en --fond-2 pour rien.
Le trait suivait la meme faute, en pire : il etait ecrit EN DUR alors que le
releve dit bordures vide et que l etape de style l ecrit noir sur blanc
(« aucun filet dessine : les filets sont simules en ombre inset »). Le
gabarit sait pourtant deja s en abstenir ailleurs — la boucle des filets de
bande ne dessine que si la mesure porte un filet. Le pied etait le seul
endroit a s en dispenser. Un modele qui borde vraiment son pied garde son
trait : le drapeau vient du releve, pas d une constante. */
.be-pd {
padding: 72px 0 0;
background: var(--fond);
}
.be-pd__mq { font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400; font-size: 20px; color: var(--texte) }
.be-pd__gr {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
/* Le modele aligne ses colonnes de pied EN HAUT. Sans cette ligne la grille
etire chacune sur la hauteur de la plus longue, et la liste de trois liens
se retrouve espacee comme celle de six. */
align-items: start;
gap: 30px;
padding-bottom: 48px;
}
.be-pd__cl ul { display: grid; gap: 12px; margin-top: 16px }
.be-pd__tt { font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400; font-size: 15px; letter-spacing: .06em; text-transform: uppercase }
.be-pd__ln { font-size: 15px; color: var(--texte-doux) }
.be-pd__ln:hover { color: var(--encre-marque, var(--marque)) }
.be-pd__cl--nap { display: grid; gap: 12px; align-content: start; justify-items: start }
.be-pd__hr { font-size: 14px; color: var(--texte-doux) }
.be-pd__desc { font-size: 14px; line-height: 1.55; color: var(--texte-doux); margin: 0 0 12px }
.be-pd__bs {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px 26px;
padding: 24px 0 32px;
font-size: 14px;
color: var(--texte-doux);
}
.be-pd__bs > :nth-child(2) { text-align: center }
.be-pd__bs ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px }
.be-fa { padding: 22px 0 0 }
.be-fa__ls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--texte-doux);
}
.be-fa__it { display: inline-flex; align-items: center; gap: 8px }
.be-fa__ln:hover { color: var(--encre-marque, var(--marque)) }
/* Deux signatures alternees (--g / --d) : R3 groupe par signature, aucun
groupe n atteint donc trois freres et la regle ne peut pas se lever ici. */
.be-bss .be-in { display: grid; gap: 76px }
.be-bs {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 48px;
align-items: center;
}
.be-bs__cp { display: grid; gap: 14px; align-content: start }
.be-bs__tt { font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400; font-size: clamp(24px, 2.5vw, 31px); line-height: 1 }
.be-ar__cp { display: grid; gap: 18px; max-width: 103ch; margin-inline: auto }
.be-ar__mt { font-size: 15px; color: var(--texte-doux) }
.be-ar__sm {
padding: 20px 24px;
background: var(--carte);
border: 1px solid var(--bordure);
border-radius: var(--ray);
}
.be-ar__sm ul { display: grid; gap: 8px; margin-top: 10px }
.be-ar__sm a { color: var(--encre-marque, var(--marque)); font-size: 15px }
.be-ar__cr { display: grid; gap: 16px }
.be-ar__tt { font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400; font-size: 24px; margin-top: 12px }
.be-ar__t3 { font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400; font-size: 18px; margin-top: 4px }
.be-ar__sm-tt { font-size: 13px; letter-spacing: -0.01em; text-transform: uppercase; color: var(--texte-doux) }
.be-ar__en {
border-left: 3px solid var(--marque); background: var(--carte);
border-radius: 0 12px 12px 0; padding: 16px 18px; display: grid; gap: 8px;
}
.be-ar__en-tt { font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400; font-size: 16px }
.be-go { margin-top: 26px; display: flex; justify-content: center }
.be-enc {
margin-top: 26px; padding: 22px; display: grid; gap: 10px; justify-items: start;
border: 1px solid var(--bordure); border-radius: var(--ray); background: var(--carte);
}
.be-enc__tt { font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400; font-size: 20px }
.be-enc__tx { color: var(--texte-doux) }
.be-hr__at-tx { font-size: 14px; color: var(--texte-doux); margin-bottom: 8px }
.be-ct__gr {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 48px;
align-items: start;
}
.be-ct__cp { display: grid; gap: 14px; align-content: start }
.be-cds { display: grid; gap: 18px; margin-top: 10px }
.be-cd h3 { font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400; font-size: 16px }
.be-cd ul { display: grid; gap: 6px; margin-top: 6px; font-size: 15px; color: var(--texte-doux) }
.be-cd__ln { color: inherit; text-decoration: underline; text-underline-offset: 3px }
/* Le cadre de la bande chiffres est un FRERE de la liste : il ne recoit pas
le --h pose en ligne sur .be-ch__ls et retombe sur le --hv de la bande. */
.be-ch .be-in { display: grid; gap: 46px }
.be-ch__ls {
display: grid;
grid-template-columns: repeat(var(--cols, var(--col, 4)), minmax(0, 1fr));
gap: 24px;
}
.be-ch__it {
display: grid;
gap: 7px;
padding: 22px;
background: var(--carte);
border: 1px solid var(--bordure);
border-radius: var(--ray);
}
.be-ch__vl {
font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 400;
/* le nombre suit l echelle de titre RELEVEE : un modele aux titres sobres
ne merite pas des chiffres de 46px poses par le socle */
font-size: clamp(32px, 3.9vw, 50px);
line-height: 1;
color: var(--encre-marque, var(--marque));
}
.be-ch__lb { font-size: 15px; color: var(--texte-doux) }
/* Le debordement est coupe ICI, sur le ruban seul. Un overflow pose plus haut
(body, .be-bd) aveuglerait R2 : clippe() remonte les ancetres. */
.be-mq .be-in {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.be-mq__rb { display: flex; width: max-content; animation: be-defile 34s linear infinite }
.be-mq__ls { display: flex; flex: 0 0 auto; align-items: center; gap: 56px; padding-right: 56px }
/* Un logotype se rend SEUL, en gris : une rangee de marques accompagne la
page, elle ne lui dispute pas le regard. La hauteur est aussi ecrite en
ligne par le gabarit, pour tenir hors de cette feuille. */
.be-mq__lg { height: 30px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .62 }
.be-mq .be-vue--marque { flex: 0 0 auto; width: 25px; height: 25px; min-height: 0; border-radius: 0 }
.be-mq .be-vue--marque img { width: 100%; height: 100%; object-fit: contain }
.be-mq__it {
flex: 0 0 auto;
font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 20px;
letter-spacing: 0em;
white-space: nowrap;
color: var(--texte-doux);
}
@keyframes be-defile {
from { transform: translate3d(0, 0, 0) }
to { transform: translate3d(-50%, 0, 0) }
}
/* Les deux cadres du comparateur doivent MESURER pareil : clip-path ne touche
pas la boite, seulement la peinture. R5a compare des ratios, il verrait
deux ratios pour un seul emplacement si l un etait redimensionne. */
.be-cps__gr {
--col: 1;
display: grid;
grid-template-columns: repeat(var(--cols, var(--col, 2)), minmax(0, 1fr));
gap: 36px;
margin-top: 40px;
}
.be-cp { display: grid; gap: 18px }
.be-cp__cd {
position: relative;
overflow: hidden;
height: var(--h, 420px);
border-radius: var(--ray);
}
.be-cp__av, .be-cp__ap { position: absolute; inset: 0 }
.be-cp__ap { clip-path: inset(0 0 0 var(--pos, 50%)) }
.be-cp__av .be-vue, .be-cp__ap .be-vue { height: 100%; border-radius: 0 }
.be-cp__cd::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: var(--pos, 50%);
z-index: 2;
width: 2px;
background: var(--carte);
pointer-events: none;
}
.be-cp__lb {
position: absolute;
bottom: 14px;
left: 14px;
z-index: 2;
padding: 6px 12px;
border-radius: 999px;
background: var(--carte);
color: var(--texte);
font-size: 12px;
font-weight: 400;
letter-spacing: 0em;
text-transform: uppercase;
}
.be-cp__ap .be-cp__lb { left: auto; right: 14px }
.be-cp__pg {
position: absolute;
inset: 0;
z-index: 3;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: ew-resize;
}
.be-cp__cp h3 { font-family: "Bacasime Antique", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400; font-size: 20px }
.be-cp__cp p { margin-top: 8px; color: var(--texte-doux); font-size: 15px }
.be-fc .be-in { display: grid; gap: 22px }
.be-fc__ls { display: flex; flex-wrap: wrap; gap: 10px }
.be-fc__ln, .be-fc__it > span {
display: inline-flex;
align-items: center;
padding: 10px 18px;
border: 1px solid var(--bordure);
border-radius: 999px;
font-size: 14px;
font-weight: 400;
}
.be-fc__it.est-courante > span {
background: var(--marque);
border-color: var(--marque);
color: var(--sur-marque);
}
@media (max-width: 1380px) {
:where(.be-bss) .be-gr,
:where(.be-bss) .be-rgs,
:where(.be-ar) .be-gr,
:where(.be-ar) .be-rgs,
:where(.be-mq) .be-gr,
:where(.be-mq) .be-rgs,
:where(.be-fp) .be-gr,
:where(.be-fp) .be-rgs,
:where(.be-mt) .be-gr,
:where(.be-mt) .be-rgs,
:where(.be-ad) .be-gr,
:where(.be-ad) .be-rgs,
.be-gr:where([style*="--col:4"]),
.be-rgs:where([style*="--col:4"]),
.be-ch__ls:where([style*="--col:4"]) { --cols: 3 }
}
/* Les colonnes respirent, les hauteurs NON : un cadre qui change de boite
entre deux largeurs donnerait deux ratios pour un seul emplacement. */
@media (max-width: 1000px) {
:root { --pas: 79px }
:where(.be-bss) .be-gr,
:where(.be-bss) .be-rgs,
:where(.be-ar) .be-gr,
:where(.be-ar) .be-rgs,
:where(.be-mq) .be-gr,
:where(.be-mq) .be-rgs,
:where(.be-fp) .be-gr,
:where(.be-fp) .be-rgs,
:where(.be-mt) .be-gr,
:where(.be-mt) .be-rgs,
:where(.be-ad) .be-gr,
:where(.be-ad) .be-rgs,
.be-gr:where([style*="--col:3"]),
.be-rgs:where([style*="--col:3"]),
.be-ch__ls:where([style*="--col:3"]),
.be-gr:where([style*="--col:4"]),
.be-rgs:where([style*="--col:4"]),
.be-ch__ls:where([style*="--col:4"]) { --cols: 2 }
.be-duo, .be-bs, .be-ct__gr { gap: 36px }
}
@media (max-width: 900px) {
.be-hd__in { min-height: 66px; padding: 0 }
.be-hd__bg {
display: block;
position: relative;
width: 42px;
height: 36px;
margin-left: auto;
border: 1px solid var(--bordure);
border-radius: var(--ray);
cursor: pointer;
}
.be-hd__bg span,
.be-hd__bg span::before,
.be-hd__bg span::after {
content: '';
position: absolute;
width: 18px;
height: 2px;
background: currentColor;
}
.be-hd__bg span { top: 17px; left: 11px }
.be-hd__bg span::before { top: -6px; left: 0 }
.be-hd__bg span::after { top: 6px; left: 0 }
.be-hd__nv { display: none; margin-left: 0 }
.be-hd__ck:checked ~ .be-hd__nv {
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 30;
padding: 18px 0 22px;
background: var(--carte);
color: var(--texte);
border-bottom: 1px solid var(--bordure);
}
.be-hd__ls { display: grid; gap: 4px }
.be-hd__ln { padding: 10px 0 }
/* Le modele ne montre plus ses appels dans la barre repliee : la paire
suit la liste dans le panneau, sous les entrees. */
.be-hd__nv > .be-paire--hd { margin-top: 14px; width: auto; justify-content: flex-start }
/* Sous le seuil doigt, le volet se replie A PLAT dans le flux : un panneau
flottant sur un menu deja deploye se recouvre et devient illisible. */
.be-vlt {
position: static;
display: none;
padding-top: 0;
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.be-vlt__in {
display: block;
width: auto;
min-width: 0;
max-width: none;
padding: 4px 0 12px 14px;
border: 0;
border-radius: 0;
box-shadow: none;
background: none;
}
.be-vlt__cs { display: grid; gap: 16px }
.be-vlt__vt { display: none }
.be-hd__bt[aria-expanded="true"] + .be-vlt,
.be-hd__it--vlt.est-ouvert > .be-vlt { display: block }
.be-hr .be-in, .be-duo, .be-bs, .be-ct__gr, .be-flc {
grid-template-columns: minmax(0, 1fr);
}
/* A PLAT, L AFFICHE A UNE SEULE COLONNE — y compris pour ses enfants places.
i7-electrician (6 sept 2026, 390px) : .X-hr--gauche .X-hr__cp { grid-column: 2 }
rouvrait une piste implicite de 306px, la piste explicite tombait a 0px et
les atouts (grid-column: 1 / -1) y tenaient sur 0px : leurs points de
15px sortaient en colonnes de 79-96px, 23 ecarts T5. */
.be-hr--gauche .be-hr__cp, .be-hr--droite .be-hr__cp { grid-column: 1; grid-row: auto }
.be-hr__ats { grid-column: 1 }
/* A plat, le texte du flanc repasse DEVANT sa grille, des deux cotes. */
.be-flc--droite .be-flc__tx { order: 0 }
/* Le duo tranche pareil, et le modele le confirme : a 390px roofer pose
son portant SOUS la lecture (bande « About », haut du visuel a 0,57 de
la bande), quand nous le posions AU-DESSUS — non par choix, mais parce
que l ordre du DOM sert a placer le visuel a gauche en large. En large
l ordre du DOM commande ; a plat, c est la lecture qui ouvre. */
.be-duo__cp { order: -1 }
.be-flc .be-gr { margin-top: 34px }
.be-hr__ats, .be-pd__gr { grid-auto-flow: row; grid-auto-columns: auto }
/* Etroit, plus rien ne flotte : la plaque reprend sa place dans le flux. */
.be-hr--pleine .be-hr__enc {
position: static;
transform: none;
width: auto;
margin-top: 26px;
}
.be-pd__gr { gap: 32px }
/* Etroit, trois colonnes ne tiennent pas : la barre du bas s empile
et se centre — le centrage du milieu reste vrai a toute largeur. */
.be-pd__bs { grid-template-columns: 1fr; justify-items: center; text-align: center }
.be-pd__bs ul { justify-content: center }
}
@media (min-width: 901px) {
/* Le survol n ouvre le volet qu au pointeur : au doigt, app.js prend la
main par la tete. Le focus-within couvre la tabulation DANS le panneau. */
.be-hd__it--vlt:hover > .be-vlt,
.be-hd__it--vlt:focus-within > .be-vlt { visibility: visible; opacity: 1; pointer-events: auto }
}
@media (max-width: 640px) {
:root { --pas: 63px }
.be-in { width: min(100% - 28px, var(--cont)) }
.be-gr, .be-rgs, .be-cps__gr { --cols: 1 }
.be-ch__ls { --cols: 2; gap: 14px }
.be-ch__it { padding: 14px }
.be-frm--pl { padding: 20px }
.be-btn, .be-tel { width: 100% }
.be-paire { width: 100% }
.be-btn--hd, .be-tel--hd, .be-paire--hd { width: auto }
}
/* Le palier 1024 du modele, tel que releve (SONDE_PALIER, ingest-relever.mjs). */
@media (max-width: 1024px) {
.be-hr--pleine { min-height: 900px; grid-template-rows: minmax(900px, auto) auto }
.be-hr--pleine .be-hr__cp { padding-top: 311px; padding-bottom: 200px }
.be-hr__tt { font-size: 52px }
.be-hr__ss { font-size: 18px; line-height: 1.11 }
}
/* Le palier 640 du modele, tel que releve (SONDE_PALIER, ingest-relever.mjs). */
@media (max-width: 640px) {
.be-hr--pleine { min-height: 778px; grid-template-rows: minmax(778px, auto) auto }
.be-hr--pleine .be-hr__cp { padding-top: 213px; padding-bottom: 200px }
.be-hr__tt { font-size: 29px }
.be-hr__ss { font-size: 16px; line-height: 1.13 }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
/* >>> NORME COQUILLE — cadre vide (pose par _lib/poser-cadre-vide.mjs) */
/* ============================================================
NORME COQUILLE — LE CADRE VIDE PORTE SON ENCRE (R4b)
------------------------------------------------------------
R4 dit depuis toujours que le cadre VIDE et le cadre REMPLI sont deux
etats TENABLES. Seule la moitie basse etait mesuree : « le cadre vide ne
s effondre pas sous 24 px ». Personne ne mesurait la moitie haute : « le
cadre vide reste tenable quand il est GRAND ».
C est la faute qu Angelo a vue le 22 aout 2026. Il n a pas vu une
composition fausse — les bandes de reference le prouvent : le hero de
roofer est bien une photo plein cadre avec le texte ecrit dessus, et le
cadre de plumbfixx mesure 5,5 colonnes sur 12 la ou le modele en prend 7.
Il a vu l ETAT VIDE : un mur blanc de 800 x 750 px portant une lettre
perdue. La coquille n embarque aucune photo — c est la regle — donc l
etat vide n est pas un accident de fixture, c est l etat NORMAL d une
coquille au repos. Il devait etre dessine, il ne l avait jamais ete.
Ce fichier le dessine, UNE fois, pour toutes les coquilles. Il ne touche
ni `display`, ni `position`, ni `overflow`, ni aucune boite : la
geometrie de chaque modele est deja jugee par F1/F2 et par R2/R3, on n y
revient pas. Il ne pose que de la peinture et de l encre.
Le crochet est volontairement AGRAMMATICAL : `[data-slot]` sans image
dedans. Les sept coquilles nomment leur cadre `kr-vue--nue`, `pf-ph--nu`,
`ig--nu`, ou ne le nomment pas du tout — s appuyer sur ces noms, c est
ecrire sept correctifs a la main, puis trente-sept. `data-slot` est pose
par R1 sur TOUS les cadres de TOUTES les coquilles : c est le seul point
d appui qui passe a l echelle.
Les quatre couleurs sont des variables : la fabrique les change comme elle
change une palette.
LA TEINTE SE DECIDE PAR CADRE, PAS PAR COQUILLE. C est la faute qu Angelo
a vue le 22 aout 2026 sur plumfixx : la coquille avait ete teintee SOMBRE
en bloc, parce que son hero ecrit en blanc — sauf que ce blanc repose sur
l aplat bleu de la SECTION, pas sur le cadre. Le placeholder lateral, qui
ne porte aucune encre, devenait une dalle noire de 800 x 750 px au milieu
d une page claire. Un placeholder qui ne porte rien n a aucune raison
d etre sombre.
Le defaut est donc CLAIR : un emplacement en attente se lit comme une
carte grise, c est la convention de tout le metier, et c est la version
qu Angelo avait validee. Seuls les cadres PORTEURS — ceux sur lesquels de
l encre repose vraiment, hero pleine fenetre sous son voile — prennent la
teinte que leur encre exige. Ces cadres-la sont trouves par la MESURE, pas
a la main : `_lib/teinter-cadres.mjs` ouvre les pages rendues, regarde
quelle encre tombe dans quel cadre, et ecrit la liste en queue du
`style.css` de la coquille. R4b verifie ensuite le resultat sur les pixels.
============================================================ */
:root {
--cadre-vide-fond: #e6e9ec;
--cadre-vide-trame: rgba(0, 0, 0, .045);
--cadre-vide-encre: rgba(17, 22, 28, .68);
--cadre-vide-filet: rgba(0, 0, 0, .10);
}
[data-slot]:not(:has(img)):not(:has(video)) {
background-color: var(--cadre-vide-fond);
/* Une trame diagonale : sans elle un aplat sombre se lit comme une panne
d affichage. Avec elle, il se lit comme un emplacement en attente. */
background-image: repeating-linear-gradient(135deg,
transparent 0 13px, var(--cadre-vide-trame) 13px 14px);
box-shadow: inset 0 0 0 1px var(--cadre-vide-filet);
color: var(--cadre-vide-encre);
/* SEULE propriete de boite de cette feuille, et elle ne vit que sur l etat
VIDE : elle disparait des que la fabrique injecte une photo. Elle sert a
une chose — permettre a la legende de savoir si son cadre est assez large
pour la porter (voir le @container plus bas). Sans elle, la meme legende
s ecrit dans une pastille de zone de 28 px et dans un hero de 800 px. */
container-type: inline-size;
}
/* L intitule. Les gabarits y mettent tantot l alt complet, tantot la seule
initiale du sujet — et cette initiale, dans un cadre de hero, sort a
78 px : une lettre geante a la derive, c est ce qui faisait « casse ».
On la ramene a la taille d une legende, quelle que soit la taille du
cadre : une legende ne grandit pas avec son cadre.
Et par defaut elle se TAIT. Un cadre ne porte une legende que s il est
assez large pour l ecrire sur une ligne lisible : une pastille de zone de
28 px, un cadre de maillage de 84 px, ne portent pas de phrase — ils
tiennent leur aplat. Ecrite quand meme, la legende s y empile en colonne
d une lettre : c est exactement ce que T5 appelle un serrage, et la pose
du cadre vide en avait fabrique 306 sur heatfix2, 256 sur roofivo, 220 sur
electria. Le libelle n est pas perdu pour autant : les gabarits le portent
deja en `aria-label`, il reste lu par les lecteurs d ecran et par le gate.
Le seuil est en unites de conteneur, pas de fenetre : c est la largeur du
CADRE qui decide, pas celle de l ecran. Un hero garde sa legende a 390 px
de fenetre ; une pastille ne l a jamais, meme a 1440. */
[data-slot]:not(:has(img)):not(:has(video)) > * {
font-size: 0 !important;
font-weight: 500;
line-height: 1.45;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--cadre-vide-encre);
-webkit-text-fill-color: var(--cadre-vide-encre);
opacity: 1;
max-width: 34ch;
text-align: center;
text-shadow: none;
}
/* 260 px : en dessous, une legende de 34ch a 11 px ne tient pas deux mots par
ligne — le seuil est celui de T5, pas un gout. Au-dessus, elle s ecrit. */
@container (min-width: 260px) {
[data-slot]:not(:has(img)):not(:has(video)) > * {
font-size: clamp(11px, .95vw, 14px) !important;
}
}
/* <<< NORME COQUILLE — cadre vide */
/* >>> NORME COQUILLE — teinte des cadres porteurs (pose par _lib/teinter-cadres.mjs) */
/* Cadres PORTEURS : de l encre claire repose reellement dessus (mesure du
2026-09-07 sur 13 page(s), 1440 et 390 px). Leur etat vide prend
le sol de leur section, assombri d un cran, pour que cette encre reste
lisible sans plaquer une dalle etrangere a la palette ; tous les autres
cadres gardent le clair par defaut. Ne pas editer a la main : remesurer.
Un cadre porteur SE TAIT. Sa legende est centree ; de l encre repose
deja dessus, par definition — l ecrire, c est la poser en travers du
titre. C est la collision qu on voyait sur le hero pleine fenetre de
template-14 : « EMPLACEMENT VISUEL — ... » ecrit sur le paragraphe.
Le libelle reste porte en aria-label, il n est pas perdu. */
[data-slot="be-vue--apr"]:not(:has(img)):not(:has(video)) {
--cadre-vide-fond: #171b20;
--cadre-vide-trame: rgba(255, 255, 255, .05);
--cadre-vide-encre: rgba(255, 255, 255, .82);
--cadre-vide-filet: rgba(255, 255, 255, .10);
}
[data-slot="be-vue--av"]:not(:has(img)):not(:has(video)) {
--cadre-vide-fond: #171b20;
--cadre-vide-trame: rgba(255, 255, 255, .05);
--cadre-vide-encre: rgba(255, 255, 255, .82);
--cadre-vide-filet: rgba(255, 255, 255, .10);
}
[data-slot="be-vue--herofond"]:not(:has(img)):not(:has(video)) {
--cadre-vide-fond: #040404;
--cadre-vide-trame: rgba(255, 255, 255, .05);
--cadre-vide-encre: rgba(255, 255, 255, .82);
--cadre-vide-filet: rgba(255, 255, 255, .10);
}
[data-slot="be-vue--herofond"]:not(:has(img)):not(:has(video)) > * {
font-size: 0 !important;
}
/* <<< NORME COQUILLE — teinte des cadres porteurs */
/* === LOGO MARQUE (factory) : vrai logo.svg en lockup avec le nom dans le header === */
.zx-brandlogo{height:1.7em;width:auto;max-height:40px;vertical-align:middle;margin-right:.5em;object-fit:contain;border-radius:6px;flex:0 0 auto}
.zx-send{display:inline-block;margin-top:.6rem;padding:.85em 1.7em;border:0;border-radius:8px;background:var(--accent,var(--marque,#141414));color:var(--sur-marque,#fff);font:inherit;font-weight:700;line-height:1;cursor:pointer}
.zx-send:hover{filter:brightness(1.08)}
.zx-marques{padding:1.5rem 1rem;background:var(--fond,#f6f6f6);border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06)}
.zx-marques__in{max-width:1100px;margin:0 auto;text-align:center}
.zx-marques__t{margin:0 0 .9rem;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--texte,#333);opacity:.55}
.zx-marques__u{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.6rem 2.4rem}
.zx-marques__u img{height:34px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:.2s}
.zx-marques__u img:hover{filter:none;opacity:1}
.zx-marques__u span{font-weight:700;color:var(--texte,#333);opacity:.55}
.zx-certs{padding:3rem 1rem;background:var(--sur-marque,#fff)}
.zx-certs__in{max-width:1100px;margin:0 auto}
.zx-certs__e{margin:0 0 .3rem;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent,#c62828);font-weight:700}
.zx-certs__h{margin:0 0 1.6rem;font-size:1.9rem;color:var(--texte,#1a1a1a)}
.zx-certs__u{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem}
.zx-certs__i{display:flex;gap:.8rem;align-items:flex-start;padding:1.1rem;background:var(--fond,#f7f7f7);border-radius:12px}
.zx-certs__ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--accent,#c62828);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700}
.zx-certs__t{margin:0 0 .2rem;font-weight:700;color:var(--texte,#1a1a1a)}
.zx-certs__x{margin:0;font-size:.9rem;line-height:1.4;color:var(--texte,#555);opacity:.8}
/* === GARDE-FOU débordement horizontal mobile (factory, audit 04/09) === */
html,body{overflow-x:clip;max-width:100%}
img,video,iframe,table,svg{max-width:100%}