/* style.css — ro. 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: 1180px;
--ray: 16px;
--pas: 96px;
--ombre: rgba(0, 0, 0, 0.12) 0px 0.602187px 0.421531px -1px, rgba(0, 0, 0, 0.11) 0px 2.28;
}
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
margin: 0;
background: var(--fond);
color: var(--texte);
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 17px;
line-height: 1.62;
-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 }
.ro-corps { display: block }
.ro-in { width: min(100% - 40px, var(--cont)); margin-inline: auto }
.ro-bd { position: relative; padding: var(--pas) 0; background: var(--fond) }
/* Rythme des fonds : releve bande par bande sur la source (fond de section). */
.ro-ch,
.ro-mq,
.ro-av,
.ro-fq { background: var(--fond-2) }
.ro-tt, .ro-hr__tt, .ro-ar__h1 {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 600;
line-height: 1.14;
letter-spacing: -.015em;
}
.ro-tt { font-size: clamp(31px, 3.6vw, 45px) }
.ro-hr__tt { font-size: clamp(25px, 4.4vw, 63px) }
.ro-ar__h1 { font-size: clamp(35px, 4.1vw, 51px) }
.ro-tt__ac { font-style: normal; color:var(--encre-marque,var(--marque)) }
.ro-sur {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 500;
font-size: 16px;
letter-spacing: -0.003em;
text-transform: uppercase;
color:var(--encre-marque,var(--marque));
}
.ro-chapo { font-size: 18px; color: var(--texte-doux); max-width: 62ch }
.ro-mnt { font-size: 13px; color: var(--texte-doux) }
.ro-maj { font-size: 14px; color: var(--texte-doux) }
/* R7 : une porte non habillee n est PAS comptee comme porte. .ro-tel doit
donc porter un fond ou un bord visible partout ou il apparait, sans quoi
toutes les pages sortent rouges faute d appel. */
.ro-btn, .ro-tel {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
border-radius: var(--ray);
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 600;
font-size: 15px;
line-height: 1;
text-align: center;
cursor: pointer;
}
.ro-btn {
padding: 15px 28px;
border: 1px solid var(--marque);
background:var(--marque);--sur-bande:var(--sur-marque);
color:var(--sur-bande,var(--sur-marque));
}
.ro-tel {
padding: 14px 26px;
border: 1px solid var(--bordure);
background: var(--fond);
color:var(--encre-marque,var(--marque));
}
.ro-btn:hover, .ro-tel:hover { filter: brightness(.94) }
.ro-btn--hd { padding: 12px 20px; font-size: 14px }
.ro-btn--hr { padding: 17px 32px; font-size: 16px }
.ro-tel--hd { padding: 11px 18px; font-size: 14px }
.ro-tel--hr { padding: 16px 30px; 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. */
.ro-paire {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 12px;
}
.ro-ic, .ro-chev, .ro-fl { flex: 0 0 auto }
.ro-ic { width: 17px; height: 12px; color:var(--encre-marque,var(--marque)) }
.ro-chev { width: 12px; height: 8px; transition: transform .2s ease }
.ro-fl { width: 18px; height: 12px }
/* 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. */
.ro-vue {
display: grid;
place-items: center;
overflow: hidden;
border-radius: var(--ray);
min-width: 24px;
min-height: 24px;
height: var(--h, var(--hv, 220px));
}
.ro-vue img { width: 100%; height: 100%; object-fit: cover }
.ro-hd { --hv: 48px }
.ro-hr { --hv: 760px }
.ro-pd { --hv: 48px }
.ro-fa { --hv: 48px }
.ro-pr { --hv: 220px }
.ro-bss { --hv: 400px }
.ro-ar { --hv: 360px }
.ro-ct { --hv: 460px }
.ro-ch { --hv: 260px }
.ro-ch { --hic: 48px; --lic: 48px }
.ro-mq { --hv: 136px }
.ro-cps { --hv: 420px }
.ro-fc { --hv: 48px }
.ro-is { --hv: 48px }
.ro-is { --hic: 44px; --lic: 60px }
.ro-lg { --hv: 48px }
.ro-lg { --hic: 44px; --lic: 60px }
.ro-wh { --hv: 640px }
.ro-xp { --hv: 528px }
.ro-ul { --hv: 460px }
.ro-fp { --hv: 480px }
.ro-sv { --hv: 220px }
.ro-sv { --hic: 44px; --lic: 60px }
.ro-re { --hv: 280px }
.ro-mt { --hv: 280px }
.ro-cr { --hv: 220px }
.ro-cr { --hic: 44px; --lic: 60px }
.ro-b2 { --hv: 220px }
.ro-b2 { --hic: 44px; --lic: 60px }
.ro-zn { --hv: 220px }
.ro-zn { --hic: 44px; --lic: 60px }
.ro-ma { --hv: 220px }
.ro-ma { --hic: 44px; --lic: 60px }
.ro-bl { --hv: 256px }
.ro-gp { --hv: 220px }
.ro-gp { --hic: 44px; --lic: 60px }
.ro-tr { --hv: 48px }
.ro-tr { --hic: 44px; --lic: 60px }
.ro-ad { --hv: 280px }
.ro-av { --hv: 64px }
.ro-sp { --hv: 48px }
.ro-sp { --hic: 44px; --lic: 60px }
.ro-cb { --hv: 520px }
.ro-ur { --hv: 300px }
.ro-ur { --hic: 44px; --lic: 60px }
.ro-vlt__vt .ro-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. */
.ro-pucs { display: grid; gap: 9px; margin-top: 4px }
.ro-pucs li {
display: grid;
grid-template-columns: 17px minmax(0, 1fr);
gap: 11px;
align-items: start;
font-size: 15px;
color: var(--texte-doux);
}
.ro-pucs .ro-ic { margin-top: 6px }
.ro-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px }
.ro-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. */
.ro-gr {
display: grid;
grid-template-columns: repeat(var(--cols, var(--col, 3)), minmax(0, 1fr));
gap: 28px;
margin-top: 42px;
}
/* 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. */
.ro-flc {
display: grid;
grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
gap: 56px;
align-items: start;
}
.ro-flc--droite { grid-template-columns: minmax(0, 1fr) minmax(0, 330px) }
.ro-flc--droite .ro-flc__tx { order: 2 }
.ro-flc__tx { display: grid; 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. */
.ro-flc .ro-gr { margin-top: 0 }
/* MOSAIQUE : la premiere carte tient DEUX rangs et garde sa hauteur propre
(--hvx), les suivantes s empilent a cote. Trois cadres egaux a la hauteur de
la grande feraient la meme bande deux fois plus haute que le modele. */
.ro-gr--mos { align-items: stretch }
.ro-gr--mos > :first-child { grid-row: span 2 }
.ro-gr--mos > :first-child .ro-vue { height: var(--hvx, var(--hv, 320px)) }
/* 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. */
.ro-crt {
display: grid;
align-content: start;
min-height: var(--hc, 0px);
background: var(--crt-fond, var(--fond));
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. */
.ro-crt .ro-vue { border-radius: var(--crt-rayv, 0) }
/* 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. */
.ro-crt .ro-vue--ic {
height: auto;
width: max-content;
/* meme VIDE, l emplacement tient la place du dessin : sans plancher propre
il retombe sur les 24px du cadre generique et la carte se replie. */
min-height: var(--hic, 44px);
min-width: var(--lic, 60px);
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));
}
.ro-crt .ro-vue--ic img { width: auto; height: var(--hic, 44px); object-fit: contain }
.ro-crt__cp { display: grid; gap: 10px; align-content: start; padding: var(--crt-pad, 24px) }
.ro-crt__mt {
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 600;
color:var(--encre-marque,var(--marque));
}
.ro-crt__tt { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 600; font-size: 24px; line-height: 1.28 }
.ro-crt__px { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 600; font-size: 22px }
.ro-crt__px span { font-size: 14px; font-weight: 400; color: var(--texte-doux) }
.ro-crt__tx { color: var(--texte-doux); font-size: 15px }
.ro-crt__ln {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 4px;
font-weight: 600;
font-size: 15px;
color:var(--encre-marque,var(--marque));
}
.ro-bss .ro-crt { --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 }
.ro-ar .ro-crt { --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 }
.ro-ch .ro-crt { --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; --crt-rayv: 12px }
.ro-mq .ro-crt { --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 }
.ro-cps .ro-crt { --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 }
.ro-is .ro-crt { --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 }
.ro-lg .ro-crt { --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 }
.ro-fp .ro-crt { --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 }
.ro-sv .ro-crt { --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 }
.ro-re .ro-crt { --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 }
.ro-mt .ro-crt { --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 }
.ro-cr .ro-crt { --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 }
.ro-b2 .ro-crt { --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 }
.ro-zn .ro-crt { --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 }
.ro-ma .ro-crt { --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 }
.ro-bl .ro-crt { --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; --crt-rayv: 16px }
.ro-gp .ro-crt { --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 }
.ro-tr .ro-crt { --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 }
.ro-ad .ro-crt { --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 }
.ro-sp .ro-crt { --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 }
.ro-ur .ro-crt { --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 }
.ro-bss > .ro-in > .ro-sur, .ro-bss > .ro-in > .ro-tt, .ro-bss > .ro-in > .ro-chapo { text-align: center; margin-inline: auto }
.ro-ar > .ro-in > .ro-sur, .ro-ar > .ro-in > .ro-tt, .ro-ar > .ro-in > .ro-chapo { text-align: center; margin-inline: auto }
.ro-mq > .ro-in > .ro-sur, .ro-mq > .ro-in > .ro-tt, .ro-mq > .ro-in > .ro-chapo { text-align: center; margin-inline: auto }
.ro-cps > .ro-in > .ro-sur, .ro-cps > .ro-in > .ro-tt, .ro-cps > .ro-in > .ro-chapo { text-align: center; margin-inline: auto }
.ro-fp > .ro-in > .ro-sur, .ro-fp > .ro-in > .ro-tt, .ro-fp > .ro-in > .ro-chapo { text-align: center; margin-inline: auto }
.ro-re > .ro-in > .ro-sur, .ro-re > .ro-in > .ro-tt, .ro-re > .ro-in > .ro-chapo { text-align: center; margin-inline: auto }
.ro-mt > .ro-in > .ro-sur, .ro-mt > .ro-in > .ro-tt, .ro-mt > .ro-in > .ro-chapo { text-align: center; margin-inline: auto }
.ro-bl > .ro-in > .ro-sur, .ro-bl > .ro-in > .ro-tt, .ro-bl > .ro-in > .ro-chapo { text-align: center; margin-inline: auto }
.ro-ad > .ro-in > .ro-sur, .ro-ad > .ro-in > .ro-tt, .ro-ad > .ro-in > .ro-chapo { text-align: center; margin-inline: auto }
.ro-av > .ro-in > .ro-sur, .ro-av > .ro-in > .ro-tt, .ro-av > .ro-in > .ro-chapo { text-align: center; margin-inline: auto }
.ro-rgs {
display: grid;
grid-template-columns: repeat(var(--cols, var(--col, 1)), minmax(0, 1fr));
gap: 14px;
margin-top: 40px;
}
.ro-rg {
display: grid;
gap: 8px;
align-content: start;
min-height: var(--hr, 0px);
padding: 24px 26px;
background: var(--fond);
border: 1px solid var(--bordure);
border-radius: var(--ray);
}
.ro-rg__n {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 600;
font-size: 14px;
letter-spacing: .1em;
color:var(--encre-marque,var(--marque));
}
.ro-rg__av {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 999px;
background: var(--fond-2);
color:var(--encre-marque,var(--marque));
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 600;
}
.ro-rg__nt { font-size: 14px; letter-spacing: .1em; color:var(--encre-marque,var(--marque)) }
.ro-rg__tt { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 600; font-size: 24px; line-height: 1.3 }
.ro-rg__tx { color: var(--texte-doux); font-size: 15px }
.ro-rg__au { font-size: 14px; color: var(--texte-doux) }
.ro-rg__au span { font-weight: 600; color: var(--texte) }
.ro-rg__vl { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 600 }
/* 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. */
.ro-rg--pli { padding: 0 }
.ro-rg--pli summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 22px 26px;
cursor: pointer;
list-style: none;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 600;
font-size: 18px;
}
.ro-rg--pli summary::-webkit-details-marker { display: none }
.ro-rg--pli details[open] summary .ro-chev { transform: rotate(180deg) }
.ro-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. */
.ro-duo {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 56px;
align-items: center;
}
.ro-duo__cp { display: grid; gap: 14px; align-content: center }
.ro-atts { display: grid; gap: 16px; margin-top: 8px }
.ro-att h3 { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 600; font-size: 17px }
.ro-att p { margin-top: 4px; color: var(--texte-doux); font-size: 15px }
.ro-adr { margin-top: 6px; color: var(--texte-doux) }
.ro-px { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 600; font-size: clamp(24px, 2.6vw, 32px) }
.ro-px span { font-size: 14px; font-weight: 400; color: var(--texte-doux) }
.ro-xp .ro-duo { position: relative }
.ro-xp .ro-plq {
position: absolute;
z-index: 2;
bottom: -15px;
right: 51.2%;
width: min(20.8%, calc(100% - 40px));
padding: 22px;
border-radius: 16px;
background: var(--accent);
color: var(--sur-accent);
}
.ro-plq__tt {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 600;
font-size: clamp(20px, 1.74vw, 25px);
line-height: 1.08;
}
.ro-plq__tx { margin-top: 8px; font-size: 15px; opacity: .82 }
@media (max-width: 900px) {
/* Etroit, le duo passe sur une colonne : plus rien ne peut flotter au-dessus
du portant sans couvrir le texte. La plaque reprend sa place dans le flux. */
.ro-xp .ro-plq {
position: static;
width: auto;
margin-top: 22px;
}
}
.ro-bnd {
display: grid;
gap: 16px;
justify-items: start;
align-content: center;
min-height: var(--h, 0px);
}
.ro-bnd__tx { max-width: 62ch; color: var(--texte-doux) }
.ro-bnd__ou { font-size: 14px; color: var(--texte-doux) }
.ro-frm { display: grid; gap: 16px; width: 100% }
.ro-frm--pl {
padding: 28px;
background: var(--fond-2);
border: 1px solid var(--bordure);
border-radius: var(--ray);
}
.ro-frm label { display: grid; gap: 7px; font-size: 14px; font-weight: 600 }
.ro-frm input, .ro-frm textarea {
width: 100%;
padding: 13px 14px;
background: var(--fond);
border: 1px solid var(--bordure);
border-radius: var(--ray);
font-weight: 400;
}
.ro-frm textarea { resize: vertical; min-height: 120px }
.ro-frm .ro-btn, .ro-frm .ro-tel { width: 100% }
.ro-prz { display: grid; gap: 14px; max-width: 76ch; margin-top: 28px }
.ro-prz__tt { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 600; font-size: 21px; margin-top: 18px }
.ro-prz__p { color: var(--texte-doux) }
.ro-is .ro-in { display: grid; gap: 14px; max-width: 76ch; margin-inline: auto }
/* Hero pleine : le cadre est pose en absolu contre la SECTION (.ro-in reste
statique) pour couvrir toute la bande — R5c lit alors forme: fond. Le voile
est un aplat, jamais une image : R1. */
.ro-hr .ro-in {
display: grid;
grid-template-columns: minmax(0, 674fr) minmax(0, 450fr);
gap: 56px;
align-items: center;
}
.ro-hr__cp { display: grid; gap: 18px; align-content: center; justify-items: start }
.ro-hr__ss { font-size: 19px; color: var(--texte-doux); max-width: 54ch }
.ro-hr__ats {
grid-column: 1 / -1;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 28px;
margin-top: 20px;
padding-top: 28px;
border-top: 1px solid var(--bordure);
}
.ro-hr__at-tt { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 600; 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. */
.ro-hr--gauche .ro-vue { grid-column: 1; grid-row: 1 }
.ro-hr--gauche .ro-hr__cp { grid-column: 2; grid-row: 1 }
.ro-hr--pleine .ro-in { grid-template-columns: minmax(0, 1fr) }
/* 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. */
.ro-hr--pleine {
min-height: var(--h, 560px);
display: grid;
grid-template-rows: minmax(var(--h, 560px), auto) auto;
/* Le retrait ne se pose plus 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. */
align-items: start;
padding-top: 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). */
.ro-hr--pleine .ro-hr__cp {
padding-top: clamp(88px, 8vw, 116px);
padding-bottom: clamp(32px, 4vw, 56px);
max-width: 720px;
}
.ro-hr--pleine .ro-hr__atbd { position: relative; z-index: 2; background: var(--fond-2) }
.ro-hr--pleine .ro-hr__atbd .ro-hr__ats { margin-top: 0; border-top: 0 }
/* LA PLAQUE. Relevee sur l affiche du modele : 567x241, de 0,67 a 0,90 de la
hauteur de la bande, fond blanc translucide, arrondi 16. On reprend ce qui
est MESURE — elle flotte, donc n ajoute aucune hauteur ; elle se pose bas
dans la scene ; elle porte une peau translucide arrondie. On ne reprend PAS
sa largeur de 39 pour cent : le modele y loge trois ecussons, la coquille y
loge des atouts titres, et un gabarit se juge sur ce qu il rendra chez le
client — elle prend donc la largeur du conteneur, comme .in. On ne reprend
pas non plus les 20 pour cent de blanc du fond : le modele pose sa vitre sur
une photo nue, la coquille la pose sur le voile sombre que reclame l encre
blanche, et 20 pour cent de blanc par-dessus feraient tomber le contraste du
texte de la plaque. Translucide reste translucide, a 10. */
.ro-hr--pleine .ro-hr__enc {
position: absolute;
z-index: 3;
left: 50%;
transform: translateX(-50%);
bottom: 10%;
width: min(100% - 40px, var(--cont));
padding: 26px 30px;
background: rgba(255, 255, 255, .10);
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 16px;
backdrop-filter: blur(14px);
}
.ro-hr--pleine .ro-hr__enc .ro-hr__ats { margin-top: 0; padding-top: 0; border-top: 0 }
/* L encre de la plaque est celle de la scene : le bandeau avait son propre
sol clair, la plaque n en a pas. */
.ro-hr--pleine .ro-hr__enc,
.ro-hr--pleine .ro-hr__enc .ro-hr__at-tt,
.ro-hr--pleine .ro-hr__enc .ro-hr__at-tx,
.ro-hr--pleine .ro-hr__enc .ro-pucs,
/* La couleur d une puce est posee sur le li LUI-MEME. Une declaration directe
bat toujours un heritage, quelle que soit la specificite de l ancetre : sans
cette ligne le texte de la plaque reste en gris sur fond sombre. */
.ro-hr--pleine .ro-hr__enc .ro-pucs li { color: #FFFFFF }
/* LA VITRE. Le modele depareille ses deux appels ; la coquille les rendait
tous deux pleins. L aplat reste au devis (var(--marque)), le telephone
passe en vitre — un fond translucide et un filet clair, qui restent un
fond ET un filet visibles (R7). Seulement sur l affiche pleine : ailleurs
l appel se detache sur un sol clair, ou une vitre ne se verrait pas. */
.ro-hr--pleine .ro-tel--hr {
background: rgba(255, 255, 255, .08);
border-color: rgba(255, 255, 255, .45);
color: #FFFFFF;
}
.ro-hr--pleine .ro-vue {
position: absolute;
inset: 0;
z-index: 0;
height: auto;
border-radius: 0;
}
.ro-hr--pleine::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: rgba(16, 16, 16, .78);
}
/* .in est un enfant de grille : z-index agit sans positionnement. Le rendre
relatif en ferait le bloc contenant du cadre pleine bande. */
.ro-hr--pleine .ro-in { z-index: 2 }
.ro-hr--pleine .ro-hr__tt,
.ro-hr--pleine .ro-hr__ss,
.ro-hr--pleine .ro-chapo,
.ro-hr--pleine .ro-sur,
.ro-hr--pleine .ro-tt__ac { color: #FFFFFF }
.ro-cb--pleine, .ro-ur--pleine { min-height: var(--hv, 400px); display: grid; align-items: center }
.ro-cb--pleine .ro-vue, .ro-ur--pleine .ro-vue {
position: absolute;
inset: 0;
z-index: 0;
height: auto;
border-radius: 0;
}
.ro-cb--pleine::after, .ro-ur--pleine::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: rgba(16, 16, 16, .78);
}
.ro-cb--pleine .ro-in, .ro-ur--pleine .ro-in { z-index: 2 }
.ro-cb--pleine .ro-tt,
.ro-cb--pleine .ro-sur,
.ro-cb--pleine .ro-bnd__tx,
.ro-cb--pleine .ro-bnd__ou,
.ro-ur--pleine .ro-tt,
.ro-ur--pleine .ro-sur,
.ro-ur--pleine .ro-bnd__tx,
.ro-ur--pleine .ro-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. */
.ro-hd {
position: sticky;
top: 0;
z-index: 40;
background: var(--fond);
border-bottom: 1px solid var(--bordure);
}
.ro-hd__in { min-height: 133px; position: relative; display: flex; align-items: center; gap: 24px; padding: 16px 0 }
.ro-hd__mq { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 600; 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. */
.ro-hd__nv { position: relative; margin-left: auto; align-self: stretch; display: flex; align-items: stretch }
.ro-hd__ls { display: flex; align-items: stretch; gap: 26px }
.ro-hd__it { position: relative; display: flex; align-items: center }
.ro-hd__ln {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 15px;
font-weight: 400;
}
.ro-hd__ln:hover { color:var(--encre-marque,var(--marque)) }
.ro-hd__bt { padding: 0; background: none; border: 0; cursor: pointer }
.ro-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 porte position:static : le volet s ancre sur .ro-hd__in
(relatif) et se cale a DROITE, donc il ne deborde jamais (R2). */
.ro-hd__it--vlt { position: static }
.ro-vlt {
position: absolute;
top: 100%;
right: 0;
left: auto;
z-index: 3;
padding-top: 16px;
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.ro-vlt__in {
display: flex;
gap: 26px;
width: max-content;
max-width: min(92vw, 900px);
min-width: 480px;
padding: 22px;
background: var(--fond);
color: var(--texte);
border: 1px solid var(--bordure);
border-radius: var(--ray);
box-shadow: var(--ombre);
}
.ro-vlt__vt { flex: 0 0 232px; min-width: 0 }
.ro-vlt__vtt { margin-top: 11px; font-size: 15px; font-weight: 600 }
.ro-vlt__vtx { margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--texte-doux) }
.ro-vlt__cs { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 26px; min-width: 0 }
.ro-vlt__c { flex: 1 1 168px; min-width: 0 }
.ro-vlt__ct {
margin-bottom: 11px;
font-size: 12px;
font-weight: 400;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--texte-doux);
}
.ro-vlt__ls { display: grid; gap: 10px }
.ro-vlt__ln { font-size: 15px; color: var(--texte-doux) }
.ro-vlt__ln:hover { color:var(--encre-marque,var(--marque)) }
.ro-hd__bt[aria-expanded="true"] + .ro-vlt,
.ro-hd__it--vlt.est-ouvert > .ro-vlt { visibility: visible; opacity: 1; pointer-events: auto }
/* R3 : les colonnes du pied partagent une signature (div.ro-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. */
.ro-pd {
padding: 72px 0 0;
background: var(--fond-2);
border-top: 1px solid var(--bordure);
}
.ro-pd__hd { display: grid; gap: 12px; max-width: 56ch; padding-bottom: 44px }
.ro-pd__mq { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 600; font-size: 22px }
.ro-pd__ds { color: var(--texte-doux) }
.ro-pd__gr {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 32px;
padding-bottom: 48px;
}
.ro-pd__cl ul { display: grid; gap: 10px; margin-top: 16px }
.ro-pd__tt { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .06em; text-transform: uppercase }
.ro-pd__ln { font-size: 15px; color: var(--texte-doux) }
.ro-pd__ln:hover { color:var(--encre-marque,var(--marque)) }
.ro-pd__cl--nap { display: grid; gap: 12px; align-content: start; justify-items: start }
.ro-pd__hr { font-size: 14px; color: var(--texte-doux) }
.ro-pd__bs {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 26px;
padding: 24px 0 32px;
border-top: 1px solid var(--bordure);
font-size: 14px;
color: var(--texte-doux);
}
.ro-pd__bs ul { display: flex; flex-wrap: wrap; gap: 18px }
.ro-fa { padding: 22px 0 0 }
.ro-fa__ls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--texte-doux);
}
.ro-fa__it { display: inline-flex; align-items: center; gap: 8px }
.ro-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. */
.ro-bss .ro-in { display: grid; gap: 76px }
.ro-bs {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 48px;
align-items: center;
}
.ro-bs__cp { display: grid; gap: 14px; align-content: start }
.ro-bs__tt { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 600; font-size: clamp(24px, 2.5vw, 31px); line-height: 1.2 }
.ro-ar__cp { display: grid; gap: 18px; max-width: 76ch; margin-inline: auto }
.ro-ar__mt { font-size: 15px; color: var(--texte-doux) }
.ro-ar__sm {
padding: 20px 24px;
background: var(--fond-2);
border: 1px solid var(--bordure);
border-radius: var(--ray);
}
.ro-ar__sm ul { display: grid; gap: 8px; margin-top: 10px }
.ro-ar__sm a { color:var(--encre-marque,var(--marque)); font-size: 15px }
.ro-ar__cr { display: grid; gap: 16px }
.ro-ar__tt { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 600; font-size: 23px; margin-top: 12px }
.ro-ar__t3 { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 600; font-size: 18px; margin-top: 4px }
.ro-ar__sm-tt { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux) }
.ro-ar__en {
border-left: 3px solid var(--marque); background: var(--fond-2);
border-radius: 0 12px 12px 0; padding: 16px 18px; display: grid; gap: 8px;
}
.ro-ar__en-tt { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 600; font-size: 16px }
.ro-go { margin-top: 26px; display: flex; justify-content: center }
.ro-enc {
margin-top: 26px; padding: 22px; display: grid; gap: 10px; justify-items: start;
border: 1px solid var(--bordure); border-radius: var(--ray); background: var(--fond-2);
}
.ro-enc__tt { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 600; font-size: 19px }
.ro-enc__tx { color: var(--texte-doux) }
.ro-hr__at-tx { font-size: 14px; color: var(--texte-doux); margin-bottom: 8px }
.ro-ct__gr {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 48px;
align-items: start;
}
.ro-ct__cp { display: grid; gap: 14px; align-content: start }
.ro-cds { display: grid; gap: 18px; margin-top: 10px }
.ro-cd h3 { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 600; font-size: 16px }
.ro-cd ul { display: grid; gap: 6px; margin-top: 6px; font-size: 15px; color: var(--texte-doux) }
.ro-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 .ro-ch__ls et retombe sur le --hv de la bande. */
.ro-ch .ro-in { display: grid; gap: 44px }
.ro-ch__ls {
display: grid;
grid-template-columns: repeat(var(--cols, var(--col, 4)), minmax(0, 1fr));
gap: 28px;
}
.ro-ch__it {
display: grid;
gap: 8px;
padding: 26px;
background: var(--fond);
border: 1px solid var(--bordure);
border-radius: var(--ray);
}
.ro-ch__vl {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 600;
font-size: clamp(30px, 3.6vw, 46px);
line-height: 1.05;
color:var(--encre-marque,var(--marque));
}
.ro-ch__lb { font-size: 15px; color: var(--texte-doux) }
/* Le debordement est coupe ICI, sur le ruban seul. Un overflow pose plus haut
(body, .ro-bd) aveuglerait R2 : clippe() remonte les ancetres. */
.ro-mq .ro-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);
}
.ro-mq__rb { display: flex; width: max-content; animation: ro-defile 34s linear infinite }
.ro-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. */
.ro-mq__lg { height: 30px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .62 }
.ro-mq__it {
flex: 0 0 auto;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: 600;
font-size: 19px;
letter-spacing: .02em;
white-space: nowrap;
color: var(--texte-doux);
}
@keyframes ro-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. */
.ro-cps__gr {
--col: 3;
display: grid;
grid-template-columns: repeat(var(--cols, var(--col, 2)), minmax(0, 1fr));
gap: 36px;
margin-top: 40px;
}
.ro-cp { display: grid; gap: 18px }
.ro-cp__cd {
position: relative;
overflow: hidden;
height: var(--h, 420px);
border-radius: var(--ray);
}
.ro-cp__av, .ro-cp__ap { position: absolute; inset: 0 }
.ro-cp__ap { clip-path: inset(0 0 0 var(--pos, 50%)) }
.ro-cp__av .ro-vue, .ro-cp__ap .ro-vue { height: 100%; border-radius: 0 }
.ro-cp__cd::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: var(--pos, 50%);
z-index: 2;
width: 2px;
background: var(--fond);
pointer-events: none;
}
.ro-cp__lb {
position: absolute;
bottom: 14px;
left: 14px;
z-index: 2;
padding: 6px 12px;
border-radius: 999px;
background: var(--fond);
color: var(--texte);
font-size: 12px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
}
.ro-cp__ap .ro-cp__lb { left: auto; right: 14px }
.ro-cp__pg {
position: absolute;
inset: 0;
z-index: 3;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: ew-resize;
}
.ro-cp__cp h3 { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 600; font-size: 19px }
.ro-cp__cp p { margin-top: 8px; color: var(--texte-doux); font-size: 15px }
.ro-fc .ro-in { display: grid; gap: 22px }
.ro-fc__ls { display: flex; flex-wrap: wrap; gap: 10px }
.ro-fc__ln, .ro-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: 600;
}
.ro-fc__it.est-courante > span {
background:var(--marque);--sur-bande:var(--sur-marque);
border-color:var(--encre-marque,var(--marque));
color:var(--sur-bande,var(--sur-marque));
}
/* 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: 76px }
:where(.ro-bss) .ro-gr,
:where(.ro-bss) .ro-rgs,
:where(.ro-ar) .ro-gr,
:where(.ro-ar) .ro-rgs,
:where(.ro-fp) .ro-gr,
:where(.ro-fp) .ro-rgs,
:where(.ro-re) .ro-gr,
:where(.ro-re) .ro-rgs,
:where(.ro-mt) .ro-gr,
:where(.ro-mt) .ro-rgs,
:where(.ro-ad) .ro-gr,
:where(.ro-ad) .ro-rgs,
.ro-ch__ls,
.ro-cps__gr { --cols: 2 }
.ro-duo, .ro-bs, .ro-ct__gr { gap: 36px }
}
@media (max-width: 900px) {
.ro-hd__bg {
display: block;
position: relative;
width: 42px;
height: 36px;
margin-left: auto;
border: 1px solid var(--bordure);
border-radius: var(--ray);
cursor: pointer;
}
.ro-hd__bg span,
.ro-hd__bg span::before,
.ro-hd__bg span::after {
content: '';
position: absolute;
width: 18px;
height: 2px;
background: currentColor;
}
.ro-hd__bg span { top: 17px; left: 11px }
.ro-hd__bg span::before { top: -6px; left: 0 }
.ro-hd__bg span::after { top: 6px; left: 0 }
.ro-hd__nv { display: none; margin-left: 0 }
.ro-hd__ck:checked ~ .ro-hd__nv {
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 30;
padding: 18px 0 22px;
background: var(--fond);
color: var(--texte);
border-bottom: 1px solid var(--bordure);
}
.ro-hd__ls { display: grid; gap: 4px }
.ro-hd__ln { padding: 10px 0 }
/* 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. */
.ro-vlt {
position: static;
display: none;
padding-top: 0;
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.ro-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;
}
.ro-vlt__cs { display: grid; gap: 16px }
.ro-vlt__vt { display: none }
.ro-hd__bt[aria-expanded="true"] + .ro-vlt,
.ro-hd__it--vlt.est-ouvert > .ro-vlt { display: block }
.ro-hr .ro-in, .ro-duo, .ro-bs, .ro-ct__gr, .ro-flc {
grid-template-columns: minmax(0, 1fr);
}
/* A plat, le texte du flanc repasse DEVANT sa grille, des deux cotes. */
.ro-flc--droite .ro-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. */
.ro-duo__cp { order: -1 }
.ro-flc .ro-gr { margin-top: 34px }
.ro-hr__ats, .ro-pd__gr { grid-auto-flow: row; grid-auto-columns: auto }
/* Etroit, plus rien ne flotte : la plaque reprend sa place dans le flux. */
.ro-hr--pleine .ro-hr__enc {
position: static;
transform: none;
width: auto;
margin-top: 26px;
}
.ro-pd__gr { gap: 32px }
}
@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. */
.ro-hd__it--vlt:hover > .ro-vlt,
.ro-hd__it--vlt:focus-within > .ro-vlt { visibility: visible; opacity: 1; pointer-events: auto }
}
@media (max-width: 640px) {
:root { --pas: 60px }
.ro-in { width: min(100% - 28px, var(--cont)) }
.ro-gr, .ro-rgs, .ro-cps__gr { --cols: 1 }
/* Sur une colonne, il n y a plus de rang a enjamber ni de grande carte a
tenir : la mosaique redevient une pile de cartes egales. */
.ro-gr--mos > :first-child { grid-row: auto }
.ro-gr--mos > :first-child .ro-vue { height: var(--hv, 320px) }
.ro-ch__ls { --cols: 2 }
.ro-frm--pl { padding: 20px }
.ro-btn, .ro-tel { width: 100% }
.ro-paire { width: 100% }
.ro-btn--hd, .ro-tel--hd, .ro-paire--hd { width: auto }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
.ro-vue--bsq { align-self: stretch; height: auto; position: relative }
.ro-vue--fch { align-self: stretch; height: auto; position: relative }
.ro-vue--xp { align-self: stretch; height: auto; position: relative }
@media (min-width: 901px) {
.ro-vue--bsq { min-height: 420px }
.ro-vue--fch { min-height: 340px }
.ro-vue--xp { min-height: 340px }
}
@media (max-width: 900px) {
.ro-vue--bsq { align-self: auto; min-height: 0; aspect-ratio: 3 / 2 }
.ro-vue--fch { align-self: auto; min-height: 0; aspect-ratio: 3 / 2 }
.ro-vue--xp { align-self: auto; min-height: 0; aspect-ratio: 3 / 2 }
}
.ro-vue--bsq > img,
.ro-vue--fch > img,
.ro-vue--xp > img { position: absolute; inset: 0; width: 100%; height: 100% }
/* >>> 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-08-30 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="ro-vue--cb"]:not(:has(img)):not(:has(video)) {
--cadre-vide-fond: #151515;
--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="ro-vue--cb"]:not(:has(img)):not(:has(video)) > * {
font-size: 0 !important;
}
[data-slot="ro-vue--herofond"]:not(:has(img)):not(:has(video)) {
--cadre-vide-fond: #393939;
--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="ro-vue--herofond"]:not(:has(img)):not(:has(video)) > * {
font-size: 0 !important;
}
/* <<< NORME COQUILLE — teinte des cadres porteurs */
/* contraste-source — bandes sombres : chacune declare son encre (--sur-bande) ; marque en texte : --encre-marque. */
/* contraste-bandes (14/09/2026) — regles PORTEES PAR LA BANDE qui peint le fond mesure.
Sol des bandes « pleines » et des cartes « a fond » : la feuille y ecrit l encre BLANCHE parce
qu un cadre (inset 0) et un voile ::after les couvrent. Mais la section / la carte peint son propre
fond CLAIR et passe devant le cadre dans la pile de pixels : texte mesure blanc sur clair (1,0 a
1,18). La bande porte donc le sol sombre que son encre exige ; cadre et voile le recouvrent, rien ne
change a l oeil — et si le contenu deborde le cadre, le texte ne tombe plus sur du clair. */
.ro-hr--pleine, .ro-cb--pleine, .ro-ur--pleine { background-color: var(--texte) }
/* Libelles du formulaire pose dans la bande d appel pleine (voile sombre a 78 %) : la feuille donne
l encre blanche au titre et aux textes de la bande, pas aux libelles — sombre sur le voile, illisible a
l oeil, et mesure 1,0 une fois le sol de la bande rendu sombre. Les champs gardent leur propre fond. */
.ro-cb--pleine .ro-frm label,
.ro-ur--pleine .ro-frm label { color: #FFFFFF }