/* ==================================================================== Lisibilité des textes ==================================================================== Cormorant Garamond est une police d'affichage : ses pleins et déliés sont très contrastés, les déliés quasi filiformes. Superbe à 50 px, elle devient fragile sous 16, et le site l'employait en graisse 300 - la plus fine - jusque sur des titres de 26 px, avec des boutons et un pied de page à 12. Relevé le 26/10/2026 : la graisse 500 était demandée par deux règles alors qu'elle n'était pas chargée ; le navigateur retombait sur la 400 ou la fabriquait. Elle est désormais chargée, et la 300 ne l'est plus. Cette feuille est chargée en dernier sur toutes les pages : elle n'a donc pas besoin de sélecteurs alambiqués pour l'emporter sur les réglages d'origine, qui restent lisibles là où ils sont. ==================================================================== */ /* ---------- 1. Plus aucun texte en graisse 300 ---------- */ .accroche,.hero .accroche, .entete h1,.interne h1, .fiche h2,.bande h2,.legal h2,.plan h1, .hub__titre,.univers__titre{font-weight:400} /* ---------- 2. Le texte courant prend du corps ---------- On monte d'un demi-point de graisse plutôt que de grossir : à 500, les déliés de Cormorant cessent de disparaître sur un fond clair. */ .fiche p,.legal p,.entete__chapo,.bande__p,.contact__intro p, .voie p,.tuile__nom,.zone span,.fiche__liste,.plan__bloc a{font-weight:500} .fiche p:not(.fiche__liste),.legal p{font-size:clamp(1.05rem,1rem + .25vw,1.22rem)} .entete__chapo{font-size:clamp(1.06rem,1.02rem + .26vw,1.24rem)} .bande__p{font-size:clamp(.95rem,.88rem + .35vw,1.18rem)} /* ---------- 3. Les petites capitales ---------- Interlettrées, elles se délitent vite : il leur faut de la graisse et un corps plancher. Elles passaient de 11,2 à 12 px selon l'écran. */ .micro{font-weight:600} .btn,.btn--hero,.btn--fleche,.form button, .retour .micro,.flottant--contact, .actions-hero .tel,.entete .tel,.interne__tel .tel{ font-size:clamp(.86rem,.8rem + .26vw,.98rem); font-weight:600; } .entete__oeil,.bande__oeil,.section__titre, .services .univers__titre,.univers__titre{font-weight:600} /* ---------- 4. Le pied de page ---------- C'était le texte le plus petit du site, 11,2 px en graisse 500 non chargee, donc rendue en 400. */ /* Les corps du pied grandissent avec l'écran : au plus juste sur téléphone, confortables sur un grand moniteur, où 14 px paraissaient maigres au milieu de tout cet espace. */ .pied h2{font-size:clamp(.88rem,.8rem + .3vw,1.02rem);font-weight:600} .pied ul a,.pied__zones,.pied__zones a,.enfilade a{ font-size:clamp(.9rem,.81rem + .36vw,1.1rem);font-weight:500; } .pied__menu a{font-weight:500;font-size:clamp(.9rem,.78rem + .45vw,1.14rem)} .pied__legal,.pied__bas,.pied__marque + *{font-size:clamp(.84rem,.78rem + .24vw,.98rem)} /* ---------- 5. L'accroche de l'accueil ---------- Essayee a 40 px, jugee trop grosse par Ahmet le 26/10/2026 : elle revient a ses 26 px d'origine. Elle garde en revanche la graisse 400, la 300 etant trop fine pour ce corps-la. */ .hero .accroche{font-size:26px} /* ---------- 6. Les très petits écrans ---------- L'accueil tient sur un seul écran : en grossissant les textes, il débordait de 39 px sur un 360 x 780 et de 89 px sur un 320 x 650. On y resserre juste ce qu'il faut, sans redescendre sous les seuils qui rendaient le site illisible : 14 px pour le texte, 13 pour les petites capitales. */ @media (max-width:380px){ .page-v6{--respiration:clamp(.9rem,2.2vh,1.5rem)} .hero .accroche{font-size:clamp(1.25rem,1.05rem + 1.1vw,1.55rem);line-height:1.25} .bande__p{font-size:14px;line-height:1.4} .fiche p:not(.fiche__liste),.legal p{font-size:16px} .entete__chapo{font-size:16px} } @media (max-width:380px) and (max-height:700px){ .hero .accroche{font-size:1.2rem} .bande__p{font-size:13.5px;line-height:1.35} .page-v6{--respiration:.75rem} } /* ==================================================================== Pied de page : moins d'air perdu ==================================================================== Mesuré le 26/10/2026 : 726 px de haut sur ordinateur, 1281 px sur téléphone - plus d'un écran et demi pour cinq listes de liens. Le gaspillage venait de trois endroits : un remplissage haut de 72 px, des écarts de 44 à 48 px entre les quatre blocs, et une grille dont les colonnes exigeaient 13 rem, donc une seule colonne sur téléphone. On resserre les écarts et on laisse deux colonnes passer sur téléphone. Les cibles tactiles gardent leurs 44 px : c'est la hauteur des liens, pas l'espace entre eux, et elle ne se négocie pas. ==================================================================== */ .pied{padding:clamp(1.6rem,3.6vw,2.8rem) var(--marge) 1.4rem} .pied__menu{margin-bottom:1.5rem;padding-bottom:1.1rem} /* 9,5 rem au lieu de 13 : deux colonnes tiennent dès 340 px de large. */ .pied__grille{ grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr)); gap:1.4rem clamp(1rem,3vw,3rem); } .pied h2{margin:0 0 .5rem} .pied ul{gap:.25rem} .pied__zones{margin-top:1.5rem;padding-top:1.1rem} .pied__zones h2{margin:0 0 .5rem} .pied__bas{margin-top:1.4rem;padding-top:1rem} /* Les deux boutons de l'accueil tenaient côte à côte quand ils étaient en 12 px ; en 13,8 ils passaient l'un sous l'autre sur un écran de 375 px, ce qui coûtait une ligne. On resserre le remplissage latéral, pas le texte : la cible tactile garde ses 44 px de haut. */ @media (max-width:430px){ .actions-hero{gap:.6rem} .actions-hero .btn--hero{padding-inline:1.15rem} .actions-hero .tel{padding-inline:.9rem;letter-spacing:.08em} } /* Sur téléphone, le menu du pied passe sur trois lignes et les filets de séparation se retrouvent en début de ligne, suspendus dans le vide. On les remplace par de l'espace, et on resserre l'interlettrage pour que deux entrées tiennent par ligne au lieu d'une. */ @media (max-width:560px){ .pied__menu ul.enfilade li + li::before, .pied__zones ul.enfilade li + li::before{display:none} /* la regle d origine est en « .pied ul.enfilade », il faut au moins autant de poids pour la remplacer */ .pied__menu ul.enfilade{gap:0 clamp(1rem,5vw,1.8rem)} .pied__zones ul.enfilade{gap:0 clamp(.9rem,4vw,1.5rem)} .pied__menu a{letter-spacing:.14em} .pied h2{letter-spacing:.16em} } /* ---------- Interlignes des listes du pied ---------- Les liens du pied montaient à 44 px de haut au doigt : c'est la cible tactile de confort recommandée par Apple, mais le minimum exigé par WCAG 2.2 (critère 2.5.8, niveau AA) est de 24 px. À 34 px on reste largement au-dessus, et les listes cessent de s'étirer : dix pixels gagnés par lien, onze liens, soit cent dix pixels de pied en moins sur téléphone. */ @media (pointer:coarse){ .pied ul a,.pied__zones a{min-height:34px} .pied__menu ul.enfilade a{min-height:40px} } .pied ul{gap:.15rem} /* ---------- Rangée du menu, en haut du pied ---------- Le menu était collé au bord droit. Il se centre maintenant dans la place qui reste à droite du logo : son milieu tombe donc un peu à droite du milieu de la rangée, d'autant plus que le logo est grand. La règle vit ici parce que « .pied ul.enfilade{margin:0} », plus bas dans summit.css, annulait la marge automatique. */ .pied__menu ul.enfilade{margin-inline:auto} @media (max-width:600px){ .pied__menu ul.enfilade{margin-inline:0} } /* La tuile « Expérience d'exception » a sa propre photo depuis le 26/10/2026 : un pont de yacht au coucher du soleil, fourni par le client. Elle ne partage plus le visuel d'ambiance « terrasse ». */ .tuile .v-exception{background-image:url("../assets/img/experience-exception-800.jpg")} /* Le logo WhatsApp est une forme pleine, alors que l'ancien combiné était dessiné au trait : sans cette règle il sortirait en contour creux sur le bouton flottant. */ /* Le logo WhatsApp porte ses propres attributs de tracé, parce que les règles plus hautes visent le et réglaient le combiné, qui était un dessin au trait. Il ne reste donc ici que sa taille : plus grande que celle du combiné, son trait étant plus fin. */ /* La taille doit passer devant « .actions-hero .tel svg » et ses deux soeurs, écrites pour le combiné : d'où les sélecteurs au complet. */ .actions-hero .tel .picto-wa, .entete .tel .picto-wa, .interne__tel .tel .picto-wa{width:18px;height:18px;flex:0 0 auto} .flottant--tel .picto-wa{width:22px;height:22px} /* Sur l'accueil, et sur grand écran seulement, le logo est mis à la hauteur du numéro : le dessin ne remplit que 82 % de son cadre, d'où les 23 px qui donnent une bulle de 19 px, exactement la hauteur de la ligne de chiffres. Un logo au trait paraît toujours plus petit qu'un texte plein à taille égale, et le bouton de l'accueil est le seul assez grand pour le porter. */ @media (min-width:820px){ .page-v6 .actions-hero .tel .picto-wa{width:23px;height:23px} }