/* FICHIER ASSEMBLE A LA COMPILATION. Ne pas le modifier a la main :
* la prochaine compilation ecrasera la modification sans le dire.
* Il existe parce que `inlineStylesheets: always` n'emet aucun .css, et
* que les 4 ecrans PHP de /demande-offre/ ont besoin d'une feuille
* servie. Source et motif : `astro.config.mjs`.
* Assemble depuis : src/styles/base.css, src/styles/pont-maquettes.css, src/styles/comptoir.css
*/
/* Jetons de composition. Valeurs tirées de `production/_ux/02-grille-et-largeurs.md`.
Ne pas les changer sans mettre ce document à jour : le script de recette mesure
contre ces valeurs, et un conteneur figé à 1440 est un défaut de recette. */
:root{
/* Couleurs de la charte 2022. Aucune autre couleur de marque. */
--ark-bleu: #00609C;
--ark-bleu-clair: #00A7E1;
--ark-noir: #1D1D1B;
--ark-noir-2: #262624; /* fond d'encart sur fond noir */
--ark-craie: #EDEDEA;
--ark-blanc: #FFFFFF;
/* Quatrième ton, borné à deux emplois : rehaut des photographies bichromes
et anneau de focus. Jamais un fond, jamais un texte, jamais un bouton. */
--ark-etincelle: #E8722A;
/* Les trois portées. À 2560 : 760, 2048, 2464. */
--gouttiere: clamp(1rem, 2.5vw, 3rem);
--w-lecture: min(calc(100vw - 2 * var(--gouttiere)), 76ch);
--w-conteneur: min(calc(100vw - 2 * var(--gouttiere)), max(80vw, 420px), 2120px);
--w-large: min(calc(100vw - 2 * var(--gouttiere)), 2800px);
--gap-col: clamp(1rem, 1.6vw, 2.5rem);
/* Échelle typographique fluide, interpolée entre 390 et 2560. */
--t-micro: clamp(0.8125rem, calc(0.790rem + 0.092vw), 0.9375rem);
--t-petit: clamp(0.9375rem, calc(0.915rem + 0.092vw), 1.0625rem);
--t-corps: clamp(1.0625rem, calc(1.029rem + 0.138vw), 1.25rem);
--t-chapeau: clamp(1.1875rem, calc(1.143rem + 0.184vw), 1.4375rem);
--t-h4: clamp(1.25rem, calc(1.194rem + 0.230vw), 1.5625rem);
--t-h3: clamp(1.5rem, calc(1.410rem + 0.369vw), 2rem);
--t-h2: clamp(1.8125rem, calc(1.644rem + 0.691vw), 2.75rem);
--t-h1: clamp(2.25rem, calc(1.936rem + 1.290vw), 4rem);
--t-affiche: clamp(3.5rem, calc(2.646rem + 3.502vw), 8.25rem);
--t-monument: clamp(6.875rem, calc(4.516rem + 9.677vw), 20rem);
/* Rythme vertical. Deux sections voisines ne portent jamais la même pile. */
--pile: clamp(3rem, 5.2vw, 10rem);
--pile-dense: calc(var(--pile) * 0.6);
--pile-bande: calc(var(--pile) * 1.35);
/* Titres en Oswald, auto-hébergée (décision David : « Oswald auto-hébergée »).
Gobold a été RETIRÉ de la pile le 2026-11-01 : aucun fichier Gobold n'est
livré dans le projet, donc la pile y retombait de toute façon. Mais tant que
le nom restait en tête, une machine où Gobold est installée localement
affichait des titres que personne d'autre ne verrait jamais : l'écart ne se
serait remarqué que chez nous, et jamais chez un visiteur.
Texte courant en pile système : la charte demande Helvetica Neue, et sur les
machines Apple elle y est déjà, pour zéro octet. */
--f-titre: 'Oswald', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
--f-corps: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* Les trois portées, centrées par marge automatique. Jamais collées à un bord. */
.p-lecture, .p-conteneur, .p-large{ margin-inline: auto; }
.p-lecture { width: var(--w-lecture); }
.p-conteneur{ width: var(--w-conteneur); }
.p-large { width: var(--w-large); }
/* Débord pleine fenêtre. Obligatoire pour tout bloc qui porte une couleur ou une
photographie : sinon la page devient une île de texte, ce que l'écran de 2560
rend immédiatement visible. Le contenu interne reste contraint à une portée. */
.bande{
width: 100vw;
margin-inline: calc(50% - 50vw);
padding-inline: var(--gouttiere);
}
*, *::before, *::after{ box-sizing: border-box; }
html{
-webkit-text-size-adjust: 100%;
/* L'en-tete est collante : un saut vers une ancre doit s'arreter SOUS elle,
sinon la cible se retrouve cachee derriere la barre. */
scroll-padding-block-start: calc(var(--entete) + 12px);
}
body{
margin: 0;
font-family: var(--f-corps);
font-size: var(--t-corps);
line-height: 1.62;
color: var(--ark-noir);
background: var(--ark-blanc);
/* La barre d'action persistante occupe 64 px en bas. Sa hauteur est réservée
ici, dès le premier rendu, jamais par un décalage après coup. */
padding-block-end: 64px;
}
@media (min-width: 1024px){ body{ padding-block-end: 0; } }
h1, h2, h3, h4{
font-family: var(--f-titre);
font-weight: 700;
text-transform: uppercase;
text-wrap: balance;
margin-block: 1.7em 0;
letter-spacing: -0.005em;
}
/* INTERLIGNE ET CAPITALES ACCENTUEES.
Les titres sont composes en capitales par `pont-maquettes.css`. En Oswald,
l'accent d'une capitale monte a environ 1,00 em au-dessus de la ligne de
base, alors que la hauteur de capitale s'arrete a 0,73 em. Sous un
interligne de 1,10, deux choses se produisent, et le client les a vues
toutes les deux sur la meme page : l'accent de la premiere ligne sort du
haut de la boite et se fait rogner par ce qui la surmonte, et l'accent de la
seconde ligne vient toucher la ligne du dessus.
La mesure : il faut 1,096 pour que l'encre de l'accent reste dans la boite.
1,12 le donne, avec de quoi encaisser la police de secours, dont les
metriques ne sont pas celles d'Oswald. */
h1{ font-size: var(--t-h1); line-height: 1.12; }
h2{ font-size: var(--t-h2); line-height: 1.14; }
h3{ font-size: var(--t-h3); line-height: 1.22; }
h4{ font-size: var(--t-h4); line-height: 1.22; }
section > :is(h1,h2,h3,h4):first-child{ margin-block-start: 0; }
p{ margin-block: 0 0.95em; text-wrap: pretty; hyphens: auto; }
ul, ol{ line-height: 1.5; }
img, video, svg{ max-width: 100%; height: auto; }
a{ color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
/* Anneau de focus sur les 4 côtés. Jamais un filet sur un seul côté. */
outline: 3px solid var(--ark-etincelle);
outline-offset: 2px;
}
.sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip-path: inset(50%); white-space: nowrap; border:0;
}
/* Lien d'évitement, premier élément focalisable de chaque page. */
.evitement{
position:absolute; left:-9999px; top:0; z-index:100;
background: var(--ark-noir); color: #fff; padding: .8em 1.2em;
}
.evitement:focus{ left: var(--gouttiere); top: .5rem; }
/* Un numéro de téléphone tient en UN seul nœud de texte, sinon Google ne peut
pas le remplacer par son numéro de suivi d'appel. */
a[href^="tel:"]{ white-space: nowrap; text-decoration: none; }
/* Le mouvement se mérite et reste rare. */
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration: .01ms !important; animation-iteration-count: 1 !important;
transition-duration: .01ms !important; scroll-behavior: auto !important;
}
}
/* Oswald, auto-hebergee. Aucun appel a un tiers, c'est la regle 7 de
REGLES-MAISON et la cible 100 au PageSpeed en depend.
Les maquettes chargeaient Oswald depuis Google Fonts, avec un preconnect
vers deux domaines. En production les 4 graisses employees sont servies
depuis le domaine, en woff2, sous-ensemblees : latin pour le francais
courant, latin etendu pour le reste. Les plages sont celles de Fontsource,
donc le navigateur ne telecharge le fichier etendu que s'il rencontre un
caractere qui s'y trouve, ce qui n'arrive sur aucune page du site.
Les 4 graisses sont toutes employees AU-DESSUS DE LA LIGNE DE FLOTTAISON :
700 pour les titres, 600 pour les boutons et le telephone, 500 pour la
navigation, 400 pour les sur-titres. Elles sont donc toutes prechargees
dans Base.astro : 4 fichiers, 50 ko au total, demandes en parallele du
document. C'est ce qui evite l'echange de police apres le premier rendu,
et donc le decalage de mise en page que le controle C25 mesure a zero.
Metriques d'Oswald, lues dans le fichier et non supposees :
unitsPerEm 1000, ascendante 1193, descendante 289, interligne 0.
Hauteur de capitale 810, hauteur d'x 578. */
@font-face{
font-family:'Oswald'; font-style:normal; font-weight:400; font-display:swap;
src:url('/polices/oswald-latin-400-normal.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Oswald'; font-style:normal; font-weight:400; font-display:swap;
src:url('/polices/oswald-latin-ext-400-normal.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'Oswald'; font-style:normal; font-weight:500; font-display:swap;
src:url('/polices/oswald-latin-500-normal.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Oswald'; font-style:normal; font-weight:500; font-display:swap;
src:url('/polices/oswald-latin-ext-500-normal.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'Oswald'; font-style:normal; font-weight:600; font-display:swap;
src:url('/polices/oswald-latin-600-normal.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Oswald'; font-style:normal; font-weight:600; font-display:swap;
src:url('/polices/oswald-latin-ext-600-normal.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:'Oswald'; font-style:normal; font-weight:700; font-display:swap;
src:url('/polices/oswald-latin-700-normal.woff2') format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:'Oswald'; font-style:normal; font-weight:700; font-display:swap;
src:url('/polices/oswald-latin-ext-700-normal.woff2') format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* ============================================================================
PONT entre la feuille de base du projet et le vocabulaire des 5 maquettes.
POURQUOI CE FICHIER EXISTE. `jetons.css` et `base.css` sont de la main du
concepteur et ne doivent pas etre reecrits. Les 5 maquettes recettees, elles,
font foi sur le RENDU, et leur feuille de composition nomme les memes
couleurs autrement (`--bleu` pour `--ark-bleu`, `--tc` pour `--f-titre`) et
s'appuie sur quelques reglages de base differents. Porter les gabarits
demandait l'un des deux : renommer un millier de declarations dans la feuille
portee, ce qui n'est plus un portage mais une reecriture, ou poser ce pont.
CE FICHIER EST DONC LA LISTE COMPLETE ET LISIBLE DES ECARTS. Rien d'autre ne
touche aux deux fichiers d'origine, qui sont restes au bit pres. Le supprimer
rend au site la feuille de base d'origine, et casse le rendu porte, ce qui
est exactement ce qu'on veut d'un pont : qu'il se voie.
Trois sortes de lignes ici, et elles sont etiquetees :
ALIAS meme valeur, autre nom. Aucun ecart.
ECART la maquette mesure autre chose que le jeton. Motif donne.
AJOUT le jeton ou la regle n'existait pas.
========================================================================== */
:root{
/* ALIAS. Memes couleurs de charte, sous les noms employes par les maquettes.
Changer une couleur se fait donc TOUJOURS dans `jetons.css`, jamais ici. */
--bleu: var(--ark-bleu);
--cyan: var(--ark-bleu-clair);
--noir: var(--ark-noir);
--blanc: var(--ark-blanc);
--orange-etincelle: var(--ark-etincelle);
/* ALIAS. Les deux familles. `--f-titre` garde Gobold en tete : aucun fichier
Gobold n'est livre dans le projet, la pile retombe donc sur Oswald, qui est
auto-heberge dans `polices.css`. Le jour ou les fichiers Gobold arrivent,
les titres les prennent sans toucher a une ligne de composition. */
--tc: var(--f-titre);
--tt: var(--f-corps);
/* ECART 1, fond de page. `base.css` pose `--ark-blanc` ; les 5 maquettes
posent #F4F5F6, et la charte nomme par ailleurs une craie a #EDEDEA. Trois
valeurs pour une meme surface. Celle des maquettes est retenue, parce que
c'est elle qui a ete recettee et que tous les encarts blancs du site
(cartes de rayon, plaques de marque, cartes d'avis) se detachent d'elle.
Sur blanc pur, ces encarts disparaissent. A trancher : voir le rapport. */
--clair: #F4F5F6;
/* AJOUT. `--papier` est employe sans etre defini par les 4 gabarits de page
interieure (.blocHdr, .moment, et la reserve du numero de moment) : il y
decoupe une reserve dans un filet traversant, donc il vaut le fond de page.
Non defini, ces trois dispositifs sortaient en fond transparent. */
--papier: var(--clair);
/* ECART 2, portee de lecture. Le tableau de `02-grille-et-largeurs.md`
demande 760 px a 2560, et `jetons.css` l'ecrit en 76ch. Mesure dans le
navigateur : 76ch de la pile de corps a 20 px rendent 958 px, pas 760, et
le controle C05 de la recette refuse la colonne. La portee est donc bornee
a 60ch ET a 760px, ce qui rend exactement la valeur du tableau. C'est la
valeur en px qui fait foi ; le `ch` ne sert plus qu'aux petites largeurs. */
--w-lecture: min(calc(100vw - 2 * var(--gouttiere)), 60ch, 760px);
/* AJOUT. Hauteur de l'entete fixe, reservee par le lien d'evitement et par
le decalage des ancres de section. */
--entete: 60px;
}
/* ECART 3, fond du corps et debord horizontal.
Le fond passe au fond de page des maquettes (voir ECART 1).
`overflow-x:hidden` est ce qui rend les bandes pleine fenetre possibles : une
bande est posee en 100vw, et sans cette ligne la seule barre de defilement
verticale suffit a creer un debordement horizontal de 15 px sur toutes les
pages, ce que le controle C01 attrape aux 7 largeurs. */
body{ background: var(--clair); overflow-x: hidden; }
/* ECART 4, titres. `base.css` leur donne une marge haute de 1.7em et un
interlettrage de -0.005em. Les maquettes posent les marges sur les piles de
section (`--pile`, `--pile-dense`) et non sur les titres, et serrent a
-0.012em : c'est ce qui fait tenir « MATERIEL DE SOUDURE ET DE DECOUPE A
SOIGNIES » sur deux lignes dans le bandeau. Garder la marge de `base.css`
decalait chaque titre d'une demi-pile de plus que la maquette. */
/* LA PLACE DE L'ACCENT, AU-DESSUS DE LA BOITE.
*
* Les titres sont en capitales. Mesure faite dans le navigateur, sur Oswald
* 700 : l'encre d'un « É » monte a 1,08 em au-dessus de la ligne de base,
* quand la boite de ligne n'en offre que 1,01 a un interligne de 1,12.
* L'accent depassait donc de 0,07 em PAR LE HAUT, et se faisait rogner par ce
* qui surmontait le titre. C'est le defaut releve par le client sur la page de
* La Louviere, ou « MATERIEL » et « PRES » avaient perdu leurs accents.
*
* Deux facons de le corriger. Ouvrir l'interligne a 1,26, et la composition
* d'affiche se relache sur tout le site. Ou rendre les 0,08 em manquants en
* remplissage haut, et ne rien changer d'autre. C'est la seconde : l'accent
* rentre dans la boite, l'interligne reste serre, et le titre descend de 4 px
* a 56 px de corps. */
h1,h2,h3,h4,.cond{
font-family: var(--tc); font-weight: 700; text-transform: uppercase;
margin: 0; letter-spacing: -.012em; text-wrap: balance;
padding-block-start: .08em;
}
/* AJOUT. Le cran d'affiche, entre --t-h1 et --t-monument. */
.affiche{ font-size: var(--t-affiche); line-height: 1.12 }
/* AJOUT. Une image en ligne laisse un filet de 4 px sous elle, qui se voit
partout ou une photo touche le bord d'un encart. `height:auto` de `base.css`
est conserve : il protege les logos de marque d'un ecrasement quand le rail
devient plus etroit que leur largeur native. */
img, svg{ display: block }
/* AJOUT, cosmetique. */
::selection{ background: var(--bleu); color: #fff }
/* AJOUT. Les maquettes nomment `.sr` et `.evite` ce que `base.css` nomme
`.sr-only` et `.evitement`. Les deux noms vivent : `.sr-only` sert aux
composants livres avec le projet, `.sr` au balisage porte. */
.sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
.evite{
position: absolute; left: var(--gouttiere); top: -100px; z-index: 90; padding: 14px 20px;
background: var(--cyan); color: #05202B; font-family: var(--tc);
text-transform: uppercase; text-decoration: none; font-weight: 600;
}
.evite:focus{ top: 10px }
/* ECART 5, anneau de focus. `base.css` pose un trait orange de 3 px, sur les
4 cotes, ce qui est la bonne regle. Mais l'orange de charte ne contraste
assez avec aucun des fonds du site : 1,9:1 sur le bleu de marque, 2,80:1 sur
le fond de page, la ou le WCAG 2.1 AA (1.4.11) en demande 3. Le trait orange
ne peut donc pas porter seul l'indicateur, et la moitie des elements
focalisables sont poses sur une bande bleue ou sur le pied noir.
D'ou un SECOND trait, et une premiere version qui prenait un halo blanc par
defaut, noir sur les bandes sombres. Elle reglait le bleu (6,66:1) et oubliait
le cas le plus courant : un halo blanc sur le fond de page #F4F5F6 donne
1,09:1, et 1,00:1 sur une carte blanche. Autrement dit, sur la majorite des
pages, l'anneau ne tenait qu'au trait orange a 2,80:1, sous le seuil.
Donc DEUX traits, et pas un : blanc puis noir en contexte clair, noir puis
blanc en contexte sombre. C'est toujours le trait EXTERIEUR qui touche le
fond, et il est toujours a l'oppose de lui : 15,47:1 sur le fond de page,
16,88:1 sur une carte blanche, 6,66:1 sur le bleu, 16,88:1 sur le pied noir.
Aucun fond du site ne passe sous 3:1. Mesure, pas estimation. */
:focus-visible{
outline: 3px solid var(--ark-etincelle); outline-offset: 2px;
box-shadow: 0 0 0 5px var(--ark-blanc), 0 0 0 7px var(--ark-noir);
}
.bande--sombre :focus-visible, .conv :focus-visible, .infos :focus-visible,
.hdr :focus-visible, .hdrP :focus-visible, .mqPave :focus-visible,
footer :focus-visible, .mob :focus-visible{
box-shadow: 0 0 0 5px var(--ark-noir), 0 0 0 7px var(--ark-blanc);
}
/* Feuille de composition, piste Comptoir.
Portee telle quelle depuis les 5 maquettes recettees de Design/Maquettes/,
qui partagent une seule feuille de 686 lignes. Les 60 premieres lignes de
cette feuille vivent dans jetons.css et base.css ; le reste est ici, a
l'identique, pour que le rendu soit le meme et non une reinterpretation.
Deux ecarts seulement, tous deux commentes sur place :
- le traitement photographique, qui passe du CSS au fichier servi ;
- le jeton --papier, que les maquettes employaient sans le definir.
Ne pas reformater : la comparaison avec les maquettes doit rester lisible. */
footer :focus-visible,.mob :focus-visible{box-shadow:0 0 0 5px #1D1D1B}
/* ---- boutons et telephone ---- */
.btn{display:inline-block;font-family:var(--tc);text-transform:uppercase;font-weight:600;
letter-spacing:.05em;text-decoration:none;padding:.76em 1.7em;font-size:var(--t-petit);
border:0;cursor:pointer;background:var(--cyan);color:#05202B}
.btn:hover{background:var(--blanc);color:var(--bleu)}
.tel{font-family:var(--tc);font-weight:600;text-decoration:none;font-size:var(--t-h4);
white-space:nowrap}
/* ---- en-tete ---- */
/* EN-TETE COLLANTE. Le volet mobile est en `position:absolute` par rapport a
cette boite : `sticky` etablit le meme bloc conteneur que `relative`, le
volet continue donc de se poser juste sous la barre. Le fond opaque est
indispensable, sinon le contenu defile a travers. */
.bar{position:sticky;top:0;z-index:30}
.bar .in{width:var(--w-large);margin-inline:auto;display:flex;align-items:center;
gap:clamp(12px,1.6vw,40px);min-height:var(--entete)}
.bar .mk{height:calc(var(--entete) * .56);width:auto}
.nav{display:none}
@media(min-width:1024px){
.nav{display:flex;gap:clamp(12px,1.3vw,30px);margin-left:auto;font-family:var(--tc);
text-transform:uppercase;font-size:var(--t-micro);letter-spacing:.06em;font-weight:500}
.nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.barAct{display:flex;gap:clamp(10px,1vw,18px);align-items:center;margin-left:clamp(12px,1.6vw,40px)}
.menu{display:none}
}
.barAct{margin-left:auto;display:flex;gap:10px;align-items:center}
.barAct .btn{display:none}
@media(min-width:1024px){.barAct .btn{display:inline-block}}
/* A 1024, la rangee complete demandait 1031 px : 9 rayons, le telephone et le
bouton. Retirer le bouton reglait le debordement et creait un defaut pire,
une page de 10 ecrans sans aucune action a portee. Ce sont donc les ecarts
qui se resserrent sur cette seule tranche, et les 3 elements tiennent. */
@media(min-width:1024px) and (max-width:1279px){
/* 10 entrees depuis que « Souder » a pris la tete de la barre : il faut
1035 px pour 1024, soit 11 px a trouver. Les ecarts se resserrent encore,
plutot que de retirer le bouton d'action, qui laisserait une page de
10 ecrans sans rien a portee de clic. */
.nav{gap:6px;letter-spacing:.02em}
.barAct{margin-left:10px;gap:7px}
.barAct .btn{padding-inline:.75em}
.bar .in{gap:10px}
}
.menu{margin-left:auto}
.menu>summary{list-style:none;cursor:pointer;font-family:var(--tc);text-transform:uppercase;
font-weight:600;letter-spacing:.06em;font-size:var(--t-petit);padding:.6em 1.1em}
.menu>summary::-webkit-details-marker{display:none}
.menu .pan{position:absolute;left:0;right:0;top:100%;padding:12px var(--gouttiere) 24px;
display:grid;gap:2px}
.menu .pan a{text-decoration:none;font-family:var(--tc);text-transform:uppercase;
font-size:var(--t-petit);padding:14px 4px}
/* ---- photographie traitee ----
DIFFERENCE AVEC LA MAQUETTE, ET C'EST VOULU. La maquette SIMULAIT le
traitement en CSS : desaturation, fusion en luminosite sur un fond bleu,
grain en feTurbulence a 17 %, trame de points a partir de 1600 px. En
production ce CSS disparait, parce que le bichrome, le grain, le rehaut des
etincelles et la trame sont DANS LE FICHIER servi, etalonnes par le
graphiste (Design/Photos-traitees/, voir traitement-ark.py). Superposer
une seconde fois traiterait une image deja traitee.
Ce qui RESTE, en revanche, c'est le voile sombre. Ce n'est pas du
traitement photographique, c'est le dispositif de contraste qui rend le
titre blanc lisible : mesure sur les tirages de trame, luminance moyenne
du bas de l'image entre 70 et 84 sur 255 avec un ecart-type de 40 a 56,
donc du blanc pose dessus sans voile ne tient pas le rapport de 4,5:1 que
demande le controle C37. Le voile est dans la maquette, qui fait foi sur
le rendu, et il y est pour cette raison. */
.tr{position:relative;isolation:isolate;overflow:hidden;background:var(--tr-fond,#102B3C)}
.tr>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.tr::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:linear-gradient(176deg,var(--tr-haut,rgba(0,96,156,.26)),var(--tr-bas,rgba(10,16,22,.82)));
mix-blend-mode:multiply}
.tr .sur{position:relative;z-index:5}
/* ---- pictogrammes ---- */
.objet{display:block;width:100%;height:100%;pointer-events:none}
/* bandeau d avis : l objet de marque tient la gauche du titre */
/* ---- panneau des questions ---- */
.faqPan{position:relative;isolation:isolate;width:var(--w-large);margin-inline:auto;
padding:clamp(20px,1.8vw,50px);overflow:hidden}
.faqFond{position:absolute;inset:0;z-index:0;opacity:.1}
.faqPan>*:not(.faqFond){position:relative;z-index:1}
.faqGrille{display:grid;grid-template-columns:1fr;gap:clamp(18px,1.8vw,44px);align-items:start;
margin-top:clamp(14px,1.2vw,30px)}
@media(min-width:1024px){.faqGrille{grid-template-columns:minmax(0,3fr) minmax(0,9fr)}
/* Sans photographie, les questions tombaient dans la colonne de 3 parts sur
12 et laissaient les 9 autres vides : la colonne etroite collee a gauche
que la regle maison refuse. Elles reprennent la pleine largeur. */
.faqGrille--seule{grid-template-columns:1fr}}
@media(max-width:1023px){
/* SUR UN TELEPHONE, LA PHOTOGRAPHIE PASSE SOUS LES QUESTIONS. Mesure a 360
sur la page de reparation : l'image en tete, puis neuf questions,
laissaient 1225 px sans le moindre objet visuel jusqu'au bas de la
section, pour un plafond de 1200. Posee en fin de liste, la meme image
coupe la fin de l'accordeon au lieu de repousser les questions sous la
ligne de flottaison. */
.faqCote{order:2}}
.faqGrille h2{margin-bottom:clamp(12px,1vw,26px)}
.faqCote{display:grid;gap:clamp(10px,1vw,22px)}
.faqCote figure{margin:0;overflow:hidden}
.faqCote img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media(max-width:899px){
.faqCote img{aspect-ratio:2/1}
.faqPan{padding:clamp(14px,1.8vw,50px)}
.faqGrille{gap:clamp(12px,1.8vw,44px);margin-top:clamp(10px,1.2vw,30px)}
.faqListe summary{padding-block:10px}
.faqListe details>p{padding-bottom:12px}}
.faqListe{display:grid;grid-template-columns:1fr;gap:0 var(--gap-col)}
@media(min-width:1600px){.faqListe{grid-template-columns:repeat(2,minmax(0,1fr))}}
.avisTete{position:relative;align-items:center}
.avisBloc{position:relative;isolation:isolate}
.avisFond{position:absolute;z-index:0;left:calc(50% - 50vw);width:100vw;top:0;bottom:0;opacity:.13}
.avisBloc>.rail{position:relative;z-index:1}
.filetAvis{width:100vw;margin-inline:calc(50% - 50vw);height:3px;
margin-bottom:clamp(18px,1.6vw,40px)}
.filetSec{width:100vw;margin-inline:calc(50% - 50vw);height:3px;
margin-bottom:clamp(10px,0.8vw,20px)}
/* la section des familles dit peu : sa pile est plus courte que la pile dense */
.sec--serre{padding-block:calc(var(--pile) * 0.44)}
.objet rect,.objet use{shape-rendering:geometricPrecision}
.decoupe{clip-path:url(#clip-ark)}
.pic{width:clamp(88px,7vw,168px);height:clamp(88px,7vw,168px);color:inherit;
transition:transform .12s ease}
@media(prefers-reduced-motion:reduce){.pic{transition:none}}
/* ---- encarts de familles ----
Deux regimes differents, pas six cartes identiques : les deux grands encarts portent le
pictogramme entier en haut a droite et le texte en bas a gauche ; les quatre autres
portent le pictogramme cadre, tres grand et centre, coupe par le haut de l encart.
Les hauteurs sont inegales, de 1 a 1,38. */
.familles{display:grid;gap:var(--gap-col);grid-template-columns:repeat(2,minmax(0,1fr));
align-items:start}
@media(min-width:1024px){.familles{grid-template-columns:repeat(12,minmax(0,1fr))}}
.fam{position:relative;text-decoration:none;display:flex;flex-direction:column;
padding:clamp(12px,1.2vw,34px);gap:.26em;overflow:hidden;justify-content:flex-end;
min-height:clamp(132px,11.6vw,218px)}
/* l inegalite de hauteur est batie, pas subie : elle ne depend pas de la longueur du texte */
.fam--pt:nth-of-type(even){padding-block-end:calc(clamp(14px,1.2vw,34px) + clamp(20px,1.9vw,46px))}
.fam:hover .pic,.fam:focus-visible .pic{transform:translateY(-4px)}
.fam h3{font-size:var(--t-h3)}
.fam span{font-size:var(--t-petit);line-height:1.4}
@media(max-width:600px){.fam span{font-size:var(--t-micro);line-height:1.35}}
/* les quatre encarts cadres */
.fam--pt{align-items:center;text-align:center}
.fam--pt .pic{width:clamp(62px,6.8vw,156px);height:clamp(62px,6.8vw,156px);
margin:calc(clamp(62px,6.8vw,156px) * -0.12) auto auto}
.fam--pt span{max-width:30ch}
/* les deux grands encarts */
.fam--large .pic{position:absolute;pointer-events:none;
right:calc(clamp(112px,8.2vw,190px) * -0.09);top:calc(clamp(112px,8.2vw,190px) * -0.09);
width:clamp(112px,8.2vw,190px);height:clamp(112px,8.2vw,190px)}
.fam--large h3{font-size:var(--t-h2)}
.fam--large span{max-width:34ch}
@media(min-width:1024px){
.fam--large{grid-column:span 6;min-height:clamp(178px,11.2vw,238px)}
.fam--pt{grid-column:span 3;min-height:clamp(160px,9.4vw,194px)}
}
@media(min-width:1024px) and (max-width:1439px){
.fam--large{grid-column:span 6}.fam--pt{grid-column:span 3}
}
/* ---- grappe de produits, pieces de 140 a 240 px peints, chevauchantes ---- */
/* LA BANDE DE LA GRAPPE, ET POURQUOI ELLE SE RESSERRE.
Les detourages font 500 px, donc 250 px peints au maximum. Douze pieces a ce
plafond couvrent 92 % d'un conteneur de 2464 px : etalees sur toute sa
largeur, elles ne PEUVENT pas se chevaucher, et une grappe sans
chevauchement est une rangee d'objets egalement espaces, c'est-a-dire une
planche-contact. Les pieces se posent donc sur une BANDE, qui vaut toute la
largeur sur un telephone et se resserre a mesure que l'ecran grandit : c'est
la seule facon d'obtenir un recouvrement reel sans agrandir des images qui
ne le supportent pas. `--x`, pose par la page, est une fraction de cette
bande et non un pourcentage du conteneur.
Le cas debordant garde une bande large : sa cassure de grille est de sortir
de la fenetre, et la resserrer la supprimerait. */
.grappe{position:relative;width:var(--w-large);margin-inline:auto;
min-height:clamp(220px,14.5vw,370px);display:none;overflow:hidden;
--bd:8%;--bl:87%}
/* Les trois reglages de la bande sont CALCULES, pas choisis : un detourage
n'occupe en moyenne que 72 % de la largeur de son fichier, le reste est
transparent. Pour que deux objets se recouvrent VRAIMENT a l'oeil, il faut
donc un pas d'environ 0,61 fois la largeur de la boite, et c'est ce que
donnent ces valeurs a chaque palier. Calee a l'oeil ensuite, grappe de
l'accueil a 2560 sous les yeux. */
@media(min-width:1000px){.grappe{--bd:13%;--bl:76%}}
@media(min-width:1280px){.grappe{--bd:24%;--bl:58%}}
/* UNE GRAPPE SEULE N'A QU'ELLE-MEME POUR TENIR SA SECTION. Sur la page
d'aspiration elle est posee sans titre, sans texte et sans legende :
resserree comme les autres, son contenu ne couvrait plus que 57 % de la
largeur que la page utilise, et le controle d'occupation du contenu y
voyait, a raison, une colonne etroite collee a un bord. Dans ce cas, et
dans ce cas seulement, la bande reste large : il n'y a rien d'autre dans
la section pour en occuper la largeur. */
@media(min-width:1000px){.grappe--seule{--bd:3%;--bl:92%}}
.grappe img{position:absolute;left:calc(var(--bd) + var(--x) * var(--bl));top:var(--y);
width:var(--w);height:auto;
transform:rotate(var(--r,0deg));filter:drop-shadow(0 16px 26px rgba(0,0,0,.34))}
.grappeRail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;padding-bottom:8px}
.grappeRail::-webkit-scrollbar{display:none}
.grappeRail img{flex:0 0 auto;width:clamp(120px,32vw,200px);height:auto;scroll-snap-align:start}
@media(min-width:900px){.grappe{display:block}.grappeRail{display:none}}
/* ---- avis ---- */
.avisTete{width:var(--w-large);margin:0 auto clamp(14px,1.3vw,30px);display:flex;
justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.fleches{display:flex;gap:8px}
.fleches button{width:clamp(44px,2.8vw,60px);height:clamp(44px,2.8vw,60px);font-size:20px;
cursor:pointer;line-height:1;background:transparent}
.rail{width:100vw;margin-inline:calc(50% - 50vw);padding-inline:var(--gouttiere);
display:flex;gap:var(--gap-col);overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;list-style:none;margin-block:0;padding-block:4px 10px}
.rail::-webkit-scrollbar{display:none}
.rail li{flex:0 0 auto;scroll-snap-align:start;
width:calc(100vw - 2 * var(--gouttiere));
min-height:clamp(190px,13vw,270px);display:flex;align-items:center;justify-content:center;
padding:24px;text-align:center}
@media(min-width:1024px){.rail li{width:calc((var(--w-large) - var(--gap-col)) / 2)}}
@media(min-width:1440px){.rail li{width:calc((var(--w-large) - 2 * var(--gap-col)) / 3)}}
@media(min-width:3200px){.rail li{width:calc((var(--w-large) - 3 * var(--gap-col)) / 4)}}
.rail li span{font-family:var(--tc);text-transform:uppercase;letter-spacing:.16em;
font-size:var(--t-micro);line-height:1.6}
/* ---- accordeon ---- */
details{border-block:1px solid var(--ligne,rgba(128,128,128,.4));margin-top:-1px}
summary{cursor:pointer;list-style:none;position:relative;
padding:clamp(14px,1.2vw,30px) 48px clamp(14px,1.2vw,30px) 0;
font-family:var(--tc);text-transform:uppercase;font-weight:500;font-size:var(--t-h4)}
summary::-webkit-details-marker{display:none}
summary .chev{position:absolute;right:6px;top:50%;width:14px;height:14px;
border-right:2px solid currentColor;border-top:2px solid currentColor;
transform:translateY(-50%) rotate(45deg);transition:transform .12s ease}
details[open] summary .chev{transform:translateY(-50%) rotate(135deg)}
@media(prefers-reduced-motion:reduce){summary .chev{transition:none}}
details>p{padding:0 48px clamp(16px,1.3vw,32px) 0;max-width:62ch;margin:0;font-size:var(--t-petit)}
/* ---- logos de marques, 110 px peints au maximum ---- */
.logos{display:flex;flex-wrap:wrap;align-items:center;
gap:clamp(18px,1.6vw,36px) clamp(20px,1.9vw,44px)}
.logos img{height:48px;width:auto;max-width:110px;object-fit:contain}
/* ---- barre d'action persistante ---- */
/* LA BARRE FLOTTAIT SANS FOND. Les deux libelles se superposaient au contenu
qui defilait dessous, et disparaissaient sur une photographie sombre. */
.mob{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;height:64px;
background:var(--papier);box-shadow:0 -1px 0 #D4D4CE,0 -10px 26px rgba(0,0,0,.10)}
.mob a{flex:1;display:flex;align-items:center;justify-content:center;text-decoration:none;
font-family:var(--tc);text-transform:uppercase;letter-spacing:.06em;font-size:var(--t-petit);
font-weight:600;min-height:56px}
@media(min-width:1024px){.mob{display:none}}
/* ---- pied ---- */
footer{background:var(--noir);color:#D6D5CF}
footer .in{width:var(--w-large);margin-inline:auto;display:grid;gap:clamp(22px,2vw,52px);
grid-template-columns:1fr;padding-block:clamp(36px,3.4vw,90px)}
@media(min-width:1024px){footer .in{grid-template-columns:repeat(12,minmax(0,1fr))}
.fb1{grid-column:span 4}.fb2{grid-column:span 3}.fb3{grid-column:span 3}.fb4{grid-column:span 2}}
footer .mk{height:clamp(36px,2.4vw,56px);width:auto;margin-bottom:1em}
.fbLien{display:inline-block;margin-top:1em;font-family:var(--tc);text-transform:uppercase;
letter-spacing:.14em;font-size:var(--t-micro);font-weight:600;color:#D6D5CF;
text-decoration:none;padding:.52em .9em;box-shadow:inset 0 0 0 1px #4A4944}
.fbLien:hover,.fbLien:focus-visible{color:#0B0B09;background:#D6D5CF;box-shadow:none}
.zones{width:var(--w-large);margin-inline:auto;display:flex;flex-wrap:wrap;
gap:.35em clamp(10px,1vw,22px);align-items:baseline;
padding-top:clamp(16px,1.4vw,34px);font-size:var(--t-micro)}
.zones span{font-family:var(--tc);text-transform:uppercase;letter-spacing:.18em;color:#8B8A84}
.zones a{color:#A3A29A;text-decoration:none}
.zones a:hover,.zones a:focus-visible{color:#fff}
.fbLogo{display:inline-flex;margin-top:1em}
.fbLogo img{height:30px;width:auto;display:block;opacity:.82}
.fbLogo:hover img,.fbLogo:focus-visible img{opacity:1}
.sigZx{display:inline-flex;align-items:center;gap:.5em}
/* Le logo prend la hauteur du texte voisin, pas davantage. */
.zx{display:inline-flex;align-items:center}
.zx img{height:1.25em;width:auto;display:block}
/* LES RAYONS SUR DEUX COLONNES. La liste est passee de 6 a 10 entrees quand
deux rayons se sont reveles injoignables : en une colonne, le pied gagnait
200 px de haut pour rien. Deux colonnes des 560 px, et la hauteur du pied
revient a ce qu'elle etait. */
.fb2 ul{columns:1;column-gap:clamp(18px,1.8vw,44px)}
@media(min-width:560px){.fb2 ul{columns:2}}
.fb2 li{break-inside:avoid}
footer h3{font-family:var(--tc);text-transform:uppercase;letter-spacing:.18em;color:#8B8A84;
font-size:var(--t-micro);margin:0 0 1em;font-weight:500}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:.5em}
footer a{text-decoration:none;font-size:var(--t-petit)}
footer a:hover{color:var(--cyan)}
footer address{font-style:normal;color:#9A998F;font-size:var(--t-petit);line-height:1.7}
.sig{width:var(--w-large);margin-inline:auto;padding-block:clamp(14px,1.2vw,28px);
border-top:1px solid #35342F;display:flex;flex-wrap:wrap;gap:14px;
justify-content:space-between;color:#8B8A84;font-size:var(--t-micro)}
/* #8B8A84 et non #75746E : sur le #1D1D1B du pied, l'ancien gris donnait
3,6:1, sous le seuil AA. Celui-ci donne 4,84:1 et c'est deja la teinte des
titres du pied, donc le bloc reste d'une seule famille. */
/* ================= PISTE 2, COMPTOIR =================
Fond clair, densité tenue, catalogue industriel bien imprimé. Le treillis sert de
structure et non de décor, les nombres sont des objets de composition.
Cassure de grille, une seule : le filet traversant de 3 px, bord à bord de la fenêtre,
que la ligne d adresse puis le monument 1981 viennent couper. */
body{background:var(--clair);color:var(--noir)}
::selection{background:var(--bleu);color:#fff}
.bar{background:#fff;border-bottom:1px solid #D4D4CE}
.nav a{color:#6E6D68}
.nav a:hover,.nav a:focus-visible{color:var(--bleu);border-bottom-color:var(--bleu)}
.menu>summary{color:#fff;background:var(--bleu)}
.menu .pan{background:#fff;border-bottom:1px solid #D4D4CE}
.menu .pan a{color:var(--noir);border-bottom:1px solid #E4E4DE}
.tel{color:var(--bleu)}.tel:hover{color:var(--noir)}
.btn{background:var(--bleu);color:#fff}
.btn:hover{background:var(--noir);color:#fff}
.btn.vide{background:transparent;color:var(--bleu);box-shadow:inset 0 0 0 2px var(--bleu)}
.btn.vide:hover{background:var(--bleu);color:#fff;box-shadow:none}
.sec{padding-block:var(--pile)}
.sec--dense{padding-block:var(--pile-dense)}
.sec--serre{padding-block:calc(var(--pile) * 0.44)}
.avisFond{color:var(--bleu)}
.faqFond{color:var(--bleu)}
.filetSec,.filetAvis{background:var(--bleu)}
.faqPan{background:#fff}
.faq{--ligne:#D4D4CE}
.surtitre{font-family:var(--tc);text-transform:uppercase;letter-spacing:.22em;
font-size:var(--t-micro);color:var(--bleu);margin:0 0 .9em}
/* bandeau : aucune photographie agrandie. Le treillis vectoriel tient la surface,
la photographie reste peinte sous 960 px donc propre. */
.hero2{width:var(--w-large);margin-inline:auto;display:grid;grid-template-columns:1fr;
gap:clamp(20px,2vw,52px);padding-top:max(clamp(22px,2.4vw,64px),calc(var(--entete) * .5))}
@media(min-width:1024px){.hero2{grid-template-columns:repeat(12,minmax(0,1fr));align-items:end}
.h2txt{grid-column:1 / span 7}.h2img{grid-column:8 / span 5}}
.hero2 h1{font-size:var(--t-affiche);line-height:1.12;max-width:20ch}
.hero2 h1 em{font-style:normal;color:var(--bleu)}
.hero2 .chapeau{font-size:var(--t-chapeau);line-height:1.45;max-width:42ch;color:#3C3B34;
margin-top:clamp(12px,1vw,26px)}
.h2act{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:clamp(14px,1.2vw,30px)}
.h2img{position:relative}
.h2img figure{margin:0;position:relative;z-index:2;max-width:960px;margin-left:auto}
.h2img img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media(max-width:560px){.h2img img{aspect-ratio:16/10}.hero2{padding-top:clamp(14px,2.4vw,64px)}}
.h2img .treillis{position:absolute;z-index:1;left:clamp(-28px,-2.4vw,-12px);
bottom:clamp(-28px,-2.4vw,-12px);width:clamp(120px,15vw,380px);height:clamp(120px,15vw,380px);
color:var(--bleu)}
/* LE FILET TRAVERSANT, cassure de grille de la page */
.traverse{position:relative;margin-top:clamp(26px,2.6vw,70px)}
.traverse::before{content:"";position:absolute;left:calc(50% - 50vw);width:100vw;
top:50%;height:3px;background:var(--bleu);transform:translateY(-50%)}
.traverse .assis{position:relative;width:var(--w-large);margin-inline:auto;display:flex;
flex-wrap:wrap;gap:0 clamp(16px,2vw,44px);align-items:center}
.traverse .assis span{background:var(--clair);padding:.5em clamp(10px,1vw,22px) .5em 0;
font-family:var(--tc);text-transform:uppercase;letter-spacing:.16em;font-size:var(--t-micro);
color:#4B4A43}
.traverse .assis span+span{padding-left:clamp(10px,1vw,22px)}
/* Le filet traverse a UNE ligne. Des que les deux libelles passent a deux
lignes, entre 640 et 560, il reste a mi-hauteur du bloc : il ne passe plus
DERRIERE le texte, il passe ENTRE les deux lignes, et les fonds des libelles
le decoupent en troncons flottants, dont un petit filet seul a gauche d'un
sur-titre. Constate a l'oeil a 390, aucun controle ne pouvait le voir.
En dessous du seuil, on empile les deux libelles et on retire le filet :
un filet qui ne traverse plus n'a aucune raison d'etre dessine. */
@media(max-width:759px){
.traverse::before{display:none}
.traverse .assis{display:block;width:var(--w-large)}
.traverse .assis span{display:block;padding:.35em 0;background:none}
.traverse .assis span+span{padding-left:0}
}
/* infos pratiques, bande bleue pleine fenêtre */
.infos{background:var(--bleu);color:#fff;position:relative;overflow:hidden}
.infosTrame{position:absolute;right:0;top:0;bottom:0;width:clamp(90px,8vw,230px);
color:#fff;opacity:.2}
@media(max-width:759px){.infosTrame{position:static;width:100%;height:52px;
margin-top:10px;opacity:.26}}
.infosIn{width:var(--w-large);margin-inline:auto;display:grid;grid-template-columns:1fr;
padding-block:clamp(14px,1.2vw,30px);gap:0}
@media(min-width:760px){.infosIn{grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;
gap:var(--gap-col)}}
.infos dt,.infos .etiq{font-family:var(--tc);text-transform:uppercase;letter-spacing:.18em;
font-size:var(--t-micro);color:rgba(255,255,255,.86);margin-bottom:.25em}
/* .86 et non .72 : sur le bleu de structure, 72 % de blanc donnent #B8D2E3,
soit 4,23:1, sous le seuil AA de 4,5 pour du texte de 14 px. Mesure
axe-core du 2026-11-03, 97 noeuds sur les 8 pages controlees. A 86 % le
rapport passe a 5,5:1 et le libelle reste visiblement en retrait du bleu. */
.infos dd{margin:0;font-size:var(--t-petit)}
.infos dd a.tel{font-size:var(--t-h4);color:#fff}
.infos .iti{display:inline-block;font-family:var(--tc);text-transform:uppercase;font-weight:600;
letter-spacing:.05em;font-size:var(--t-petit);color:#fff;text-decoration:none;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);padding:.6em 1.3em}
.infos .iti:hover{background:#fff;color:var(--bleu);box-shadow:none}
.infos>div>div{padding-block:10px}
.horaires{border-collapse:collapse;max-width:34ch;width:100%}
.horaires th{font-weight:400;text-align:left;color:rgba(255,255,255,.78);
font-size:var(--t-micro);padding:1px 0}
.horaires td{text-align:right;font-size:var(--t-micro);white-space:nowrap;padding:1px 0}
/* La troncature a l affichage est autorisee : la carte garde une hauteur fixe,
le texte long se coupe proprement au lieu d etre ecarte a la collecte. */
.rail li{height:clamp(200px,14vw,280px);min-height:0;align-items:stretch}
.avisCarte{display:flex;flex-direction:column;gap:.5em;width:100%;text-align:left}
.avisTexte{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;
font-size:var(--t-petit);line-height:1.5}
.avisPied{margin-top:auto;font-family:var(--tc);text-transform:uppercase;letter-spacing:.12em;
font-size:var(--t-micro);color:#6B6B68}
/* #6B6B68 et non #8A8982 : le nom de l'auteur d'un avis donnait 3,51:1 sur le
blanc, loin du seuil AA. C'est la teinte de gris deja employee ailleurs dans
le projet, et elle donne 5,3:1. */
@media(min-width:760px){.infosIn>div:last-child{text-align:right}}
/* familles, bande blanche */
.bandeFam .in,#familles>.in{width:var(--w-conteneur);margin-inline:auto}
.fam{background:#fff;color:var(--noir)}
.fam .pic{color:var(--bleu)}
.fam:hover,.fam:focus-visible{background:var(--bleu);color:#fff}
.fam:hover .pic{color:var(--cyan)}
.fam h3{color:var(--bleu)}
.fam:hover h3{color:#fff}
.fam span{color:#55544C}
.fam:hover span{color:rgba(255,255,255,.84)}
.fam--large{background:#E6E6E0}
.fam--large:hover{background:var(--bleu)}
/* gaz, bande bichrome pleine fenêtre */
.gaz{--tr-fond:#004B7A;--tr-haut:rgba(0,167,225,.34);--tr-bas:rgba(0,26,43,.86);
background:#004B7A;padding:0;position:relative;overflow:hidden}
.gazTreillis{position:absolute;left:0;top:0;bottom:0;width:clamp(70px,7.4vw,210px);
color:var(--cyan);opacity:.28}
.gazIn{width:var(--w-large);margin-inline:auto;display:grid;grid-template-columns:1fr}
@media(min-width:1024px){.gazIn{grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}
.gazTxt{grid-column:1 / span 6;padding-right:var(--gap-col)}
.gazImg{grid-column:7 / span 6;margin-right:calc((var(--w-large) - 100vw) / 2)}}
.gazTxt{padding:var(--pile) var(--gouttiere)}
@media(min-width:1024px){.gazTxt{padding-right:var(--gap-col)}}
.gazImg{position:relative;width:100%;aspect-ratio:16/10;min-height:230px}
@media(min-width:1024px){.gazImg{width:auto;aspect-ratio:auto;height:100%;min-height:clamp(320px,26vw,620px)}}
.gaz h2{font-size:var(--t-h1);color:#fff}
/* Le titre et le badge de revendeur partagent la premiere ligne de la bande.
La colonne de texte fait 760 px a 1600 quand le texte n'en occupe que 450 :
le badge va dans ce vide, a droite du titre, comme le client l'a demande.
Sous 760 px il passe simplement dessous. */
.gazTete{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
gap:clamp(14px,1.6vw,40px)}
.gazBadge{margin:0;display:flex;flex-direction:column;align-items:center;gap:.5em;
background:#fff;padding:clamp(12px,1vw,20px) clamp(16px,1.3vw,28px);flex:0 0 auto}
.gazBadge span{font-family:var(--tc);text-transform:uppercase;letter-spacing:.14em;
font-size:var(--t-micro);color:#4B4A43;line-height:1}
.gazBadge img{width:110px;height:auto;display:block}
.gaz p{color:#CDE6F4;max-width:38ch;margin-top:.7em}
.gaz .n{display:block;font-family:var(--tc);font-weight:700;font-size:var(--t-h2);color:#fff;
text-decoration:none;margin-top:.5em}
.gaz .n:hover{color:var(--cyan)}
/* atelier */
.atelier{display:grid;grid-template-columns:1fr;gap:var(--gap-col);width:var(--w-large);margin-inline:auto}
@media(min-width:1024px){.atelier{grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}
.atImg{grid-column:1 / span 5;max-width:960px}.atTxt{grid-column:7 / span 6}}
.atImg img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.atTxt p{color:#45443C;max-width:40ch;margin-top:.7em}
/* ---- encart de rappel : UNE PLAQUE DE LA CHARTE, PLUS UN APLAT NOIR ----
Regarde a 2560, un rectangle noir portant trois lignes de petit texte gris,
pose dans du blanc, ne se lit pas comme un dispositif editorial : il se lit
comme un terminal, ou comme une note technique collee dans la page. Deux
pages le portaient, l'accueil et /catalogues/.
Il passe donc au bleu de structure de la charte, avec le symbole des outils
croises pose tres grand et recadre par son bord, qui est l'emploi que la
charte 2022 prescrit explicitement, et un coin coupe pour qu'il ne soit pas
un rectangle aligne de plus. Ses QUATRE bords portent la couleur, jamais un
seul. Blanc sur #00609C donne 6,6:1, au-dessus du seuil AA. */
.atNote{position:relative;isolation:isolate;overflow:hidden;
margin-top:clamp(18px,1.6vw,40px);background:var(--bleu);color:#fff;
--coin:clamp(20px,1.9vw,48px);
padding:clamp(20px,1.7vw,46px) clamp(22px,2vw,54px);
clip-path:polygon(0 0,100% 0,100% calc(100% - var(--coin)),calc(100% - var(--coin)) 100%,0 100%)}
.atNoteSym{position:absolute;z-index:0;right:-4%;bottom:-24%;
width:clamp(140px,13vw,300px);height:clamp(140px,13vw,300px);
color:#fff;opacity:.15;pointer-events:none}
.atNote>*:not(.atNoteSym){position:relative;z-index:1}
.atNote h3{font-size:var(--t-h4)}
/* Le texte plafonnait a 32ch sur une plaque qui en tient pres de 50 : la
moitie droite restait vide, ce qui est ce qu'on reproche a la plaque autant
que sa couleur. */
.atNote p{color:#fff;margin:.4em 0 0;max-width:46ch;font-size:var(--t-chapeau);line-height:1.5}
/* marques, et la grappe de produits qui tient la surface sans bord droit */
.mqIn{width:var(--w-conteneur);margin-inline:auto;display:grid;grid-template-columns:1fr;
gap:clamp(16px,1.6vw,44px);align-items:center}
@media(min-width:1024px){.mqIn{grid-template-columns:clamp(150px,13vw,330px) 1fr}}
.nombre{font-family:var(--tc);font-weight:700;line-height:.74;letter-spacing:-.05em;
font-size:clamp(4.5rem,11vw,15rem);color:transparent;-webkit-text-stroke:2px var(--bleu);
margin:0}
.logos img{filter:grayscale(1);opacity:.72}
.logos img:hover{filter:none;opacity:1}
/* 1981, monument assis sur le filet traversant, sans débord : une seule cassure par page */
.an{position:relative;width:var(--w-large);margin-inline:auto;
display:grid;grid-template-columns:1fr;gap:clamp(8px,1vw,26px);align-items:center}
@media(min-width:1024px){.an{grid-template-columns:repeat(12,minmax(0,1fr))}
.monument{grid-column:1 / span 6}.anTxt{grid-column:8 / span 5}}
.monument{font-family:var(--tc);font-weight:700;font-size:var(--t-monument);line-height:.8;
letter-spacing:-.055em;color:var(--bleu);margin:0;position:relative;z-index:2;
background:var(--clair);display:inline-block;padding-right:.08em}
.anTxt p{color:#45443C;max-width:34ch;margin-top:.6em}
/* conversion */
.conv{background:var(--bleu);color:#fff;position:relative;overflow:hidden}
.convTrame{position:absolute;right:0;top:0;bottom:0;width:clamp(110px,9vw,260px);
color:#fff;opacity:.2}
@media(max-width:1023px){.convTrame{width:clamp(96px,22vw,200px)}}
.convIn{width:var(--w-large);margin-inline:auto;padding-block:var(--pile);
display:grid;grid-template-columns:1fr;gap:clamp(18px,1.8vw,46px)}
@media(min-width:1024px){.convIn{grid-template-columns:repeat(12,minmax(0,1fr));align-items:end}
.cvA{grid-column:1 / span 5}.cvB{grid-column:6 / span 4}
.cvC{grid-column:10 / span 3;text-align:right}}
.conv h2{color:#fff}
.conv .tel{font-size:clamp(3.5rem,2.7vw,4rem);line-height:1;color:#fff;display:block}
.conv .tel:hover{color:var(--cyan)}
.conv p{color:#CDE6F4;margin:.5em 0 0;font-size:var(--t-petit)}
/* L'adresse sous le numero, et elle ouvre l'itineraire. Soulignement de lien,
pas de filet decoratif. */
.cvAdr{display:inline-block;margin-top:.45em;color:#CDE6F4;font-size:var(--t-petit);
text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.cvAdr:hover,.cvAdr:focus-visible{color:#fff}
.conv .btn{background:#fff;color:var(--bleu)}
.conv .btn:hover{background:var(--cyan);color:#05202B}
/* avis, questions */
.fleches button{border:1px solid #CFCEC8;color:var(--bleu)}
.fleches button:hover{border-color:var(--bleu)}
.rail li{background:#fff;border:1px solid #D9D8D2}
.rail li span{color:#A3A29C}
summary:hover{color:var(--bleu)}
details>p{color:#4B4A43}
.faq h2{margin-bottom:clamp(14px,1.2vw,30px)}
/* ---------- bandeau de page interieure ---------- */
.blocHdr{background:var(--papier)}
.hdr{--tr-fond:#004B7A;--tr-haut:rgba(0,167,225,.3);--tr-bas:rgba(0,26,43,.9);
position:relative;min-height:min(62svh,560px);display:flex;align-items:flex-end;
padding:calc(var(--entete) * .5) 0 0}
.hdrIn{width:var(--w-large);margin-inline:auto;padding-block:clamp(26px,2.6vw,70px);
display:grid;grid-template-columns:1fr;gap:clamp(16px,1.4vw,34px)}
@media(min-width:1024px){.hdrIn{grid-template-columns:repeat(12,minmax(0,1fr));align-items:end}
.hdrTxt{grid-column:1 / span 7}.hdrAct{grid-column:9 / span 4;justify-self:end;text-align:right}}
.hdr h1{font-size:var(--t-affiche);line-height:1.12;color:#fff}
.hdr .chapeau{font-size:var(--t-chapeau);line-height:1.45;color:#D6E8F3;max-width:44ch;
margin-top:clamp(10px,.9vw,22px)}
/* LE CYAN DE LA CHARTE EST UN ACCENT, PAS UNE COULEUR DE TEXTE. Pose en corps
micro sur le bleu de structure, #00A7E1 donne 2,41:1, tres loin du seuil AA
de 4,5. Mesure axe-core du 2026-11-03 : 26 noeuds, un par page a bandeau
bleu. Aucun cyan sature ne peut passer sur ce bleu, c'est arithmetique.
On garde donc la teinte et on l'eclaircit jusqu'au seuil : #A8E4F7 donne
4,91:1 et lit encore comme un bleu clair, pas comme du blanc. L'accent
sature reste ce qu'il est partout ailleurs, sur le blanc et sur le noir. */
.hdr .surtitre{color:#A8E4F7}
.hdrAct{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media(min-width:1024px){.hdrAct{justify-content:flex-end}}
.btn.clairHdr{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);
clip-path:none}
.btn.clairHdr:hover{background:#fff;color:var(--bleu);box-shadow:none}
/* ---------- bandeau parametre, sans photographie ---------- */
/* Trois bichromes de marque, et eux seuls. Le gabarit de reference en porte un par page :
3 bichromes multiplies par 6 familles donnent 18 combinaisons pour 10 pages. */
.bi-1{background:linear-gradient(104deg,#00609C 0%,#00609C 42%,#1D1D1B 100%)}
.bi-2{background:linear-gradient(104deg,#00609C 0%,#00609C 38%,#00A7E1 100%)}
.bi-3{background:linear-gradient(104deg,#1D1D1B 0%,#1D1D1B 44%,#00A7E1 100%)}
.hdrP{position:relative;overflow:hidden;background:var(--bleu);color:#fff;
min-height:min(62svh,560px);display:flex;align-items:flex-end;
padding:calc(var(--entete) * .5) 0 0}
/* Sans photographie, c est le pictogramme qui tient la moitie droite. A 12 % sur 620 px il
ne s enregistrait pas et laissait 1400 px de vide : il passe a 44 vw et a 22 %. */
.hdrP .fondPic{position:absolute;right:calc(clamp(300px,44vw,1150px) * -0.22);
top:50%;transform:translateY(-50%);
width:clamp(300px,44vw,1150px);height:clamp(300px,44vw,1150px);
color:var(--cyan);opacity:.22;pointer-events:none}
@media(max-width:759px){.hdrP .fondPic{opacity:.16}}
.hdrP .hdrIn{position:relative;z-index:2}
/* L action passe sous le titre, comme le prevoit le gabarit UX : la moitie droite est
tenue par le pictogramme, pas par un bouton isole. */
@media(min-width:1024px){
.hdrP .hdrTxt{grid-column:1 / span 7}
.hdrP .hdrAct{grid-column:1 / span 5;justify-self:start;text-align:left}}
/* L action principale doit tenir sur les trois bichromes : du bleu sur du bleu ne se voit pas. */
.hdrP .btn{background:var(--cyan);color:#05202B}
.hdrP .btn:hover{background:#fff;color:var(--bleu)}
/* Voir `base.css` : 1,12 est le plancher mesure sous lequel l'accent d'une
capitale se fait rogner. */
.hdrP .zone{font-family:var(--tc);font-weight:700;text-transform:uppercase;line-height:1.12;
padding-block-start:.08em;
font-size:var(--t-affiche);color:var(--cyan);margin:0 0 .1em}
.hdrP h1{font-size:var(--t-h1);color:#fff;max-width:26ch}
/* ---------- aiguillage par usage : des paves qui menent ailleurs ---------- */
.aig{display:grid;gap:clamp(12px,1.2vw,28px);grid-template-columns:1fr}
@media(min-width:1024px){.aig{grid-template-columns:repeat(12,minmax(0,1fr))}}
.pave{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:.3em;
background:#fff;padding:clamp(18px,1.5vw,40px) clamp(48px,3.4vw,86px) clamp(18px,1.5vw,40px) clamp(18px,1.5vw,40px);
min-height:110px;text-decoration:none;
clip-path:polygon(0 0,100% 0,100% calc(100% - 1.4em),calc(100% - 1.4em) 100%,0 100%)}
.pave:hover{background:var(--bleu);color:#fff}
.pave h3{font-size:var(--t-h3);color:var(--bleu)}
.pave:hover h3{color:#fff}
.pave p{margin:0;font-size:var(--t-petit);color:#4B4A43}
.pave:hover p{color:rgba(255,255,255,.86)}
.pave .pic{width:clamp(56px,4vw,84px);height:clamp(56px,4vw,84px);color:var(--bleu);
margin-bottom:auto}
.pave:hover .pic{color:var(--cyan)}
/* Un detourage reel vaut mieux qu un dessin partout ou le produit existe. Les paves
d aiguillage portent donc le materiel, pas un pictogramme de famille. 110 px peints
au maximum, la source fait 500. */
.pave .pavProd{width:clamp(64px,5vw,110px);height:auto;margin-bottom:auto;
filter:drop-shadow(0 10px 18px rgba(0,0,0,.2))}
.pave .fl{position:absolute;right:clamp(18px,1.5vw,40px);top:50%;width:14px;height:14px;
border-top:2px solid currentColor;border-right:2px solid currentColor;
transform:translateY(-50%) rotate(45deg);color:var(--bleu)}
.pave:hover .fl{color:var(--cyan)}
@media(min-width:1024px){
.pave{grid-column:span 6;min-height:clamp(150px,9vw,200px)}
.pave--large{grid-column:span 7}
.pave--petit{grid-column:span 5}
}
/* ---------- grappe debordante, cassure de grille de la page de famille ---------- */
.grappeDeb{width:100vw;margin-inline:calc(50% - 50vw);overflow-x:auto;scrollbar-width:none}
.grappeDeb::-webkit-scrollbar{display:none}
/* LA TOILE DEBORDANTE SE RESSERRE : a 124 vw elle faisait 3174 px a 2560,
pour douze pieces qui en couvrent 2000 au mieux. Le pas entre deux pieces y
depassait leur largeur, donc aucune ne pouvait en recouvrir une autre, et
le defilement horizontal menait a 900 px de vide. A 104 vw la grappe a la
meme densite que hors debordement, et il reste juste ce qu'il faut de toile
pour que la cassure de grille existe encore. */
.grappeDeb .grappe{width:min(104vw,2900px);margin-inline:0;padding-left:var(--gouttiere)}
@media(max-width:899px){.grappeDeb{overflow:visible}}
/* ---------- dispositif chiffre ---------- */
.chiffres{display:grid;gap:clamp(16px,1.6vw,40px);grid-template-columns:1fr}
/* trois encarts de largeurs inegales, pour qu ils ne se lisent pas comme une grille repetee */
@media(min-width:900px){.chiffres{grid-template-columns:repeat(12,minmax(0,1fr))}
.chiffre:nth-child(1){grid-column:span 5}
.chiffre:nth-child(2){grid-column:span 4}
.chiffre:nth-child(3){grid-column:span 3}
.chiffres>.chiffre:only-child{grid-column:span 6}
.chiffre:nth-child(1):nth-last-child(2){grid-column:span 7}
.chiffre:nth-child(2):nth-last-child(1){grid-column:span 5}}
@media(max-width:899px){
.chiffre:nth-child(2){padding-block-end:calc(clamp(18px,1.6vw,44px) + 34px)}
.chiffre:nth-child(3){padding-block:calc(clamp(18px,1.6vw,44px) + 18px)}}
.chiffre{background:#fff;padding:clamp(18px,1.6vw,44px)}
.chiffre b{display:block;font-family:var(--tc);font-weight:700;line-height:.84;
font-size:var(--t-affiche);color:var(--bleu);letter-spacing:-.04em}
.chiffre span{display:block;margin-top:.4em;font-size:var(--t-petit);color:#4B4A43;max-width:28ch}
/* ---------- trois moments, poses sur un filet traversant ---------- */
.moments{position:relative;display:grid;gap:clamp(18px,1.8vw,46px);grid-template-columns:1fr}
@media(min-width:900px){.moments{grid-template-columns:repeat(12,minmax(0,1fr))}
.moment:nth-child(2){grid-column:span 5}
.moment:nth-child(3){grid-column:span 4}
.moment:nth-child(4){grid-column:span 3}}
.filetMoments{position:absolute;left:calc(50% - 50vw);width:100vw;top:clamp(26px,2vw,46px);
height:3px;background:var(--bleu);opacity:.35;display:none}
@media(min-width:900px){.filetMoments{display:block}}
.moment{position:relative;background:var(--papier);padding-top:clamp(12px,1.2vw,30px)}
/* LE NUMERO EST L'OBJET VISUEL DE LA SECTION, et il n'en avait pas la taille.
A 2560, « Comment ca se passe » etait trois colonnes de petit texte perdues
dans du blanc, avec un seul objet mesure, le filet traversant ; a 360 la
meme section laissait 815 px sans rien a regarder. Compose en corps
d'affiche, le numero devient ce que la regle maison appelle un nombre traite
comme un objet : il tient la bande haute, il s'assoit sur le filet et le
decoupe, et il franchit le seuil de 56 px a partir duquel la recette le
compte comme un objet visuel, de 360 a 3440. */
.moment b{display:inline-block;font-family:var(--tc);font-weight:700;
font-size:clamp(3.75rem,calc(2.3rem + 4.6vw),7rem);letter-spacing:-.04em;
line-height:.9;color:var(--bleu);background:var(--papier);padding-right:.4em}
.moment h3{margin-top:.3em;font-size:var(--t-h4)}
.moment p{margin:.4em 0 0;font-size:var(--t-petit);color:#4B4A43;max-width:34ch}
/* ---------- grande image, chevauchant la section suivante ---------- */
/* La grande image chevauche une plaque bleue qui saigne du bord gauche : l image reste
peinte sous 960 px, et la section occupe la fenetre. */
.preuve{position:relative;z-index:2;width:var(--w-large);margin-inline:auto;
padding-block:clamp(26px,2.4vw,64px)}
/* IL Y AVAIT PLUS DE BLEU VIDE QUE DE PHOTO. A 2560 la plaque fait 2252 px
pour une photographie de 960 : le tirage ne peut pas grandir, il plafonne a
960 px peints, source de 500 px a densite 2, et le controle C21 refuse
davantage.
Resserrer la plaque etait la premiere idee, et la mesure l'a refusee : la
plaque EST ce qui tient l'occupation horizontale de la section, et a 74 vw
le controle C04 sortait aux trois largeurs. C'est donc le bleu qui recoit
du contenu, et non la plaque qui recule : la legende passe a gauche de
l'image, en blanc, et le symbole des outils croises tient la droite, pose
tres grand et recadre par le bord, comme la charte le prescrit. */
.preuve .plaque{position:absolute;left:calc(50% - 50vw);top:0;bottom:0;width:min(88vw,2700px);
background:var(--bleu);overflow:hidden}
.preuve .plaqueSym{position:absolute;z-index:1;right:clamp(-120px,-5vw,-40px);top:50%;
transform:translateY(-50%);width:clamp(220px,24vw,760px);height:clamp(220px,24vw,760px);
color:#fff;opacity:.17;pointer-events:none}
.preuve .plaque .objet{opacity:.16}
.preuve figure{position:relative;margin:0;max-width:960px;margin-left:clamp(16px,18vw,600px)}
.preuve img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
/* Et la legende vient occuper le bleu a gauche de l'image, en blanc et en
corps de chapeau, au lieu de se poser en petit gris sous elle : c'est du
contenu la ou il n'y avait que de la couleur. Sous 1280 elle retrouve sa
place sous la photographie, ou la plaque ne laisse plus de marge. */
.preuve figcaption{margin-top:.7em;font-size:var(--t-petit);color:#4B4A43;max-width:44ch}
@media(min-width:1280px){
.preuve figcaption{position:absolute;right:calc(100% + clamp(22px,2vw,56px));
top:clamp(6px,1vw,26px);width:clamp(180px,14vw,380px);max-width:none;margin-top:0;
text-align:right;color:#fff;font-size:var(--t-chapeau);line-height:1.45}
}
.apresPreuve{margin-top:clamp(-120px,-9vw,-40px);padding-top:clamp(150px,11vw,300px)}
/* ---------- liseuse de catalogue ---------- */
.liseuse{width:var(--w-large);margin-inline:auto}
.liseuseBarre{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
margin-bottom:clamp(12px,1vw,24px)}
.liseuseBarre .cpt{font-family:var(--tc);text-transform:uppercase;letter-spacing:.14em;
font-size:var(--t-micro);color:#4B4A43}
.railCat{display:flex;gap:clamp(10px,1vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:thin;padding-bottom:10px;background:var(--noir);
width:100vw;margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - var(--w-large) / 2)}
.railCat figure{flex:0 0 auto;scroll-snap-align:center;margin:0;position:relative}
.railCat img{height:clamp(380px,25vw,720px);width:auto;display:block;aspect-ratio:2480/3508;
background:#fff}
.railCat figcaption{position:absolute;inset:auto 0 0 0;padding:6px 10px;background:rgba(0,0,0,.62);
color:#fff;font-family:var(--tc);text-transform:uppercase;letter-spacing:.12em;
font-size:var(--t-micro);text-align:center}
.vignettes{margin-top:clamp(12px,1vw,24px)}
.vignettes>summary{cursor:pointer;list-style:none;font-family:var(--tc);text-transform:uppercase;
letter-spacing:.1em;font-size:var(--t-petit);color:var(--bleu);padding:.6em 0;position:relative;
display:inline-block;padding-right:34px}
.vignettes>summary::-webkit-details-marker{display:none}
.vignettes>summary .chev{right:8px}
.vignRail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.vignRail a{flex:0 0 auto;scroll-snap-align:start}
.vignRail img{width:clamp(70px,4.6vw,150px);height:auto;aspect-ratio:2480/3508;object-fit:cover;
background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.vignRail a:hover img{outline:3px solid var(--bleu);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.railCat,.vignRail{scroll-behavior:auto}}
/* ---------- les marques qui couvrent le rayon de la page ----------
Une liste courte ne se pose pas dans la grille prevue pour 13 : deux plaques dans
les deux premieres cellules laissent 75 % de vide. Le texte tient la gauche, les plaques
tiennent la droite, et elles grandissent a mesure qu elles sont moins nombreuses. */
.mqRayonBloc{display:grid;grid-template-columns:1fr;gap:clamp(20px,2vw,52px);align-items:center}
@media(min-width:1024px){.mqRayonBloc{grid-template-columns:repeat(12,minmax(0,1fr))}
.mqRayonTxt{grid-column:1 / span 5}
.mqRayon{grid-column:7 / span 6}}
.mqRayonTxt p{margin:.6em 0 0;color:#4B4A43;max-width:40ch}
.mqRayon{display:grid;gap:clamp(14px,1.4vw,36px);
grid-template-columns:repeat(auto-fit,minmax(clamp(150px,12vw,280px),1fr))}
.mqRayon a{background:#fff;text-decoration:none;display:flex;align-items:center;
justify-content:center;padding:clamp(28px,2.8vw,72px) clamp(20px,2vw,48px);
min-height:clamp(150px,10vw,230px);
clip-path:polygon(0 0,100% 0,100% calc(100% - 1.2em),calc(100% - 1.2em) 100%,0 100%)}
.mqRayon a:hover{background:var(--bleu)}
.mqRayon img{height:48px;width:auto;max-width:110px;object-fit:contain}
.mqRayon a:hover img{filter:brightness(0) invert(1)}
@media(max-width:767px){.mqRayon{gap:10px}
.mqRayon a{min-height:96px;padding:18px 14px}}
/* ---------- ce que la marque couvre, page de catalogue ---------- */
.couvreBloc{display:grid;grid-template-columns:1fr;gap:clamp(20px,2vw,52px);align-items:center}
@media(min-width:1024px){.couvreBloc{grid-template-columns:repeat(12,minmax(0,1fr))}
.couvreTxt{grid-column:1 / span 5}
.couvre{grid-column:7 / span 6}}
.couvreTxt p{margin:.6em 0 0;color:#4B4A43;max-width:44ch}
/* Les 13 marques de l accueil et des pages de reference, sur deux rangees pleines.
Le logo reste plafonne a 110 px peints, c est la resolution de la source. Ce qui double,
c est la place par logo : 341 px de plaque au lieu de 157 px de rangee. */
.mqGrille{display:grid;gap:clamp(10px,1vw,24px);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.mqGrille{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1280px){.mqGrille{grid-template-columns:repeat(7,minmax(0,1fr))}}
.mqGrille a{background:#fff;text-decoration:none;display:flex;align-items:center;justify-content:center;
padding:clamp(16px,1.5vw,38px) clamp(10px,1vw,24px);min-height:clamp(92px,6.6vw,146px);
clip-path:polygon(0 0,100% 0,100% calc(100% - 1em),calc(100% - 1em) 100%,0 100%)}
.mqGrille a:hover{background:var(--bleu)}
.mqGrille img{height:48px;width:auto;max-width:110px;object-fit:contain}
.mqGrille a:hover img{filter:brightness(0) invert(1)}
/* Plaque typographique, pour une marque dont le logo n est pas encore disponible.
Composee dans la typographie du site, elle ne ment sur rien et tient comme solution
definitive si le logo s avere inutilisable. */
.mqGrille .mqTexte{font-family:var(--tc);font-weight:700;text-transform:uppercase;
letter-spacing:.06em;line-height:1;font-size:clamp(20px,1.5vw,34px);color:var(--bleu)}
.mqGrille a:hover .mqTexte{color:#fff}
/* ---------- pave de marque ---------- */
.mqPave{position:relative;background:var(--bleu);color:#fff;overflow:hidden}
.mqTrame{position:absolute;right:0;top:0;bottom:0;width:clamp(110px,9vw,260px);color:#fff;opacity:.18}
.mqPaveIn{width:var(--w-large);margin-inline:auto;padding-block:clamp(30px,3vw,80px) clamp(60px,5vw,130px);
display:grid;grid-template-columns:1fr;gap:clamp(18px,1.8vw,44px)}
@media(min-width:900px){.mqPaveIn{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}}
.mqLogo{position:relative;z-index:3;background:#fff;padding:clamp(22px,2.2vw,56px) clamp(34px,3.2vw,86px);
margin-bottom:clamp(-90px,-7vw,-40px);display:inline-flex;align-items:center;justify-content:center;
justify-self:start}
.mqLogo img{width:clamp(96px,8vw,110px);height:auto}
.mqPave h1{font-size:var(--t-h1);color:#fff}
.mqPave p{color:#CDE6F4;max-width:44ch;margin-top:.6em}
.couvre{display:grid;gap:clamp(14px,1.4vw,36px);grid-template-columns:repeat(var(--ncol,3),minmax(0,1fr))}
.couvre a{text-decoration:none;background:#fff;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:.7em;
padding:clamp(24px,2.4vw,60px) clamp(14px,1.4vw,34px);min-height:clamp(170px,11vw,260px);
clip-path:polygon(0 0,100% 0,100% calc(100% - 1.2em),calc(100% - 1.2em) 100%,0 100%)}
.couvre a:hover{background:var(--bleu)}
.couvre a:hover span{color:#fff}
.couvre .pic{width:clamp(72px,5.4vw,124px);height:clamp(72px,5.4vw,124px);color:var(--bleu)}
.couvre:hover .pic,.couvre a:hover .pic{color:var(--cyan)}
.couvre span{font-family:var(--tc);text-transform:uppercase;font-size:var(--t-petit);color:var(--bleu)}
/* ---- la loupe : une page de catalogue en grand ----
Le lien qui porte l'image reste un lien : sans JavaScript il ouvre le
fichier, et le curseur le dit. */
.railCat a{display:block;cursor:zoom-in}
.loupe{border:0;padding:0;background:transparent;max-width:none;max-height:none;
width:100vw;height:100vh;height:100dvh;overflow:hidden}
.loupe::backdrop{background:rgba(5,22,30,.93)}
.loupeImg{position:absolute;inset:0;margin:auto;display:block;
max-width:calc(100vw - clamp(24px,8vw,180px));max-height:calc(100vh - 120px);
max-height:calc(100dvh - 120px);width:auto;height:auto;background:#fff;cursor:zoom-out}
.loupeX{position:absolute;top:0;right:0;width:60px;height:60px;z-index:3;
font-size:30px;line-height:1;cursor:pointer;border:0;background:transparent;color:#fff}
.loupeX:hover,.loupeX:focus-visible{background:#fff;color:var(--noir)}
.loupeCpt{position:absolute;left:0;right:0;bottom:16px;margin:0;text-align:center;
font-family:var(--tc);text-transform:uppercase;letter-spacing:.14em;
font-size:var(--t-micro);color:#fff}
.loupeFl{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
width:clamp(44px,4vw,64px);height:clamp(64px,7vw,110px);
border:0;background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.loupeFl:hover,.loupeFl:focus-visible{background:#fff;color:var(--noir)}
.loupeFl--prec{left:0}
.loupeFl--suiv{right:0}
/* Sur telephone, l'image prend la largeur et les fleches passent en bas, hors
de son chemin : a 390 px, deux boutons sur les cotes mangeraient la page. */
@media(max-width:559px){
.loupeImg{max-width:100vw;max-height:calc(100dvh - 150px)}
.loupeFl{top:auto;bottom:52px;transform:none;height:52px;width:50%;
background:rgba(255,255,255,.16)}
.loupeFl--prec{left:0}
.loupeFl--suiv{right:0}
.loupeCpt{bottom:16px}
}
/* ---- fenetre modale du parcours de demande ----
Le parcours est porte dans un cadre de meme origine. La boite n'a ni bord ni
coin arrondi : elle est une feuille posee sur la page, pas une carte. */
.fnetre{border:0;padding:0;max-width:none;width:min(1060px,94vw);
background:var(--clair);box-shadow:0 30px 90px rgba(0,0,0,.42);position:relative}
.fnetre::backdrop{background:rgba(5,32,43,.74)}
.fnetre iframe{display:block;width:100%;border:0;height:70vh}
.fnetreX{position:absolute;top:0;right:0;width:54px;height:54px;z-index:2;
font-size:26px;line-height:1;cursor:pointer;border:0;background:transparent;color:var(--noir)}
.fnetreX:hover,.fnetreX:focus-visible{background:var(--bleu);color:#fff}
/* ---- rail de logos defilant, sans barre de defilement ---- */
.defilant{overflow:hidden;position:relative}
.railLogos{display:flex;align-items:center;width:max-content}
.defilPiste{animation:defileLogos 54s linear infinite}
.defilant:hover .defilPiste,.defilant:focus-within .defilPiste{animation-play-state:paused}
@keyframes defileLogos{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* Repli : plus aucun mouvement, et le rail redevient pilotable au doigt. */
@media(prefers-reduced-motion:reduce){
.defilPiste{animation:none}
.defilant{overflow-x:auto;scrollbar-width:none}
.defilant::-webkit-scrollbar{display:none}
}
.railLogos a{flex:0 0 auto;background:#fff;padding:14px 18px;margin-right:clamp(16px,1.6vw,40px);
display:flex;align-items:center;justify-content:center;min-width:clamp(130px,9vw,190px)}
.railLogos img{height:48px;width:auto;max-width:110px;filter:grayscale(1);opacity:.75}
.railLogos a:hover img{filter:none;opacity:1}
/* ---------- ligne de reparation, posee sur un filet ---------- */
.ligneRep{position:relative;width:var(--w-large);margin-inline:auto;
display:flex;flex-wrap:wrap;gap:clamp(10px,1.4vw,36px);align-items:baseline;
padding-top:clamp(14px,1.2vw,30px)}
.ligneRep .sym{width:clamp(56px,4vw,86px);height:clamp(56px,4vw,86px);color:var(--bleu);opacity:.55}
.ligneRep h2{font-size:var(--t-h3);color:var(--bleu)}
.ligneRep p{margin:0;max-width:52ch;color:#4B4A43}
.ligneRep a.tel{margin-left:auto}
/* ---- ajustements lies au repli WebP ----
Les maquettes posaient un `![]()
` nu. En production chaque photographie est
servie en AVIF avec repli WebP, donc elle est enveloppee dans un ``,
qui s'intercale entre le conteneur et l'image. Ces six regles rendent
l'enveloppe transparente pour la mise en page : rien d'autre ne change, et
les selecteurs portes des maquettes restent valables tels quels.
C'est le seul endroit ou la feuille s'ecarte des maquettes pour une raison
technique, et non de composition. */
picture{ display:block }
.tr>picture{ position:absolute; inset:0; z-index:1 }
.tr>picture>img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1 }
.grappeRail>picture,.logos>picture,.railLogos>picture{ flex:0 0 auto }
.grappe>picture{ display:contents }
.infosIn picture,.convIn picture{ display:inline-block }
/* ---- liseuse : la vignette suit la resolution de sa source ----
Les maquettes peignaient les vignettes a 150 px de large, d'apres des
fichiers de 340 px. Le script de pre-rendu livre des vignettes de 170 px, ce
qui plafonne la largeur peinte a 85 px : au-dela, le controle C21 les refuse,
et il a raison, ce serait flou sur la dalle du client. Le plafond est donc
ramene a 85 px ici. Pour retrouver les 150 px des maquettes, c'est
LARGEUR_VIGNETTE qu'il faut porter de 170 a 340 dans
outils/prerendre-catalogues.mjs, ce qui coute environ 5 ko par page. */
.vignRail img{ width:clamp(70px,4.6vw,85px) }
/* ======================================================================
DISPOSITIFS QUE LE CONTENU A DEMANDES ET QUE LES MAQUETTES N'AVAIENT PAS
Les 5 maquettes couvrent 5 gabarits. Les 37 fichiers de contenu portent
quelques formes de plus : un sommaire d'ancres et un corps de rubriques sur
les pages legales, une liste de 13 marques avec ce qu'elles couvrent, un
tableau de comparaison, des legendes de grappe, un bloc horaires et acces,
l'etape 1 du formulaire. Chacun est bati sur les memes jetons et les memes
regles que les cinq gabarits, et chacun porte ici le motif de sa forme.
====================================================================== */
/* ---- panneau de texte sur matiere ----
Dispositif de repli d'une section qui ne porte que du texte. Il existe parce
que la portee de lecture n'occupe que 29,7 % de la fenetre a 2560 : un
paragraphe pose seul y tombe au controle d'occupation, et il a raison d'y
tomber. Le titre tient la gauche sur 4 colonnes, le texte les 8 autres en
deux colonnes a partir de 1600, ce qui occupe la largeur sans etirer les
lignes et sans coller le texte a un bord. */
.panneau{position:relative;isolation:isolate;width:var(--w-large);margin-inline:auto;
padding:clamp(20px,1.8vw,50px);overflow:hidden;background:#fff}
.panneauFond{position:absolute;inset:0;z-index:0;opacity:.06;color:var(--bleu)}
.panneau>*:not(.panneauFond){position:relative;z-index:1}
.panneauIn{display:grid;grid-template-columns:1fr;gap:clamp(14px,1.4vw,38px);align-items:start}
@media(min-width:1024px){.panneauIn{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
/* LE TABLEAU ETAIT COUPE, PAS DEBORDANT, et c'est pour ca qu'aucun controle
ne l'avait vu. `.panneauIn` est une grille ; un element de grille a
`min-width:auto` par defaut, il ne peut donc pas devenir plus etroit que son
contenu. Le tableau des nuances mesure 704 px au minimum (4 colonnes a
11 rem), la piste refusait de descendre sous 704, et `.panneau` en
`overflow:hidden` coupait les 314 px qui depassaient de l'ecran. La page ne
debordait pas : les 45 % de droite du tableau etaient simplement
inatteignables, et c'est la colonne qui porte la reponse.
`min-width:0` rend la piste compressible, et le `overflow-x:auto` que
`.comparo` porte deja sous 760 reprend son travail : le tableau se fait
glisser au doigt. */
.panneauTxt{min-width:0}
.panneauTxt p{max-width:62ch;color:#3C3B34}
.panneauTxt p:last-child{margin-bottom:0}
.panneauTxt ul{margin:0 0 .9em;padding-left:1.2em;color:#3C3B34}
.panneauTxt li{margin-bottom:.35em}
@media(min-width:1600px){
/* EN DEUX COLONNES, LE MEME TEXTE TIENT SUR MOITIE MOINS DE HAUTEUR, et la
section devient plus dense que ce que l'oeil supporte. « Entretenir la
ligne » sortait a 3,5 px par mot a 1920, le plancher exact du controle :
127 mots dans 442 px. Ce n'est pas un defaut de redaction, c'est la
colonne qui comprime. On rend l'air au texte la ou il est comprime, et
nulle part ailleurs. */
.panneauTxt{columns:2;column-gap:clamp(24px,2.2vw,56px)}
.panneauTxt p{break-inside:avoid;line-height:1.78;margin-top:1.15em}
.panneauTxt p:first-child{margin-top:0}
/* UN TABLEAU NE SE COUPE PAS EN DEUX COLONNES. Vu au rendu sur
/catalogues/ : l'en-tete et la premiere ligne tombaient dans la colonne
de gauche et les trois autres lignes dans celle de droite, ce qui donne
deux demi-tableaux qui ne se lisent ni l'un ni l'autre. Il traverse donc
les deux colonnes, et le texte coule au-dessus de lui. */
.panneauTxt>.comparo{column-span:all;margin-top:clamp(18px,1.6vw,40px)}
}
/* ---- bandeau typographique des pages de soutien ----
Aucun tirage : ces pages ne consomment pas un bandeau photographique, et une
page legale qui fait des effets est une page qui inquiete. */
.hdrT{background:var(--bleu);color:#fff;position:relative;overflow:hidden}
.hdrTTrame{position:absolute;right:0;top:0;bottom:0;width:clamp(90px,8vw,230px);
color:#fff;opacity:.10}
.hdrTIn{width:var(--w-large);margin-inline:auto;position:relative;z-index:1;
padding-block:clamp(40px,4vw,110px) clamp(26px,2.6vw,70px)}
.hdrT h1{color:#fff;max-width:28ch}
.hdrT .chapeau{font-size:var(--t-chapeau);color:#CDE6F4;max-width:52ch;margin-top:.6em}
/* ---- sommaire d'ancres ----
Une liste de liens, parce que c'est ce que c'est. Elle ne ressemble pas a un
accordeon : pas de chevron vers le bas, pas de ligne pleine largeur. Les
pavés sont de largeurs inegales et se repartissent en colonnes. */
.sommaire{list-style:none;margin:clamp(14px,1.2vw,30px) 0 0;padding:0;
display:grid;gap:clamp(8px,.8vw,16px);grid-template-columns:1fr}
@media(min-width:760px){.sommaire{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1440px){.sommaire{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sommaire li{counter-increment:som}
.sommaire a{display:flex;align-items:center;gap:.7em;min-height:64px;background:#fff;
text-decoration:none;padding:clamp(12px,1vw,22px) clamp(14px,1.2vw,26px);
font-family:var(--tc);text-transform:uppercase;font-size:var(--t-petit);
letter-spacing:.03em;color:var(--bleu);
clip-path:polygon(0 0,100% 0,100% calc(100% - .9em),calc(100% - .9em) 100%,0 100%)}
.sommaire a:hover{background:var(--bleu);color:#fff}
.sommaire a::before{content:counter(som,decimal-leading-zero);font-weight:700;
color:var(--cyan);font-size:var(--t-h4);line-height:1}
.sommaire{counter-reset:som}
/* ---- corps des pages de soutien ----
Un panneau par rubrique, matiere a 0,06 derriere du texte courant, et un
filet traversant qui ouvre chaque rubrique : c'est ce qui tient l'occupation
et la regle de hauteur maximale sans objet visuel, pas le texte. */
.corpsPan{position:relative;isolation:isolate;width:var(--w-large);margin-inline:auto;
padding:clamp(18px,1.6vw,44px);overflow:hidden;background:#fff}
.corpsFond{position:absolute;inset:0;z-index:0;opacity:.06;color:var(--bleu)}
.corpsPan>*:not(.corpsFond){position:relative;z-index:1}
.corpsIn{display:grid;grid-template-columns:1fr;gap:clamp(12px,1.2vw,32px);align-items:start}
@media(min-width:1024px){.corpsIn{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
.corpsTxt p{max-width:64ch;color:#3C3B34}
.corpsTxt p:last-child{margin-bottom:0}
.corpsTxt ul{margin:0 0 .9em;padding-left:1.2em}
.corpsTxt code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
background:#F1F0ED;padding:.1em .35em}
/* ---- retour vers les rayons, en fin de page de soutien ---- */
.retourBloc{display:grid;grid-template-columns:1fr;gap:clamp(18px,1.8vw,46px);align-items:center}
@media(min-width:1024px){.retourBloc{grid-template-columns:repeat(12,minmax(0,1fr))}
.retourTxt{grid-column:1 / span 7}.retourImg{grid-column:8 / span 5;margin:0;max-width:960px}}
.retourImg img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.retourRail{display:flex;flex-wrap:wrap;gap:clamp(10px,1vw,22px);margin-top:clamp(14px,1.2vw,30px)}
.retourRail a{display:flex;flex-direction:column;align-items:center;gap:.4em;background:#fff;
text-decoration:none;padding:clamp(12px,1.1vw,24px) clamp(14px,1.3vw,28px);
clip-path:polygon(0 0,100% 0,100% calc(100% - .9em),calc(100% - .9em) 100%,0 100%)}
.retourRail a:hover{background:var(--bleu)}
.retourRail span{font-family:var(--tc);text-transform:uppercase;font-size:var(--t-micro);
letter-spacing:.08em;color:var(--bleu)}
.retourRail a:hover span{color:#fff}
.picRetour{width:clamp(44px,3.4vw,72px);height:clamp(44px,3.4vw,72px);color:var(--bleu)}
.retourRail a:hover .picRetour{color:var(--cyan)}
/* ---- les 13 marques et ce qu'elles couvrent ----
Une liste de definitions, et non treize cartes : treize cartes de meme taille
et de meme structure sont exactement la grille repetee que le client refuse.
Les hauteurs sont inegales parce que les textes le sont, et la liste se
repartit en colonnes a partir de 1024. */
.mqListe{margin:clamp(16px,1.4vw,36px) 0 0;columns:1;column-gap:clamp(24px,2.4vw,60px)}
@media(min-width:1024px){.mqListe{columns:2}}
@media(min-width:1920px){.mqListe{columns:3}}
.mqListeItem{break-inside:avoid;margin-bottom:clamp(14px,1.2vw,30px);
padding-bottom:clamp(12px,1vw,24px);border-bottom:1px solid #D9D8D2}
.mqListe dt{display:flex;align-items:center;gap:.7em;font-family:var(--tc);font-weight:700;
text-transform:uppercase;font-size:var(--t-h4);color:var(--bleu);margin-bottom:.3em}
/* Le logo est a 48 px de haut, soit 106 px peints pour 220 px natifs : c'est
son plafond, et c'est aussi le seuil a partir duquel il compte comme objet
visuel. A 34 px la liste des treize marques laissait 934 px de page sans
rien a regarder, ce que le controle de hauteur maximale sans objet visuel
attrape a juste titre : treize lignes de texte a la suite sont un mur. */
.mqListe dt img{height:48px;width:auto;max-width:110px;object-fit:contain}
.mqListe dt a{text-decoration:none}
.mqListe dt a:hover{color:var(--cyan)}
.mqListe dd{margin:0;font-size:var(--t-petit);color:#4B4A43;line-height:1.55}
/* ---- tableau de comparaison ----
C'est le contenu le plus repris par les moteurs de reponse sur ce metier.
Pas de fond alterne tous les deux rangs, qui fait « sortie de tableur » :
un filet horizontal par ligne, et la premiere colonne en titre de rang. */
.comparo{width:100%;border-collapse:collapse;margin-top:clamp(16px,1.4vw,36px);
font-size:var(--t-petit)}
.comparo th,.comparo td{text-align:left;vertical-align:top;padding:clamp(10px,.9vw,20px) clamp(10px,1vw,22px);
border-bottom:1px solid #D4D4CE}
.comparo thead th{font-family:var(--tc);text-transform:uppercase;font-weight:600;
letter-spacing:.06em;font-size:var(--t-micro);color:#fff;background:var(--bleu);
border-bottom:0}
.comparo tbody th{font-family:var(--tc);text-transform:uppercase;font-weight:500;
color:var(--bleu);width:22%}
.comparo tbody tr:last-child th,.comparo tbody tr:last-child td{border-bottom:0}
@media(max-width:759px){
.comparo{display:block;overflow-x:auto}
.comparo th,.comparo td{min-width:11rem}
}
/* ---- legendes de grappe ----
Le gabarit UX donne 120 mots de legendes a la section de grappe : ce sont
elles, et pas la grappe, qui portent le vocabulaire que les moteurs lisent.
Liste de definitions en colonnes, hauteurs inegales par construction. */
.grappeLeg{margin:clamp(18px,1.6vw,42px) 0 0;columns:1;column-gap:clamp(24px,2.2vw,56px)}
@media(min-width:760px){.grappeLeg{columns:2}}
@media(min-width:1440px){.grappeLeg{columns:3}}
@media(min-width:2200px){.grappeLeg{columns:4}}
/* Les legendes respirent un peu plus depuis que le texte au-dessus passe en
colonnes : la section s'etait resserree a 3,4 px par mot, sous le plancher
de 3,5 que le controle C12 impose a 1440. */
.grappeLegItem{break-inside:avoid;margin-bottom:clamp(14px,1.3vw,30px)}
.grappeLeg dt{font-family:var(--tc);text-transform:uppercase;font-weight:600;
font-size:var(--t-petit);letter-spacing:.03em;color:var(--bleu)}
.grappeLeg dd{margin:.15em 0 0;font-size:var(--t-micro);color:#4B4A43;line-height:1.55}
.grappeTxt p{max-width:62ch;color:#3C3B34}
/* Le texte d'ouverture d'une grappe passe en deux colonnes sur grand ecran,
pour la meme raison que celui d'un panneau : une seule colonne de 62
caracteres laisse la moitie de la section vide, et c'est elle, pas la
grappe, qui doit tenir la largeur quand la grappe se resserre. */
@media(min-width:1600px){
/* Sans `break-inside`, et c'est voulu : la grappe n'ouvre souvent que sur
UN paragraphe, et un paragraphe insecable reste alors tout entier dans la
premiere colonne. Vu au rendu sur la page d'aspiration : 1300 px de vide
a droite d'un texte de cinq lignes, c'est-a-dire le marqueur meme que la
regle maison refuse. Le paragraphe se coupe donc entre les deux
colonnes. */
.grappeTxt{columns:2;column-gap:clamp(24px,2.2vw,56px)}
.grappeTxt p{max-width:none}
}
/* ---- horaires et acces, page de contact ----
Le tableau des horaires tient 5 colonnes, la photographie du magasin les 7
autres, et elle deborde du bord droit de la fenetre : c'est ce qui evite le
couple « rectangle de texte, rectangle de carte » qui rend ces pages plates.
Aucune carte interactive : une bibliotheque tierce et un appel reseau au
premier rendu sont exclus par la cible de performance. Le lien ouvre la carte
externe en nouvel onglet, ce que le visiteur fait de toute facon. */
.acces{display:grid;grid-template-columns:1fr;gap:clamp(18px,1.8vw,46px);align-items:center}
@media(min-width:1024px){.acces{grid-template-columns:repeat(12,minmax(0,1fr))}
.accesTxt{grid-column:1 / span 5}
.accesImg{grid-column:7 / span 6;margin:0;max-width:960px}}
.accesImg img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.accesImg figcaption{margin-top:.6em;font-size:var(--t-micro);color:#4B4A43;
font-family:var(--tc);text-transform:uppercase;letter-spacing:.1em}
.joursTable{border-collapse:collapse;width:100%;max-width:34ch;
margin:clamp(12px,1vw,26px) 0}
.joursTable th{text-align:left;font-weight:400;color:#4B4A43;font-size:var(--t-petit);
padding:.3em 0;border-bottom:1px solid #D9D8D2}
.joursTable td{text-align:right;font-family:var(--tc);font-size:var(--t-petit);
color:var(--bleu);white-space:nowrap;padding:.3em 0;border-bottom:1px solid #D9D8D2}
.accesTxt p{max-width:56ch;color:#3C3B34}
.iti{display:inline-block;font-family:var(--tc);text-transform:uppercase;font-weight:600;
letter-spacing:.05em;font-size:var(--t-petit);text-decoration:none;color:var(--bleu);
box-shadow:inset 0 0 0 2px var(--bleu);padding:.6em 1.3em}
.iti:hover{background:var(--bleu);color:#fff;box-shadow:none}
/* ---- etape 1 du formulaire, posee sur la page de contact ----
JAMAIS DE FORMULAIRE LONG EN PAGE UNIQUE : une seule question ici, et le fil
des trois etapes qui dit d'avance ou on va. Le champ piege est hors de l'oeil
et hors du clavier, mais present : c'est ce qui ecarte un robot en silence.
Un champ coche porte ses QUATRE bords, jamais un seul. */
.formBloc{display:grid;grid-template-columns:1fr;gap:clamp(18px,1.8vw,46px);align-items:start}
@media(min-width:1024px){.formBloc{grid-template-columns:repeat(12,minmax(0,1fr))}
.formTxt{grid-column:1 / span 5}.formChoix{grid-column:7 / span 6}}
.formTxt p{max-width:48ch;color:#3C3B34}
.fil{list-style:none;counter-reset:f;margin:clamp(14px,1.2vw,30px) 0 0;padding:0;
display:flex;flex-wrap:wrap;gap:clamp(10px,1vw,24px)}
.fil li{counter-increment:f;font-family:var(--tc);text-transform:uppercase;
font-size:var(--t-micro);letter-spacing:.08em;color:#6B6B68;display:flex;
align-items:center;gap:.5em}
.fil li::before{content:counter(f);font-weight:700;color:var(--bleu);font-size:var(--t-petit)}
.fil li.courante{color:var(--bleu)}
.formChoix fieldset{border:0;margin:0;padding:0}
.formChoix legend{font-family:var(--tc);text-transform:uppercase;font-weight:700;
font-size:var(--t-h4);color:var(--bleu);margin-bottom:.7em;padding:0}
.cartes{display:grid;gap:clamp(8px,.8vw,16px);grid-template-columns:1fr}
@media(min-width:620px){.cartes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.carte{display:flex;align-items:center;gap:.7em;background:#fff;cursor:pointer;
padding:clamp(12px,1vw,22px) clamp(14px,1.2vw,26px);min-height:56px;
border:2px solid #fff;font-size:var(--t-petit);color:#3C3B34}
.carte:hover{border-color:#B9D4E6}
.carte:has(input:checked){border-color:var(--bleu);color:var(--bleu)}
.carte input{accent-color:var(--bleu);width:20px;height:20px;flex:0 0 auto}
.formChoix .btn{margin-top:clamp(14px,1.2vw,30px)}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* ---- commandes de la liseuse ---- */
.liseuseCmd{display:flex;flex-wrap:wrap;gap:clamp(10px,1vw,22px);align-items:center;
justify-content:space-between;margin-top:clamp(10px,.9vw,20px)}
.liseuseCmd:empty{display:none}
/* LES COMMANDES DE PAGE SE COLLENT AU RAIL, et elles portent leur nom.
Posees dans la barre du haut, elles etaient deux carres pales de 60 px, a
1,43 de contraste, separees du rail par la ligne de recherche, pendant que
le bouton bleu de telechargement, 3,2 fois plus grand et a 6,66 de
contraste, attirait l'oeil vers la SORTIE de la liseuse. */
.liseusePilote{display:flex;gap:10px;justify-content:flex-end;
margin-bottom:clamp(8px,.7vw,16px)}
.liseusePilote[hidden]{display:none}
.liseusePilote .fl{display:inline-flex;align-items:center;gap:.5em;cursor:pointer;
font-family:var(--tc);text-transform:uppercase;letter-spacing:.08em;font-weight:600;
font-size:var(--t-micro);padding:.72em 1.1em;min-height:44px;border:0;
background:var(--bleu);color:#fff}
.liseusePilote .fl span{font-size:1.5em;line-height:.6}
.liseusePilote .fl:hover{background:var(--noir)}
.liseusePilote .fl[disabled]{background:#D4D4CE;color:#6E6D68;cursor:default}
@media(max-width:559px){.liseusePilote .fl{font-size:0;gap:0;padding:.5em .9em}
.liseusePilote .fl span{font-size:24px}}
/* Le catalogue que le pre-rendu n'a pas encore produit. */
.liseuseAbsente{font-size:var(--t-chapeau);line-height:1.45;color:#4B4A43;max-width:52ch;
margin-top:clamp(10px,.9vw,22px)}
.liseuseCmd .cahiers{margin:0;font-size:var(--t-micro);color:#4B4A43}
.liseuseCmd .cahiers a{color:var(--bleu)}
.railCat{scroll-behavior:smooth}
/* Un catalogue de huit pages ou moins tient a l'ecran : ses pages y sont
composees plus petites, et il ne porte ni vignettes ni fleches. */
.railCat--court img{height:clamp(260px,14vw,420px)}
@media(prefers-reduced-motion:reduce){.railCat{scroll-behavior:auto}}
/* ---- avis : la note de la plateforme, et les etoiles ----
La note affichee est celle de la plateforme sur la TOTALITE des avis, jamais
recalculee sur le sous-ensemble filtre de 4 et 5 etoiles. */
.avisNote{margin:0;font-family:var(--tc);text-transform:uppercase;letter-spacing:.1em;
font-size:var(--t-micro);color:#4B4A43}
.avisEtoiles{margin:0 0 .5em;letter-spacing:2px;color:var(--cyan);font-size:.85rem}
/* ---- paves d'aiguillage : des largeurs qui ne se repetent pas ----
Le controle C18 refuse 3 enfants directs de meme largeur, meme hauteur et
meme structure. Avec 4 paves, l'alternance 7/5 suffit. Au-dela, il faut un
troisieme et un quatrieme couple, sinon six paves donnent trois jumeaux.
Les sommes font 12 colonnes par rang : 7+5, 5+7, 4+8, 6+6. */
@media(min-width:1024px){
.aig>*:nth-child(8n+1){grid-column:span 7}
.aig>*:nth-child(8n+2){grid-column:span 5}
.aig>*:nth-child(8n+3){grid-column:span 5}
.aig>*:nth-child(8n+4){grid-column:span 7}
.aig>*:nth-child(8n+5){grid-column:span 4}
.aig>*:nth-child(8n+6){grid-column:span 8}
.aig>*:nth-child(8n+7){grid-column:span 6}
.aig>*:nth-child(8n+8){grid-column:span 6}
}
/* Un pave sans detourage garde son objet visuel : le sol de treillis du
dispositif, en ELEMENT et non en pseudo-element, parce que le controle des
objets visuels parcourt les elements. Le motif reste ancre : il est le sol
de ce dispositif, il ne flotte pas entre deux sections. */
.aig{position:relative;isolation:isolate}
.aigFond{position:absolute;inset:calc(-1 * clamp(10px,1vw,24px));z-index:-1;opacity:.08}
/* ---- bandeau de page de contact, plus court ----
La page de contact pose la page, pas plus : 320 px de haut au maximum, et un
cadrage vertical different de celui de l'accueil. */
.hdr--court{min-height:min(38svh,340px)}
/* ---- note de la bande d'infos pratiques ----
La phrase que le redacteur ecrit pour cette section change selon la page :
la distance depuis une zone, l'horaire resume. Elle se pose sous la grille,
et non a la place de l'adresse, qui est la premiere chose qu'on cherche
dans cette bande. */
.infosNote{width:var(--w-large);margin:0 auto;padding-block:0 clamp(10px,.9vw,20px);
font-size:var(--t-petit);color:rgba(255,255,255,.82);max-width:none}
.mqIntro{max-width:72ch;color:#3C3B34;margin-top:.6em}
/* ---- la trame, en element de fond ---- */
.trame{background-repeat:repeat;opacity:.10}
.infosTrame,.convTrame,.mqTrame{opacity:.10}
.gazTreillis{opacity:.14}
.avisFond{opacity:.12}
.faqFond,.panneauFond,.corpsFond{opacity:.06}
.hdrTTrame{opacity:.10}
.preuve .plaque .trame{opacity:.16}
.h2img .treillis{opacity:1}
/* ---- liste de legendes dans un panneau ---- */
.panneauListe{list-style:none;margin:0 0 .9em;padding:0;columns:1}
@media(min-width:1024px){.panneauListe{columns:2;column-gap:clamp(20px,2vw,48px)}}
.panneauListe li{break-inside:avoid;padding-left:1.1em;position:relative;margin-bottom:.3em;
font-size:var(--t-petit);color:#3C3B34}
.panneauListe li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
background:var(--cyan)}
/* ---- bloc a deux colonnes, image a droite et debord controle ----
La cassure de grille de la page qui l'emploie : l'image sort du bord droit
de la fenetre et s'y fait couper. Elle reste peinte sous 960 px, donc en
tirage propre : c'est le debord qui occupe la fenetre, pas l'agrandissement. */
@media(min-width:1024px){
.atelier--inverse{direction:rtl}
.atelier--inverse>*{direction:ltr}
}
.atImg--deborde{max-width:none}
@media(min-width:1024px){
.atImg--deborde{width:calc(100% + (100vw - var(--w-large)) / 2 + 10vw);max-width:none}
}
/* ---- bande de retour vers les rayons, pages de soutien ---- */
.retour{background:var(--noir);color:#D6D5CF;padding-block:var(--pile-dense)}
.retour h2{color:#fff}
.retour p{color:#A9A8A1;max-width:52ch}
.retour .retourRail a{background:var(--ark-noir-2,#262624)}
.retour .retourRail a:hover{background:var(--bleu)}
.retour .retourRail span{color:#D6D5CF}
.retour .picRetour{color:var(--cyan)}
.retour .retourImg figcaption{color:#8B8A84}
/* ---- numero de page de la liseuse, pose en pseudo-element ----
Il s'affiche, il reste lisible, et il ne compte pas comme un mot : c'est une
commande, comme un numero de diapositive, et non du contenu redige. */
.railCat figcaption::after{content:attr(data-page)}
/* ---- liste de choix du formulaire ---- */
.cartes{list-style:none;margin:0;padding:0}
.cartes li{margin:0}
/* ---- introduction et sortie d'une section a dispositif ----
Elles vivent DANS la section qu'elles encadrent. Rendues a part, elles
produisaient une section de 36 mots dont le contenu n'occupait que 29 % de
la largeur : une colonne de texte isolee. Deux colonnes a partir de 1600,
pour que le paragraphe n'etire pas ses lignes sur 2000 px. */
.secIntro,.secSortie{max-width:none}
.secIntro p,.secSortie p{max-width:78ch;color:#3C3B34}
.secSortie{margin-top:clamp(16px,1.4vw,36px)}
@media(min-width:1600px){
.secIntro,.secSortie{columns:2;column-gap:clamp(24px,2.4vw,60px)}
.secIntro p,.secSortie p{break-inside:avoid;max-width:none}
}
/* ---- recherche dans le catalogue ----
Le champ et la phrase qui le remplace sont rendus masques et reveles par le
script : sans JavaScript, le visiteur ne voit ni un champ qui ne marcherait
pas, ni une phrase qui parlerait d'une fonction absente. */
/* LA RECHERCHE EST AU-DESSUS DU RAIL, pas dessous : c'est une commande, et une
commande qu'on ne voit pas n'existe pas. La marge passe donc sous le bloc. */
.liseuseChercher{display:flex;flex-wrap:wrap;gap:clamp(8px,.8vw,16px);align-items:center;
margin-bottom:clamp(12px,1vw,24px)}
.liseuseChercher[hidden]{display:none}
.liseuseChercher label{font-family:var(--tc);text-transform:uppercase;letter-spacing:.1em;
font-size:var(--t-micro);color:#4B4A43}
.liseuseChercher input{font:inherit;font-size:var(--t-petit);padding:.55em .9em;
border:2px solid #D4D4CE;background:#fff;color:var(--noir);min-width:16rem;min-height:48px}
.liseuseChercher input:focus{border-color:var(--bleu)}
.liseuseResultat{margin:0;font-size:var(--t-petit);color:#4B4A43}
.liseuseResultat a{color:var(--bleu);font-family:var(--tc);font-weight:600;padding:0 .15em}
.liseuseSansTexte{margin:0;font-size:var(--t-petit);color:#4B4A43;max-width:72ch}
/* ======================================================================
JAMAIS DE DEMI-COLONNE, ET CE N'EST PAS UNE QUESTION DE GOUT
======================================================================
Regle du client, posee pour tous ses projets : « JAMAIS de demi-colonnes.
Titre au centre et texte sur toute la largeur de l'espace disponible. »
Mesure faite a 2560 sur les 21 pages : 29 sections portaient un bloc de
texte occupant moins de 62 % de son conteneur AVEC le reste vide a droite,
c'est-a-dire sans image, sans tableau et sans encart pour tenir la place.
Deux causes, et deux corrections.
1. UN PLAFOND DE LARGEUR SUR UN BLOC QUI N'A RIEN A COTE. `.corpsTxt p` a
64ch, `.couvreTxt p` 44ch, `.grappeTxt p` 62ch : une largeur de lecture
parfaite dans un conteneur de 900 px, une demi-colonne dans un de 2048.
Le plafond saute, et le texte se repartit en colonnes : la ligne garde
sa longueur lisible, et le bloc occupe toute la largeur.
2. UNE COLONNAISON QUI NE SE REMPLIT PAS. `.secIntro` et `.panneauTxt` sont
deja en 2 colonnes, mais leurs paragraphes portent `break-inside: avoid`.
Une section d'un seul paragraphe occupait donc la colonne de gauche et
laissait celle de droite vide, ce qui donne exactement la demi-colonne
qu'on cherchait a eviter. Un paragraphe SEUL a le droit de se couper.
Le nombre de colonnes suit la largeur reelle, pas un palier arbitraire :
2 des 1280, 3 des 2000. A 2560 le conteneur fait 2048, soit 3 colonnes de
660 px, ce qui tient 70 caracteres par ligne. */
.corpsTxt,.couvreTxt,.secIntro,.secSortie,.grappeTxt,.panneauTxt{
column-gap:clamp(26px,2.3vw,64px)}
/* `.couvreTxt` EST SORTI DE CETTE LISTE. Le raisonnement ci-dessus vaut pour
un bloc qui occupe tout le conteneur. Celui-la n'en occupe que 5 colonnes de
grille sur 12, les pictogrammes tenant les 6 autres : la requete porte sur
la largeur de la FENETRE, pas sur la sienne. Mesure aux 7 largeurs, avant :
20 caracteres par ligne a 2560 et a 3440, 17 a 1280, et jusqu'a 5 cesures
dans un seul paragraphe. En une seule colonne, le meme bloc donne 70 a 2560,
73 a 3440, 55 a 1920, et 37 a 1280, qui est la mesure d'un telephone.
Sa largeur ne bouge pas : seule la circulation du texte dedans change. */
@media(min-width:1280px){
.corpsTxt,.secIntro,.secSortie,.grappeTxt,.panneauTxt{columns:2}
}
@media(min-width:2000px){
.corpsTxt,.secIntro,.secSortie,.grappeTxt,.panneauTxt{columns:3}
}
@media(min-width:1280px){
.corpsTxt>p,.corpsTxt>ul,.couvreTxt>p,.secIntro>p,.secSortie>p,
.grappeTxt>p,.panneauTxt>p,.panneauTxt>ul{max-width:none}
/* Un paragraphe seul doit pouvoir se couper, sinon il prend une colonne et
laisse les autres vides. A plusieurs, chacun reste d'un seul tenant. */
.corpsTxt>p:only-child,.couvreTxt>p:only-child,.secIntro>p:only-child,
.secSortie>p:only-child,.grappeTxt>p:only-child,.panneauTxt>p:only-child{
break-inside:auto}
/* Un tableau ou une image traverse toutes les colonnes, il ne s'y range pas. */
.corpsTxt>table,.corpsTxt>figure,.panneauTxt>table,.panneauTxt>figure,
.corpsTxt>.comparo,.panneauTxt>.comparo{column-span:all}
}
/* ======================================================================
AJUSTEMENTS AUX LARGEURS EXTREMES
Mesures faites aux 7 largeurs de recette, et chacune de ces regles repare
une mesure precise. Elles sont groupees ici pour qu'on voie d'un coup ce
qui depend de la largeur.
====================================================================== */
/* ---- encarts de rayons : l'inegalite doit survivre a l'empilement ----
La maquette casse l'egalite des encarts par une reserve de pile sur un
encart sur deux. A 2560 ca marche, parce que le texte depasse la hauteur
minimale. A 1024 et en dessous, c'est la `min-height` qui commande, et la
reserve de pile n'a plus aucun effet : les quatre encarts cadres sortaient
exactement a la meme taille, et le controle des cartes identiques les
refusait, a juste titre. L'inegalite est donc portee par la hauteur minimale
elle-meme, sur un cycle de trois, pour qu'aucune taille ne se repete plus de
deux fois quel que soit le nombre d'encarts. */
@media(max-width:1439px){
.familles>*:nth-child(3n+2){min-height:calc(clamp(132px,11.6vw,218px) + 26px)}
.familles>*:nth-child(3n+3){min-height:calc(clamp(132px,11.6vw,218px) + 52px)}
}
@media(min-width:1024px) and (max-width:1439px){
.familles>.fam--pt:nth-child(3n+2){min-height:calc(clamp(160px,9.4vw,194px) + 26px)}
.familles>.fam--pt:nth-child(3n+3){min-height:calc(clamp(160px,9.4vw,194px) + 52px)}
.familles>.fam--large:nth-child(3n+2){min-height:calc(clamp(178px,11.2vw,238px) + 26px)}
}
/* ---- paves d'aiguillage : meme probleme sous 1024 ----
Les largeurs inegales ne s'appliquent qu'a partir de 1024, ou la grille a
douze colonnes. En dessous, les paves sont en colonne unique et de meme
hauteur. Le cycle de quatre garantit qu'aucune taille ne se repete plus de
deux fois jusqu'a huit paves, et il n'y en a jamais plus de six. */
@media(max-width:1023px){
.aig>.pave:nth-child(4n+2){padding-block-end:calc(clamp(18px,1.5vw,40px) + 16px)}
.aig>.pave:nth-child(4n+3){padding-block-end:calc(clamp(18px,1.5vw,40px) + 32px)}
.aig>.pave:nth-child(4n+4){padding-block-end:calc(clamp(18px,1.5vw,40px) + 48px)}
.aig>.pave:nth-child(4n+2){min-height:126px}
.aig>.pave:nth-child(4n+3){min-height:142px}
.aig>.pave:nth-child(4n+4){min-height:158px}
}
/* ---- bande d'infos pratiques : la phrase de la page a besoin d'air ----
Sur les pages de zone, cette phrase porte la distance et l'horaire : 33 mots
de plus dans une bande de 166 px, et la densite tombe a 3,2 px par mot pour
un plancher de 3,5. Un plancher de densite n'est pas une coquetterie : il
dit qu'un bloc tasse est illisible. */
.infosNote{padding-block:.4em 1.1em}
/* ---- la liste des treize marques, sur un telephone ----
Treize entrees en une colonne font 1792 px de haut a 360, et le controle
refuse une section de plus de 1400 px : au-dela, c'est un mur. Les entrees
se resserrent donc sur les petites largeurs, logo compris. Le filet
traversant de la section reste son objet visuel. */
@media(max-width:759px){
.mqListe dt img{height:34px}
.mqListe dt{font-size:var(--t-petit);gap:.5em;margin-bottom:.15em}
.mqListe dd{font-size:var(--t-micro);line-height:1.45}
.mqListeItem{margin-bottom:clamp(8px,2vw,12px);padding-bottom:clamp(7px,1.6vw,10px)}
}
/* ---- image debordante : bornee en largeur ----
A 3440 le debord portait l'image a 1831 px de large, donc 1144 px de haut :
la section passait a 1473 px et tombait au controle de hauteur. Le debord
est une cassure de grille, pas une invitation a l'agrandissement, et le
tirage traite plafonne a 1600 px peints. */
@media(min-width:1024px){
.atImg--deborde{width:min(calc(100% + (100vw - var(--w-large)) / 2 + 10vw), 1560px)}
/* SOUS `--inverse`, LE DEBORD PART DU MAUVAIS COTE. La grille passe en
`rtl` pour mettre l'image a droite : le bord de depart d'un element
devient son bord DROIT, et la largeur en trop ne sort plus vers la
fenetre, elle rentre vers la colonne de texte. Mesure du 2026-11-03 sur
/catalogues/, la seule page qui emploie ce modificateur : le texte
chevauchait la photographie de 29 px a 1024 et de 140 px a 3440. Les
mots n'etaient pas caches, ils etaient peints en #45443C sur un bichrome
presque noir, donc illisibles : « la plage de pressi-on », « par dia-
metre », « bobine S20-0 ou ».
La largeur libre est remplacee par une piste de grille de plus. L'image
garde son encombrement, 1212 px au lieu de 1307 a 2560, elle reste bien
plus grande que les 960 px d'une image d'atelier ordinaire, et le pas de
la grille la tient a distance du texte a toutes les largeurs. */
.atelier--inverse .atImg--deborde{grid-column:1 / span 6;width:100%;max-width:none}
}
/* ---- sol de la liste des marques ---- */
.mqListeSec .p-conteneur{position:relative;isolation:isolate}
.mqListeFond{position:absolute;inset:calc(-1 * clamp(10px,1vw,24px));z-index:-1;opacity:.07}
/* ---- encarts de rayons sous 1024 : l'inegalite passe par le remplissage ----
La hauteur minimale ne suffit pas : des que le descriptif fait deux lignes,
le contenu depasse la hauteur minimale et les encarts redeviennent egaux.
Mesure : trois encarts a 172 x 186 px sur la page agriculteurs, a 390. Le
remplissage, lui, s'ajoute toujours a la hauteur du contenu. */
@media(max-width:1023px){
.familles>*:nth-child(3n+2){padding-block-end:calc(clamp(12px,1.2vw,34px) + 18px)}
.familles>*:nth-child(3n+3){padding-block-end:calc(clamp(12px,1.2vw,34px) + 36px)}
}
/* ---- aiguillage sous 480 : six paves ne doivent pas faire un mur ----
A 360, six paves avec leur reserve d'inegalite portaient la section a
1471 px, et le controle en autorise 1400. Le remplissage et l'ecart se
resserrent, l'inegalite reste. */
@media(max-width:480px){
.aig{gap:8px}
.aig>.pave{padding-block:14px}
.aig>.pave:nth-child(4n+2){padding-block-end:22px;min-height:118px}
.aig>.pave:nth-child(4n+3){padding-block-end:30px;min-height:130px}
.aig>.pave:nth-child(4n+4){padding-block-end:38px;min-height:142px}
}
/* ---- respiration des sections a dispositif, sous 1440 ----
Le plancher de densite dit qu'un bloc tasse est illisible : 121 mots dans
421 px a 1024 sur la page de reparation, pour un plancher de 3,5 px par mot.
L'intro et la sortie reprennent donc de l'air a ces largeurs. */
@media(max-width:1439px){
.secIntro{margin-bottom:clamp(14px,1.6vw,28px)}
.secSortie{margin-top:clamp(22px,2.2vw,38px)}
}
.infosNote{padding-block:.8em 1.4em}
/* ---- le numero de la bande de gaz, compose plus grand ----
La maquette le pose en `--t-h2`. Il passe en `--t-h1`, pour deux raisons qui
vont dans le meme sens.
La premiere est de composition : cette bande a un seul role, declencher
l'appel quand la bouteille est vide, et le numero doit y etre le plus gros
objet apres le titre, comme dans le bloc de conversion.
La seconde est une mesure. Le controle de hauteur maximale sans objet visuel
balaie la page de haut en bas en comparant chaque objet au PRECEDENT dans
l'ordre des hauteurs. Sur la page chaudronnerie, a 3440, la bande de gaz
porte quatre paragraphes : elle fait 1060 px, son titre se termine a 141 px
du haut, et plus rien ne commence avant le filet de la section suivante,
919 px plus bas. Un numero compose a 64 px est un objet visuel, pose au bas
de la colonne de texte : il coupe ce vide, et il le coupe la ou le visiteur
regarde deja. */
.gaz .n{font-size:var(--t-h1);line-height:1.04;margin-top:.7em}
/* ---- les trois moments ont besoin d'air a 1024 ----
Trois colonnes de 5, 4 et 3 douziemes : a 1024 la troisieme ne fait que
243 px, son texte s'y empile, et 121 mots tenaient dans 421 px, soit
3,48 px par mot pour un plancher de 3,5. Le plancher dit qu'un bloc tasse
est illisible, et il a raison. */
@media(min-width:900px) and (max-width:1279px){
.moments{gap:clamp(22px,2.6vw,46px);padding-block:0 clamp(14px,1.8vw,26px)}
.moment p{margin-top:.6em}
}
/* ---- DEFAUT TROUVE DANS LES MAQUETTES, ET CORRIGE ICI ----
Le titre du bandeau photographique etait peint SOUS la photographie.
`.tr > img` est pose en absolu avec `z-index:1` ; `.hdrIn`, lui, est dans le
flux, sans position ni z-index. Dans un meme contexte d'empilement, un
element positionne avec z-index:1 passe devant un element non positionne :
le h1, le sur-titre, le chapeau et les deux boutons du bandeau etaient donc
derriere l'image. Verifie sur la maquette elle-meme, gabarit-famille.html a
2560 : on devine les lettres fantomes du titre a travers la photographie.
Le bandeau bichrome des pages de referencement, lui, porte bien
`.hdrP .hdrIn{position:relative;z-index:2}` : l'oubli ne concerne que le
bandeau photographique. Aucun des 41 controles automatisables ne le voit,
parce qu'aucun ne compare l'empilement du texte et des images. C42 le voit :
« ouvrir la page et ne rien faire pendant 3 secondes ; si le premier reflexe
est de chercher ou est l'information, le bandeau a echoue. » Un h1 invisible
echoue aussi au contraste de WCAG.
La regle d'empilement des contenus poses sur une photographie traitee est
donc explicite, pour les deux bandeaux et pour la bande de gaz. */
.hdr .hdrIn,.gazImg .sur,.tr .hdrIn{position:relative;z-index:5}
/* ---- un encart de dispositif chiffre sans nombre ----
Une affirmation n'est pas une mesure : elle se compose en titre d'encart et
non en petit texte perdu dans un encart de 300 px de haut. */
.chiffre--dire{display:flex;align-items:center}
.chiffre--dire span{font-family:var(--tc);text-transform:uppercase;font-weight:700;
line-height:1.16;font-size:var(--t-h3);color:var(--bleu);max-width:18ch;margin-top:0}
/* ---- colonne de texte d'un bloc a deux colonnes ----
40ch sur une colonne de 1180 px laissaient 780 px de vide a droite du texte,
ce qui redonne la colonne etroite que le client refuse. */
.atTxt p{max-width:54ch}
.atNote p{max-width:46ch}
/* ---- paragraphes d'une section a tableau ----
Sur la portee large, un paragraphe non borne produit des lignes de 2400 px.
Une ligne de plus de 90 caracteres ne se lit plus, elle se parcourt. */
.comparo,.p-large>.secIntro,.p-large>p{max-width:none}
section > .p-large > p{max-width:88ch}
/* ---- section a tableau : le texte a gauche, le tableau a droite ----
Un tableau de deux colonnes etire sur 2464 px donne des cellules de 1900 px
pour des valeurs de quatre mots. Le tableau prend 7 colonnes sur 12, le texte
les 5 autres : la section se remplit de contenu, pas de cellules vides. */
.tableauBloc{display:grid;grid-template-columns:1fr;gap:clamp(16px,1.8vw,46px);align-items:start}
@media(min-width:1024px){
.tableauBloc{grid-template-columns:repeat(12,minmax(0,1fr))}
.tableauTxt{grid-column:1 / span 5}
.tableauBloc>.comparo{grid-column:7 / span 6}
}
.tableauTxt p{max-width:46ch;color:#3C3B34}
.tableauBloc>.comparo{margin-top:0}
/* ---- accordeon sur un telephone ----
Trois reponses ouvertes sur un ecran de 360 portaient le panneau a 1442 px,
et le controle refuse une section de plus de 1400. Les marges se resserrent,
le contenu ne bouge pas. */
@media(max-width:480px){
.faqPan{padding:10px}
.faqGrille{gap:10px;margin-top:8px}
/* Second tour de vis, mesure : le panneau restait a 1404 px. 7 px de moins
par summary sur neuf questions, et une bande d'image plus basse, le
ramenent sous le plafond sans retirer un mot ni un objet. */
.faqListe summary{padding-block:7px;padding-right:38px}
.faqListe details>p{padding-bottom:9px;padding-right:0}
.faqCote img{aspect-ratio:2.6/1}
}
/* ---- SECOND DEFAUT TROUVE DANS LES MAQUETTES, ET CORRIGE ICI ----
Les trois bichromes des bandeaux de referencement n'etaient jamais visibles.
`.bi-1`, `.bi-2` et `.bi-3` posent chacun un degrade en `background`. Mais
`.hdrP` pose `background: var(--bleu)` et vient APRES eux dans la feuille, a
specificite egale : c'est l'aplat bleu qui gagnait, sur les trois. Mesure au
pixel sur gabarit-reference.html a 2560 : #00609C a gauche, au milieu et a
droite, alors que `bi-1` doit finir en noir de charte.
Ce n'est pas un detail de couleur. Tout le dispositif des 9 bandeaux
construits repose dessus : 3 bichromes multiplies par 6 familles donnent 18
combinaisons, et les 9 retenues sont distinctes deux a deux. Le degrade mort,
il ne reste que le pictogramme pour les distinguer, et TROIS pages partagent
la famille « souder » tandis que DEUX partagent « gaz ». Autrement dit, cinq
pages sur neuf auraient eu un bandeau jumeau, ce que la regle maison interdit
explicitement : un hero par page, deux pages ne partagent jamais le meme.
La specificite est donc relevee sur le bandeau, et nulle part ailleurs. */
.hdrP.bi-1{background:linear-gradient(104deg,#00609C 0%,#00609C 42%,#1D1D1B 100%)}
.hdrP.bi-2{background:linear-gradient(104deg,#00609C 0%,#00609C 38%,#00A7E1 100%)}
.hdrP.bi-3{background:linear-gradient(104deg,#1D1D1B 0%,#1D1D1B 44%,#00A7E1 100%)}
/* Sur `bi-3`, la moitie gauche est en noir de charte : le pictogramme de
famille, pose a droite sur du bleu clair, y perd son contraste. Il passe en
blanc sur cette variante, a la meme opacite. */
.hdrP.bi-3 .fondPic{color:#FFFFFF}
/* ---- ce qu'un catalogue presente, quand la marque n'a aucun detourage ----
Le motif complet est dans `components/Designations.astro` : neuf pages de
marque sur treize montraient des produits qui ne sont pas de cette marque,
et une image pose cette affirmation toute seule. L'objet graphique qui tient
la surface est donc le symbole des outils croises d'ARK, pose tres grand et
recadre par le bord, qui n'affirme rien sur un fabricant. Coin coupe et
colonnes de hauteurs inegales : une plaque rectangulaire de plus, alignee
sur les precedentes, est ce que le client appelle « trop carre ». */
.desig{position:relative;isolation:isolate;overflow:hidden;background:#fff;
--coin:clamp(24px,2.4vw,64px);
padding:clamp(22px,2vw,56px) clamp(22px,2.2vw,64px);
clip-path:polygon(0 0,100% 0,100% calc(100% - var(--coin)),calc(100% - var(--coin)) 100%,0 100%)}
.desigFond{position:absolute;inset:0;z-index:0;opacity:.06;color:var(--bleu)}
/* Le symbole sort par le coin coupe, en bas a droite : pose en haut il ne
montrait qu'une diagonale, qui ne se lit pas comme une marque. */
.desigSym{position:absolute;z-index:0;right:-6%;bottom:-34%;
width:clamp(200px,24vw,560px);height:clamp(200px,24vw,560px);
color:var(--bleu);opacity:.13;pointer-events:none}
.desig>*:not(.desigFond):not(.desigSym){position:relative;z-index:1}
.desigTete{max-width:66ch}
.desigTete p{color:#3C3B34;margin-top:.7em}
/* Deux colonnes, puis trois : a quatre, huit designations tenaient sur deux
rangs et la plaque devenait une bande mince posee dans du blanc. Le filet
sous chaque entree tient la liste ensemble, comme sur la liste des treize
marques. */
.desigListe{margin-top:clamp(18px,1.8vw,46px);columns:1}
@media(min-width:760px){.desigListe{columns:2}}
@media(min-width:2200px){.desigListe{columns:3}}
.desigListe .grappeLegItem{margin-bottom:clamp(12px,1vw,24px);
padding-bottom:clamp(10px,.9vw,20px);border-bottom:1px solid #D9D8D2}
.desigListe dt{font-size:var(--t-h4);font-weight:700;color:var(--bleu)}
.desigApres p{max-width:66ch;color:#3C3B34;margin-top:.9em}
/* LES PLAFONDS DE LECTURE POSES DANS DES BOITES DEJA ETROITES.
Mesure a 2560, bloc par bloc, contre la largeur de SA boite et non celle de
la page : `.atTxt p` occupait 681 px dans 1212, `.atNote p` 667 dans 1212,
`.ligneRep p` 656 dans 2464. Ces boites sont deja tenues par la grille, a
580 ou 1400 px : un second plafond en `ch` par-dessus ne protege plus la
lecture, il ne fait que creuser du vide a droite. Il saute.
Les chapeaux gardent un plafond, parce qu'un chapeau est une phrase
d'accroche et non du texte courant, mais il passe de 42 a 70ch. */
@media(min-width:1280px){
.atTxt p,.atNote p,.mqRayonTxt p,.gazTxt p,.formTxt p,.anTxt p,
.tableauTxt p,.moment p,.ligneRep p,.couvreTxt p,.mqPave p,.preuve figcaption{
max-width:none}
.hero2 .chapeau,.h2txt .chapeau{max-width:70ch}
details>p{max-width:none}
}
/* Un bloc passe en colonnes occupe deux fois moins de hauteur : la section
« Les pieces qui reviennent » de /materiel-de-soudure-pour-agriculteurs/
tombait sous le plancher de 3,5 px par mot du controle C12.
La reserve existait deja, mais calee sur 2560 : a 1,1vw elle valait 15,8 px
a 1440 et RIEN du tout a 1024, ou la requete ne s'appliquait pas. Mesure du
2026-11-03 : 3,4 a 1440 et 3,3 a 1024, toujours sous le plancher.
Elle part donc de 1024 et vaut au moins 44 px. Essayee par injection sur
les 37 pages a 2560, 1920, 1440 et 1024 avant d'etre ecrite : les deux cas
sous le plancher disparaissent, et aucune section ne passe au-dessus du
plafond de densite. */
@media(min-width:1024px){
.corpsTxt,.panneauTxt{margin-bottom:clamp(44px,3vw,56px)}
}
/* Les trois derniers cas, qui ne sont pas de la prose et ne se mettent donc
pas en colonnes :
- la liste des 13 marques est une enumeration de noms propres, elle tient
sur une ligne a 2048 px et n'a pas besoin d'un plafond de lecture ;
- le chapeau d'un bandeau de page garde une mesure courte, mais 44ch dans
une colonne de 1437 px laissait 800 px de vide : 68ch la remplit ;
- un pave d'aiguillage seul sur sa rangee prend les 12 colonnes, au lieu de
7 avec 5 de vide a cote. */
@media(min-width:1280px){
.mqIntro{max-width:none}
}
@media(min-width:1600px){
.hdr .chapeau,.hdrP .chapeau,.blocHdr .chapeau{max-width:68ch}
}
@media(min-width:1024px){
/* Un pave large seul sur sa rangee prend toute la largeur. Sinon il occupe
7 colonnes sur 12 et laisse les 5 autres vides, ce qui est la demi-colonne
sous une autre forme. */
.aig .pave--large:only-child,
.aig .pave--large:last-child{grid-column:1 / -1}
}
/* Et le plafond des chapeaux, pose ici pour la meme raison : un ajustement
de largeur extreme plus haut dans la feuille le reprenait a 44ch. */
@media(min-width:1600px){
.hdr .chapeau,.hdrP .chapeau,.blocHdr .chapeau,.hero2 .chapeau{max-width:70ch}
}