/* ============================================================================= MT CUISINE — site.css FEUILLE DE STYLE UNIQUE DU SITE ----------------------------------------------------------------------------- Fichier : /wp-content/uploads/mtc/site.css Charge par : extrait WPCode 273 « Mtc chargement conditionnel », sur TOUTES les pages, sans condition. Le numero de version est la date de modification du fichier (filemtime) : le cache navigateur se rafraichit tout seul a chaque enregistrement. NE JAMAIS VERSIONNER LE NOM DU FICHIER — le lien ne doit jamais casser. Livraison : L43 du 29/09/2026 (numero de suivi unique, voir « Claude outputs\CODE-SITE\JOURNAL-DES-LIVRAISONS.md ») L43 touche site.css seul ; site.js reste celui de L38. Derniere modif. : 29/09/2026 (v27.30) · UN POINT. Heros de service sous 690 px : les regles v27.26 et v27.29 (photo dans le flux, fond photo, voile, z-index) ne s'appliquent qu'aux heros qui portent le jeton --mtc-hero-photo ; sans jeton, le hero est celui d'avant la v27.26. Rapport 280. 29/09/2026 (v27.29) · QUATRE POINTS. Cuisine sur mesure, liste « Ce qui fait la difference » en texte fluide sur une colonne ; reperes du socle revele a 16 px (paliers 15 et 14) et legendes a 15 ; air egal au-dessus et en dessous des valeurs du socle statique ; fond photo et voile des heros de service sous 690 px, actives par le jeton --mtc-hero-photo que PAGES pose en ligne. Rapport 276. 29/09/2026 (v27.28) · UN POINT. Socle du volet statique : retour aux colonnes egales de la v27.26 (filet au centre), et sous 480 px les deux valeurs passent de 25,6 a 22 px, sur une ligne. Rapport 273. 29/09/2026 (v27.27) · TROIS POINTS. Socle du volet statique (1024 px et moins) : colonnes a la largeur de leur contenu, centrees, chaque valeur sur une ligne. Pages de service : un h3 qui suit un paragraphe recoit 40 px au-dessus. Bloc Conseils de l'accueil : trois colonnes jusqu'a 1024 inclus, puis une (le nombre de colonnes des blocs realmt passe par le jeton --realmt-cols, deux !important en moins, un en plus : 95). Rapport 272. 29/09/2026 (v27.26) · TROIS POINTS. Le socle du hero, sur ses deux copies : deux chiffres de meme structure, valeur au-dessus de sa legende, « Sur rendez-vous » a la taille de « 90 % », deux colonnes egales ; un cran au-dessus sur ordinateur (32 / 14 / 13,4 px), tailles d'aujourd'hui sous 800 px de haut et sur telephone. Hero des pages de service sous 690 px : la photo passe dans le flux sous les boutons, cadre 3/2, sans voile. Regles .mtcw-prix retirees. Rapport 271. 25/09/2026 (v27.24) · UN POINT. Sous 690 px, les fleches de TOUS les diaporamas (.mtc-art-diapo : fiches, articles, A propos, Cuisine sur mesure, Contact) sortent du cadre et se posent en rangee centree sous la legende, 44 px, 16 px d'ecart, bande de vignettes en dessous. Les avis (accueil et pages services) etaient deja conformes : rien touche. Rapport 267. 25/09/2026 (v27.23) · TROIS POINTS. Sous 690 px, les deux fleches du carrousel de la categorie Realisations sortent du cadre et rejoignent la rangee du compteur, de part et d'autre. Sur Contact, les portraits de Mathieu et Thomas disparaissent sous 1200 px, des que l'affichage est superpose. « Email » de la barre mobile ouvre le formulaire de Contact (site.js). Rapport 266. 25/09/2026 (v27.22) · UN POINT. La bande de vignettes du diaporama ne s'etire plus : bornes de taille de la v27.12, une rangee centree, plafonds 8 / 6 / 4 retablis dans site.js. Rapport 264. 25/09/2026 (v27.21) · CINQ POINTS. Le socle du hero entre dans le flux du volet revele, en bande compacte, et le volet s'ancre au-dessus de « Continuer votre navigation » sous 1 000 px de haut : mesure a 1366 x 768, 1440 x 900 et 1920 x 1080, 16 px d'air partout. Le diaporama du showroom d'A propos est borne a la largeur d'une vue paysage, centre. Le bouton de la methode apparait a 90 % de la course. Rapport 262. 25/09/2026 (v27.20) · QUATRE POINTS. Les cinq sections de l'accueil s'epinglent ENFIN : un element collant ne se deplace que dans la boite de contenu de sa zone, et le rembourrage bas n'en fait pas partie ; la course devient un pseudo-element de 440 px, fixe et identique. site.js calcule la progression sur cette course, p = 1 au decrochage exact. Le socle du hero se dedouble, une copie par volet. Les cinq figures de la salle de bain passent au portrait 4/5 en deux colonnes. Un seul CTA de fin par page, releve fait (rapport 257). 25/09/2026 (v27.19) · RETOUR ARRIERE SUR LE POINT 1 DE LA L31. L'epinglage des cinq sections de l'accueil est retabli a l'identique : la course collante pilotait les animations, la retirer retirait la choregraphie. A la place, la course MORTE est coupee sur les deux seules zones qui en ont, .mtcs-scroll et .mtcr-scroll, et leur animation occupe desormais la course entiere au lieu de 72 %. L'animation garde au moins autant de defilement qu'avant. Le reste de la L31 est intact : socle du hero, cartes, bande de vignettes, pictogrammes, exclusivite du CTA (rapport 254). 25/09/2026 (v27.18) · QUATRE POINTS DU PILOTE. Le procede ne reste que sur le hero : les cinq autres zones repassent en defilement normal, residu zero, animations d'apparition conservees par le chemin observateur qui existait deja. La page perd 2 978 px a 1920 et 2 393 a 1440 ; le telephone ne bouge pas d'un pixel. La bande de vignettes calcule son nombre de tuiles et remplit la largeur. Le socle du hero est prepare pour son entree dans le hero, pictogrammes redessines. Exclusivite du CTA de fin sur les articles (rapport 253). 25/09/2026 (v27.17) · QUATRE POINTS DU PILOTE. Le socle du hero recoit son style, qu'il n'avait pas du tout : trois chiffres sur une rangee et quatre reperes sur une ligne, de 424 px a 234. Les cinq zones de defilement de l'accueil passent au meme regime, course bornee et identique : la page perd 1 529 px. Les deux portraits de « Qui sommes-nous » se superposent enfin, la legende de la premiere passant en haut, le seul cote que la seconde ne couvre jamais (rapport 252). 25/09/2026 (v27.16) · DERNIER LOT AVANT MISE EN LIGNE. Sept points. Accueil : la hauteur de la zone Realisations derive du contenu et non plus de la fenetre. Tout le site : les fleches passent a 40 px, leur survol ne les deplace plus, et leur centrage quitte transform pour translate. Fiches et A propos : la hauteur du diaporama devient constante au-dessus de 690 px. Telephone et tablette : une barre d'action fixe a quatre entrees. Articles et categories : le CTA de fin, pose par extrait PHP. Coordinations PAGES : composition a deux photos sur l'accueil, pictogramme de lecture retire de la boucle Arredo3 et ouverture au clic retablie (rapport 251). 25/09/2026 (v27.15) · CORRECTIF. Le diaporama des fiches et du showroom d'A propos s'effondrait a la plus petite derivee : la regle posee en v27.14 laissait les DEUX axes automatiques, donc sans rapport applique, et site.js mesurait pour sizes une largeur qui dependait elle-meme de sizes. La hauteur devient l'axe determine, la largeur en decoule. Ajout d'une porte de sortie « sans-collant » sur les duos de colonnes collantes (rapport 248). 25/09/2026 (v27.14) · SEPT POINTS DU RETOUR CLIENT. Accueil : les trois portraits de « Qui sommes-nous » recomposes dans un cadre, colonne photo a la hauteur exacte du texte ; titres de « Nos univers » alignes par une hauteur de description reservee ; survol des cartes Realisations rendu au CSS par la propriete translate. Tout le site : la colonne la plus courte d'un duo se cale en haut et passe en collant, regle mesuree a chaque chargement. Dressing : le bouton professionnel passe sous le texte. Fiches : le cadre du diaporama prend le rapport de la photo affichee, plus aucun rognage, et sizes suit la largeur reelle du cadre (rapport 247). 24/09/2026 (v27.13) · SIX POINTS DU RETOUR CLIENT, seconde serie. Accueil : le savoir-faire prend la largeur utile de la page. Cuisine sur mesure : pictogramme de lecture sur la video Arredo3 et phrase transformee en bouton secondaire. Contact : espacement sous les portraits des cogerants. Tout le site : les fleches des carrousels deviennent un disque plein dore au chevron noir, jetons du bouton d'action principal. Cartes a image en tete : image a fleur de bord, arrondi haut, arc bas, numero sorti de la photo. TROIS DECLARATIONS RETIREES de la passe v27.11.14, voir le commentaire sur place (rapport 246). 24/09/2026 (v27.12) · LOT DE SEIZE POINTS DU RETOUR CLIENT. Accueil : portraits visibles sur telephone, troisieme portrait pose, hauteur de zone qui suit le contenu, savoir-faire en trois colonnes, voile des univers au repos, cartes en 4/5. Fiches : bande de vignettes sur une rangee, fleches du diaporama, texte des blocs seuls recentre. Categorie Realisations : carrousel en fondu a trois projets. Cuisine sur mesure : fenetre video, titres des cartes alignes. Contact : portraits agrandis. Murs de logos : une rangee, bas centre. RETIRE dans la meme passe : les 13 regles du module de prix de l'accueil, devenues sans objet (ce module appartient au cowork PRIX depuis le 24/09), et la regle de largeur de la boucle de marque posee en v27.11.19 (rapport 242). 23/09/2026 (v27.11.19) · CUISINE SUR MESURE : la boucle de marque Arredo3 occupe toute la largeur de son bloc. Trois declarations, aucun effet hors des pages services (rapport 231). CES REGLES SONT RETIREES en v27.12. 23/09/2026 (v27.11.18) · ACCUEIL SUR TELEPHONE : fondu ramene de 0,8 s a 0,35 s et decalage d'entree de 22-30 px a 10 px sous 900 px ; respiration verticale resserree sous 600 px ; defilement lisse neutralise sous 900 px. Retour client « transitions brutes et noires » (rapports 229 et 230). Aucun effet au-dessus de 900 px, mesure. 23/09/2026 (v27.11.17) · CONTACT : les portraits passent a cote du chapeau au-dela de 1200 px. Bloc ecrit par le cowork PAGES, livre en fragment separe sous le numero 16, renumerote 17 a la fusion (rapport 227). 23/09/2026 (v27.11.16) · accueil, bloc « Ce qui compose le prix » : six photographies du showroom sous la legende des postes (extrait 1246). 23/09/2026 (v27.11.15) · Contact, largeur du duo dans le bloc de demande ; variables du cadre dore declarees a la racine ; separateurs des piliers sur telephone ; galerie de la categorie Realisations ; diaporama des fiches. 22/09/2026 (v27.11.14) · voile du haut de l'accueil mobile allege de 25 % et dore eclairci dans ce bloc ; cartes a photo dominante (Cuisine, A propos) ; page Contact prete pour le deplacement des portraits ; retrait des deux regles qui visaient le module de demande. 22/09/2026 (v27.11.13) · precedent / suivant empiles sur telephone ; accueil mobile, air sous les boutons du haut. Bloc en fin de fichier. 22/09/2026 (v27.11.12) · rapport 212 : marges entre sections collees de l'accueil, pictos de la methode, descriptions des cartes sur ordinateur, recapitulatif du formulaire sur mobile, precedent / suivant, cadrage et piliers du haut de l'accueil mobile. Bloc en fin de fichier. 21/09/2026 (v27.11.11) · Cuisine sur mesure : sous-titre .mtc-art-sous-titre au-dessus du bandeau photo des collections. Bloc en fin de fichier. 21/09/2026 (v27.11.10) · accueil : voile du hero mobile et tablette renforce (surtitre lisible sur la photo 458) ; legendes du bloc chiffres alignees au-dela de 1024 px (rapport 205 §15-16). 21/09/2026 (v27.11.9) · realisations : retrait de la regle d'essai « galerie en haut » de Seilh, la galerie est desormais placee dans le HTML des fiches (rapport 205 §12). 21/09/2026 (v27.11.8) · Contact : role et telephone des deux cogerants alignes (rapport 205 §6). Bloc en fin de fichier. 21/09/2026 (v27.11.7) · retour client en captures : A propos, telephone aligne au pied des deux cartes des cogerants ; fiche realisation de Seilh, galerie remontee en haut, a l'essai (rapport 205). Bloc en fin de fichier. 18/09/2026 (v27.11.5) · methode de l'accueil : la mise en avant de l'etape active est SUPPRIMEE. Les quatre cartes sont dessinees a l'identique, sans filet, sans ombre, sans voile et sans agrandissement (rapport 167 §17). 18/09/2026 (v27.11.4) · methode de l'accueil : la mise en avant de l'etape active passe au filtre, au numero dore et a un filet ; plus aucun recouvrement (rapport 167 §16). 18/09/2026 (v27.11.3) · accueil : hero adapte aux fenetres basses (defauts a et b du client), deux lignes reservees au titre des etapes de la methode (defaut c), et retrait de la famille morte .mtc-photo-attente (rapport 167 §15). 17/09/2026 (v27.11.2) · univers de l'accueil : palier des 2 colonnes porte de 640 a 650 px (rapport 167 §14). 17/09/2026 (v27.11.1) · univers de l'accueil, 640 a 900 px : la 5e carte est centree, a la taille des autres (rapport 167 §14). 17/09/2026 (v27.11) · grille des univers de l'accueil a 5 cartes : 5 colonnes des 1025 px, 3 + 2 de 901 a 1024 px, 2 + 2 + 1 de 640 a 900 px, une colonne en dessous (rapport 167 §13). Bloc « PASSE v27.11 » en fin de fichier, actif seulement avec 5 cartes. 17/09/2026 (v27.10.2) · CORRECTIF 1 (eventail) etendu de 900 a 1024 px : la photo 2 n'est plus decalee entre 901 et 1024 px (rapport 167 §12). 17/09/2026 (v27.10.1) · hero du dressing : sous 1024 px, le texte passe au-dessus de la photo, le titre reste dans le premier ecran (rapport 167 §11). 17/09/2026 (v27.10) · rapport 167 §10 : ancre #rendez-vous de la page contact, avec sa propre valeur (filet dore a 32 px sous l'en-tete) ; hero du dressing en cadre portrait (montage (c) du 153 §5). Voir le bloc « PASSE v27.10 » en fin de fichier. 17/09/2026 (v27.9) · passe espacements, rapport 167 : Bureaux du dressing (ecart du bouton, colonne de texte centree, premier chapeau), contact (encart « Ce qui se passe ensuite » detache du titre et en trois colonnes, module de rendez-vous aligne sur son en-tete, gras du bloc Rendez-vous equilibre, ancres), accueil (ecart titre et cartes des Conseils, ecart sous le titre du module prix). Code mort retire : formulaire Kadence (bloc C), widget Calendly (bloc G et ses paliers), ancien schema .mtcw-prix-* (v27.7). Voir le bloc « PASSE v27.9 » en fin de fichier. 28/08/2026 (v3.3) — fiches realisations : les pieces de la carte restent des blocs meme en , pour permettre au balisage de sortir les blocs du lien. Voir le rapport 76. 28/08/2026 (v3.2) — fiches realisations : le voile des cartes de bas de page revient a celui du socle ; a 92 % il formait une bande grise au lieu d'un degrade. 28/08/2026 (v3.1) — fiches realisations : le texte des cartes de bas de page est visible sans survol, la colonne de texte devient collante sur ordinateur, le haut de fiche est centre. Voir le rapport 74. 28/08/2026 — SECTION 9, articles et fiches realisations : mise en page deux colonnes, bande de vignettes, visionneur plein ecran, cartes de fin. Voir le rapport 73. 27/08/2026 (soir, v2.5) — correctifs telephone : les listes a points passent en deux colonnes, et l'eventail de photos cesse de se decaler et de recouvrir le bloc suivant. Voir le rapport 72. 27/08/2026 (soir, v2.4) — page contact : la section « Reserver en ligne » est centree. Voir le rapport 71. 27/08/2026 (soir, v2.3) — page contact : le calendrier revient en pleine largeur, la colonne d'appel est retiree (son balisage aussi), hauteurs revues sur l'etape la plus haute du widget. Voir le rapport 70. 27/08/2026 (soir, v2.2) — page contact : l'encadre blanc autour du calendrier est supprime, le widget passe en deux colonnes avec l'appel direct, la FAQ se centre. Voir le rapport 69. 27/08/2026 (soir) — page contact : hauteur REELLE du widget Calendly (une hauteur en pourcentage ne se resout pas contre un min-height : c'etait la cause du calendrier tronque) et plancher de decrochement d'ancre. Voir le rapport 68. 27/08/2026 — habillage de la PAGE CONTACT (225) : son HTML etait en ligne depuis le 12/08 sans une seule regle. 42 classes, zero nue, zero orpheline. Voir le rapport 67. 27/08/2026 — correctifs mobiles : l'eventail se desempile sous 1025 px, liste courte en deux colonnes ; SECTION 6 allegee (page A propos v6 puis v7) 26/08/2026 — correctif de debordement mobile de .mtc-photo-attente, composant .mtc-svc-colle, surtitres services en manuscrite (SECTION 8), eventail en zigzag a format normalise, colonne media collante (SECTION 4), marge de flux de .mtc-photo-attente, jeton manuscrite 25/08/2026 — SECTION 3 (accueil) phase 2 11/08/2026 — SECTION 6 (page A propos) en v4 Remplace : extrait 242 « CSS Accueil » (a desactiver) extrait 300 « CSS Services » (a desactiver) partie CSS de l'extrait 249 « FONDATIONS » (le PHP de 249 reste en place : il calcule --mtc-font-titre) Ne remplace pas : 250 HEADER, 251 FOOTER, 252 INTRO, qui injectent encore leur propre CSS en ligne, apres ce fichier dans la page. ----------------------------------------------------------------------------- SOMMAIRE ----------------------------------------------------------------------------- SECTION 1 — JETONS ET SYSTEME DE BOUTONS Sert : toutes les pages du site Prefixe : --mtc-* et .mtc-cta / .mtc-cta-2 / .mtc-sombre Source : extrait 249 FONDATIONS (sa partie CSS) C'EST LE SEUL :root DU FICHIER. Il ne doit jamais y en avoir un second, nulle part. SECTION 2 — SOCLE COMMUN, COMPOSANTS PARTAGES Sert : accueil (2) ET pages services (217 · 219 · 221) Prefixe : .mtcs-card* · .mtcsh-media* · .mtcsh-points · .mtca-* (carrousel d'avis) · .realmt Source : extrait 242, regles des composants reutilises Toucher a une regle d'ici, c'est toucher a DEUX familles de pages. SECTION 3 — PAGE D'ACCUEIL (2) Sert : la page d'accueil, et elle seule Prefixe : .mtc-hero* · .mtcs-* · .mtcsh-* · .mtcr-* · .mtcp-* · .mtca-* · .mtcf-* · .mtcl-* · .mtcb-* · .mtcw-* Source : extrait 242 CSS Accueil ATTENTION : les commentaires internes de cette section parlent de « SECTION 1 — HERO », « SECTION 2 — UNIVERS »... C'est la numerotation d'origine des sept sections de la page d'accueil, conservee telle quelle. Rien a voir avec les SECTIONS 1 a 5 ci-dessus, qui sont annoncees par un bandeau encadre. PHASE 2 du 25/08/2026 : millesime, signature manuscrite, surtitres en manuscrite, bande partenaires portee a quatre rangs, piliers de reassurance passes a quatre, photos du showroom ecartees. Les regles concernees sont datees sur place. La section se termine par un BLOC DE SURCHARGES qui doit rester le dernier : il s'appuie sur l'ordre du document. Toute regle nouvelle de la SECTION 3 s'ecrit AVANT lui. SECTION 4 — PAGES SERVICES (217 · 219 · 221) Sert : cuisine sur mesure, dressing et living, salle de bain Prefixe : .mtc-svc-* (variables locales --svc-* portees par .mtc-svc) Source : extrait 300 CSS Services 26/08/2026 : la section porte deux mecaniques de colonne media collante. Le CABLAGE .mtc-svc-intro / .mtc-svc-living, en service aujourd'hui sur 217 et 219 sans aucune classe a poser. Et le COMPOSANT .mtc-svc-colle*, generique et reutilisable, encore inerte faute de markup. Le second doit remplacer le premier quand un cowork posera les classes ; voir le bandeau du composant. SECTION 6 — PAGE A PROPOS & SHOWROOM PRIVE (223) Sert : /a-propos/ (223) Prefixe : .mtc-apr-* (.mtc-photo-attente* retire le 18/09/2026) Source : cowork page 223, v4 du 11/08, allegee le 27/08/2026 27/08 : la page abandonne ses grilles maison au profit des composants de production (.mtc-svc-duo, .mtc-svc-colle*). Douze regles devenues orphelines ont ete retirees apres verification en base — zero occurrence sur les 23 contenus du site. La page est habillee par le jeu .mtc-svc-* de la SECTION 4 : cette section ne porte que les dispositions qui n'existent nulle part ailleurs, plus l'emplacement photo en attente. PLACEE AVANT LA SECTION 5, comme toute page future : la section des correctifs doit rester la derniere du fichier. SECTION 8 — TYPOGRAPHIE MANUSCRITE (socle commun) Sert : toutes les pages Prefixe : .mtc-manuscrit · .mtc-svc-eyebrow · .mtc-svc-surtitre Source : coworks dressing et living, puis cuisine A · le composant .mtc-manuscrit, pose element par element ; B · les surtitres des cinq pages en .mtc-svc-* ; C · le centrage de la signature de cloture des pages services. PLACEE APRES LA SECTION 4, et ce n'est pas negociable : elle surcharge .mtc-svc-eyebrow a specificite egale, c'est donc l'ordre du document qui tranche. PAGE CONTACT ET RENDEZ-VOUS (225) — SANS NUMERO, volontairement Sert : /contact-et-rendez-vous/ (225), et elle seule Prefixe : .mtc-cnt-* Source : cowork page 225, lot du 27/08/2026 SANS NUMERO : la numerotation de premier niveau est 1 · 2 · 3 · 4 · 6 · 8 · 5, et un « 7 » se confondrait avec la « SECTION 7 — CTA FINAL » de la numerotation interne de l'accueil, dans la SECTION 3. PLACEE APRES LA SECTION 4 (dont la page herite tout : ses six sections portent .mtc-svc) ET APRES LA SECTION 8 (qui bascule ses sept surtitres en manuscrite). La remonter rend inertes les regles qui ne l'emportent que par l'ordre du document. Depuis la v27.9 (17/09/2026), la page ne porte plus ni widget Calendly ni formulaire Kadence : la demande passe par le module MTC Demandes (extension, prefixe .mtcd-), qui a sa propre feuille. SECTION 9 — ARTICLES ET FICHES REALISATIONS Sert : les articles de la categorie Realisations, et eux seuls Prefixe : .mtc-art-* Source : cowork Articles realisations, v3 du 28/08/2026 Vingt articles publies : NEUF fiches completes (bande de vignettes, blocs deux colonnes, cartes de fin) et ONZE fiches courtes (photo simple + navigation de fin). Les deux familles sont couvertes ; voir le pave « D bis » sur place. Le visionneur plein ecran est construit par le BLOC 9 de site.js et ajoute a : il vit HORS de .mtc-art et ne lit donc que des jetons --mtc-*, jamais --svc-*. PLACEE APRES LA SECTION 4 et LA SECTION 8 : quatre de ses regles ne l'emportent que par l'ordre du document, a specificite egale avec .mtc-svc-encart, .mtc-svc-filet et .mtcs-card. SECTION 5 — CORRECTIFS DE FIN DE FICHIER Elle porte depuis le 27/08 le CORRECTIF 1 (eventail mobile), et elle doit rester le DERNIER bloc du fichier. ----------------------------------------------------------------------------- TABLE DES PREFIXES — a tenir a jour ----------------------------------------------------------------------------- Portee Prefixe Jetons et design system --mtc-* .mtc-cta .mtc-cta-2 .mtc-sombre Composants partages .mtcs-card* .mtcsh-* .mtca-* .realmt Page d'accueil .mtc-* .mtcs-* .mtcsh-* .mtcr-* .mtcp-* .mtca-* .mtcf-* .mtcl-* .mtcb-* .mtcw-* ajoutees le 25/08/2026 : .mtc-millesime .mtc-signature .mtcl-grille-md Pages services .mtc-svc-* (et .mtck-*, reserve, voir 25 §7) Page A propos (223) .mtc-apr-* Page Contact (225) .mtc-cnt-* Articles et realisations .mtc-art-* Emplacement photo en attente retire le 18/09/2026 (v27.11.3) Famille DESTINEE AU SOCLE COMMUN, posee pour l'instant dans la SECTION 6 pour ne modifier aucune section existante. A remonter dans la SECTION 2 des qu'une deuxieme page l'utilise. Media collant (pages services) .mtc-svc-colle .mtc-svc-colle-media .mtc-svc-colle-pile Composant a deux classes, pose dans le HTML. Composant manuscrit .mtc-manuscrit Classe de SOCLE, posee element par element dans le HTML. Lit --mtc-police-manuscrite. Toute page future un prefixe DEDIE, jamais un prefixe existant ----------------------------------------------------------------------------- AJOUTER UNE PAGE — la procedure, en cinq lignes ----------------------------------------------------------------------------- 1. Choisir un prefixe libre (ex. .mtc-cnt-* pour la page contact) et l'inscrire dans la table ci-dessus. 2. Ajouter une SECTION numerotee A LA FIN du fichier, juste avant la section « CORRECTIFS », avec son bandeau : numero, titre, prefixe, date, source, pages. 3. N'ecrire QUE des selecteurs portant ce prefixe. Ne toucher a aucune section existante, et surtout pas au :root de la SECTION 1. 4. Dans site.js, ajouter un bloc du meme nom, avec son garde-fou en premiere ligne (voir l'en-tete de site.js). 5. Enregistrer, purger WP Rocket. Rien d'autre : le chargeur 273 sert deja ce fichier sur toutes les pages, il n'y a aucune route a declarer. ----------------------------------------------------------------------------- CE QU'IL NE FAUT JAMAIS FAIRE ICI ----------------------------------------------------------------------------- - minifier ce fichier (WP Rocket s'en charge a la volee) ; - le renommer ou le versionner (site-v2.css) ; - declarer un second :root ; - ecrire un selecteur non prefixe, un selecteur d'element nu (h2 {}) ou un selecteur de bloc Gutenberg generique (.wp-block-*) : une fuite de ce type a deja ete corrigee sur ce projet ; - dupliquer une classe deja definie dans le SOCLE COMMUN ; - ecrire quoi que ce soit entre le BLOC DE SURCHARGES de fin de SECTION 3 et le bandeau de la SECTION 4 : ce bloc doit rester le dernier de sa section ; - de-prefixer .mtcsh-showroom devant .mtcsh-media ou .mtcsh-photo-* : ces classes servent aussi l'eventail des pages services ; - remonter la SECTION 8 avant la SECTION 4 : .mtc-manuscrit y deviendrait inerte sur les pages services ; - ecrire un nom de police ailleurs que dans --mtc-police-manuscrite ; - ecrire un espacement libre : le pas vient de l'echelle --mtc-e-1 a -9 ; - poser overflow autre que visible sur un ancetre de .mtc-svc-intro : le collant de la colonne media mourrait en silence ; - employer @supports pour tester si une variable CSS est definie : la condition est TOUJOURS vraie, verifie en navigateur le 26/08/2026 ; - declarer une font-family ou une couleur en dur : Blocksy garde la typographie, les couleurs passent par var(--theme-palette-color-N) ou var(--mtc-*). ----------------------------------------------------------------------------- LA SEULE EXCEPTION A LA REGLE « PAS DE FONT-FAMILY » ----------------------------------------------------------------------------- CINQ regles declarent une police dans tout ce fichier. Aucune ne l'ecrit en dur : toutes lisent le jeton --mtc-police-manuscrite du :root de la SECTION 1, qui est le SEUL endroit ou la pile de polices est ecrite. Autorisation du pilote le 25/08/2026, etendue aux pages services le 26/08 : .mtc-millesime « Since 2012 », dans le hero .mtc-signature « Mathieu & Thomas », au pied de « Qui sommes-nous » les 11 surtitres .mtc-surtitre · .mtc-static-surtitre · .mtcs-eyebrow · .mtcsh-eyebrow · .mtcr-eyebrow · .mtcp-eyebrow · .mtca-eyebrow · .mtcb-eyebrow · .mtcw-eyebrow · .mtcl-eyebrow · .mtcf-eyebrow (bloc de fin de SECTION 3 — accueil) .mtc-manuscrit classe de socle posee dans le HTML, element par element (SECTION 8 · A) .mtc-svc-eyebrow les surtitres des CINQ pages qui emploient le jeu .mtc-svc-surtitre .mtc-svc-* : 217, 219, 221, 223 et 225 (SECTION 8 · B). Bascule decidee par le pilote le 26/08/2026 : la manuscrite va sur le petit titre dore de toutes les pages, plus seulement de l'accueil. LA MANUSCRITE S'ARRETE LA. Elle ne descend pas sur les numeros, les compteurs, les legendes ni le texte courant : semee partout, elle perd son effet. Hors surtitres, une seule autre occurrence est justifiee par page, et seulement quand le mot est litteralement une signature. Cette exception ne s'etend a rien d'autre. Le fichier ne contient, en tout et pour tout, que SIX declarations de font-family : les cinq ci-dessus, plus un font-family:inherit dans la SECTION 3, qui n'impose aucune police. S'il en apparait une septieme, quelqu'un a force une police sans autorisation. Et aucune ne doit ecrire un nom de police en dur : le jeton du :root est la seule source. RESERVE OUVERTE, a lever sur le rendu reel : le cowork Accueil a cale les tailles de cette manuscrite sur un banc qui ne chargeait pas Adobe Fonts. Les valeurs clamp() sont des approximations a confirmer en ligne. ============================================================================= */ /* ============================================================================= SECTION 1 — JETONS ET SYSTEME DE BOUTONS Prefixe : --mtc-* · .mtc-cta .mtc-cta-2 .mtc-sm .mtc-lg .mtc-block .mtc-sombre · Ajoute le 11/08/2026 · Source : extrait 249 FONDATIONS (partie CSS) Sert : toutes les pages du site ============================================================================= */ :root{ /* --- 1. PONT VERS LA PALETTE BLOCKSY ------------------------------------ Correspondance verifiee en base le 10/08/2026 (theme_mods_blocksy) : color1 #B8945F dore color5 #E4DFD8 gris filet color2 #1A1A1A noir color6 #EFEAE3 fond alternatif color3 #0D0D0D profond color7 #F7F4EF blanc casse color4 #5A5651 gris color8 #FFFFFF blanc pur Les hexadecimaux ne sont QUE des valeurs de secours : la source de verite reste Personnaliser > Couleurs. */ --mtc-dore: var(--theme-palette-color-1, #B8945F); --mtc-noir: var(--theme-palette-color-2, #1A1A1A); --mtc-noir-profond: var(--theme-palette-color-3, #0D0D0D); --mtc-gris: var(--theme-palette-color-4, #5A5651); --mtc-gris-clair: var(--theme-palette-color-5, #E4DFD8); --mtc-fond-alt: var(--theme-palette-color-6, #EFEAE3); --mtc-blanc: var(--theme-palette-color-7, #F7F4EF); --mtc-blanc-pur: var(--theme-palette-color-8, #FFFFFF); /* Seule couleur calculee du projet : Blocksy n'expose pas de variante foncee de sa palette. Sert aux etats actifs. */ --mtc-dore-fonce: #9A7847; /* --- 2. COULEURS FONCTIONNELLES ----------------------------------------- Niveau d'indirection : les composants n'utilisent QUE celles-ci, jamais les couleurs de marque en direct. C'est ce qui permet a .mtc-sombre d'inverser une section entiere sans toucher a un seul composant. */ --mtc-c-fond: var(--mtc-blanc); --mtc-c-fond-alt: var(--mtc-fond-alt); --mtc-c-fond-sombre: var(--mtc-noir); --mtc-c-texte: var(--mtc-noir); --mtc-c-texte-2: var(--mtc-gris); --mtc-c-texte-inv: var(--mtc-blanc); --mtc-c-accent: var(--mtc-dore); --mtc-c-filet: var(--mtc-gris-clair); --mtc-c-filet-inv: rgba(255,255,255,.18); /* Voiles sur photo. Garantissent la lisibilite du texte blanc pose sur une image. Ne jamais improviser un rgba() ailleurs. */ --mtc-voile-bas: linear-gradient(180deg, rgba(13,13,13,0) 35%, rgba(13,13,13,.78) 100%); --mtc-voile-plein: rgba(13,13,13,.45); --mtc-voile-doux: rgba(13,13,13,.28); /* --- 3. TYPOGRAPHIE ------------------------------------------------------ Aucune taille de h1 a h6 ici : Blocksy garde la main. Ne restent que des tailles RELATIVES, en em, qui suivent le corps de texte du theme. */ --mtc-fs-eyebrow: .78em; --mtc-fs-legende: .82em; --mtc-fs-lead: 1.18em; /* Seule taille absolue : le titre geant du hero, volontairement plus grand que le h1 defini dans Blocksy. */ --mtc-fs-display: clamp(2.6rem, 1.6rem + 5vw, 6.5rem); /* La manuscrite. Ajoutee le 26/08/2026 : c'est le SEUL endroit du fichier ou cette pile de polices est ecrite. Les regles qui l'emploient la lisent toutes ici. Kit Adobe Fonts charge par Blocksy ; repli sans-serif si le kit ne repond pas. Pour intercaler un repli maison (nexa-text par exemple), c'est cette ligne, et elle seule, qu'on modifie. */ --mtc-police-manuscrite: above-the-beyond, sans-serif; --mtc-lh-titre: 1.08; --mtc-lh-texte: 1.68; --mtc-ls-eyebrow: .22em; --mtc-ls-titre: -.015em; --mtc-ls-cta: .03em; /* --- 4. ESPACEMENTS ------------------------------------------------------ */ --mtc-e-1: .25rem; --mtc-e-2: .5rem; --mtc-e-3: .75rem; --mtc-e-4: 1rem; --mtc-e-5: 1.5rem; --mtc-e-6: 2rem; --mtc-e-7: 3rem; --mtc-e-8: 4rem; --mtc-e-9: 6rem; --mtc-section-y: clamp(4rem, 3rem + 6vw, 9rem); --mtc-section-y-large: clamp(6rem, 4rem + 9vw, 13rem); --mtc-gouttiere: clamp(1.25rem, .75rem + 2.5vw, 3.5rem); --mtc-max-texte: 68ch; /* --- 5. FORMES ----------------------------------------------------------- */ --mtc-r-0: 0; --mtc-r-s: 2px; --mtc-r-m: 4px; --mtc-r-l: 10px; --mtc-r-pill: 999px; --mtc-filet: 1px solid var(--mtc-c-filet); --mtc-filet-inv: 1px solid var(--mtc-c-filet-inv); --mtc-filet-or: 1px solid var(--mtc-c-accent); /* --- 6. BOUTONS ---------------------------------------------------------- Valeurs reprises a l'identique du snippet 78, deja valide par le client. Le degrade est reconstruit autour de --mtc-dore : changer le dore dans Blocksy modifie donc bien le bouton. */ --mtc-cta-degrade: linear-gradient(135deg, #D4B078 0%, var(--mtc-dore) 55%, #A67D47 100%); --mtc-cta-ombre: 0 10px 30px rgba(184,148,95,.28), 0 2px 6px rgba(0,0,0,.18); --mtc-cta-ombre-fort: 0 16px 40px rgba(184,148,95,.42), 0 4px 10px rgba(0,0,0,.22); --mtc-cta-bord: 1px solid rgba(184,148,95,.6); --mtc-cta-r: 3px; --mtc-cta-brillance: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%); /* --- 7. EFFET VERRE (header flottant, boutons ronds, panneau mobile) ----- */ --mtc-verre: rgba(13,12,11,.55); --mtc-verre-scroll: rgba(10,9,8,.72); --mtc-verre-flou: blur(18px); --mtc-verre-bord: 1px solid rgba(247,244,239,.10); --mtc-rond: rgba(0,0,0,.28); --mtc-rond-bord: 1px solid rgba(247,244,239,.14); --mtc-header-h: clamp(60px, 6vw, 74px); --mtc-header-top: clamp(12px, 1.6vw, 20px); --mtc-ombre-douce: 0 18px 50px -20px rgba(26,26,26,.22); --mtc-ombre-forte: 0 40px 90px -30px rgba(13,13,13,.55); /* --- 8. MOUVEMENT -------------------------------------------------------- */ --mtc-d-court: .28s; --mtc-d-moyen: .6s; --mtc-d-long: 1.1s; --mtc-d-tres-long: 1.8s; --mtc-ease: cubic-bezier(.22,.61,.36,1); /* standard */ --mtc-ease-sortie: cubic-bezier(.16,1,.30,1); /* tres amorti, reveals */ --mtc-ease-net: cubic-bezier(.65,0,.35,1); /* symetrique, slides */ --mtc-reveal-decalage: 22px; --mtc-reveal-seuil: .18; --mtc-reveal-stagger: 90ms; --mtc-parallaxe: .12; --mtc-slider-par-vue: 3; /* Ecran d'ouverture : duree avant dissipation. C'EST ICI qu'on la regle. Passee de 1700 ms a 900 ms — un voile opaque plein ecran est mecaniquement le plus grand element peint de la page, donc le LCP mesure par Google ne peut pas descendre sous cette duree. */ --mtc-intro-duree: 900ms; --mtc-intro-sortie: 450ms; /* --- 9. SUPERPOSITION --------------------------------------------------- Echelle unique du projet. Toute nouvelle couche se place ICI, jamais avec un nombre ecrit a la main dans un composant. Les valeurs internes aux sections (0 a 30) restent enfermees dans leur section : `position:sticky` cree un contexte d'empilement, leurs enfants ne peuvent donc pas remonter au-dessus du header. */ --mtc-z-fond: 0; --mtc-z-media: 1; --mtc-z-voile: 2; --mtc-z-contenu: 3; --mtc-z-ui: 4; --mtc-z-sticky: 10; --mtc-z-header: 900; /* barre de navigation flottante */ --mtc-z-overlay: 1000; /* voile derriere le menu mobile */ --mtc-z-drawer: 1010; /* panneau du menu mobile */ --mtc-z-intro: 1200; /* ecran d'ouverture */ /* Interrupteur d'animation, lu par le CSS ET par le moteur JS. */ --mtc-motion: 1; /* --- 10. HAUTEUR REELLE DE L'EN-TETE COLLANT -------------------------- Repli remonte depuis l'extrait 242 le 11/08/2026, pour qu'il n'existe qu'une seule declaration :root dans le fichier. Valeur reelle ecrite a l'execution par site.js, en style EN LIGNE sur : un style en ligne prime sur toute regle de feuille, la mesure gagne donc toujours. Consommee par les sections collantes de l'accueil (SECTION 3). */ --mtc-entete: 0px; } /* --- ECRAN TACTILE --------------------------------------------------------- La parallaxe n'a pas de sens sans souris : coupee par le token, donc sans une seule condition en JavaScript. */ @media (hover: none){ :root{ --mtc-parallaxe: 0; } } /* --- ACCESSIBILITE : MOUVEMENT REDUIT -------------------------------------- Traite UNE SEULE FOIS ici pour tout le site. Les snippets suivants n'ont plus jamais a ecrire @media (prefers-reduced-motion). */ @media (prefers-reduced-motion: reduce){ :root{ --mtc-motion: 0; --mtc-d-court: .01ms; --mtc-d-moyen: .01ms; --mtc-d-long: .01ms; --mtc-d-tres-long: .01ms; --mtc-reveal-decalage: 0px; --mtc-reveal-stagger: 0ms; --mtc-parallaxe: 0; --mtc-intro-duree: 1ms; } *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* --- SECTION SOMBRE -------------------------------------------------------- Poser la classe .mtc-sombre sur une Row inverse automatiquement TOUS les tokens fonctionnels de ses enfants : titres, textes, filets et boutons secondaires s'adaptent sans qu'on ajoute une seule classe dessus. */ .mtc-sombre{ --mtc-c-fond: var(--mtc-noir); --mtc-c-fond-alt: var(--mtc-noir-profond); --mtc-c-texte: var(--mtc-blanc); --mtc-c-texte-2: rgba(247,244,239,.68); --mtc-c-filet: var(--mtc-c-filet-inv); background-color: var(--mtc-c-fond); color: var(--mtc-c-texte); } /* =========================================================================== SYSTEME DE BOUTONS (ex-snippet 78, valeurs identiques) --------------------------------------------------------------------------- PREMIUM (conversion : RDV, contact) -> class="mtc-cta" SECONDAIRE (navigation) -> class="mtc-cta-2" Sur fond sombre -> class="mtc-cta-2 mtc-on-dark" Tailles -> mtc-sm | mtc-lg | mtc-block Les valeurs en dur du snippet 78 sont remplacees par les tokens ci-dessus. Le rendu est identique au pixel ; la difference est qu'un changement de dore dans Blocksy se propage maintenant partout. =========================================================================== */ .mtc-cta{ position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 11px; padding: 17px 38px; font-size: .92rem; font-weight: 600; letter-spacing: var(--mtc-ls-cta, .03em); line-height: 1; text-decoration: none; color: var(--mtc-noir, #1A1A1A); border-radius: var(--mtc-cta-r, 3px); border: var(--mtc-cta-bord, 1px solid rgba(184,148,95,.6)); background: var(--mtc-cta-degrade, linear-gradient(135deg,#D4B078 0%,#B8945F 55%,#A67D47 100%)); box-shadow: var(--mtc-cta-ombre, 0 10px 30px rgba(184,148,95,.28), 0 2px 6px rgba(0,0,0,.18)); cursor: pointer; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; } .mtc-cta:hover{ color: var(--mtc-noir, #1A1A1A); transform: translateY(-3px); box-shadow: var(--mtc-cta-ombre-fort, 0 16px 40px rgba(184,148,95,.42), 0 4px 10px rgba(0,0,0,.22)); } .mtc-cta:active{ transform: translateY(-1px); } .mtc-cta:focus-visible{ outline: 2px solid var(--mtc-blanc-pur, #FFF); outline-offset: 3px; } .mtc-cta svg{ width: 18px; height: 18px; flex-shrink: 0; position: relative; z-index: 1; transition: transform .35s; } .mtc-cta:hover svg{ transform: scale(1.12); } /* Balayage de brillance au survol. */ .mtc-cta::after{ content: ""; position: absolute; top: 0; left: -120%; width: 70%; height: 100%; background: var(--mtc-cta-brillance, linear-gradient(120deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%)); transform: skewX(-20deg); transition: left .6s ease; } .mtc-cta:hover::after{ left: 140%; } /* ---- Bouton secondaire : navigation (fond clair par defaut) -------------- */ .mtc-cta-2{ position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 16px 32px; font-size: .9rem; font-weight: 600; letter-spacing: var(--mtc-ls-cta, .03em); line-height: 1; text-decoration: none; color: var(--mtc-c-texte, #1A1A1A); border-radius: var(--mtc-cta-r, 3px); border: 1px solid rgba(26,26,26,.28); background: transparent; cursor: pointer; transition: border-color .35s, background .35s, color .35s, transform .35s; } .mtc-cta-2:hover{ border-color: var(--mtc-c-accent, #B8945F); background: rgba(184,148,95,.1); color: var(--mtc-c-texte, #1A1A1A); transform: translateY(-2px); } .mtc-cta-2:focus-visible{ outline: 2px solid var(--mtc-c-accent, #B8945F); outline-offset: 3px; } .mtc-cta-2 svg{ width: 17px; height: 17px; flex-shrink: 0; transition: transform .35s; } .mtc-cta-2:hover svg{ transform: translateX(3px); } /* Modificateur fond sombre : class="mtc-cta-2 mtc-on-dark" */ .mtc-cta-2.mtc-on-dark{ color: var(--mtc-blanc, #F7F4EF); border-color: rgba(247,244,239,.35); background: rgba(247,244,239,.04); } .mtc-cta-2.mtc-on-dark:hover{ border-color: var(--mtc-c-accent, #B8945F); background: rgba(184,148,95,.12); color: var(--mtc-blanc-pur, #FFF); } /* Dans une section .mtc-sombre, le bouton secondaire s'inverse tout seul : plus besoin de penser a ajouter .mtc-on-dark. */ .mtc-sombre .mtc-cta-2:not(.mtc-on-dark){ color: var(--mtc-blanc, #F7F4EF); border-color: rgba(247,244,239,.35); background: rgba(247,244,239,.04); } .mtc-sombre .mtc-cta-2:not(.mtc-on-dark):hover{ border-color: var(--mtc-c-accent, #B8945F); background: rgba(184,148,95,.12); color: var(--mtc-blanc-pur, #FFF); } /* ---- Variantes de taille ------------------------------------------------- */ .mtc-sm{ padding: 12px 24px; font-size: .82rem; gap: 8px; } .mtc-sm svg{ width: 15px; height: 15px; } .mtc-lg{ padding: 20px 46px; font-size: 1rem; gap: 13px; } .mtc-lg svg{ width: 20px; height: 20px; } .mtc-block{ display: flex; width: 100%; } @media (max-width: 768px){ .mtc-cta{ padding: 15px 30px; font-size: .88rem; } .mtc-cta-2{ padding: 14px 26px; font-size: .86rem; } } /* =========================================================================== ICONES PRETES A COLLER DANS LES BOUTONS --------------------------------------------------------------------------- Calendrier (RDV) — AVANT le texte : Fleche (navigation) — APRES le texte : Telephone — AVANT le texte : Repere lieu (showroom) — AVANT le texte : =========================================================================== */ /* ============================================================================= SECTION 2 — SOCLE COMMUN — COMPOSANTS PARTAGES Prefixe : .mtcs-card* .mtcsh-media* .mtcsh-points .mtca-* (avis) .realmt · Ajoute le 11/08/2026 · Source : extrait 242, regles des composants reutilises Sert : accueil (2) ET pages services (217 · 219 · 221) ============================================================================= */ /* Carte carree (apparition pilotee par le scroll via JS) */ .mtcs-card{position:relative;display:block;aspect-ratio:1/1;overflow:hidden; text-decoration:none;background:#111;border-radius:8px; will-change:opacity,transform;} /* Photo en fond plein + leger zoom au hover */ .mtcs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; transform:scale(1.02);transition:transform 1.1s cubic-bezier(.2,.7,.3,1);} .mtcs-card:hover .mtcs-img{transform:scale(1.08);} /* Voile noir : leger au repos, plus opaque au hover */ .mtcs-veil{position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(10,9,8,.72) 0%,rgba(10,9,8,.28) 42%,rgba(10,9,8,.12) 100%); transition:background .5s ease;} .mtcs-card:hover .mtcs-veil{ background:linear-gradient(to top,rgba(10,9,8,.9) 0%,rgba(10,9,8,.68) 55%,rgba(10,9,8,.5) 100%);} /* Cadre blanc qui se trace sur les 4 cotes au hover (2 pseudo-traits en L) */ .mtcs-frame{position:absolute;inset:14px;pointer-events:none;z-index:2;border-radius:4px;} .mtcs-frame::before,.mtcs-frame::after{content:"";position:absolute;inset:0;border-radius:4px;} .mtcs-frame::before{ border-top:1px solid rgba(247,244,239,.9); border-right:1px solid rgba(247,244,239,.9); clip-path:inset(0 0 100% 100%); transition:clip-path .5s ease .05s;} .mtcs-frame::after{ border-bottom:1px solid rgba(247,244,239,.9); border-left:1px solid rgba(247,244,239,.9); clip-path:inset(100% 100% 0 0); transition:clip-path .5s ease .05s;} .mtcs-card:hover .mtcs-frame::before{clip-path:inset(0 0 0 0);} .mtcs-card:hover .mtcs-frame::after{clip-path:inset(0 0 0 0);} /* Bulle "Decouvrir" en haut a droite, dans le cadre, revelee au hover */ .mtcs-bubble{position:absolute;top:26px;right:26px;z-index:4; display:inline-flex;align-items:center;gap:8px; padding:9px 16px;border-radius:100px; background:#fff;color:var(--mtc-noir); font-size:.78rem;font-weight:600;letter-spacing:.02em;white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,.28); opacity:0;transform:translateY(-8px) scale(.94); transition:opacity .45s ease .12s,transform .45s cubic-bezier(.2,.7,.3,1) .12s;} .mtcs-bubble svg{width:15px;height:15px;transition:transform .35s;} .mtcs-card:hover .mtcs-bubble{opacity:1;transform:translateY(0) scale(1);} .mtcs-card:hover .mtcs-bubble svg{transform:translateX(3px);} /* Legende : H3 en bas a gauche, description revelee au hover */ .mtcs-caption{position:absolute;left:0;right:0;bottom:0;z-index:3; padding:26px 26px 28px;text-align:left;} .mtcs-card-title{margin:0;color:#fff;font-weight:500; font-size:clamp(1.5rem,2vw,2rem);line-height:1.15; text-shadow:0 2px 16px rgba(0,0,0,.6);} .mtcs-card-desc{margin:0;color:rgba(247,244,239,.92); line-height:1.55;text-shadow:0 2px 14px rgba(0,0,0,.7); max-height:0;opacity:0;overflow:hidden; transform:translateY(6px); transition:max-height .5s ease,opacity .45s ease,transform .5s ease,margin-top .5s ease; margin-top:0;} .mtcs-card:hover .mtcs-card-desc{max-height:140px;opacity:1;transform:translateY(0);margin-top:12px;} /* Sur mobile (pas de hover) : description + bulle visibles en permanence */ @media (hover:none){ .mtcs-card-desc{max-height:140px;opacity:1;transform:none;margin-top:12px;} .mtcs-veil{background:linear-gradient(to top,rgba(10,9,8,.85) 0%,rgba(10,9,8,.5) 55%,rgba(10,9,8,.3) 100%);} .mtcs-bubble{opacity:1;transform:none;} } /* Trois photos superposées et décalées à gauche, format original conservé */ .mtcsh-media{position:relative;will-change:opacity,transform; padding:12% 8% 16% 6%;} /* marge de sécurité (plus verticale) pour l'écartement + inclinaison */ .mtcsh-photo{position:absolute;border-radius:10px;overflow:hidden; box-shadow:0 22px 55px rgba(0,0,0,.42);} .mtcsh-photo img{width:100%;height:auto;display:block;will-change:transform;} /* photo 1 : dans le flux (donne sa hauteur naturelle au conteneur) */ .mtcsh-photo-1{position:relative;z-index:1;width:60%;} /* photo 2 : droite, chevauche */ .mtcsh-photo-2{z-index:2;top:24%;right:2%;width:58%; border:4px solid rgba(20,18,16,1);} /* photo 3 : bas gauche, au premier plan */ .mtcsh-photo-3{z-index:3;bottom:0;left:2%;width:60%; border:4px solid rgba(20,18,16,1);} /* petit cadre en retrait sur la photo de devant, signature premium */ .mtcsh-media-frame{position:absolute;inset:12px;border:1px solid rgba(247,244,239,.35); border-radius:4px;pointer-events:none;} .mtcsh-points{list-style:none;margin:26px 0 34px;padding:0;display:flex;flex-direction:column;gap:14px;} .mtcsh-points li{display:flex;align-items:center;gap:12px; color:rgba(247,244,239,.9);font-size:.98rem;} .mtcsh-points svg{width:20px;height:20px;flex-shrink:0;color:var(--mtc-dore); padding:4px;border:1px solid rgba(184,148,95,.4);border-radius:50%;box-sizing:content-box;width:16px;height:16px;} /* ===== Bloc WordPress "Derniers articles" (classe realmt) stylé en cartes premium ===== */ .realmt.wp-block-latest-posts{list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.6vw,26px);} @media (max-width:900px){.realmt.wp-block-latest-posts{grid-template-columns:1fr;max-width:520px;margin:0 auto;}} .realmt.wp-block-latest-posts > li{position:relative; background:#111;border-radius:10px;overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,.28); will-change:opacity,transform; transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s;} .realmt.wp-block-latest-posts > li:hover{transform:translateY(-6px); box-shadow:0 28px 60px rgba(0,0,0,.4);} /* Image à la une */ .realmt .wp-block-latest-posts__featured-image{margin:0;overflow:hidden;line-height:0;} .realmt .wp-block-latest-posts__featured-image a{display:block;position:relative;aspect-ratio:3/2;overflow:hidden;} .realmt .wp-block-latest-posts__featured-image img{position:absolute;inset:0; width:100%!important;height:100%!important;object-fit:cover;display:block; transform:scale(1.03);transition:transform 1s cubic-bezier(.2,.7,.3,1);} .realmt.wp-block-latest-posts > li:hover .wp-block-latest-posts__featured-image img{transform:scale(1.1);} /* voile bas : léger au repos, plus opaque au hover (comme section univers) */ .realmt .wp-block-latest-posts__featured-image a::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background:linear-gradient(to top,rgba(10,9,8,.55) 0%,rgba(10,9,8,.12) 45%,rgba(10,9,8,0) 100%); opacity:.7;transition:opacity .5s;} .realmt.wp-block-latest-posts > li:hover .wp-block-latest-posts__featured-image a::after{opacity:.92;} /* Cadre blanc qui se trace sur les 4 côtés au hover (2 pseudo-traits en L) — signature section univers */ .realmt .wp-block-latest-posts__featured-image a::before{content:"";position:absolute;inset:14px;z-index:2;pointer-events:none;border-radius:4px; border-top:1px solid rgba(247,244,239,.9);border-right:1px solid rgba(247,244,239,.9); clip-path:inset(0 0 100% 100%);transition:clip-path .55s ease .05s;} .realmt .wp-block-latest-posts__featured-image{position:relative;} .realmt.wp-block-latest-posts > li:hover .wp-block-latest-posts__featured-image a::before{clip-path:inset(0 0 0 0);} /* 2e trait (bas+gauche) porté par le conteneur featured-image */ .realmt .wp-block-latest-posts__featured-image::before{content:"";position:absolute;inset:14px;z-index:2;pointer-events:none;border-radius:4px; border-bottom:1px solid rgba(247,244,239,.9);border-left:1px solid rgba(247,244,239,.9); clip-path:inset(100% 100% 0 0);transition:clip-path .55s ease .05s;} .realmt.wp-block-latest-posts > li:hover .wp-block-latest-posts__featured-image::before{clip-path:inset(0 0 0 0);} /* Bulle "Découvrir" en fond blanc + flèche droite, en haut à droite de l'image — signature section univers */ .realmt .wp-block-latest-posts__featured-image::after{content:"Découvrir →";z-index:3;pointer-events:none; position:absolute;top:26px;right:26px; display:inline-flex;align-items:center;line-height:1; padding:12px 16px;border-radius:100px; background:#fff;color:var(--mtc-noir); font-size:.78rem;font-weight:600;letter-spacing:.02em;white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,.28); opacity:0;transform:translateY(-8px) scale(.94); transition:opacity .45s ease .12s,transform .45s cubic-bezier(.2,.7,.3,1) .12s;} .realmt.wp-block-latest-posts > li:hover .wp-block-latest-posts__featured-image::after{opacity:1;transform:translateY(0) scale(1);} /* Titre de l'article */ .realmt .wp-block-latest-posts__post-title{display:block; padding:22px 24px 0;margin:0; color:#fff;font-weight:500;font-size:1.35rem;line-height:1.22;text-decoration:none; transition:color .3s;} .realmt .wp-block-latest-posts__post-title:hover{color:var(--mtc-dore);} /* Extrait */ .realmt .wp-block-latest-posts__post-excerpt{padding:12px 24px 24px;margin:0; color:rgba(247,244,239,.72);font-size:.92rem;line-height:1.6;} /* filet doré en bas de carte au hover */ .realmt.wp-block-latest-posts > li::after{content:"";position:absolute;left:24px;bottom:0;height:2px;width:0;pointer-events:none; background:var(--mtc-dore);transition:width .5s ease;} .realmt.wp-block-latest-posts > li:hover::after{width:44px;} /* ============ PARTIE 2 : Avis (3 par 3) ============ */ .mtca-reviews-sec{ position:relative;padding:clamp(50px,8vh,100px) 0;} .mtca-reviews-sec *{box-sizing:border-box;} .mtca-reviews-head{text-align:center;max-width:680px;margin:0 auto clamp(40px,5vw,60px);} .mtca-rating{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:20px;} .mtca-rating-note{font-size:clamp(2rem,3.4vw,2.6rem);color:#fff;line-height:1;font-weight:400;} .mtca-stars{display:inline-flex;gap:3px;color:var(--mtc-dore);} .mtca-stars svg{width:20px;height:20px;} .mtca-google{display:inline-flex;align-items:center;gap:7px;color:rgba(247,244,239,.75);font-size:.88rem; padding-left:14px;border-left:1px solid rgba(247,244,239,.2);} .mtca-slider{overflow:hidden;position:relative;width:100%;} .mtca-track{display:flex;transition:transform .55s cubic-bezier(.4,.1,.2,1);will-change:transform;} /* 3 cartes visibles : chaque carte = (100% - 2 gaps) / 3 ; gap géré par marge */ .mtca-review{flex:0 0 calc((100% - 48px)/3);margin-right:24px; background:rgba(255,255,255,.035);border:1px solid rgba(247,244,239,.1); border-radius:12px;padding:30px 28px;display:flex;flex-direction:column;gap:16px; backdrop-filter:blur(4px);min-height:300px;} .mtca-review-stars span{color:var(--mtc-dore);font-size:1.05rem;letter-spacing:2px;} .mtca-review-text{margin:0;flex:1;color:rgba(247,244,239,.85);font-size:.96rem;line-height:1.62;} .mtca-review-author{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid rgba(247,244,239,.1);} .mtca-avatar{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--mtc-dore),#9a7847);color:#1a1a1a;font-weight:600;font-size:1.05rem;} .mtca-author-info{display:flex;flex-direction:column;gap:2px;line-height:1.3;} .mtca-author-info b{color:#fff;font-weight:500;font-size:.95rem;} .mtca-author-info i{color:rgba(247,244,239,.5);font-style:normal;font-size:.8rem;} .mtca-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:clamp(30px,4vw,44px);} .mtca-arrow{width:48px;height:48px;border-radius:50%;cursor:pointer;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:transparent;border:1px solid rgba(247,244,239,.25);color:#fff; transition:border-color .3s,background .3s;} .mtca-arrow:hover{border-color:var(--mtc-dore);background:rgba(184,148,95,.12);} .mtca-arrow:disabled{opacity:.3;cursor:default;} .mtca-arrow svg{width:20px;height:20px;} .mtca-dots{display:flex;gap:9px;} .mtca-dot{width:8px;height:8px;border-radius:50%;cursor:pointer;padding:0;border:0; background:rgba(247,244,239,.25);transition:background .3s,width .3s;} .mtca-dot.mtca-active{background:var(--mtc-dore);width:24px;border-radius:4px;} .mtca-google-row{display:flex;justify-content:center;margin-top:26px;} .mtca-google-link{color:rgba(247,244,239,.7);font-size:.88rem;text-decoration:none;transition:color .3s;} .mtca-google-link:hover{color:var(--mtc-dore);} /* ============================================================================= SECTION 3 — PAGE D'ACCUEIL (2) Prefixe : .mtc-hero* .mtcs-* .mtcsh-* .mtcr-* .mtcp-* .mtca-* .mtcf-* .mtcl-* .mtcb-* .mtcw-* · Ajoute le 11/08/2026 · Source : extrait 242 CSS Accueil Sert : la page d'accueil, et elle seule ============================================================================= */ /* ATTENTION AUX NUMEROS. Les commentaires internes de cette section parlent de « SECTION 1 — HERO », « SECTION 2 — UNIVERS », etc. : c'est la numerotation d'ORIGINE de l'extrait 242, celle des sept sections de la page d'accueil. Elle est conservee telle quelle pour que les rapports precedents restent lisibles. Elle n'a rien a voir avec les SECTIONS 1 a 5 du present fichier, annoncees par un bandeau encadre. Ne pas les renumeroter : ce serait reecrire l'historique. Cinq blocs @media de cette section melangent des regles de composants partages (SECTION 2) et des regles propres a l'accueil. Ils n'ont PAS ete scindes : les scinder aurait demande de reecrire des selecteurs. Ils sont restes en bloc, dans leur ordre d'origine. Sans effet : le fichier est servi sur toutes les pages, la separation socle / accueil est documentaire, plus fonctionnelle. */ /* ===================================================================== [MTC] Accueil · CSS MT Cuisine — feuille de style de la page d'accueil (7 sections) --------------------------------------------------------------------- Extrait des 7 blocs