/* Page Tarifs — la mise en page compacte des tuiles (variante `tvof-grid--4`). * * Cette feuille ne redessine AUCUNE tuile : la matiere (carte, photo, plan * isometrique, plaque prix, badges, CTA) vient de assets/css/tuiles.css, le * composant partage avec la home et la page Cellules. Ce fichier ne fait que * trois choses : * * 1. quatre colonnes au lieu de trois a partir de 768 px ; * 2. sous 768 px, la grille devient un CARROUSEL au doigt ; * 3. les consequences de 1 et 2 sur ce qui vit dans une tuile deux fois plus * etroite : la tuile s'empile au lieu de poser photo et plan cote a cote, * les cotes du plan grossissent, le CTA perd son padding de 2 rem. * * Chargee APRES tuiles.css (voir functions.php) : a specificite egale, c'est * l'ordre qui tranche. */ /* --- la section ------------------------------------------------------------ Pas de gabarit `.hm-b` ici : la page Tarifs n'a pas la charpente de la home, et `.tvof-wrap` fait deja le centrage et les marges. */ .tvof-section--compact .tvof-route { margin: 0 0 var(--space-sm); max-width: 62ch; color: var(--color-gray); } /* --- LA PISTE : carrousel sous 768 px, grille de quatre au-dessus ----------- `proximity` et JAMAIS `mandatory` — regle maison relevee sur le carrousel d'avis de la home : en mandatory le navigateur ramene tout scroll programme sur le point d'ancrage courant. Ici il n'y a pas de fleche (zero JS, l'affordance est la tuile coupee au bord droit), mais la regle vaut aussi pour le doigt : proximity laisse le geste libre. La geometrie, calculee avant d'etre dessinee. Sous 768 px la piste saigne bord a bord (marge negative qui annule le padding de `.tvof-wrap`, repris en padding de piste). Tuiles a 45 % du contenu de piste : a 375 px → contenu 343, tuile 154 px, gouttiere 10. 16 + 154 + 10 + 154 + 10 = 344 → la 3e tuile montre 31 px. C'est le compromis retenu : les DEUX premieres tuiles entieres, et un peek de 31 px — une vraie tranche de carte, bordure et photo comprises. */ .tvof-grid.tvof-grid--4 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 45%; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(-1 * var(--space-sm)); padding-inline: var(--space-sm); scroll-padding-inline: var(--space-sm); padding-top: 6px; /* l'ombre et le lisere du 45 m² ne se font pas rogner */ padding-bottom: 12px; /* idem vers le bas : l'ombre porte a 12 px */ } .tvof-grid.tvof-grid--4::-webkit-scrollbar { display: none; } .tvof-grid.tvof-grid--4 > * { scroll-snap-align: start; } @media (min-width: 768px) { /* GRILLE, PAS CARROUSEL, a partir de 768 px : les quatre tuiles tiennent (4 × 172 px a 768, 4 × 280 a 1232+), et un carrousel qui n'a rien a cacher n'est qu'une grille avec une barre de defilement en trop. La grille de quatre montre en plus la gradation des paliers d'un seul regard, ce qui est exactement le travail d'une page de prix. */ .tvof-grid.tvof-grid--4 { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-smd) var(--space-sm); overflow: visible; margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; } } /* --- la tuile, sous 768 px -------------------------------------------------- tuiles.css pose [photo | plan] sur deux colonnes sous 768 px : c'est juste pour une tuile pleine largeur, illisible dans 154 px (le plan tomberait a ~70 px de dessin et les cotes a 5 px). On applique donc des 0 px la colonne flex que tuiles.css reserve au desktop — et on resserre les paddings de 16 a 10 px, sans quoi le dessin perd un quart de sa largeur. */ @media (max-width: 767.98px) { .tvof-grid--4 .tvof-row { display: flex; flex-direction: column; padding: 0; } .tvof-grid--4 .tvof-row > .tvof-media { flex: none; align-self: stretch; border-radius: var(--tvof-r) var(--tvof-r) 0 0; } .tvof-grid--4 .tvof-row > .tvof-planbox { flex: none; margin: 8px 10px 0; } .tvof-grid--4 .tvof-row > .tvof-id { padding: 8px 10px 0; margin-top: 0; } .tvof-grid--4 .tvof-row > .tvof-rest { flex: 1 1 auto; padding: 0 10px; margin-top: var(--space-xs); } .tvof-grid--4 .tvof-row > .tvof-ctas { margin: 10px; } } /* --- le libelle du CTA tient sur UNE ligne ---------------------------------- « Ça m'intéresse ! » mesure ~118 px ; le bouton offre (tuile − 32 de marges − 2 × padding). Avec les 2 rem de padding du bouton de base, il faut une tuile de 214 px, soit une fenetre de 936 px : en dessous le libelle casse en deux lignes (vu a 768 px). Le padding tombe donc jusqu'a 1024 px, ou la tuile fait 236 px et reprend le gabarit commun. */ @media (max-width: 1023.98px) { .tvof-grid--4 .tvof-ctas .btn-primary { padding-inline: .5rem; font-size: .9375rem; } } @media (max-width: 767.98px) { .tvof-grid--4 .tvof-ctas .btn-primary { padding-inline: .375rem; } } /* --- les quatre panneaux de plan a la meme hauteur --------------------------- Les quatre dessins n'ont pas le meme viewBox (166, 176, 164 et 168 unites de haut pour 272 de large) : a hauteur libre, les badges et les titres des quatre tuiles se decalent de ~12 px les uns des autres. On fixe donc le panneau au rapport du plus haut — le 45 m² — et les trois autres se centrent dedans. Aucun dessin n'est deforme : le SVG garde sa hauteur naturelle. */ .tvof-grid--4 .tvof-planbox { aspect-ratio: 272 / 180; } /* --- le cadrage de la photo du box ------------------------------------------ Les trois cellules ont leur `object-position` dans tuiles.css. Le box, lui, y est en 4/3 pleine largeur (`--photo`) parce que la home lui donne un gabarit developpe ; ici il rentre dans le rang en 6/5 comme les autres, d'ou ce seul reglage de cadrage. */ .tvof-media--box > img { object-position: 50% 45%; } /* --- les cotes des plans ---------------------------------------------------- Le texte d'un SVG a viewBox suit l'echelle du dessin : corps rendu = font-size × largeur du plan / 272. Le plan est plafonne a 240 px et la largeur reelle change par regime — d'ou une font-size par regime, calee sur la cible 9,5-12,5 px : < 600 px : plan ~124 px → 22 u = 10,0 px 600-767 : plan 226-240 → 14 u = 11,6-12,4 px 768-899 : plan 130-158 → 20 u = 9,6-11,6 px 900-1023 : plan 158-186 → 16 u = 9,3-10,9 px >= 1024 : plan 186-238 → 14 u = 9,6-12,2 px */ .tvof-grid--4 .tvof-ct { font-size: 22px; } @media (min-width: 600px) { .tvof-grid--4 .tvof-ct { font-size: 14px; } } @media (min-width: 768px) { .tvof-grid--4 .tvof-ct { font-size: 20px; } } @media (min-width: 900px) { .tvof-grid--4 .tvof-ct { font-size: 16px; } } @media (min-width: 1024px) { .tvof-grid--4 .tvof-ct { font-size: 14px; } } /* Le plan du BOX porte ses cotes tres loin du dessin : le « 2,40 m » est ancre a 66 unites du bord gauche du viewBox. Au-dela de ~19 u, le texte sort du cadre et le SVG le rogne (vu au rendu a 375 px, ou le « 2 » disparaissait). D'ou un plafond propre a ce plan-la, regime par regime. */ .tvof-grid--4 .tvof-planbox--box .tvof-ct { font-size: 18px; } @media (min-width: 600px) { .tvof-grid--4 .tvof-planbox--box .tvof-ct { font-size: 14px; } } @media (min-width: 768px) { .tvof-grid--4 .tvof-planbox--box .tvof-ct { font-size: 18px; } } @media (min-width: 900px) { .tvof-grid--4 .tvof-planbox--box .tvof-ct { font-size: 16px; } } @media (min-width: 1024px) { .tvof-grid--4 .tvof-planbox--box .tvof-ct { font-size: 14px; } } /* --- « /mois TTC » ne se coupe pas en deux ---------------------------------- Dans une colonne de 134 px la mention ne tient pas a cote du chiffre : elle doit descendre d'une piece, et non casser entre « /mois » et « TTC ». */ .tvof-grid--4 .tvof-price span { display: inline-block; white-space: nowrap; }