/* ---------- POLICES AUTO-HÉBERGÉES ---------- Servies depuis /assets/fonts au lieu de fonts.googleapis.com. 1) Métriques identiques à chaque chargement -> plus de décalage du menu. 2) Aucune requête vers Google -> pas de transfert d'IP, pas de bandeau cookies à prévoir. IBM Plex Mono n'est plus déclarée ici : elle est intégrée en base64 dans assets/fonts/plex-mono-inline.css, appelée avant cette feuille. Tout le bandeau du haut est composé dans cette police. Avec swap, le navigateur affichait d'abord le texte dans la police système — dont les chasses n'ont rien à voir — puis basculait sur Plex Mono : les libellés changeaient de largeur et LE MENU SAUTAIT. Le phénomène ne se produisait que si la police n'était pas prête au premier affichage, d'où son caractère aléatoire. Avec block, aucun texte n'est composé dans une police de repli : plus de bascule possible. Les deux fichiers étant préchargés dans le et servis en local, l'attente est de l'ordre de quelques millisecondes. Archivo et Plex Sans restent en swap : ils ne composent pas le menu. */ @font-face{font-family:'Archivo';src:url('assets/fonts/archivo-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;} @font-face{font-family:'Archivo';src:url('assets/fonts/archivo-latin-800-normal.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;} @font-face{font-family:'Archivo';src:url('assets/fonts/archivo-latin-900-normal.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;} @font-face{font-family:'IBM Plex Sans';src:url('assets/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:'IBM Plex Sans';src:url('assets/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:'IBM Plex Sans';src:url('assets/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;} :root{ --anthracite:#181c22; --anthracite-2:#232830; --ink:#232830; --steel:#4f7096; /* Variante assombrie du bleu, pour les libellés posés sur les fonds clairs. Le --steel d'origine ne donne que 4,05:1 sur le beige --paper-2, sous le seuil AA de 4,5 exigé pour un texte de cette taille. Celui-ci atteint 4,63:1, à l'œil c'est le même bleu. */ --steel-fonce:#47678a; --steel-light:#a9c0d6; --paper:#f5f2ee; --paper-2:#ece3d8; --line:#dbd1c3; --line-dark:#383f4a; --brass:#b8863f; --copper:#a8582f; /* Le cuivre ne donne que 2,89:1 sur l'anthracite : le tiret y disparaît. Cette variante éclaircie, de même teinte, atteint 4,6:1 sur les fonds sombres. */ --copper-clair:#cf7a44; --radius:8px; --display: 'Archivo', sans-serif; --body: 'IBM Plex Sans', sans-serif; --mono: 'IBM Plex Mono', monospace; /* Hauteur réelle du header fixe — sert à décaler le contenu. Recalculée à chaque palier responsive ci-dessous. */ /* 142 = logo 76 + gouttière 11 + signature 19 + marges 18×2. Le menu est passé à droite du logo sur la même ligne : la ligne qu'il occupait seul (53px) a disparu. 192 -> 142. */ --header-h: 142px; } @media (max-width:900px){ :root{ --header-h: 113px; } } /* logo 58 + 8 + 19 + 14×2 */ @media (max-width:640px){ :root{ --header-h: 54px; } } /* logo 34 + 10×2, signature masquée */ *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} } body{ font-family:var(--body); color:var(--ink); background:var(--paper); line-height:1.55; -webkit-font-smoothing:antialiased; } html{ /* Pas de overflow-x ici. Poser un overflow sur l'élément racine fait basculer Chrome sur un chemin de défilement non accéléré : le header fixe est alors redessiné à chaque image au lieu d'être composité, ce qui produit des saccades. Le débordement latéral a été traité à sa source (la baseline du header), ce garde-fou n'a donc plus lieu d'être. */ scroll-padding-top:calc(var(--header-h) + 16px); /* ancres non masquées par le header fixe */ /* ---- LARGEUR DE PAGE CONSTANTE : c'est ce qui empêche le menu de sauter ---- Sur un grand écran, certaines pages tiennent en entier (pas d'ascenseur) et d'autres non (ascenseur présent). L'ascenseur occupe ~15px de large. Or le header est en position:fixed : sa largeur suit la fenêtre, tandis que le contenu, lui, est limité à la largeur restante. Le bandeau et son menu — centrés dans .wrap — se recalaient donc différemment selon que la page défilait ou non. D'où un saut au changement de page, et pas de saut quand les deux pages sont du même côté (toutes deux longues, ou toutes deux courtes). overflow-y:scroll force la présence de l'ascenseur en permanence : toutes les pages ont exactement la même largeur utile. scrollbar-gutter:stable complète le dispositif pour les navigateurs à ascenseur flottant (macOS), où overflow-y ne réserve rien. */ overflow-y:scroll; scrollbar-gutter:stable; } img{max-width:100%; display:block;} a{color:inherit; text-decoration:none;} ul{list-style:none;} :focus-visible{outline:2px solid var(--steel); outline-offset:3px;} .wrap{max-width:1180px; margin:0 auto; padding:0 32px;} @media (max-width:640px){.wrap{padding:0 20px;}} .eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); display:flex; align-items:center; gap:10px; margin-bottom:18px; } .eyebrow::before{content:""; width:22px; height:1px; background:var(--steel); display:inline-block;} /* --- Repères renforcés, même traitement que « Le fondateur » et « Approche et méthodologie » sur Qui sommes-nous : libellé un cran plus gros et plus gras, tiret cuivre deux fois plus épais. Le cuivre attire l'œil sur le marqueur, le bleu porte le mot. --- */ .section-contexte .eyebrow, .section-references .eyebrow{ font-size:12.5px; font-weight:600; } .section-contexte .eyebrow::before, .section-references .eyebrow::before{ width:30px; height:2px; } .section-contexte .eyebrow{color:var(--steel-fonce);} .section-contexte .eyebrow::before{background:var(--copper);} /* Sur le bandeau sombre, les deux couleurs sont leurs variantes claires : le bleu d'origine et le cuivre d'origine y seraient tous deux illisibles. */ .section-references .eyebrow::before{background:var(--copper-clair);} h1,h2,h3{ font-family:var(--display); font-weight:800; letter-spacing:-.01em; line-height:1.05; } /* ---------- HEADER / NAV ---------- */ header{ position:fixed; top:0; left:0; right:0; z-index:100; /* Fond ENTIÈREMENT OPAQUE — c'est le point décisif. Tant que le fond était translucide (rgba .92 puis .96), le navigateur devait mélanger le header avec le contenu qui défile derrière, à chaque image. Il ne pouvait pas non plus garantir un fond opaque sous le texte : sous Windows, Chrome bascule alors le lissage des caractères du sous-pixel vers le niveau de gris, ce qui fait « vibrer » le texte pendant le défilement. À 96% d'opacité la translucidité n'était de toute façon plus perceptible. Le backdrop-filter:blur(6px) a lui aussi été retiré : invisible sur ce fond, mais il forçait un re-floutage permanent de la trame quadrillée du hero. Aucune promotion manuelle en couche GPU (pas de translateZ(0), pas de backface-visibility) : avec un fond opaque, les navigateurs isolent déjà le header fixe tout seuls, et le forçage manuel dégrade le rendu du texte au lieu de l'aider. */ background:var(--anthracite); } /* Une seule ligne : bloc de marque à gauche, menu et langue à droite. Le menu occupe l'espace qui restait vide à droite du logo, et l'en-tête perd la ligne séparée qu'il occupait auparavant — 192px -> 142px. */ .header-main{ display:flex; align-items:center; gap:40px; padding-top:18px; padding-bottom:18px; position:relative; } .header-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:11px; flex-shrink:0; } .brand-signature{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:#fff; font-weight:500; white-space:nowrap; } /* Les trois initiales en bleu de marque. Cette ligne n'est pas un slogan : c'est le décodage du nom — ErvaDis = ERic VAccani + Développement Innovation Stratégie. La relation existait mais restait invisible, alors que le « DiS » bleu du logo se trouve vingt pixels au-dessus. Couleur seule, graisse inchangée : trop d'insistance ferait ressembler ça à une coquille. Contraste vérifié à 6,4:1 sur le fond de l'en-tête. */ .brand-signature b{color:#00A8F0; font-weight:500;} /* Filet de progression au bas du bloc fixe. Il part de la gauche à l'instant exact où les aiguilles s'élancent et atteint la droite quand elles s'arrêtent : même durée (--gauge-dur) et même courbe d'accélération que les jauges, il les accompagne donc tout du long au lieu de se contenter d'arriver en même temps. Positionné en absolu : il ne prend aucune hauteur, la hauteur du header — et donc le calage de tout le contenu en dessous — reste inchangée. Sur les pages sans jauges il reste invisible : la classe .run n'y est jamais posée. */ /* Le rail reprend la classe .wrap : max-width 1180px, marges automatiques, 32px de retrait — donc exactement 1116px de largeur utile, alignés au pixel près sur la bordure cuivrée des blocs Contexte. Le filet n'est pas pleine page. */ .header-rail{ position:absolute; left:0; right:0; bottom:0; pointer-events:none; } /* Filet FIXE. Deux variantes animées ont été essayées puis écartées : tracé simultané avec les jauges (il leur volait l'attention, étant bien plus large), puis tracé rapide au chargement avant leur départ (mouvement superflu, répété à chaque page). Il garde son seul rôle utile : marquer le bas du bandeau. */ .header-progress{ display:block; width:100%; height:2px; /* identique aux autres filets cuivrés du site */ background:var(--copper); } /* Le descripteur « CABINET DE CONSEIL — PERFORMANCE OPÉRATIONNELLE » a été retiré de cette ligne : le titre et le sous-titre du hero le disent déjà, mot pour mot. Effet de bord considérable — il occupait 400px des 1116px disponibles et imposait trois contournements, tous supprimés depuis : largeur figée à 400px, gouttières réduites à 24px, masquage sous 1240px. La ligne du menu n'a plus aucune contrainte de place, et le risque de troncature a disparu avec elle. */ .brand{ display:flex; align-items:center; } /* Logo détouré, posé directement sur l'anthracite — plus de cartouche blanc. Le fichier logo-dark.png est dérivé de votre PNG d'origine, qui contenait déjà un fond transparent : gris foncés passés en blanc cassé pour le fond sombre, ombre portée neutralisée, bleus et rouges intacts. 281 Ko -> 73 Ko au passage. */ .brand-mark{display:block; flex-shrink:0;} .brand-mark img{height:76px; width:auto; max-width:100%; display:block;} @media (max-width:900px){ .brand-mark img{height:58px;} .header-main{padding-top:14px; padding-bottom:14px; gap:24px;} .header-brand{gap:8px;} .brand-signature{font-size:11px; letter-spacing:.08em;} } /* Le menu part désormais du bord gauche : plus rien ne le précède sur cette ligne. Gouttière ramenée à 28px — la contrainte de place qui l'avait fait réduire à 24 n'existe plus (566px occupés pour 1116 disponibles). */ /* margin-left:auto pousse le menu et la langue à droite du bloc de marque. */ nav.primary-nav{position:relative; display:flex; align-items:center; flex-wrap:nowrap; gap:28px; margin-left:auto; flex-shrink:0;} nav.primary-nav a{ font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel-light); position:relative; padding:4px 0; white-space:nowrap; flex-shrink:0; } nav.primary-nav a:hover{color:#fff;} nav.primary-nav a.active{color:#fff;} nav.primary-nav a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--copper); } /* ---------- Trait actif mobile d'une entrée à l'autre ---------- Un seul trait partagé, positionné en absolu, qui glisse de l'entrée de la page précédente vers celle de la page courante. Le ::after ci-dessus reste en place comme repli si JavaScript est indisponible : il est neutralisé dès que le trait mobile est installé (classe .has-indicator posée par le script). */ .nav-indicator{ position:absolute; left:0; top:0; height:2px; width:0; background:var(--copper); opacity:0; pointer-events:none; transition:transform .55s cubic-bezier(.65,0,.35,1), width .55s cubic-bezier(.65,0,.35,1), opacity .35s ease; } nav.has-indicator a.active::after{display:none;} /* Menu vertical : le repère est le liseré cuivré à gauche de l'entrée, pas un trait horizontal. */ @media (max-width:800px){.nav-indicator{display:none;}} /* Pas de border-left ici : le trait vertical se retrouvait collé au « T » de CONTACT. */ .lang-switch{display:flex; align-items:center; gap:7px; margin-left:0; padding-left:26px; flex-shrink:0;} .lang-switch a{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel-light); } .lang-switch a:hover{color:#fff;} .lang-switch a.lang-active{color:#fff; font-weight:600;} .lang-switch a.lang-todo{opacity:.4; cursor:default;} .lang-switch a.lang-todo:hover{color:var(--steel-light);} .lang-switch span{color:var(--line-dark); font-size:11px;} @media (max-width:640px){.lang-switch{padding-left:14px; margin-left:14px;}} .menu-toggle{display:none; background:none; border:1px solid var(--line-dark); color:#fff; width:40px; height:36px; border-radius:var(--radius); cursor:pointer;} .menu-toggle span{display:block; width:18px; height:1.5px; background:#fff; margin:4px auto;} @media (max-width:800px){ nav.primary-nav{ position:absolute; top:100%; left:0; right:0; background:var(--anthracite); flex-direction:column; gap:0; border-bottom:1px solid var(--line-dark); max-height:0; overflow:hidden; transition:max-height .3s ease; } nav.primary-nav.open{max-height:320px;} nav.primary-nav a{padding:16px 24px; border-top:1px solid var(--line-dark);} nav.primary-nav a.active::after{display:none;} nav.primary-nav a.active{border-left:2px solid var(--copper);} /* Le menu passe hors flux : c'est le bouton qui porte désormais la poussée à droite. */ .menu-toggle{display:block; margin-left:auto;} } /* Mobile : la disposition sur une ligne existe déjà, il n'y a plus qu'à réduire. Tout le réagencement en flex qui était nécessaire ici a disparu avec la fusion des deux lignes de l'en-tête. */ @media (max-width:640px){ .header-main{padding-top:10px; padding-bottom:10px; gap:16px;} .brand-mark img{height:34px;} /* La signature prendrait 30px de hauteur fixe sur un écran de téléphone : masquée. */ .brand-signature{display:none;} .menu-toggle{width:38px; height:34px;} .lang-switch{padding-left:14px;} } /* ---------- HERO (Accueil) ---------- */ .hero{ background:var(--anthracite); color:#fff; /* Marge basse réduite : le bandeau de repères affleure sous la ligne de flottaison. C'est le signal de défilement le plus sobre — on montre qu'il y a une suite au lieu de le dire avec une flèche. */ padding:calc(var(--header-h) + 64px) 0 40px; position:relative; overflow:hidden; } /* ---------- PAGE HEADER (pages secondaires) ---------- */ .page-header{ background:var(--anthracite); color:#fff; padding:calc(var(--header-h) + 52px) 0 56px; position:relative; overflow:hidden; } @media (max-width:640px){ .hero{padding:calc(var(--header-h) + 44px) 0 52px;} .page-header{padding:calc(var(--header-h) + 36px) 0 40px;} } /* Trame quadrillée et halo radial retirés du hero et des en-têtes de page (choix esthétique). Effet secondaire bienvenu : c'était la zone la plus coûteuse à redessiner de tout le site (deux dégradés répétés + un mask-image), juste derrière le header fixe. */ @keyframes fadeSlideUp{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} } @keyframes logoPop{ from{opacity:0; transform:scale(.85);} to{opacity:1; transform:scale(1);} } /* Onde qui se propage depuis le point. Amplitude portée de 2,1 à 3 : sur un point de 12px le halo atteint 36px, le battement devient franchement lisible. */ @keyframes pulseDot{ 0%{transform:scale(1); opacity:.7;} 70%{transform:scale(2.6); opacity:0;} 100%{transform:scale(2.6); opacity:0;} } /* Le point lui-même bat en opacité : c'est ce qui donne le clignotement proprement dit, l'onde seule se remarquait à peine. */ @keyframes blinkDot{ 0%,100%{opacity:1;} 50%{opacity:.38;} } .hero-text{position:relative; z-index:1; justify-self:start; width:100%; margin:0;} .hero-text > *{animation:fadeSlideUp .8s cubic-bezier(.2,.7,.2,1) both;} .hero-text > *:nth-child(1){animation-delay:.05s;} .hero-text > *:nth-child(2){animation-delay:.18s;} .hero-text > *:nth-child(3){animation-delay:.32s;} .hero-text > *:nth-child(4){animation-delay:.46s;} .dashboard-card{animation:fadeSlideUp .9s cubic-bezier(.2,.7,.2,1) .34s both;} .dh-dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--dot); animation:pulseDot 2s ease-out infinite; } .hero-inner, .page-header-inner{position:relative; z-index:1;} .page-header h1{ font-size:clamp(30px, 4.4vw, 50px); max-width:18ch; } .page-header .hero-sub{margin-bottom:0;} .hero-inner{display:grid; grid-template-columns:1.12fr .88fr; gap:60px; align-items:center;} @media (max-width:900px){.hero-inner{grid-template-columns:1fr; gap:48px;}} .hero-scope{ font-family:var(--mono); font-size:12px; color:var(--steel-light); letter-spacing:.1em; margin-bottom:28px; display:flex; gap:14px; flex-wrap:wrap; } .hero-scope b{color:#fff; font-weight:500;} h1.hero-title{ font-size:clamp(38px, 5.6vw, 66px); max-width:15ch; margin-bottom:26px; } h1.hero-title em{ font-style:normal; color:var(--steel-light); } .hero-sub{ font-size:18px; color:#c7ccd2; max-width:50ch; margin-bottom:40px; } /* Mise en valeur réservée au sous-titre de l'accueil : filet cuivré à gauche, corps légèrement plus grand, gris éclairci. Le filet reprend le langage du site — bordure cuivrée des cartes du sommaire et des situations — et détache le sous-titre du titre sans l'alourdir. Les sous-titres des pages intérieures ne sont pas touchés. */ .hero .hero-sub{ font-size:19px; line-height:1.5; color:#dfe3e8; max-width:52ch; border-left:2px solid var(--copper); padding-left:22px; } @media (max-width:640px){.hero .hero-sub{font-size:16.5px; padding-left:16px;}} .hero-actions{display:flex; align-items:center; gap:26px; flex-wrap:wrap;} .hero-cta{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; background:var(--copper); color:#fff; padding:15px 28px; border-radius:var(--radius); border:1px solid var(--copper); transition:background .2s, color .2s, border-color .2s, transform .2s; } .hero-cta:hover{background:transparent; color:#e5a583; border-color:#e5a583; transform:translateY(-1px);} .hero-cta-ghost{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel-light); display:inline-flex; align-items:center; gap:8px; border-bottom:1px solid var(--line-dark); padding-bottom:3px; transition:border-color .2s, color .2s; } .hero-cta-ghost:hover{color:#fff; border-color:var(--steel-light);} /* Dashboard card — visuel hero */ .dashboard-card{ background:var(--anthracite-2); border:1px solid var(--line-dark); border-radius:calc(var(--radius) + 6px); padding:28px 26px 24px; position:relative; overflow:hidden; } .dashboard-card::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px); /* Maille atténuée de .30 à .16 : depuis le retrait de la trame du hero, celle-ci restait le seul élément bruyant derrière le texte du bandeau. Elle donne encore la texture « papier millimétré » sans concurrencer les jauges. Remettre .3 pour revenir à l'état précédent. */ background-size:26px 26px; opacity:.16; pointer-events:none; } .dashboard-head{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:26px; position:relative; z-index:1; padding-bottom:16px; border-bottom:1px solid var(--line-dark); } /* Sous 520px, le libellé et l'état se superposent : on les empile. */ @media (max-width:520px){ .dashboard-head{flex-direction:column; align-items:flex-start; gap:7px;} .dh-status{text-align:left;} } /* Titre du panneau, précédé de son témoin — lecture d'un bandeau d'instrument : [témoin] LIBELLÉ ......................................... état */ .dh-label{ display:flex; align-items:center; gap:11px; font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:#fff; font-weight:500; } /* L'état reste en casse normale, comme les valeurs sous les jauges : dans tout le site, les capitales signalent un libellé, la casse normale une valeur. Deux blocs en capitales se seraient concurrencés. */ .dh-status{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:#8a94a0; text-align:right; /* #8a94a0 : le gris le plus discret qui reste lisible (4,8:1) */ } /* Le témoin suit l'état des jauges : rouge tant qu'elles n'ont pas toutes basculé, bleu ensuite. Les deux teintes sont exactement celles des arcs. Les variables sont posées sur la carte et héritées par le point et son onde. */ .dashboard-card{--dot:#c0392b; --dot-halo:rgba(192,57,43,.20); --dot-glow:rgba(192,57,43,.55);} .dashboard-card.all-blue{--dot:var(--steel); --dot-halo:rgba(79,112,150,.22); --dot-glow:rgba(79,112,150,.60);} .dh-dot{ position:relative; flex:0 0 auto; /* 9px et non 12 : à côté du libellé, 12px faisait pastille. Ce qui donne la présence, ce n'est pas le diamètre mais le halo lumineux — le point se lit comme une diode allumée plutôt que comme un disque plat. */ width:9px; height:9px; border-radius:50%; margin-top:-1px; /* recentrage optique sur la hauteur des capitales */ background:var(--dot); box-shadow:0 0 0 3px var(--dot-halo), /* anneau net */ 0 0 11px 1px var(--dot-glow); /* diffusion */ animation:blinkDot 2s ease-in-out infinite; transition:background .9s ease, box-shadow .9s ease; /* bascule douce du rouge au bleu */ } /* Gauges */ /* Disposition voulue : les quatre axes pilotés en carré 2x2 — OEE, Qualité, Coût, TTM — et la synthèse en dessous sur toute la largeur, son format plus grand traduisant la hiérarchie. POURQUOI 2x2 ET NON UNE LIGNE DE QUATRE : la carte du hero fait 464px de large, soit 412px de contenu. Quatre colonnes avec 16px de gouttière tombent à 91px chacune — et à 901px de fenêtre, à 60px. Or le seul mot « Disponibilité » mesure 78px en Plex Mono 10px : il déborderait de sa colonne sur toute la plage 901-1115px. En 2x2 chaque axe dispose de ~198px sur grand écran et jamais moins de 135px sur mobile, ce qui laisse tous les libellés tenir sur deux lignes. En grille plutôt qu'en flex-wrap : ainsi la mise en page ne dépend plus de la largeur de la carte. Avant, le passage à la ligne de Performance était un effet de bord du flex-wrap, qui se produisait ou non selon la taille de la fenêtre — et jamais sur mobile. */ .gauges{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; position:relative; z-index:1; } .gauge{min-width:0; text-align:center;} /* Arc plafonné à 130px sur les quatre petites jauges. Sans ce plafond, passer de trois colonnes à deux ferait grandir chaque arc de 127 à 198px : la carte gagnerait près de 250px de hauteur et le bandeau Repères passerait sous la ligne de flottaison. À 130px les arcs gardent la taille qu'ils avaient, seule la colonne de texte s'élargit — ce qui est précisément ce qu'on cherchait. */ .gauge .gauge-svg{max-width:130px;} /* Performance de l'organisation — synthèse, sur toute la largeur de la grille. L'arc était réduit à 80% : à pleine largeur il occupait la moitié de la carte pour une seule aiguille, avec un grand vide au centre. La hiérarchie reste lisible — il fait toujours plus du double des quatre autres — sans écraser le reste. */ .gauge:nth-child(5){grid-column:1 / -1;} /* 55% et non 80% : à 80% l'arc faisait 330px contre 130px aux quatre autres, un rapport de 2,5 qui ne se lisait plus comme leur synthèse mais comme un objet séparé posé en dessous. À 55% il fait 227px, soit 1,75 fois les petits — la hiérarchie reste évidente et la carte gagne 60px de moins en hauteur. */ .gauge:nth-child(5) .gauge-svg{max-width:55%;} /* centré par le text-align de .gauge */ @media (max-width:560px){.gauges{gap:12px;}} .gauge-svg{width:100%; height:auto;} .gauge-track{fill:none; stroke:var(--line-dark); stroke-width:8; stroke-linecap:round;} .gauge-fill{ fill:none; stroke:#c0392b; stroke-width:8; stroke-linecap:round; /* Le point rouge parasite venait d'ici. Avec stroke-dasharray:100 et un décalage de 100, le trait a une longueur nulle — mais une extrémité arrondie de longueur nulle est quand même dessinée par le navigateur : un disque rouge, à l'arrêt sur l'arc. Motif porté à « 100 200 » et décalage initial à 101 : plus aucune limite de tiret ne tombe sur le tracé, donc plus rien à dessiner tant que l'animation n'a pas démarré. Les extrémités arrondies restent actives pendant toute la montée. */ stroke-dasharray:100 200; stroke-dashoffset:101; /* Montée lente de 20 s, parti pris esthétique assumé. Sans coût de rendu : la bascule de couleur est programmée à l'avance dans script.js, il n'y a aucune lecture de style pendant l'animation. */ transition:stroke-dashoffset var(--gauge-dur,20s) cubic-bezier(.16,.6,.14,1), stroke .8s ease; } .gauge.active .gauge-fill{stroke-dashoffset:var(--fill-offset);} .gauge.past-half .gauge-fill{stroke:var(--steel);} .gauge-needle{ stroke:var(--brass); stroke-width:2.5; stroke-linecap:round; transform-origin:60px 65px; transform:rotate(-90deg); transition:transform var(--gauge-dur,20s) cubic-bezier(.16,.6,.14,1); } .gauge.active .gauge-needle{transform:rotate(var(--needle-angle));} .gauge-hub{fill:var(--brass);} .gauge-label{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; color:var(--steel-light); margin-top:6px; text-transform:uppercase; } .gauge-value{ font-family:var(--mono); font-size:10px; color:#8a94a0; margin-top:2px; /* Deux lignes réservées en permanence. La colonne d'une petite jauge fait 198px sur grand écran mais descend à 135px sur mobile : un libellé un peu long passe alors à la ligne, et comme les jauges sont alignées en grille, seule celle-ci descendrait — les libellés OEE / QUALITÉ / COÛT / TTM ne seraient plus au même niveau. En réservant la hauteur pour tout le monde, le passage à la ligne devient possible sans jamais rompre l'alignement. Deux lignes suffisent à toutes les tailles : le plus long libellé, « Industrialisation · Montée en cadence », occupe 29 caractères sur la première ligne à 198px et 19 à 135px. Vérifié à 375, 768, 901, 1180 et 1440px. */ line-height:1.4; min-height:28px; } /* La synthèse est le seul sous-libellé en capitales, et c'est cohérent : les quatre autres citent des indicateurs (des valeurs), celui-ci cite les LIBELLÉS des quatre jauges du dessus, qui sont eux-mêmes en capitales. La règle du site est respectée — capitales pour un libellé, casse normale pour une valeur. Interlettrage ajouté : sans lui, des capitales en 10px se lisent comme un bloc. */ .gauge:nth-child(5) .gauge-value{text-transform:uppercase; letter-spacing:.1em;} /* Sous 360px (iPhone SE et équivalents) la colonne tombe à 108px : OEE et TTM demandent une troisième ligne. On réserve trois lignes pour tout le monde plutôt que de laisser la seule jauge concernée décrocher. */ @media (max-width:360px){.gauge-value{min-height:42px;}} /* ---------- SECTION CONTEXTE — fond clair ---------- C'est le rythme qui manquait à l'accueil : rien ne disait « nouveau chapitre ». Le site alterne déjà — Qui sommes-nous sur fond papier, Savoir-faire sur fond sombre ; l'accueil était la seule page monochrome. Bénéfice annexe : quatre encadrés de texte dense se lisent mieux en foncé sur clair que l'inverse. */ .section-contexte{background:var(--paper); color:var(--ink); padding:92px 0 100px;} .section-contexte .context-band{margin-top:26px; padding-top:0; border-top:0;} .section-contexte .context-intro p{color:#3d4451;} .section-contexte .context-lead{color:var(--steel);} .section-contexte .context-lead::after{background:var(--line);} .section-contexte .context-grid{background:var(--line);} .section-contexte .context-item{background:var(--paper-2); text-align:left;} .section-contexte .context-item h3{color:var(--ink);} .section-contexte .context-item p{color:#5a6270;} .section-contexte .context-close{color:#3d4451;} .section-contexte .context-close b{color:var(--ink);} @media (max-width:560px){.section-contexte{padding:64px 0 72px;}} /* ---------- LE FONDATEUR ET LA MÉTHODE — page Qui sommes-nous ---------- */ .fondateur, .methode{ padding-top:30px; border-top:1px solid var(--line); } .fondateur-texte .eyebrow, .methode .block-label{ font-size:12.5px; letter-spacing:.14em; color:var(--steel-fonce); font-weight:600; margin-bottom:14px; } /* Tiret cuivre devant un libellé bleu : le cuivre est la couleur d'accent du site, il attire l'oeil sur le marqueur, le bleu porte le mot. */ .fondateur-texte .eyebrow::before{width:30px; height:2px; background:var(--copper);} /* Le libellé de la méthode n'a pas de tiret : on le lui ajoute, pour que les deux marqueurs de la page soient identiques. */ .methode .block-label{display:flex; align-items:center; gap:10px;} .methode .block-label::before{ content:""; width:30px; height:2px; background:var(--copper); display:inline-block; } /* Portrait à largeur FIXE : en fr, il s'étirait avec la fenêtre et le visage grossissait jusqu'à écraser le texte. 264px correspond à la largeur où la photo fait le poids d'un portrait, pas d'une illustration. */ .fondateur{ display:grid; grid-template-columns:264px 1fr; gap:44px; align-items:start; margin-bottom:58px; } .fondateur-portrait img{ width:100%; height:auto; display:block; filter:grayscale(1) contrast(1.04); } .fondateur-texte h2{font-size:30px; margin:12px 0 5px;} .fondateur-role{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-fonce); margin-bottom:20px; } .fondateur-texte p{font-size:15.5px; color:#3d4451; margin-bottom:14px; max-width:62ch;} .fondateur-lien{ display:inline-block; margin-top:6px; font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--copper); border-bottom:1px solid rgba(168,88,47,.35); } .fondateur-lien:hover{border-bottom-color:var(--copper);} @media (max-width:760px){ .fondateur{grid-template-columns:1fr; gap:24px; margin-bottom:44px;} .fondateur-portrait{max-width:216px;} } /* ---------- RÉFÉRENCES — accueil ---------- Fond sombre : le bloc porte la preuve, il doit se détacher du reste de la page. La trame quadrillée qui figurait ici a été retirée : sur une section devenue longue, elle passait derrière cinq missions et leurs chiffres, et brouillait la lecture au lieu de l'appuyer. */ .section-references{ background:var(--anthracite-2); color:#fff; border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); padding:92px 0 100px; position:relative; overflow:hidden; } .section-references .wrap{position:relative; z-index:1;} .section-references .eyebrow{color:var(--steel-light);} .section-references h2.section-title{color:#fff;} .ref-intro{max-width:66ch; color:#aeb5bd; font-size:16px; margin-bottom:54px;} /* Colonne d'identification à largeur fixe : les cinq secteurs s'alignent alors verticalement, et l'oeil peut les parcourir sans lire les intitulés. */ .ref-list{border-top:1px solid var(--line-dark);} .ref-row{ display:grid; grid-template-columns:206px 1fr; gap:30px; padding:26px 0 28px; border-bottom:1px solid var(--line-dark); } .ref-secteur{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel-light); } .ref-meta{font-family:var(--mono); font-size:11.5px; color:#8a94a0; margin-top:6px;} .ref-body h3{ font-family:var(--body); font-weight:600; font-size:16.5px; color:#fff; margin-bottom:12px; letter-spacing:0; } .ref-note{font-size:15px; color:#aeb5bd; max-width:74ch;} /* Les chiffres sont l'argument : ils sont donc les seuls éléments en laiton et à cette taille. La légende dessous reste en chasse fixe et discrète. */ .ref-stats{display:flex; flex-wrap:wrap; gap:44px;} .ref-stat b{ display:block; font-family:var(--display); font-weight:800; font-size:25px; color:var(--brass); line-height:1.1; } .ref-stat span{ display:block; margin-top:5px; font-family:var(--mono); font-size:11.5px; color:#8a94a0; } .ref-stat + .ref-stat{margin-left:0;} .ref-body .ref-note + .ref-stats, .ref-body .ref-stats + .ref-note{margin-top:16px;} @media (max-width:760px){ .ref-row{grid-template-columns:1fr; gap:12px;} .ref-stats{gap:28px;} } @media (max-width:560px){ .section-references{padding:64px 0 72px;} } /* ---------- CLÔTURE ---------- La page enchaînait promesse → repères → problème, puis s'arrêtait : le visiteur le plus intéressé, celui qui avait tout lu, arrivait au pied de page sans rien à cliquer — le seul bouton étant sorti de l'écran depuis deux sections. Ce bloc lui redonne une porte de sortie, et rend à la promesse d'engagement le traitement qu'elle mérite : elle était en dernière ligne d'un paragraphe. Retour au fond sombre : la page se referme comme elle a commencé. */ .section-cloture{background:var(--anthracite); color:#fff; padding:76px 0 84px;} .cloture-inner{display:flex; align-items:center; justify-content:space-between; gap:56px;} .cloture-texte{ font-family:var(--display); font-weight:700; letter-spacing:-.01em; line-height:1.22; font-size:clamp(22px, 2.5vw, 30px); color:#dfe3e8; max-width:34ch; } .cloture-texte b{color:#fff; font-weight:700;} .cloture-inner .hero-cta{flex-shrink:0;} @media (max-width:800px){ .cloture-inner{flex-direction:column; align-items:flex-start; gap:32px;} } @media (max-width:560px){.section-cloture{padding:56px 0 60px;}} /* Numérotation des situations. Quatre objets de poids égal s'annulent : l'œil ne sait par lequel commencer. Des chiffres imposent un ordre de lecture sans toucher aux poids. */ .ci-num{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--copper); margin-bottom:9px; } /* ---------- BANDEAU CONTEXTE — structure commune ---------- */ .context-band{ position:relative; z-index:1; margin-top:76px; padding-top:46px; border-top:1px solid var(--line-dark); } /* Les BLOCS DE TEXTE pleine largeur reviennent à gauche : centrés, ils créaient un axe concurrent de celui du titre juste au-dessus, et c'est là que se voyait la rupture. Les quatre cartes, elles, restent centrées — du texte centré à l'intérieur d'une cellule ne prétend pas à l'axe de la page, chaque carte a son propre centre. */ .context-intro{max-width:76ch; margin-left:0; margin-right:auto; text-align:left;} .context-intro p{font-size:16.5px; color:#c7ccd2;} /* Plex Sans et non Plex Mono. Une chasse fixe est faite pour du code : en capitales elle donne des étiquettes nettes, mais en bas-de-casse le « i » et le « l » reçoivent la largeur du « m » et le texte paraît distendu. C'est une phrase, elle prend donc la police de texte du site. */ .context-lead{ font-family:var(--body); font-size:15px; letter-spacing:0; font-weight:500; color:var(--steel-light); margin-top:30px; display:flex; align-items:center; gap:16px; justify-content:flex-start; } /* Un seul filet, à droite : le texte reste calé sur l'arête gauche de la page. */ .context-lead::after{content:""; flex:1; height:1px; background:var(--line-dark);} /* Sur mobile la ligne se replie forcément : le filet n'a plus de sens. */ @media (max-width:640px){ .context-lead{display:block; text-align:left;} .context-lead::after{display:none;} } .context-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dark); margin-top:22px; } .context-item{ background:var(--anthracite-2); padding:26px 24px; border-top:2px solid var(--copper); text-align:center; } .context-item h3{ font-family:var(--body); font-weight:600; font-size:15px; letter-spacing:0; line-height:1.3; color:#fff; margin-bottom:10px; } /* En 4 colonnes, deux titres tiennent sur une ligne et deux sur deux : les textes dessous démarraient à des hauteurs différentes. On réserve deux lignes. */ @media (min-width:901px){ .context-item h3{min-height:39px;} } .context-item p{font-size:13.5px; color:#aeb5bd;} .context-close{ margin:30px auto 0 0; font-size:16.5px; color:#c7ccd2; max-width:82ch; text-align:left; } .context-close b{color:#fff; font-weight:600;} @media (max-width:900px){.context-grid{grid-template-columns:1fr 1fr;}} @media (max-width:560px){ .context-grid{grid-template-columns:1fr;} .context-band{margin-top:52px; padding-top:34px;} .context-intro p, .context-close{font-size:15.5px;} } /* Bandeau de repères — fond pleine largeur, volontairement. Essai fait puis abandonné : contenir le fond dans la colonne centrale transformait le bandeau en boîte flottante au-dessus du pied de page. Le débord est ici un procédé, pas un défaut — il fait socle et referme la page. Le CONTENU, lui, reste dans le .wrap : il était déjà aligné sur les cartes du Contexte, seul le fond s'étend jusqu'aux bords de l'écran. */ .proof-bar{ background:var(--anthracite-2); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); } /* Une colonne mise en avant : le déséquilibre est voulu, c'est lui qui crée le point d'entrée du bandeau. Le jour où un résultat client remplacera la date, il sera plus fort encore — un chiffre ne vaut à cette taille que s'il dit quelque chose. */ .proof-item--fort .proof-v{ font-family:var(--display); font-weight:800; font-size:30px; line-height:1; } /* Colonnes INÉGALES, et c'est voulu : la largeur suit le contenu au lieu de l'écraser. « 2018 » n'a besoin de rien, le positionnement a besoin de place pour énoncer la différence entre consultant et manager de transition — l'argument le plus utile du bandeau, qui tenait jusqu'ici en deux mots sans explication. Les TROIS PREMIÈRES sont égales, seule la quatrième est élargie : sur 1116px cela donne 205 / 205 / 205 / 501. Deux contraintes fixent ces valeurs. Les colonnes égales doivent loger « Luxe maroquinerie » sur une ligne, soit 138px utiles. Et le positionnement doit loger « Consultant · conseil, suivi, accompagnement vers le résultat » d'un seul tenant, soit 424px utiles — sans quoi le mot « résultat » se retrouve seul en bas. Total minimum : 3×194 + 480 = 1062px, il reste donc 54px de marge. La gouttière est passée de 32 à 28px pour dégager ces 54px : à 32px, les colonnes égales n'avaient plus que 3px de battement sous « Luxe maroquinerie ». En grille et non plus en flex : les largeurs sont alors déclarées, pas subies. */ .proof-strip{display:grid; grid-template-columns:1fr 1fr 1fr 2.44fr;} /* Variante à trois colonnes, page Qui sommes-nous. Mêmes proportions inégales et même raison : la colonne des secteurs porte deux lignes, les deux autres une seule. Sur 1116px : 279 / 523 / 314. */ .proof-strip--trois{grid-template-columns:.8fr 1.5fr .9fr;} .proof-item{ padding:26px 28px; border-right:1px solid var(--line-dark); } /* Ligne vide entre les deux positionnements : ce sont deux offres distinctes, pas deux lignes d'une même liste comme les pays ou les secteurs. */ .proof-role + .proof-role{margin-top:18px;} .proof-item:last-child{border-right:0;} /* Sous 900px la 4e colonne n'a plus la largeur nécessaire : on repasse en 2×2, puis en colonne unique sur mobile. */ @media (max-width:900px){ .proof-strip{grid-template-columns:1fr 1fr;} .proof-item{border-bottom:1px solid var(--line-dark);} .proof-item:nth-child(2n){border-right:0;} } @media (max-width:560px){ .proof-strip{grid-template-columns:1fr;} .proof-item{border-right:0;} } .proof-k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--steel-light); opacity:.8; margin-bottom:7px; } .proof-v{font-family:var(--display); font-weight:700; font-size:15.5px; color:#fff; line-height:1.3;} /* Le rôle reste en gras, sa définition passe en texte courant : sans cette rupture, quatre lignes de titrage gras se lisaient comme quatre affirmations de même poids, alors que seuls « Consultant » et « Manager de transition » sont les libellés. Le reste les explique, et n'a pas à crier aussi fort. */ .proof-detail{ font-family:var(--body); font-weight:400; font-size:14px; color:#aeb5bd; } /* ---------- SECTION GENERIC ---------- */ section{padding:104px 0;} @media (max-width:640px){section{padding:72px 0;}} /* Deux paragraphes d'introduction dans un en-tête : sans cette règle ils se collent, .page-header-sub n'ayant pas de marge basse. */ .page-header-sub + .page-header-sub{margin-top:16px;} .section-shade{background:var(--paper-2);} h2.section-title{ font-size:clamp(26px, 3.4vw, 40px); max-width:20ch; margin-bottom:20px; } /* Qui sommes nous */ /* Bloc méthode, seul rescapé de l'ancienne grille à deux colonnes : les trois paragraphes qui l'accompagnaient ont été supprimés faute de contenu réel. Largeur de lecture bornée, sinon les puces s'étireraient sur 1116px. */ .methode{margin-top:50px;} /* Les quatre principes en carré 2x2. Filets d'un pixel obtenus par la gouttière de la grille, comme les situations de l'accueil : un seul fond, quatre cartes. Fond --paper sur le --paper-2 de la section, pour que le bloc SE DÉTACHE. */ .methode-intro{font-size:16px; color:#3d4451; margin-bottom:4px; max-width:64ch;} .principes{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:22px; } @media (max-width:760px){.principes{grid-template-columns:1fr;}} .principe{background:var(--paper); padding:28px 30px 30px;} .principe b{ display:block; font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:-.01em; line-height:1.3; color:var(--ink); margin-bottom:10px; padding-top:14px; position:relative; } .principe b::before{ content:""; position:absolute; left:0; top:0; width:22px; height:2px; background:var(--copper); } .principe p{font-size:14.5px; line-height:1.65; color:#5a6270;} /* Contact */ /* Colonnes INÉGALES : quatre lignes de coordonnées n'ont pas besoin de la moitié de la page. À égalité, elles flottaient dans le vide et la carte était étirée sur une largeur qu'elle ne réclamait pas. Le formulaire, lui, récupère l'espace utile. */ .contact-grid{display:grid; grid-template-columns:.82fr 1.18fr; gap:64px;} @media (max-width:800px){.contact-grid{grid-template-columns:1fr; gap:44px;}} .contact-detail{margin-bottom:22px;} .contact-detail .k{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); margin-bottom:5px; display:flex; align-items:center; gap:9px; } /* Pictogrammes au trait plutôt qu'émojis. Les émojis sont dessinés et colorés par le système d'exploitation : ni la teinte ni la forme ne seraient maîtrisées, et le rendu changerait d'un visiteur à l'autre. Ici : SVG en ligne, une seule couleur héritée du libellé, trait de 1,7px — la même épaisseur que les aiguilles des compteurs. Aucun fichier, aucune police d'icônes, aucune requête supplémentaire. */ .contact-detail .k svg{ flex:0 0 auto; width:15px; height:15px; color:var(--copper); } .contact-detail a, .contact-detail p{font-size:16px;} /* ---------- PLAN ---------- Iframe Google Maps, dans la colonne de gauche sous les coordonnées. ⚠ Seul appel tiers de tout le site, et il dépose des cookies au chargement. Traitement prévu le jour de la mise en ligne, voir le journal de chantier. */ .map-frame{margin-top:30px;} /* ---------- VIGNETTE DU PLAN ---------- Dessinée dans la charte du site plutôt qu'avec une capture de Google : une image de leurs cartes serait soumise à leurs conditions d'utilisation, et pèserait plusieurs centaines de kilo-octets pour un élément qu'on remplace au premier clic. Ici, tout est en CSS : zéro octet transféré. C'est un