enveloppant à ajouter. Ce montage avait un défaut de conception, pas un bug ponctuel — la contrainte était portée par des marges `auto` de spécificité (0,1,0), que TOUT raccourci `margin` écrit ensuite sur un enfant remettait silencieusement à zéro. L'enfant restait plafonné à 1200 px mais collé à gauche, et le bord gauche de la page zigzaguait. Mesuré à 1440 px, sur les positions gauches des enfants directs des neuf sections : HUIT enfants à 16 px au lieu de 120 — `.hm-cta2` et `.hm-note` dans le héros, `.hm-trust ul`, `.hm-kicker`, `.tc4-route`, `.tc4-legend-fits`, `.hm-steps ol`, `.hm-guides ul`. Le titre « Nos guides » commençait 104 px à droite de ses propres cartes. Le piège était déjà connu, déjà commenté, et déjà réparé une fois au cas par cas — sur l'ancienne `.hm-hero__img`, une règle qui n'existe plus depuis que le héros a été remplacé par la composition à deux photos. C'est ce qui tranche : le réparer une neuvième fois, c'est le laisser ouvert pour le dixième. Le padding de la section produit le même centrage SANS marge `auto` à préserver, donc aucun raccourci `margin`, présent ou futur, ne peut le défaire. NOTE, depuis le 2026-08-11 : le héros est désormais la SEULE section sans `.hm-b`, parce que ses photos saignent bord à bord. Il reprend la même expression de centrage sur `.hm-hero__txt`, mais en `vw` et non en `%` — le bloc de texte ne s'étend pas sur toute la section au-delà de 768 px, donc un pourcentage s'y calculerait sur la mauvaise référence. max(--space-sm, (100% - --max-width)/2) · en dessous de 1232 px la parenthèse est négative → le `max` rend --space-sm, exactement le padding d'avant. À 375 px la boîte de contenu reste à 343 px : les hauteurs arbitrées ne bougent pas ; · au-delà, elle vaut la moitié du débord et la boîte plafonne à 1200 px. `100%` se résout sur le bloc conteneur, ici — marge nulle, padding nul, donc la largeur du viewport. ATTENTION AUX SECTIONS QUI REDÉCLARENT `padding` : elles écrasent celui-ci et doivent recevoir le même traitement. `.hm-trust` est la seule aujourd'hui (voir plus bas) ; toute nouvelle est à vérifier au même endroit. */ .hm-b{padding:var(--space-md) max(var(--space-sm), (100% - var(--max-width)) / 2); background:var(--color-white)} /* L'ALTERNANCE, ET SON PIÈGE — trouvé le 2026-08-11 en production de maquette. `.hm-b:nth-child(even)` pèse (0,2,0) : une classe PLUS une pseudo-classe. Les sections qui déclarent leur propre fond le font en (0,1,0) — `.hm-final` en noir, `.hm-trust` en jaune pâle. Elles PERDENT donc l'arbitrage, et pas à cause de leur position dans la feuille : aucun déplacement de règle n'y changerait rien, c'est la spécificité qui tranche. Tant que ces sections tombaient en rang impair, la règle ne les atteignait pas et le bug dormait. L'insertion du bloc « avantages » après les tuiles a décalé la parité de tout ce qui suit, le CTA final est passé en pair, et son noir a disparu — silencieusement, sans erreur, en changeant un bloc qui n'a rien à voir. C'est le mode de défaillance le plus coûteux : le symptôme apparaît loin de sa cause. La parade est ici et pas ailleurs : l'alternance s'efface devant toute section qui possède sa couleur. Ajouter une section colorée = l'ajouter à cette liste, au même endroit que le commentaire qui l'explique. */ /* PASSÉ DE `even` À `odd` LE 2026-08-12, et c'est bien le même piège qui a frappé une seconde fois — sous un autre visage. Le retrait du bandeau de réassurance a fait remonter tous les blocs d'un rang. Aucune couleur n'a disparu cette fois : c'est le RYTHME qui s'est cassé. Le bloc avantages, qui porte son propre beige, est passé en rang impair, et l'étape suivante a reçu le beige de l'alternance — deux sections beiges collées, puis deux blanches plus bas. Le symptôme est plus discret que la perte du noir, donc plus facile à laisser passer : il faut regarder les neuf fonds ensemble pour le voir. `odd` remet les sections à couleur propre en phase avec l'alternance. La leçon ne change pas : AJOUTER ou RETIRER une section oblige à relire les neuf fonds dans le navigateur, pas seulement à vérifier que la page se construit. */ .hm-b:nth-child(even):not(.hm-final):not(.tvof-section):not(.avp):not(.gaf):not(.chp){background:var(--color-bg)} .btn-primary,.btn-tertiary{display:inline-flex;align-items:center;justify-content:center; min-height:48px;padding:.75rem 1.15rem;border-radius:var(--radius-md);font-weight:600; font-size:.95rem;text-decoration:none;line-height:1.2} .btn-primary{background:var(--color-primary);color:var(--color-dark)} .btn-tertiary{background:transparent;color:var(--color-dark);border:2px solid var(--color-dark)} /* Retour d'appui : le seul défaut de motion qu'on ressent consciemment, parce qu'il n'y a pas de :hover sur mobile — rien ne confirmait que le bouton a entendu. La transition ne porte que `transform`. */ .btn-primary,.btn-tertiary{transition:transform var(--duration-fast) var(--ease-out)} .btn-primary:active,.btn-tertiary:active{transform:scale(.97)} /* Focus clavier. Le socle porte un `:focus-visible` nu ; on nomme ici les quatre sélecteurs du système — un `summary` ou un `[tabindex]` ne doit pas dépendre du fait qu'aucune règle de page n'ait posé `outline:none`. */ a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--color-dark);outline-offset:2px;border-radius:var(--radius-sm)} /* ---------------------------------------------------------------- LE DUOTONE Le moteur de teinte. UNE SEULE VALEUR A REGLER : `--duo-force`, de 0 a 1. 0 = photo d'origine, 1 = duotone plein entre le noir et le jaune de la charte. 0.55 a 0.7 donne un jaune discret. `--duo-lum` est un second cadran, separe EXPRES : il gere la luminosite, donc le contraste du texte pose dessus. Baisser `--duo-force` est sans risque ; toucher `--duo-lum` oblige a remesurer les contrastes. LE PIEGE, ET IL EST SILENCIEUX : `::before` est genere comme PREMIER enfant dans l'arbre de boites. Sans z-index, la couche `multiply` se peint donc SOUS l'image, qui est opaque et la recouvre entierement — on obtient une image grise parfaitement plausible, sans la moindre erreur console. La premiere passe de mesure a rendu exactement ca : trois heros en noir et blanc, sans un pixel de jaune. D'ou le z-index explicite ci-dessous. */ .duo{--duo-force:1;--duo-lum:.52;--duo-clair:#F5C518;--duo-sombre:#1A1A1A; position:relative;isolation:isolate;overflow:hidden;background:var(--color-dark)} .duo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:grayscale(var(--duo-force)) contrast(1.04) brightness(var(--duo-lum));z-index:0} .duo::before,.duo::after{content:'';position:absolute;inset:0;z-index:1; opacity:var(--duo-force);pointer-events:none} .duo::before{background:var(--duo-clair);mix-blend-mode:multiply} .duo::after{background:var(--duo-sombre);mix-blend-mode:lighten} /* Repli : sans mix-blend-mode, les deux couches deviendraient deux aplats opaques et masqueraient la photo. On les retire, le filtre suffit. */ @supports not (mix-blend-mode: multiply){.duo::before,.duo::after{display:none}} /* ------------------------------------------------------------------- LE HERO Seul bloc sans `.hm-b` : les photos saignent bord a bord. Le centrage sur `--max-width` est donc porte par `.hm-hero__txt`, en `vw` puisque le texte n'occupe pas toute la section au-dela de 768 px. */ .hm-hero{position:relative;isolation:isolate;display:grid; background:var(--color-dark);color:#fff; grid-template-columns:1fr;grid-template-rows:minmax(380px,auto) 128px; grid-template-areas:"main" "band"} /* Le voile, generique : pose sur la zone « main », quelle que soit la photo qui s'y trouve a cette largeur. Opacites baissees a la demande d'Antoine ; contraste remesure apres coup par compositing canvas, pire cas 9,4:1 sur la ligne de contact — barre a 4,5:1, donc facteur 2,1 de marge. Le seuil de bascule vers le voile directionnel est un axe INDEPENDANT de l'echange de roles : un degrade relache a droite trahit des que la colonne de texte atteint ~90 % du panneau, et ca ne depend pas de quelle photo est dessous. */ .hm-hero::before{content:'';grid-area:main;z-index:1;pointer-events:none; background:linear-gradient(to top,rgba(9,9,9,.78) 0%,rgba(9,9,9,.75) 45%, rgba(9,9,9,.64) 74%,rgba(9,9,9,.52) 100%)} @media (min-width:900px){ .hm-hero::before{background: linear-gradient(100deg,rgba(9,9,9,.78) 0%,rgba(9,9,9,.73) 48%, rgba(9,9,9,.53) 78%,rgba(9,9,9,.29) 100%), /* plancher : nulle part la photo ne revient a 100 %. Protege le jour ou quelqu'un remonte --duo-lum ou met une photo plus claire. */ linear-gradient(rgba(9,9,9,.17),rgba(9,9,9,.17))}} .hm-hero__txt{grid-area:main;position:relative;z-index:2;align-self:center; padding:1.9rem max(var(--space-sm), (100vw - var(--max-width)) / 2)} .hm-hero__txt > *{max-width:42rem} /* Roles PAR DEFAUT sous 768 px : la camera en « bande » (couleur vraie), et l'entrepot en « principal » avec le texte pose dessus. Arbitrage d'Antoine du 10/08 : le seuil de bascule des ROLES est aligne sur celui de la MISE EN PAGE, pour que sous 768 px la composition reste TOUJOURS empilee — donc la bande TOUJOURS « en bas » au sens litteral. */ .hm-hero__cctv{grid-area:band;--duo-force:0;border-top:3px solid var(--color-primary)} .hm-hero__live{grid-area:main} .hm-hero__live img{object-position:36% 44%} .hm-hero__cctv img{object-position:50% 44%} @media (min-width:768px){ .hm-hero{grid-template-columns:minmax(0,1fr) clamp(190px,30vw,460px); grid-template-rows:minmax(470px,auto);grid-template-areas:"main band";gap:3px} .hm-hero__cctv{grid-area:main;--duo-force:1;border-top:none} .hm-hero__live{grid-area:band;--duo-force:0;border-left:3px solid var(--color-primary)} .hm-hero__cctv img{object-position:30% 46%} .hm-hero__live img{object-position:50% 50%}} @media (min-width:1100px){.hm-hero{grid-template-rows:minmax(510px,auto)}} /* A partir de 1280 px, la disposition ne change PLUS : « main » (texte + camera) reste a gauche, « band » (etagères) a droite. Le seul effet propre a ce palier est le miroir sur la camera, demande explicitement par Antoine le 11/08 — sur l' SEULE, jamais sur `.duo` ni sur la section, qui portent le voile et le texte et ne doivent jamais etre retournes. */ @media (min-width:1280px){.hm-hero__cctv img{transform:scaleX(-1)}} .hm-hero h1{color:#fff} .hm-sub{color:#e6e3dc;font-size:.95rem} .hm-cta2{display:flex;flex-direction:column;gap:.6rem;margin:1.1rem 0 .9rem} .hm-hero .btn-tertiary{color:#fff;border-color:#fff} .hm-contact{font-size:.875rem;color:#cfcbc2;margin-bottom:.6rem} .hm-contact a{color:var(--color-primary);text-decoration:underline} .hm-note{font-size:.875rem;margin:0} .hm-hero .hm-note{color:#fff} .hm-note span{color:var(--color-primary);letter-spacing:.05em} /* ══ LE RACCORD HERO → TARIFS : « le chapô » ═════════════════════════════════ Prend la place des règles `.hm-trust*`, parties avec le bandeau de réassurance le 2026-08-12. GESTE — le filet jaune répond au filet NOIR de 3 px qui ouvre le masthead des tarifs 40 px plus bas : la même ponctuation, dans l'autre couleur, une fois avant et une fois après. C'est ce qui fait lire les deux blocs comme une suite et pas comme deux morceaux collés. FER À GAUCHE ET NON CENTRÉ — le hero est fer à gauche, le masthead est fer à gauche. Un paragraphe centré réintroduirait une rupture d'axe là où on cherche exactement le contraire. CORPS — 1,0625 → 1,3125 rem. Au-dessus du corps courant (1 rem) parce que c'est un chapô et qu'il doit se lire comme une voix ; en dessous du H2 du masthead (1,375 rem) parce qu'il ne doit pas concurrencer le titre de la section qu'il annonce. LE FOND BEIGE EST LE POINT, pas une décoration : il fait le palier entre le noir du hero et le blanc du catalogue. Comme il est DÉCLARÉ, `.chp` doit figurer dans la liste des `:not()` de l'alternance — sinon la parité (0,2,0) écrase ce (0,1,0) au premier décalage de blocs. `padding-block` seulement : le padding horizontal de `.hm-b` porte l'expression de centrage et ne doit surtout pas être réécrit ici. Cette règle est APRÈS `.hm-b` dans la feuille, à spécificité égale — c'est l'ordre source qui tranche, ne la remonte pas. CONTRASTE — #1A1A1A sur #F8F7F4 ≈ 15,5:1. Aucun lien ici : la phrase renvoie à la grille juste dessous, le numéro est cliquable 200 px plus haut dans le hero et le sera encore en pied de page. Rien à mesurer côté cible tactile. */ .chp{background:var(--color-bg);padding-block:clamp(1.5rem,5vw,2.5rem)} .chp__in{max-width:46ch} /* Le filet est décoratif : vide et aria-hidden côté markup. */ .chp__rule{display:block;width:2.5rem;height:3px;background:var(--color-primary); margin-bottom:.85rem} .chp__p{margin:0;font-size:clamp(1.0625rem,1rem + .55vw,1.3125rem);line-height:1.5; color:var(--color-dark)} /* LE SURLIGNAGE — il porte la PROMESSE, « l'espace qu'il vous faut ». Il a d'abord été posé sur « affiche ses prix », la chute différenciante ; Antoine l'a déplacé le 2026-08-12. Un seul surlignage dans la phrase, et pas deux : deux bandes jaunes en trente mots s'annulent l'une l'autre. Si la chute doit récupérer un accent un jour, ce sera un `` — pas un second ``. `` et pas un `` : l'élément existe pour ça, « marqué en raison de sa pertinence ». Sa couleur de fond par défaut (jaune vif du navigateur) est remplacée ici, et `color:inherit` annule le noir imposé par certains UA. PAS DE PSEUDO-ÉLÉMENT ABSOLU, à la différence du surligneur des chiffres d'étapes (options/etapes-options.html) : là-bas le trait passe derrière UN chiffre, qui ne se coupe jamais. Ici la locution peut tomber à cheval sur deux lignes selon la largeur, et un `::before` en `position:absolute` ne couvrirait que le premier fragment — le second sortirait nu, sans erreur ni symptôme au-dessus du point de rupture. Le dégradé porté par le fond de l'élément lui-même, plus `box-decoration-break:clone`, se répète correctement sur CHAQUE fragment de ligne. La bande monte à .62em depuis le bas : elle couvre le corps des lettres et laisse respirer les hampes hautes, ce qui donne le geste du surligneur plutôt que celui d'un bouton. Le texte reste #1A1A1A sur #F5C518 = 10,68:1 — le jaune ne porte pas le texte, il passe derrière. `white-space:nowrap` PAR-DESSUS `box-decoration-break`, et les deux servent. Sans lui, la mesure de 46ch coupait la locution en deux et laissait un ou deux mots seuls sous un bout de bande : un surlignage qui se brise ne souligne plus rien. Elle est donc rendue insécable. MARGE VÉRIFIÉE APRÈS LE DÉPLACEMENT, car la nouvelle locution est la moitié plus longue que l'ancienne : 195 px de large dans une boîte de contenu de 288 px à 320 px de fenêtre, 231 px dans 464 px à 1280 px. Un seul fragment aux deux bouts, aucun débordement. La marge à 320 px n'est plus que de 93 px — c'est le point à re-mesurer si la formule s'allonge encore. `box-decoration-break` reste en place pour ce cas-là : le jour où la locution ne tiendra plus sur une ligne, elle se surlignera correctement sur deux au lieu de sortir nue. La graisse reste DM Sans 600 et non un font-weight sur Inter : le thème n'embarque qu'Inter 400/500 en woff2, un gras Inter serait synthétisé par le navigateur, ce que la doctrine polices du projet interdit. */ .chp__p mark{ background:linear-gradient(to top,var(--color-primary) .62em,transparent .62em); color:inherit;padding-inline:.1em;white-space:nowrap; font-family:var(--font-display);font-weight:600; -webkit-box-decoration-break:clone;box-decoration-break:clone} .hm-kicker{font-size:.6875rem;letter-spacing:.09em;font-weight:700;color:var(--color-gray);margin:0 0 .35rem} /* La bande de trois photos qui a remplacé le bloc de conditions. Trois colonnes à TOUTES les largeurs — c'est le parti pris : à 375 px chaque vignette fait ~110 px, assez pour se lire comme une frise de contexte, pas comme trois illustrations. Le `gap` est serré exprès, pour que les trois forment un objet et non trois vignettes posées côte à côte. */ .hm-bande{display:grid;grid-template-columns:repeat(3,1fr);gap:.375rem;margin-top:1.25rem} .hm-bande img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover; border-radius:var(--radius-sm);background:var(--color-gray-light)} /* « Le rail ». Le fil pointillé est tiré en `::before` sur chaque
, du bas de la pastille jusqu'au bas de l'item — la DERNIÈRE n'en porte pas, sinon le trajet continuerait dans le vide. Les pastilles font 44 px, la cible tactile du projet, même si rien n'est cliquable ici : c'est ce qui donne au rail son épaisseur lisible. La pastille d'arrivée passe en négatif — jaune sur noir plutôt que noir sur jaune. C'est l'arrivée, pas une quatrième étape, et ça se dit par un signe au lieu d'un mot de plus. Les deux sens valent 10,68:1, donc l'inversion ne coûte rien en lisibilité. */ .hm-steps ol{list-style:none;margin:0;padding:0} .hm-steps li{position:relative;padding-left:3.75rem;padding-bottom:1.75rem} .hm-steps li:last-child{padding-bottom:0} .hm-steps li::before{content:'';position:absolute;left:21px;top:46px;bottom:-2px;width:2px; background-image:repeating-linear-gradient(to bottom, var(--color-dark) 0 3px, transparent 3px 9px)} .hm-steps li:last-child::before{content:none} .hm-num{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%; display:grid;place-items:center;background:var(--color-primary);color:var(--color-dark); font-family:var(--font-display);font-weight:700;font-size:.9375rem} .hm-steps li:last-child .hm-num{background:var(--color-dark);color:var(--color-primary)} .hm-steps h3{margin-bottom:.25rem} .hm-steps p{margin:0;font-size:.9rem;color:var(--color-gray);max-width:46ch} /* Le fil PIVOTE : même pointillé, même épaisseur, sur l'axe horizontal. C'est ce pivot qui fait que le bureau et le mobile disent la même chose, au lieu d'une frise qui se replierait en liste. Le `right` négatif vaut exactement la gouttière, pour que le trait franchisse l'inter-colonne. */ @media (min-width:768px){ .hm-steps ol{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--space-md)} .hm-steps li{padding-left:0;padding-bottom:0;padding-top:3.75rem} .hm-steps li::before{left:52px;right:calc(var(--space-md) * -1);top:21px;bottom:auto; width:auto;height:2px; background-image:repeating-linear-gradient(to right, var(--color-dark) 0 3px, transparent 3px 9px)}} /* ══ NOS AVANTAGES — le style « pastilles » ══════════════════════════════════ */ .avp { background: var(--color-bg); } /* La respiration est le sujet : le bloc ouvre son padding vertical au-delà de `.hm-b` (écart assumé, même logique que le rail retenu pour les étapes — etapes-options.html:52). */ .avp { padding-block: clamp(2.5rem, 7vw, 4rem); } .avp h2 { text-align: center; margin-bottom: clamp(1.5rem, 4.5vw, 2.75rem); } /* --- Les six pastilles ---------------------------------------------------- MOBILE (< 768 px) : des RANGÉES — pastille à gauche, label à droite. La grille est plafonnée à 400 px et centrée : à 375 px elle occupe toute la largeur utile, au-delà elle ne s'étire pas en rangées filiformes. La pastille descend à 60 px sur mobile : six rangées de 80 px feraient ~100 px de plus sur un écran où le bloc doit rester une pause, et à 60 px le pictogramme de 28 px reste parfaitement lisible. DESKTOP (≥ 768 px) : des COLONNES centrées — 3 colonnes sur 2 rangs en tablette, les 6 en un seul rang à partir de 1024 px (à 1200 px de contenu, chaque colonne fait ~180 px : « Vidéosurveillance », le label le plus long, tient sur sa ligne à 0,875 rem). */ .avp__grid { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 1.1rem; max-width: 400px; } .avp__item { display: flex; align-items: center; gap: 1rem; } .avp__dot { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%; background: var(--color-primary); color: var(--color-dark); display: grid; place-items: center; /* L'ombre du socle, pas une ombre inventée : elle décolle le disque du fond — c'est elle qui fait « pastille » et pas « puce ». */ box-shadow: var(--shadow-card); } /* display:block corrige le vrai défaut, pas un décalage de mise en page : un
mêlant un (la pastille), du texte nu, un et encore du texte nu : en régime flex, CHAQUE suite de texte anonyme devient un élément flex à part entière, et la phrase se retrouvait éclatée en trois colonnes côte à côte, à TOUTES les largeurs, 375 px compris. C'était le seul défaut relevé par l'audit responsive qui se voyait sur téléphone. Le `gap` qui séparait la pastille du texte disparaît avec le flex : repris en `margin-right` sur la pastille. Celle-ci passe en `inline-block` — un nu est `inline`, donc `width`/`height` ne s'y appliquent pas et il serait rendu vide — et se cale par `vertical-align` plutôt que par le `margin-top` en em qui compensait l'alignement `flex-start`. */ .tc4-legend-fits { display:block; margin:0 0 var(--space-sm); font-size: var(--font-size-small); color: var(--color-gray); } .tc4-chip-demo { display:inline-block; vertical-align:-.1em; width:22px; height:14px; margin-right:.5rem; border-radius:999px; background: var(--color-primary-light); border:1px solid #F0E3B2; } /* ══════════════════════════════════════════════════════════════════════════ TUILES DE FORMATS — AJUSTEMENTS PROPRES À L'ACCUEIL (2026-08-28) Les tuiles (tvof) vivent dans tuiles.css, partagé avec la page Tarifs. Tout ce qui suit ne concerne QUE l'accueil et reste donc ici : home.css est enfilée après tuiles.css (cf. functions.php, chaîne de dépendances), donc à spécificité égale c'est cette feuille qui tranche. ══════════════════════════════════════════════════════════════════════════ */ /* --- DEUX ACTIONS PAR TUILE ------------------------------------------------ Le CTA unique « Ça m'intéresse » devient un couple : « Plus d'info » en jaune vers la page du format, « Appel » en fantôme vers le standard. `flex: 1 1 0` leur donne deux moitiés égales de la rangée ; la base de 14 rem héritée de tuiles.css les aurait empilés sous 28 rem de colonne, soit sur toute la plage mobile. `min-width: 0` empêche le contenu intrinsèque du bouton de rouvrir la rangée en dessous de sa part. */ .tvof-ctas .btn-primary, .tvof-ctas .btn-tertiary { flex: 1 1 0; min-width: 0; width: auto; margin: 0; padding-inline: .75rem; } /* Le combiné, repris du sprite de la page (#tvof-i-phone), au gabarit du callout sombre. `content: none` annule la flèche que custom.css colle après tout `.btn-tertiary` : une flèche annonce une navigation, or ce bouton décroche un téléphone. */ .tvof-cta-tel svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .tvof-cta-tel::after { content: none; } /* 768 → 1024 px : les trois cellules tiennent dans des colonnes de ~235 px, soit ~91 px par bouton, et « Plus d'info » y passait à la ligne — la rangée doublait de hauteur (48 → 64 px, mesuré à 768 px). On resserre le rembourrage et le corps du libellé. C'est du texte d'interface, pas du corps de page : le plancher de 16 px ne s'y applique pas. */ @media (min-width: 768px) and (max-width: 1023.98px) { .tvof-grid .tvof-ctas .btn-primary, .tvof-grid .tvof-ctas .btn-tertiary { padding-inline: .375rem; font-size: .875rem; } .tvof-grid .tvof-cta-tel { gap: .25rem; } .tvof-grid .tvof-cta-tel svg { width: 16px; height: 16px; } } /* --- SOUS 768 px : LA SECTION DES FORMATS SE RESSERRE ----------------------- La tuile du box faisait 816 px de haut à 375 px de large, soit un écran plein : on scrollait une page entière entre son en-tête et les visuels de la tuile suivante. Trois gestes, aucun retrait de contenu. 1. LA GOUTTIÈRE COMPTÉE DEUX FOIS. `.hm-b` pose déjà 16 px de marge latérale et 32 px verticale, et `.tvof-wrap` les repose par-dessus : 32 px de large mangés sur 375, et 64 px de blanc en haut comme en bas de la section. La tuile passe de 311 à 343 px de large, ce qui suffit à faire tomber `.tvof-usage` de 3 à 2 lignes et `.tvof-attrs` de 3 à 2. C'est le geste qui rend le plus, et il ne rétrécit rien. 2. La photo du box passe de 4/3 à 16/9 — 232 → 192 px. Le recadrage ne prend que du ciel et du bitume : les deux personnes, les portes et l'intérieur du box restent entiers (vérifié au rendu à 375 px). 3. Rembourrage du corps de tuile à 16 px au lieu de 24, et la liste d'arguments retrouve l'interligne commun des blocs. Aucune taille de police n'est touchée : celles de la tuile sont déjà posées par tuiles.css et cette passe ne les descend pas d'un pixel. Mesuré à 375 px : tuile 816 → 724 px (−92, −11 %), section 3038 → 2868 px (−170, −5,6 %). Les tuiles de cellule (442 px) tiennent déjà dans un écran et ne reçoivent rien de plus que la largeur gagnée au point 1. */ @media (max-width: 767.98px) { .tvof-section > .tvof-wrap { padding: 0; } .tvof-tile--lead .tvof-body { padding: var(--space-sm); } .tvof-tile--lead .tvof-media--photo { aspect-ratio: 16 / 9; } .tvof-tile--lead .tvof-attrs { margin-bottom: var(--space-xs); } }