/* ================================================================ MOTRO FRANCE — prime.css Couche visuelle. Chargee APRES style.css et motion.css. Ce fichier ne touche ni au mouvement (motion.css) ni a la structure (style.css). Il corrige ce qui se VOIT : l'echelle typographique, la hierarchie, la profondeur, la matiere. Trois defauts mesures sur la feuille d'origine : 1. 22 tailles de police differentes, en px et en rem melanges. Ce n'est pas une echelle, ce sont des valeurs au cas par cas. Corps dominant a 12-13px : une densite de tableau de bord appliquee a un site vitrine. 2. Tracking en px sur du texte fluide. -1.5px sur un clamp(22px, 3vw, 38px) vaut -6,8% a 22px et -3,9% a 38px : le meme reglage est trop serre en bas, trop lache en haut. Le tracking doit etre proportionnel — donc en em. 3. Graisse saturee : 67 x 700, 26 x 800, 31 x 900, contre 5 x 400. Quand tout est gras, plus rien n'est mis en avant. La graisse ne porte plus aucune information. ================================================================ */ /* ================================================================ 1. ECHELLE TYPOGRAPHIQUE ================================================================ Une seule progression, en rem, pour que le reglage de taille de texte du navigateur soit respecte. Chaque palier porte sa propre interlettre et son propre interligne : les deux varient a l'inverse de la taille. Grande taille -> tracking negatif, interligne serre. Petite taille -> tracking neutre ou positif, interligne aere. ================================================================ */ :root { /* Display et titres */ --t-display: clamp(2.75rem, 5.4vw, 4.75rem); /* 44 -> 76px */ --t-h1: clamp(2.25rem, 4.2vw, 3.5rem); /* 36 -> 56px */ --t-h2: clamp(1.75rem, 3vw, 2.5rem); /* 28 -> 40px */ --t-h3: clamp(1.25rem, 1.8vw, 1.5rem); /* 20 -> 24px */ /* Corps */ --t-lead: clamp(1.0625rem, 1.2vw, 1.1875rem); /* 17 -> 19px */ --t-body: 1rem; /* 16px — le corps de reference */ --t-small: 0.9375rem; /* 15px */ --t-micro: 0.8125rem; /* 13px — labels, mentions */ /* Interlettre, proportionnelle */ --tr-display: -0.035em; --tr-h1: -0.028em; --tr-h2: -0.022em; --tr-h3: -0.014em; --tr-body: 0em; --tr-label: 0.06em; /* les capitales ont besoin d'air */ /* Interligne, inverse de la taille */ --lh-display: 0.98; --lh-h1: 1.04; --lh-h2: 1.1; --lh-body: 1.6; --lh-lead: 1.55; /* ── PROFONDEUR ─────────────────────────────────────────────── Une echelle d'elevation, pas cinq ombres sans rapport. Chaque palier combine une ombre de contact courte et nette et une ombre de diffusion longue et douce : c'est ce qui distingue une ombre credible d'un halo gris. */ --elev-1: 0 1px 2px rgba(17,17,17,0.04), 0 2px 8px rgba(17,17,17,0.04); --elev-2: 0 1px 2px rgba(17,17,17,0.05), 0 6px 20px rgba(17,17,17,0.07); --elev-3: 0 2px 4px rgba(17,17,17,0.06), 0 14px 40px rgba(17,17,17,0.10); --elev-4: 0 4px 8px rgba(17,17,17,0.08), 0 28px 72px rgba(17,17,17,0.14); } /* ================================================================ 2. DISPLAY ET TITRES ================================================================ La graisse redescend de 900 a 800. A ces tailles, 900 empate les contreformes d'Inter sans ajouter de presence — la presence vient maintenant de la taille, qui a doublé. ================================================================ */ .hero-title { /* Le hero fait 100vh et contient aussi la voiture, les onglets et la bande de chiffres. Un display cale uniquement sur la LARGEUR ecrase donc tout le reste sur un portable 900px de haut. On borne aussi par la hauteur : le titre ne peut jamais depasser 9% de la fenetre, quelle que soit sa largeur. */ font-size: min(var(--t-display), 9vh); font-weight: 800; line-height: var(--lh-display); letter-spacing: var(--tr-display); margin-bottom: 0.35em; } .section-titre, .faits-titre, .garantie-titre, .reseau-titre, .klarna-titre, .parcours-titre, .contact-title { font-size: var(--t-h1); font-weight: 800; line-height: var(--lh-h1); letter-spacing: var(--tr-h1); } .marques-titre { font-size: var(--t-h2); font-weight: 700; line-height: var(--lh-h2); letter-spacing: var(--tr-h2); } /* Le titre des faits gagnait a etre contraint : une ligne de titre depasse rarement 20 caracteres avant de perdre en impact. */ .faits-titre { max-width: 16ch; margin-bottom: 1.6em; } /* ================================================================ 3. CORPS DE TEXTE ================================================================ Le sous-titre du hero etait a 13px : c'est le deuxieme texte le plus lu du site, il etait a une taille de tableau de bord. Il passe a l'echelle "lead", et la largeur de ligne est bornee en ch — une ligne au-dela de ~70 caracteres fatigue l'oeil. ================================================================ */ .hero-subtitle { font-size: var(--t-lead); line-height: var(--lh-lead); letter-spacing: var(--tr-body); max-width: 46ch; color: #55555b; } .section-sous-titre, .garantie-desc, .contact-subtitle { font-size: var(--t-lead); line-height: var(--lh-lead); letter-spacing: var(--tr-body); max-width: 62ch; } /* La graisse redevient un signal : le corps courant repasse en 400, ce qui rend le 600 des accents a nouveau lisible comme un accent. */ .section-sous-titre, .hero-subtitle, .garantie-desc, .contact-subtitle, .faits-item p, .reseau-texte { font-weight: 400; } /* ================================================================ 4. SURTITRES ================================================================ Les petites capitales ("CATALOGUE MOTEURS", "PROTECTION TOTALE") sont le seul endroit ou une interlettre POSITIVE est correcte : les capitales collent naturellement. ================================================================ */ .section-entete > span:first-child, .section-surtitre, .eyebrow, [class*="-surtitre"] { font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--tr-label); text-transform: uppercase; } /* ================================================================ 5. LA BANDE DE FAITS — « Ce qui est ecrit sur votre devis » ================================================================ Bureau : quatre colonnes separees par des filets verticaux, le chiffre domine. Telephone : les colonnes empilees trainaient les filets verticaux et les retraits du bureau (conflit de cascade avec style.css) — lignes en zigzag, SIREN qui debordait de l'ecran. La pile devient une LISTE ENCARTEE facon iOS : un conteneur arrondi gris systeme, des rangees separees par des filets horizontaux fins. C'est la metaphore exacte de ce que la section montre — les lignes d'un document contractuel. (Familiarite : le motif « inset grouped list » se lit instantanement comme un releve.) ================================================================ */ .faits-liste { gap: 0; } .faits-liste > li { padding: 0 2rem; border-left: 1px solid rgba(17, 17, 17, 0.10); } .faits-liste > li:first-child { padding-left: 0; border-left: 0; } .faits-liste > li > *:first-child, .faits-chiffre { font-size: var(--t-h2); font-weight: 800; letter-spacing: var(--tr-h2); line-height: 1.05; } /* ── Tablette : deux colonnes, les filets ne survivent que sur la colonne de droite. ─────────────────────────────────────────── */ @media (max-width: 900px) and (min-width: 561px) { .faits-liste { row-gap: 2.75rem; } .faits-liste > li:nth-child(odd) { border-left: 0; padding-left: 0; } } /* ── Telephone : la liste encartee ─────────────────────────────── Un seul objet arrondi sur fond gris systeme (#F5F5F7 — le gris des listes groupees iOS, deja dans la palette du site). Les rangees se separent par des filets horizontaux, pas verticaux. La hierarchie se reordonne : libelle en petites capitales d'abord (ce que c'est), chiffre en grand ensuite (la valeur), preuve en dessous. Le tiret jaune disparait : la carte structure deja, il deviendrait du bruit. La retenue EST le geste Apple. */ @media (max-width: 560px) { .faits-liste { background: var(--c-gris-bg, #F5F5F7); border-radius: 20px; padding: 6px 20px; row-gap: 0; } .faits-liste > li { display: flex; flex-direction: column; border-left: 0; padding: 18px 0 20px; border-top: 1px solid rgba(17, 17, 17, 0.08); } .faits-liste > li:first-child { border-top: 0; } /* Le libelle passe devant le chiffre — l'ordre du DOM ne bouge pas, seule la presentation change. */ .fait-libelle { order: -1; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #6e6e73; /* le gris secondaire d'Apple */ margin-bottom: 7px; } .fait-libelle::before { display: none; } .fait-valeur, .faits-liste > li > *:first-child { font-size: 1.75rem; /* 28px : lisible, jamais criard */ letter-spacing: -0.022em; line-height: 1.05; margin-bottom: 5px; } .fait-preuve { font-size: 0.8125rem; line-height: 1.55; max-width: none; } } /* ================================================================ 6. CARTES MOTEUR ================================================================ Coins un peu plus doux, bordure plus discrete, et surtout une vraie elevation au survol : la carte se detache du fond au lieu de seulement changer de bordure. ================================================================ */ .moteur-card { border-radius: 18px; border-color: rgba(255, 255, 255, 0.10); box-shadow: var(--elev-1); } @media (hover: hover) and (pointer: fine) { .moteur-card:hover { border-color: rgba(255, 255, 255, 0.18); box-shadow: var(--elev-3); } } /* Les cartes claires des sections vitrine. */ .gstat-card, .contact-card, .garantie-card { border-radius: 18px; box-shadow: var(--elev-2); } /* ================================================================ 7. LE HEADER — NE PAS FORKER L'EXISTANT ================================================================ Erreur commise puis corrigee ici, elle merite d'etre notee. J'avais pose une barre de verre pleine largeur sur `.header`. Resultat : sur les pages a hero sombre (garantie), le logo blanc se retrouvait sur un gris pale — illisible. C'est precisement ce que la doctrine interdit : ne jamais empiler une surface translucide claire sur une autre. Surtout, le site avait DEJA le bon systeme : `.header.scrolled .nav` devient un ilot de verre au-dela de 8px de defilement, et header-theme.js inverse les couleurs en consequence. Transparent sur le hero, materiau une fois qu'il y a du contenu dessous : c'est exactement le comportement decrit par la doctrine. On n'ajoute donc rien. On complete seulement ce qui manquait : le repli quand l'utilisateur demande moins de transparence. ================================================================ */ @media (prefers-reduced-transparency: reduce) { .header.scrolled .nav, .header.menu-open .nav { background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: rgba(17, 17, 17, 0.12); } } /* ================================================================ 8. LIGNES DE MESURE ================================================================ Aucun paragraphe ne devrait depasser ~70 caracteres : au-dela, l'oeil perd le debut de la ligne suivante. C'est le reglage qui fait le plus pour la sensation de "mise en page soignee", et il ne coute rien. ================================================================ */ .reseau-texte, .garantie-text, .faq-reponse, .parcours-desc { max-width: 68ch; line-height: var(--lh-body); } /* ================================================================ 9. LE CHIFFRE DE LA GARANTIE ================================================================ Le "24" du badge est le seul chiffre du site qui merite un traitement d'affiche : c'est l'argument commercial central. ================================================================ */ .garantie-badge-container .garantie-jusqu-a, .gbadge-chiffre { letter-spacing: var(--tr-display); line-height: 0.9; } /* ================================================================ 10. RENDU DU TEXTE ================================================================ Inter est une variable font : on demande explicitement l'axe optique quand il est disponible, et on evite la synthese de graisse par le navigateur. ================================================================ */ body { font-optical-sizing: auto; font-synthesis-weight: none; text-rendering: optimizeLegibility; }