/* ============================================================ Logotype Danigo Hospitality — en-tête et pied de page 16/09 ------------------------------------------------------------ Le nom reste ecrit en TEXTE dans le HTML, masque visuellement. Remplacer un nom de marque par une simple image lui ferait perdre son referencement et le rendrait muet aux lecteurs d'ecran : l'image est donc decorative, alt vide, et le texte porte l'information. Les PNG sont detoures depuis les fichiers generes. Fond reel mesure a (6,7,7), pas (9,11,12) comme l'annonce la charte : c'est cette mesure qui a permis un seuil propre. Pour tout annuler : retirer le des six pages et rendre son texte visible a .nav-brand / .footer-logo a. ============================================================ */ /* Masquage accessible : hors de l'ecran mais lu par les lecteurs d'ecran et indexe par les moteurs. display:none le supprimerait des deux. */ .logo-nom{ position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- Le verrou de l'en-tete ------------------------------------------- 16/09. La rosette et le mot etaient fusionnes dans un seul PNG : leur ecart, leur alignement et leurs tailles respectives etaient cuits dans l'image, impossibles a corriger depuis le CSS, et une seule contrainte de hauteur s'appliquait aux deux. D'ou un verrou trop grand, mal aligne et rogne. Deux images distinctes, alignees en flex : chaque dimension se regle ici, l'alignement vertical est garanti par align-items, et plus rien ne peut etre coupe. */ .nav-brand{ display: inline-flex; align-items: center; /* L'ecart se regle ici, il n'est plus cuit dans le fichier. */ gap: clamp(0.4rem, 0.7vw, 0.6rem); line-height: 0; /* Sans cela le verrou se comprime quand la barre se resserre : un element flex retrecit par defaut. */ flex: 0 0 auto; } /* La rosette porte un trait fin, donc moins d'encre que les lettres pleines. Elle a besoin d'etre un peu plus haute pour peser pareil, sans culminer au-dessus des capitales. Relevee le 16/09 avec l'arrivee de HOSPITALITY : elle ne fait plus face a un mot mais a un bloc de deux lignes, d'environ 29px de haut au lieu de 15. A l'ancienne taille elle flottait au milieu d'un bloc deux fois plus grand qu'elle. */ .nav-brand .nav-marque{ display: block; block-size: clamp(1.4rem, 2.05vw, 1.82rem); inline-size: auto; } /* --- Les deux lignes du nom -------------------------------------------- 16/09. HOSPITALITY passe sous DANIGO. Les deux mots sont empiles dans .nav-lockup, centres l'un sur l'autre comme dans le verrou d'origine. Le fichier vient de v5-etoile-contour-os.png, la generation 1024x1024 complete, et NON de footer-danigo-etoile-os.png : ce dernier est coupe en bas, l'encre y atteint l'alpha 255 sur sa derniere ligne. Meme defaut que la rosette, meme cause. Le mot extrait fait 501x39 et ne touche aucun bord. */ .nav-lockup{ display: flex; flex-direction: column; /* center : c'est l'alignement du verrou d'origine, ou HOSPITALITY est centre sous DANIGO et non cale a gauche. */ align-items: center; gap: clamp(0.18rem, 0.3vw, 0.28rem); line-height: 0; } .nav-brand .nav-mot{ display: block; block-size: clamp(0.72rem, 1.05vw, 0.95rem); inline-size: auto; } /* Proportion assumee, et differente du verrou d'origine. Mesure sur la generation : DANIGO fait 841px de large, HOSPITALITY 497, soit 59 %. A la taille de l'en-tete, ou DANIGO plafonne a 15px de haut, ces 59 % donneraient des capitales de 4px : illisibles. On monte donc a environ 82 % de la largeur de DANIGO. C'est l'ajustement optique habituel d'un verrou en petit : la ligne secondaire est elargie pour rester lisible. Le fichier n'est jamais deforme, seule sa taille change, hauteur et largeur ensemble. La hauteur ci-dessous est celle de la BOITE, bords adoucis compris : les capitales visibles occupent environ 77 % de cette valeur, soit a peu pres 7px au maximum. */ .nav-brand .nav-baseline{ display: block; block-size: clamp(0.44rem, 0.64vw, 0.58rem); inline-size: auto; } .footer-logo{ line-height: 0; } .footer-logo a{ display: inline-flex; align-items: center; } /* Le verrou du pied est sur trois niveaux : mot, barre a l'etoile, puis HOSPITALITY en petit. Il lui faut donc plus de hauteur qu'a l'en-tete, sinon la ligne du bas devient illisible. NOTE MARQUE : la rosette centrale evoque le macaron Michelin. Thomas est bien etoile, l'affirmation est vraie, mais le macaron est une marque deposee dont Michelin encadre l'usage. Integration demandee par Alexis le 16/09/2026 apres avoir ete informe du risque. A faire valider avant mise en ligne. Variante retenue le 16/09 : rosette en os, plus lisible en petit. Retrait = remettre footer-danigo.png, deja detoure. */ .footer-logo img{ display: block; block-size: clamp(3.4rem, 5.5vw, 4.6rem); inline-size: auto; } /* Sous 820px la barre se resserre : le logotype doit maigrir avec elle, sinon il pousse le bouton menu hors de l'ecran. */ @media (max-width: 820px){ .nav-brand .nav-marque{ block-size: 1.3rem; } .nav-brand .nav-mot{ block-size: 0.66rem; } .nav-brand .nav-baseline{ block-size: 0.4rem; } .nav-lockup{ gap: 0.16rem; } .footer-logo img{ block-size: 2.4rem; } } /* Sous 420px, HOSPITALITY disparait. Ses capitales tomberaient a moins de 5px, ou l'on ne lit plus un mot mais une trame grise, et le verrou doit laisser la place au bouton menu. DANIGO et la rosette suffisent a identifier la marque ; le nom complet reste dans le texte masque, donc rien n'est perdu pour les lecteurs d'ecran ni pour les moteurs. */ @media (max-width: 420px){ .nav-brand .nav-baseline{ display: none; } .nav-brand .nav-marque{ block-size: 1.05rem; } } /* --- Prechargeur -------------------------------------------------------- Le nom y etait ecrit en dur. Il devient le logotype, avec le meme principe qu'ailleurs : image decorative, nom conserve en texte masque. .loader-name portait un style typographique qui n'a plus d'objet. */ .loader-name{ line-height: 0; } .loader-name img{ display: block; block-size: clamp(1.6rem, 3vw, 2.4rem); inline-size: auto; margin-inline: auto; } /* --- Favicon ------------------------------------------------------------ NOTE MARQUE : l'icone est la rosette seule, extraite du verrou. C'est l'usage le plus expose de cette forme, puisqu'elle represente la marque sans le nom a cote. Meme reserve que pour le verrou : a faire valider avant mise en ligne. Repli tout pret : arc-symbole.png, qui n'evoque aucune distinction et fonctionne aussi bien en petit. */