/* ============================================================================ TAHA CONSULTING — feuille de style commune ---------------------------------------------------------------------------- Partagée par index.html, mentions-legales.html et 404.html. Elle était en ligne dans index.html tant que le site tenait sur une page ; à trois pages, une copie par fichier aurait dérivé au premier changement de token. Les chemins de fontes sont relatifs à CE fichier, donc « fonts/… ». ========================================================================== */ /* Polices auto-hébergées : plus de requête vers un domaine tiers, pas de dépendance externe, et le sous-ensemble latin réduit le poids d'un quart. Ce sont des fontes variables — un seul fichier couvre toutes les graisses. */ @font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap; src:url("fonts/inter.woff2") format("woff2");} @font-face{font-family:"Newsreader";font-style:normal;font-weight:300 500;font-display:swap; src:url("fonts/newsreader.woff2") format("woff2");} /* ============================================================================ TAHA CONSULTING — page continue, pleine largeur ---------------------------------------------------------------------------- La page se lit d'un trait : les sections se suivent, séparées par un filet 1px, par l'alternance blanc / sable et par un pas vertical unique (--sp). Le contenu vient du deck « Création Site Web » (mai 2026) : qui sommes-nous, vision & mission, services, approche, pourquoi Taha Consulting, charte de valeurs, contact. Toute section ajoutée doit exister dans le deck — c'est la source, pas le site. Deux catégories de blocs, à ne pas confondre : · SECTIONS DE CONTENU — badge + h2 + phrase, centrés (.head), puis le contenu. Qui sommes-nous, vision & mission, services, approche, pourquoi nous, charte de valeurs, contact. · BANDES — ni badge ni chapeau, elles ponctuent : les chiffres après le héros et le bandeau bleu avant la charte. Un titre .sr-only donne à la bande de chiffres un nom accessible. DEUX panneaux seulement, et ils sont identiques — même sable, même rayon, même bordure : le cabinet et le contact, première et dernière section de contenu. Construction identique aussi : chapeau centré hors panneau, puis deux colonnes. Le panneau ne veut donc dire qu'une chose dans la page, et la boucle se referme sur la forme qui l'a ouverte. Rien d'autre n'est encadré : un troisième panneau ferait du motif la norme au lieu d'une ponctuation. La page s'ouvre sur le héros en image pleine hauteur et se ferme sur le pied de page en bande pleine largeur. Cette bande n'est plus sombre : elle porte le bleu roi --royal, comme la barre de navigation sur téléphone et tablette. Les deux bandes qui encadrent la page sont donc de la même teinte. L'ordre de lecture répond à la question du visiteur : qui êtes-vous, que savez-vous faire, comment, pourquoi vous. Vision & mission et la charte ferment la page — c'est le contenu d'identité, il sert celui qui hésite encore après l'appel, pas celui qui cherche à qualifier le cabinet. L'ordre des fonds, du héros au pied de page — alternance stricte, le bleu comptant comme sa propre valeur : sombre, blanc, sable, blanc, sable, blanc, bleu, sable, blanc, sable, sombre. Le sable appartient au FOND DE SECTION, le blanc aux objets qui s'en détachent : panneaux, cartes de services. Ne jamais inverser — c'est ce qui permet à deux sections voisines de ne pas se toucher. Une seule voix dans les titres : chaque h2 est une affirmation qui dit ce que le lecteur obtient ou constate, adressée à lui. Pas de question, pas de titre replié sur « nous ». Le modèle est « Ce que vous recevez, et à quel moment ». Un seul appel encadré dans toute la page : le bandeau bleu. Les fins de section partagent une forme neutre et répétable (.sec-cta) — une phrase, un bouton, centrés. Un appel qui change de forme ne s'apprend jamais. Règles de la DA, telles qu'elles s'appliquent aujourd'hui : · texte #0F0F0F, secondaire et libellés #69707E, accent unique #0472AE. Aucun gris plus clair pour du texte : le seuil AA de 4,5:1 est ferme. · deux familles — Newsreader pour h1/h2, Inter pour tout le reste. Aucun h3 ne dépasse la taille du h2 qui l'annonce. · trois rayons (--r-s / --r-m / --r-l) ; les gélules font exception. · dégradés réservés aux voiles de lisibilité (héros, cartes services) — jamais décoratifs. Aucune ombre portée marquée. · mouvement : révélation au défilement, mot pivotant du héros, étapes de l'approche, survols. Tout est neutralisé sous prefers-reduced-motion. · deux vocabulaires de flèche, à ne pas mélanger : horizontale sur les boutons, diagonale uniquement sur les cartes de services. ========================================================================== */ :root{ --paper:#FFFFFF; --ink:#0F0F0F; /* texte principal */ --ink-2:#69707E; /* texte secondaire ET libellés — 4,56:1 sur sable, 4,98:1 sur blanc. Il n'y a plus de gris clair pour les petits libellés : l'ancien #9CA3AF plafonnait à 2,55:1 sur blanc, très en dessous du seuil AA de 4,5:1. */ --line:#E5E7EB; --line-2:#D5D2CA; /* filet plus marqué : bordures de champs, soulignés */ --line-ink:rgba(15,15,15,.28); /* filet sombre : le contour des deux séries de cartes, et rien d'autre. Une encre transparente plutôt qu'un gris opaque, pour qu'il tienne aussi bien sur le blanc que sur le sable. À .28, la carte se détache franchement sans passer devant le bleu de marque : un noir plein ferait de ces cartes l'objet le plus contrasté de la page, avant les services et le contact. */ --sand:#F6F5F2; /* fond des sections paires, gris chaud très léger */ --sand-line:#E3E1DC; /* filets sur ce fond : le gris froid y disparaîtrait */ /* Accent bleu ciel. Le bleu roi #2563EB portait 5,17:1 sur blanc et 4,74:1 sur sable ; ce céruléen tient 5,22 et 4,79 — la teinte change, le seuil AA ne bouge pas. Un ciel plus clair (#0EA5E9, #38BDF8) tombe sous 3:1 avec du texte blanc dessus : il ne peut pas porter les boutons ni le bandeau. */ --blue:#0472AE; --blue-h:#035C8E; /* Ciel franc, réservé au FOND SOMBRE — mot allumé du héros, survols du menu plein écran. Sur blanc il ne passerait aucun seuil ; ne jamais l'y poser. */ --sky:#7DD3FC; /* Voile de ciel : fonds de survol des boutons clairs. */ --sky-tint:#E0F2FE; /* Bleu roi des deux bandes qui encadrent la page : la barre de navigation sur téléphone et tablette, et le pied de page. Elles portaient l'encre sombre #14171C ; le cabinet les veut de cette teinte, choisie sur nuancier. Réservé à ces deux fonds — l'accent de la page reste --blue. */ --royal:#4A76D5; /* Trois rayons, un par échelle d'objet. Toute nouvelle surface arrondie choisit l'un des trois — pas une sixième valeur au jugé. Les boutons et pastilles font exception : ce sont des gélules, pas des cartes. */ --r-s:10px; /* champs de formulaire */ --r-m:clamp(14px,1.4vw,18px); /* cartes et images */ --r-l:clamp(20px,2.6vw,32px); /* panneaux pleine largeur */ --shadow:0 1px 3px rgba(0,0,0,.06); --max:1440px; /* la page occupe l'écran */ --pad:clamp(20px,3.5vw,48px); --sp:clamp(72px,7vw,112px); /* pas vertical unique des sections */ /* La barre a été montée de 56 à 76px pour le logo : celui du cabinet est un fichier carré dont le dessin n'occupe que la partie centrale, et à 34px il ne se lisait plus. Tout ce qui dégage la barre — le héros, le menu mobile, le corps des pages annexes — se règle sur cette seule valeur. */ --nav-h:66px; } *{margin:0;padding:0;box-sizing:border-box;} /* Pas de `scroll-behavior:smooth` ici : sa durée appartient au navigateur, qui la raccourcit à mesure que la distance grandit — un saut vers le pied de page arrivait presque sec. Le défilement est piloté dans site.js, où la durée suit la distance et l'arrivée se pose. Sans JavaScript, les ancres sautent, ce qui reste le comportement standard d'un lien interne. */ body{ background:var(--paper); color:var(--ink); font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-size:14px; line-height:1.6; letter-spacing:-.025em; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;letter-spacing:inherit;} :focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px;} ::selection{background:var(--blue);color:#fff;} .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);} /* Un contenu qui n'existe qu'en français. La règle générale du site reste l'inverse — ce qui se lit en français se lit en anglais — et ce sélecteur ne sert qu'aux endroits où la version anglaise ferait doublon avec ce qui l'entoure. `display:none` plutôt qu'une visibilité masquée : rien ne doit rester dans le flux, ni espace ni interligne. La bascule de langue écrit `lang` sur , c'est elle qui déclenche la règle. */ html[lang="en"] .fr-only{display:none;} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} /* Piège à robots des formulaires (voir envoi.php) : hors de l'écran, hors du clavier et, par aria-hidden dans le HTML, hors des lecteurs d'écran. */ .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;} a.sr-only:focus{position:fixed;top:12px;left:12px;z-index:60;width:auto;height:auto;clip:auto; margin:0;padding:12px 18px;background:var(--ink);color:#fff;font-size:13px;border-radius:9999px;} /* Une section = un pas vertical + un filet. */ .sec{padding:var(--sp) 0;border-top:1px solid var(--line);scroll-margin-top:88px;} .sec:first-of-type{border-top:0;} /* Une section sur deux sur fond sable : le changement de valeur remplace le filet, qui n'a plus rien à séparer. Les cartes blanches y gagnent en relief. */ .sec-alt{background:var(--sand);border-top-color:transparent;} .sec-alt+.sec{border-top-color:transparent;} /* Trois sections ne peuvent pas passer au sable : cabinet, pourquoi et contact portent une surface sable à l'intérieur — .panel — qui disparaîtrait dans un fond de même valeur. Deux ne peuvent pas passer au blanc, pour la raison inverse : positionnement tient un damier de quartiers clairs, services des cartes blanches, et les unes comme les autres ont besoin du sable pour se détacher. L'alternance est stricte, sans exception : cabinet blanc, positionnement sable, services blanc, approche sable, vision blanc, valeurs sable, contact blanc. Aucune section ne partage son fond avec sa voisine. Ce sont les surfaces intérieures qui s'adaptent, jamais l'inverse : le rang d'une section dans la page décide de son fond, et ce qu'elle porte prend la valeur opposée. Les cartes de services sont sable sur section blanche, les panneau du formulaire est sable sur la section blanche du contact, les quartiers du positionnement restent clairs sur sable. C'est la règle à tenir en ajoutant une section : on l'insère, on inverse tout ce qui suit, et on retourne les surfaces des sections déplacées. */ /* ---------------------------------------------------------------- TYPO ---- */ /* Deux voix : une serif de titrage qui donne au cabinet sa gravité, Inter pour tout ce qui se lit et se manipule. Les h3 restent en Inter — dans une carte ou une étape, ils fonctionnent comme des libellés, pas comme des titres. Newsreader porte un axe optique (opsz) : son dessin s'affine de lui-même dans les grands corps, ce qu'une police à taille unique ne sait pas faire. */ h1,h2{font-family:"Newsreader","Iowan Old Style",Charter,Georgia,serif; font-weight:400;letter-spacing:-.018em;} /* La pente descend de 4,2 à 3,7 % de la largeur, et le plafond de 60 à 52px : sur un portable de 1024 à 1400 points, les trois lignes du héros occupaient la moitié de la hauteur utile et écrasaient tout ce qui les entourait. Le plancher de 32px tient la lisibilité sur téléphone. */ h1{font-size:clamp(32px,3.7vw,52px);line-height:1.04;} h2{font-size:clamp(26px,2.35vw,33px);line-height:1.14;text-wrap:balance;} /* Accent dans un titre : le mot qui porte la promesse passe au bleu. Une fois par titre au plus, et seulement là où le mot fait vraiment la phrase. */ h1 em,h2 em{font-style:normal;color:var(--blue);} /* Les pages secondaires portent leur titre de page dans `.head`. C'est un h1 pour la hiérarchie du document, mais il garde le corps d'un h2 : à cette place, le grand corps du héros écraserait la mise en page. */ .head h1{font-size:clamp(26px,2.35vw,33px);line-height:1.14;text-wrap:balance;} h3{font-weight:500;letter-spacing:-.02em;font-size:16px;line-height:1.3;} .muted{color:var(--ink-2);line-height:1.65;} /* Intitulé de section : un contour fin suffit à le poser. Pas de pastille colorée — c'est le tic qui trahit une page générée. */ .badge{display:inline-block;border:1px solid var(--line-2, #D5D2CA);border-radius:9999px; padding:7px 17px;font-size:11.5px;font-weight:600;line-height:1.4; text-transform:uppercase;letter-spacing:.16em;color:var(--ink);} .sec-alt .badge{border-color:var(--sand-line);} /* ------------------------------------------------------------- BOUTONS ---- */ /* La hauteur appartient à la base : une variante qui l'oublie ne doit pas produire un bouton écrasé. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px; border-radius:9999px;font-size:14px;font-weight:500;padding:0 22px;white-space:nowrap;} .btn svg{width:15px;height:15px;flex-shrink:0;} .btn-blue{height:48px;background:var(--blue);color:#fff;} .btn-blue:hover{background:var(--blue-h);} .btn-white{height:48px;background:#fff;color:var(--ink);border:1px solid var(--line);} .btn-white:hover{border-color:#C9CDD3;} /* =============================================================== NAV ====== */ /* Nue sur le héros — l'image reste entière — puis la pill blanche se matérialise dès qu'on entre dans le contenu. */ /* Barre fixe en haut, transparente sur le héros — les liens y sont blancs, lisibles grâce au voile sombre du haut de l'image et à un léger ombrage. Au scroll elle prend un fond blanc. */ /* La barre suit la largeur du héros, pas la mesure de lecture : sur un écran large, le héros s'étend bord à bord et la barre plafonnée à 1440px laissait la marque décalée de 240px vers l'intérieur, désalignée du titre qu'elle surplombe. Même padding des deux côtés, donc même aplomb : « Taha » tombe sur le bord gauche du titre, « Nous contacter » sur le bord droit du bloc de texte. */ .nav .wrap{max-width:none;} .nav{position:fixed;top:0;left:0;right:0;z-index:50; background:transparent;border-bottom:1px solid transparent; transition:background .3s ease,border-color .3s ease;} .nav .brand,.nav .nav-links a,.nav .nav-ghost,.nav .burger{ text-shadow:0 1px 12px rgba(10,12,15,.55);} .nav.solid{background:rgba(255,255,255,.92);backdrop-filter:blur(16px); border-bottom-color:var(--line);} /* Le flou de la barre est retiré sur les écrans étroits, et le fond passe à l'opaque pour le remplacer. Un `backdrop-filter` oblige le navigateur à refiltrer, à chaque image, tout ce qui défile sous une bande fixe de pleine largeur : c'est le poste le plus cher du défilement sur téléphone, et il ne s'y voyait presque pas — à 92 % d'opacité, il ne restait du flou qu'un soupçon. L'écran large, lui, le garde : la dépense y est absorbée et le verre se remarque. */ @media(max-width:900px){ .nav.solid{background:var(--paper);backdrop-filter:none;} } .nav.solid .brand,.nav.solid .nav-links a,.nav.solid .nav-ghost,.nav.solid .burger{ text-shadow:none;} .nav-pill{display:flex;align-items:center;justify-content:space-between;gap:20px; height:var(--nav-h);} /* Sur le héros : tout en blanc. */ .brand{color:#fff;} .nav-links a{color:#fff;} /* Sur la photo, le survol prend le blanc plein du lien courant : le voile translucide d'avant se lisait à peine sur une image claire. La barre posée sur son fond blanc garde son propre survol, plus bas. */ .nav-links a:hover{background:#fff;color:var(--ink);text-shadow:none;} .nav-links a[aria-current]{background:#fff;color:var(--ink);text-shadow:none;} .nav-ghost{background:#fff;color:var(--ink);border-color:#fff;text-shadow:none;} .nav-ghost:hover{background:var(--sky-tint);border-color:var(--sky-tint);} .burger{color:#fff;border-color:rgba(255,255,255,.38);} /* Une fois posée sur le blanc, la barre reprend l'encre. */ .nav.solid .brand{color:var(--ink);} .nav.solid .nav-links a{color:var(--ink-2);} .nav.solid .nav-links a:hover{background:#fff;color:var(--ink);} .nav.solid .nav-links a[aria-current]{background:var(--blue);color:#fff;} .nav.solid .nav-ghost{background:#fff;color:var(--ink);border-color:var(--line);} .nav.solid .nav-ghost:hover{background:var(--sand);border-color:#C9CDD3;} .nav.solid .burger{color:var(--ink);border-color:var(--line);} /* Le cadre du logo appartient au lien, pas à l'image : c'est lui qui fixe la place occupée dans la barre, et l'image, plus grande, s'y trouve rognée. Un `object-fit:cover` posé sur l'image aurait donné le même cadrage mais sans réglage possible du zoom — il calcule son échelle sur la plus grande des deux mesures du cadre, et la largeur l'emporte toujours ici. Séparer les deux laisse choisir la taille du cadre et le zoom de l'image indépendamment. */ .brand{display:flex;align-items:center;justify-content:center;flex-shrink:0; width:158px;height:52px;overflow:hidden;border-radius:var(--r-s);} /* ── Le logo du cabinet ────────────────────────────────────────────────────── Le mot « TAHA CONSULTING » est dans l'image, et il y est en bleu nuit : posé sur la photo du héros, il s'éteint. D'où deux fichiers, identiques au mot près — l'un à l'encre pour les fonds clairs, l'autre au blanc pour les fonds sombres — et le CSS qui bascule de l'un à l'autre selon la tenue de la barre. Un filtre CSS ne pouvait pas s'en charger : il aurait emporté le C avec le mot, alors que le C garde son bleu sur les deux fonds. La hauteur est fixée, la largeur suit : c'est elle qui aligne le logo sur le reste de la barre, et le rapport des fichiers (480×150) est déclaré dans le balisage pour que la place soit réservée avant l'arrivée de l'image. */ /* Le fichier du logo est un carré de 1024 dont le dessin n'occupe que la bande centrale : affiché entier dans la barre, le mot ne ferait plus que quinze points de haut. L'image est donc posée plus large que le cadre ci-dessus, qui lui prend sa bande du milieu — celle qui porte le C et le mot. Le fichier n'est pas modifié : c'est l'affichage qui cadre, et cette largeur-ci est le zoom. */ .brand-logo{display:block;width:158px;height:auto;flex-shrink:0;} .brand-logo--dark{display:none;} /* Sur la photo, le logo reprend l'ombre portée que le texte de la barre avait : c'est ce qui le décolle d'un plan clair. Elle tombe dès que la barre a un fond à elle. */ /* L'ombre est portée par le cadre et non par l'image : le cadre rogne ce qui dépasse, une ombre posée sur l'image serait coupée avec elle. */ .nav .brand{box-shadow:0 1px 14px rgba(10,12,15,.45);} .nav.solid .brand,body.page-doc .nav .brand{box-shadow:none;} .nav.solid .brand-logo--light{display:none;} .nav.solid .brand-logo--dark{display:block;} /* Les liens du milieu vivent dans leur propre cadre : sur une photo, un groupe de mots sans contenant se lit mal. */ .nav-links{display:flex;align-items:center;gap:clamp(4px,.4vw,6px);padding:5px; border:1px solid rgba(255,255,255,.22);border-radius:9999px; background:rgba(255,255,255,.08);backdrop-filter:blur(10px); transition:background .3s ease,border-color .3s ease;} .nav.solid .nav-links{border-color:var(--line);background:var(--sand);backdrop-filter:none;} /* Le corps et les cales des liens suivent la largeur de la barre. À taille fixe, les cinq libellés agrandis ne tenaient plus entre la marque et les boutons dès 1120px : « Qui sommes-nous » se cassait en deux lignes et la gélule doublait de hauteur. `nowrap` interdit cette casse, le `clamp` fait en sorte qu'elle n'ait jamais à se produire. */ .nav-links a{font-size:clamp(13px,1.02vw,14px); padding:8px clamp(10px,1.04vw,15px);border-radius:9999px; white-space:nowrap; transition:background .25s ease,color .25s ease;} /* Six entrées, dont « Notre positionnement » et « Qui sommes-nous » : entre le seuil du menu déroulant et 1280 points, la somme des libellés, de la marque et du bouton dépasse la largeur de l'écran, et c'est « Nous contacter » qui sort du cadre à droite. On récupère la trentaine de pixels manquants sur les cales des liens, six fois deux côtés — ce qui coûte à chaque lien deux ou trois pixels de part et d'autre, invisibles, là où un menu déroulant sur un écran de portable se serait vu. La cible reste au-dessus de la hauteur de confort du pouce, la barre ne change pas de hauteur. */ @media(min-width:1081px) and (max-width:1280px){ .nav-links a{padding-left:clamp(7px,.72vw,11px);padding-right:clamp(7px,.72vw,11px);} .nav-pill{gap:14px;} /* Une septième entrée est arrivée dans la barre — « Partenariats » — et les cales resserrées ne suffisaient plus : à 1085 points, l'appel « Nous contacter » venait buter contre le bord de la fenêtre. C'est « Accueil » qui cède la place : de toute la barre, c'est le seul lien qui a un double, la marque à sa gauche menant à la même destination. Rien n'est perdu pour personne — un lecteur d'écran n'annonce pas plus ce lien qu'il ne le voit, mais il trouve la marque juste avant, avec le même but. */ .nav-links a[href$="#hero"]{display:none;} } .nav-links a:hover,.nav-links a[aria-current]{color:var(--ink);} .nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0;} .nav-ghost{display:inline-flex;align-items:center;height:40px;padding:0 16px;font-size:14px; font-weight:500;border:1px solid var(--line);border-radius:9999px;color:var(--ink);} .nav-ghost:hover{border-color:#C9CDD3;} .nav-cta{display:inline-flex;align-items:center;height:40px;padding:0 19px;font-size:14px; font-weight:500;background:var(--blue);color:#fff;border-radius:9999px;} .nav-cta:hover{background:var(--blue-h);} .burger{display:none;width:40px;height:40px;align-items:center;justify-content:center; border:1px solid var(--line);border-radius:9999px;} .burger svg{width:16px;height:16px;} .burger .x{display:none;} .burger[aria-expanded="true"] .m{display:none;} .burger[aria-expanded="true"] .x{display:block;} /* ============================================================== HÉROS ==== */ /* Image plein écran, texte posé en bas. Le voile est fonctionnel, pas décoratif : sans lui, le texte blanc ne passe pas sur la photo. */ /* Le contenu est aligné sur le bord bas : c'est donc le retrait du bas qui décide de sa hauteur à l'écran, et il descend les deux colonnes ensemble — le titre et le bloc de droite gardent leur alignement mutuel. Il est passé de 44 à 30px sur grand écran : le texte se pose plus bas dans l'image, sans pour autant venir buter contre le bord de la fenêtre. */ .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end; overflow:hidden;background:#14171C;border-top:0; padding:0 0 clamp(20px,2.2vw,30px);} .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:center 42%;} /* ---- Les trois plans qui se relaient ------------------------------------ Cinq secondes par image, quinze en tout. Le fondu se fait toujours par le HAUT de la pile : chaque plan monte par-dessus le précédent, et c'est la descente du dernier qui rend le premier. Une image ne s'efface donc jamais sur du vide — la séquence en fondu croisé « chacune monte puis redescend » laisse, elle, un trou noir entre deux plans. Conséquence : la première n'est pas animée du tout. Elle est posée, opaque, et sert de fond permanent. C'est aussi l'image LCP, ce qui tombe bien : ce que le navigateur mesure est ce qui est réellement affiché à la première seconde, sans animation d'opacité pour brouiller la mesure. */ .hero-shots{position:absolute;inset:0; /* La respiration — un aller-retour de 42 s qui agrandissait le plan de 1,2 % — est retirée. Elle convenait à une photographie, où un mouvement imperceptible tient l'image vivante ; l'image d'aujourd'hui porte des titres écrits dedans, et tout agrandissement, si lent soit-il, se paie sur le tracé des lettres. L'image est posée à sa taille, et n'en bouge plus. */} /* Le troisième plan est désigné par une classe et non par son rang : il est enveloppé d'un `picture` — il lui faut une image portrait sur petit écran — et n'est donc plus l'enfant direct de la pile. `display:contents` retire ce `picture` de la mise en page ; la classe fait le reste. */ .hero-shots picture{display:contents;} /* Les deux plans qui se relaient sont désignés par une classe, jamais par leur rang : tous deux sont enveloppés d'un `picture` — il leur faut une image découpée sur téléphone — et un `:nth-child` y devient trompeur. Dans un `picture`, l'`img` vient après la `source` et se trouve elle aussi être un deuxième enfant ; le sélecteur attrapait alors les deux plans à la fois, et comme il pèse plus lourd qu'une classe, le troisième héritait de la séquence du deuxième et se levait en même temps que lui, par-dessus. Le deuxième plan n'apparaissait jamais. */ .hero-shots .hero-img-2, .hero-shots .hero-img-3{opacity:0; animation:hero-seq-2 15s cubic-bezier(.4,0,.2,1) infinite;} .hero-shots .hero-img-3{animation-name:hero-seq-3;} /* Trois plans à cinq secondes : quinze en tout, un tiers de cycle par image — 33 % = 5 s, 67 % = 10 s. Un plan met un peu plus d'une demi-seconde à s'installer, tient sa part, puis se retire sous le suivant une fois celui-ci en place. Le dernier redescend seul, et c'est sa descente qui rend le premier — d'où les 96 % de sa dernière étape. Les repères sont en pour cent et non en secondes : c'est ce qui permet de régler la durée d'un plan en ne touchant qu'à la durée du cycle ci-dessus — les parts restent égales quelle qu'elle soit. La série a compté quatre plans, puis cinq, puis un seul ; elle en compte trois. Cinq secondes et non quatre : chacune de ces images porte un titre et deux lignes de texte écrits dedans, ce qu'un plan de photographie ne demandait pas — il faut le temps de les lire. */ @keyframes hero-seq-2{ 0%,33.3%{opacity:0} 37.3%,66.6%{opacity:1} 70.6%,100%{opacity:0} } @keyframes hero-seq-3{ 0%,66.6%{opacity:0} 70.6%,96%{opacity:1} 100%{opacity:0} } /* Hors du champ, la pile se fige. Le fondu est une animation continue posée sur trois images plein écran : le compositeur les recalcule à chaque image affichée, y compris quand le héros est trois sections plus haut et que personne ne le voit. La classe est posée par le script, qui observe la sortie du héros ; en son absence — script en échec, navigateur sans IntersectionObserver — rien ne change, l'animation tourne comme avant. */ .hero-shots.is-off, .hero-shots.is-off .hero-img{animation-play-state:paused;} /* Le voile ne fait plus qu'une chose : assombrir la photo pour que le texte blanc y passe. Il est fonctionnel, rien de plus. La couche de couleur qui se posait par-dessus — trois foyers en `soft-light`, le bleu du cabinet sous le titre, un ambre à l'opposé, le ciel en bas à droite — est retirée : elle repeignait la photo en bleu au lieu de la laisser être une photo. Les images du héros gardent désormais leur propre lumière, et le seul bleu de l'écran est celui du bouton. */ /* Deux couches, chacune pour une raison précise, et rien entre les deux. L'image du héros porte ses propres titres et sa propre lumière : un voile étalé sur toute sa surface — ce qu'il était, jusqu'à 74 % d'encre en haut — la rendait terne et éteignait le bleu du globe comme le doré de la flèche. Il ne couvre donc plus que ce qu'il doit couvrir : · en haut, la hauteur de la barre, sans quoi les liens blancs disparaissent dès que le panneau clair du milieu passe dessous ; · en bas, la zone où se posent le titre et l'appel. Entre les deux, l'image est rendue à elle-même. */ .hero-veil{position:absolute;inset:0; background:linear-gradient(to bottom,rgba(6,17,32,.58) 0, rgba(6,17,32,.30) 64px, rgba(6,17,32,0) 140px), linear-gradient(to top,rgba(6,17,32,.90) 0%,rgba(6,17,32,.72) 15%, rgba(6,17,32,.34) 30%,rgba(6,17,32,0) 48%);} .hero-body{position:relative;z-index:2;width:100%;} /* Le héros ignore la mesure de 1440px : sur un 24 pouces, son contenu occupe la largeur de l'écran comme il le fait sur un portable, au lieu de se ramasser au centre entre deux marges de 240px. L'image était déjà pleine largeur — c'était le texte posé dessus qui ne suivait pas. */ .hero .wrap{max-width:none;} /* Les deux colonnes du héros font la même hauteur, et le titre l'occupe au lieu d'y flotter : `stretch` égalise les boîtes, `space-between` distribue les trois lignes du titre entre le haut et le bas de la sienne. Alignées par le bas seulement, elles laissaient le titre commencer une dizaine de pixels sous le paragraphe — mesuré : 192px de titre contre 202px de bloc. L'écart se rattrape sur l'interligne, jamais sur le corps : la mesure du titre ne dépend donc pas de la longueur du texte d'à côté, ni de la langue dans laquelle il est écrit. */ .hero-top{display:grid; /* Largeur du bloc de droite, déclarée une fois : la colonne de la grille et le bloc lui-même doivent dire la même chose. Elle suit l'écran — à 640px le chapeau tient sur quatre lignes, et sur un portable elle redescend à 520 pour ne pas écraser le titre, qui a besoin de sa place pour « Organisation : » d'un seul tenant. */ /* 26px de plus que la mesure du texte : c'est ce que le filet et sa réserve prennent à gauche. Sans cela le chapeau perd ces pixels, ses lignes se recomposent, et la dernière vient buter contre l'appel posé à sa droite. */ --aside-w:clamp(526px,43vw,626px); grid-template-columns:minmax(0,1.3fr) minmax(0,var(--aside-w)); gap:clamp(26px,4vw,64px);align-items:stretch;} .hero h1{display:flex;flex-direction:column;justify-content:space-between;} /* Trois lignes courtes, écrites comme telles dans le HTML : la mesure n'est plus là que comme garde-fou. */ .hero h1{color:#fff;max-width:20ch;} .hero h1>span{display:block;} /* Mot pivotant : les cinq promesses du cabinet, une à l'écran à la fois. La fenêtre a la hauteur d'une ligne et rogne le reste ; la liste, elle, monte d'une hauteur de ligne à chaque pas. 1,12em plutôt que l'interligne du titre : il faut la place des jambages de « Organique », sinon le q se coupe. `inline-block` et non plus `block` : « Plus » reste fixe à gauche, la fenêtre se pose à côté de lui. Alignée par le bas — la baseline ne sert à rien ici, un bloc qui rogne pose la sienne sur son bord inférieur, ce qui remonterait le mot d'un jambage entier. La largeur suit le mot affiché, sans quoi la fenêtre prendrait celle du plus long — « Souveraine » — et creuserait un vide après « Plus » partout ailleurs. Invisible tant que le titre est aligné à gauche, béant dès qu'il se centre, sur tablette et sur téléphone. Les cinq largeurs sont mesurées par le script et posées en `--w0…--w4` ; si le script ne passe pas, `width` retombe sur `auto`, c'est-à-dire l'ancien comportement. */ .rot{display:inline-block;vertical-align:bottom; height:1.12em;overflow:hidden;color:var(--sky); width:var(--w0);animation:rot-w 10s cubic-bezier(.7,0,.3,1) infinite;} /* Pendant les 0,4 s où deux mots se croisent — de 16 à 20 % de chaque pas — la fenêtre tient le plus large des deux (`--m`), sinon celui qui arrive est coupé net à droite : « Souveraine » entrait dans la largeur d'« Agile » et s'affichait « Souvera ». Les sauts sont instantanés, mais ils tombent au moment précis où le texte est en mouvement : ils ne se voient pas. */ @keyframes rot-w{ 0%,16% {width:var(--w0)} 16.01%,19.99%{width:var(--m0)} 20%,36% {width:var(--w1)} 36.01%,39.99%{width:var(--m1)} 40%,56% {width:var(--w2)} 56.01%,59.99%{width:var(--m2)} 60%,76% {width:var(--w3)} 76.01%,79.99%{width:var(--m3)} 80%,96% {width:var(--w4)} 96.01%,99.99%{width:var(--m4)} 100% {width:var(--w0)} } .rot span{display:block;height:1.12em;line-height:1.12;} /* Cinq mots à 2 s : dix secondes de cycle. Chaque pas garde le mot posé la plus grande partie de son temps et ne consacre que les 4 derniers pour cent — 0,4 s — à la montée. */ .rot-list{animation:rot 10s cubic-bezier(.7,0,.3,1) infinite;} @keyframes rot{ 0%,16% {transform:translateY(0)} 20%,36% {transform:translateY(-1.12em)} 40%,56% {transform:translateY(-2.24em)} 60%,76% {transform:translateY(-3.36em)} 80%,96% {transform:translateY(-4.48em)} 100% {transform:translateY(-5.6em)} } /* Aligné à droite sur le bouton « Nous contacter » de la barre : les deux partagent le bord droit du conteneur. La largeur vient de `--aside-w`, déclarée sur la grille juste au-dessus. */ /* Le paragraphe garde toute la largeur de la colonne ; le bouton vient se poser dans le blanc que laisse sa dernière ligne. Le texte est justifié : « les Partenaires Internationaux. » s'arrête au tiers de la mesure, et les deux tiers restants sont vides — c'est là que l'appel se loge, calé sur le bord droit et sur la base du paragraphe. D'où la position absolue : elle sort l'appel du flux, sans quoi il descendrait sous le texte comme n'importe quel bloc. Le bloc reste donc haut de son seul paragraphe. */ .hero-aside{justify-self:end;width:100%;max-width:var(--aside-w); /* Le bloc fait la hauteur du titre — l'étirement par défaut de la grille — mais ce n'est plus le texte qui la remplit : c'est le filet. Étirer l'interligne jusqu'à 2,8 pour couvrir 192px décousait le chapeau, quand la lisibilité demande 1,5 à 1,75. Le filet, lui, court sur toute la hauteur sans rien déformer, et c'est lui qui donne à l'œil les deux colonnes de même mesure. Le contenu se cale en bas : la dernière ligne du chapeau et l'appel s'alignent alors sur « Plus Agile », en face. */ position:relative; display:flex;flex-direction:column;justify-content:space-between; padding-left:clamp(18px,1.8vw,26px);} /* Le filet court de la première ligne du chapeau jusqu'au bas de l'appel : il borde la colonne entière, texte et bouton compris. C'est la hauteur du bloc, et le bloc commence trois pixels au-dessus du texte — assez peu pour que le trait paraisse partir de la première ligne. Un pseudo-élément et non une bordure : posé sur le bloc, il échappe au `clip-path` qui découvre le paragraphe, et peut donc traverser la colonne au chargement pendant que le texte se révèle derrière lui. Une bordure sur le paragraphe, elle, s'arrêterait à la dernière ligne du texte et serait rognée avec lui. */ .hero-aside::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px; background:rgba(125,211,252,.5); animation:filet-balaye 1.15s cubic-bezier(.22,.61,.36,1) .25s both;} @keyframes filet-balaye{ from{transform:translateX(var(--aside-w))} to {transform:translateX(0)} } /* `inset` ne rogne que le bord gauche de la zone visible : à 100 % le texte est entièrement masqué, et le bord recule vers la gauche à mesure que la découverte avance. */ .hero-aside p{animation:texte-decouvre 1.15s cubic-bezier(.22,.61,.36,1) .25s both;} @keyframes texte-decouvre{ from{clip-path:inset(0 0 0 100%)} to {clip-path:inset(0 0 0 0)} } /* L'appel arrive après le chapeau, en fondu : la découverte du texte l'aurait coupé en deux à mi-course. */ .hero-actions{animation:appel-parait .45s ease-out 1.2s both;} @keyframes appel-parait{from{opacity:0} to{opacity:1}} /* L'interligne se règle sur la colonne d'en face : 192px de titre, moins les 48 du bouton et les 20 qui l'en séparent, laissent 124px pour quatre lignes, soit 31px chacune — 1,82 pour un corps de 17. On reste au voisinage de la fourchette de lisibilité, très loin des 2,8 qu'il aurait fallu pour couvrir la hauteur avec le texte seul. */ /* C'est la version courte qui tient la colonne, sur toutes les largeurs désormais. L'image du héros porte déjà trois titres et six lignes de sous-titres écrits dedans : la phrase de référence, quatre lignes de plus posées par-dessus, faisait un cinquième bloc de texte à l'écran et se cognait à « BUSINESS GROWTH » juste au-dessus d'elle. Elle reste dans le document — rien n'est retiré de la page ni de l'index —, et le détail de l'énumération se lit dans « Qui sommes-nous », un écran plus bas. `display:none` retire l'autre de l'arbre d'accessibilité : une seule des deux est lue, jamais les deux à la suite. */ .hero-lead{display:none;} .hero-lead-short{display:block;} .hero-aside p{font-size:clamp(15.5px,1.15vw,16.5px);color:rgba(255,255,255,.92);line-height:1.72; /* Aucune césure : `auto` coupait « Partenaires » en fin de ligne, et un nom propre coupé en deux se lit comme une faute de composition, pas comme une commodité typographique. La justification est tombée avec la phrase longue : elle avait quatre lignes pour répartir son blanc, la version courte n'en a que deux et la première s'étirait en rivières — « pour les » se retrouvait à trois espaces de son voisin. */ text-align:left;hyphens:manual; /* Le chapeau part 2px sous la ligne haute du titre — il a longtemps démarré 3px au-dessus. C'est par cette marge que se règle sa hauteur, et par elle seule : l'appel est calé sur le bord bas du bloc par le `space-between`, il ne bouge pas d'un pixel quoi qu'on fasse ici. */ margin-top:2px;} /* L'appel se pose sur le bord droit du bloc — celui du paragraphe justifié qu'il termine, et celui de « Nous contacter » dans la barre, à l'aplomb. C'est là où la lecture s'achève : le titre ouvre à gauche, le bloc répond à droite, l'appel referme la diagonale. Il ferme la colonne au ras du bord bas — donc à hauteur de « Plus Agile », en face — et garde la taille qu'il a partout ailleurs sur le site. */ .hero-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;} /* Un seul appel dans le héros, et il est bleu : le bouton blanc qui doublait vers les services est retiré, sa règle de couleur avec lui. La navigation porte déjà l'entrée « Services », le héros n'a pas à la répéter — un seul geste offert, donc un seul chemin lisible. */ /* Le survol reprend le bleu foncé du site. Il virait ici vers un #1B45C4 violacé, qui n'existe nulle part ailleurs : le même bouton changeait de réaction selon la section où on le rencontrait. */ .hero .btn-blue:hover{background:var(--blue-h);} .btn svg{transition:transform .25s cubic-bezier(.22,.61,.36,1);} .btn:hover svg{transform:translateX(4px);} /* Panneau : surface sable arrondie qui tient un bloc à deux colonnes. Même langage d'angles que le pied de page — les deux respirations de la page. */ /* Le panneau suit sa section : sable sur une section blanche — c'est le cas de la page Contact — et blanc sur la section sable de l'accueil, où le formulaire se tient. La règle ci-dessous vaut par défaut, la variante du contact la retourne. Panneau sable posé sur une section blanche. Les filets qu'il contient prennent le gris chaud : le gris froid disparaîtrait sur ce fond. */ .panel{margin-top:clamp(40px,4.5vw,60px);padding:clamp(24px,3vw,44px); background:var(--sand);border:1px solid var(--sand-line); border-radius:var(--r-l);} /* En-tête de section : centré, mesure courte pour que le titre reste lisible même en très grand corps. */ .head{max-width:780px;margin-left:auto;margin-right:auto;text-align:center;} .head h1,.head h2{margin-top:16px;} .head p{margin-top:18px;font-size:16px;max-width:56ch;margin-left:auto;margin-right:auto;} /* Chapeau long : 56 signes conviennent à une phrase, pas à un paragraphe de cinq lignes, qui prend alors la forme d'une colonne étroite au milieu de la page. 68 signes reste dans la fourchette de lecture. */ .head-wide{max-width:900px;} .head-wide p{max-width:68ch;} /* Titre long. Les titres de section du site font de vingt-six à soixante-dix- huit signes — une ligne, deux au plus — et le corps de 33 points est réglé pour cette longueur. Celui de « Qui sommes-nous » en fait plus de deux cents : à la même échelle il couvrait quatre lignes pleine largeur et pesait, à lui seul, plus que la rangée de volets qu'il annonce. Aucun autre titre de la page n'a cette masse, et c'est ce décalage qui se voyait, pas la longueur. Le remède est celui que la page applique déjà à ses autres énoncés longs — la vision, le titre du « pourquoi » : le corps redescend d'un cran et la mesure se borne. À cinquante signes, la phrase se pose sur quatre lignes centrées, d'une largeur voisine de celle des titres d'une ligne des autres sections : c'est ce qui les fait lire comme une même famille. L'interlignage s'ouvre en conséquence — 1,14 tenait pour un titre d'une ligne, où il n'y a pas d'interligne à voir ; sur quatre, il refermait le bloc en pavé. */ .head .claim{max-width:54ch;margin-left:auto;margin-right:auto; font-size:clamp(18px,1.5vw,22px);line-height:1.42; letter-spacing:-.01em;} /* ══════════════════════════════════════════ QUI SOMMES-NOUS ═══════════ */ /* --- Les quatre spécialités ----------------------------------------------- */ /* Quatre volets posés à même le blanc de la section : pas de plateau, pas de surface derrière eux. Ce qui les tient, c'est leur propre contour et l'ombre basse qui les décolle — un fond coloré aurait fait un cadre autour d'un cadre. Chaque volet est bâti dans le même ordre, pastille, intitulé, ligne de définition, et tout y est centré comme l'en-tête qui les annonce. */ /* Le même écart au-dessus et en dessous : la rangée de volets se tient à égale distance du titre qui l'annonce et de la phrase qui la suit. Deux valeurs différentes la faisaient pencher vers le titre. */ .specs{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.5vw,20px);margin-top:clamp(46px,5.2vw,74px);} /* Le volet est devenu une vignette : la photographie occupe toute la boîte, le glyphe et l'intitulé se posent dessus, calés en bas. Il portait auparavant un fond clair, un filet et une ombre — un cadre vide qu'il fallait meubler. Le format est vertical, 4 sur 5. La charte de valeurs, plus bas, tient elle aussi des photographies : les siennes sont en 3 sur 4 avec le texte EN DESSOUS sur fond clair, celles-ci sont plus larges et portent leur texte DEDANS, en blanc. Deux séries d'images dans une même page ne peuvent pas avoir le même dessin, sans quoi la page se met à bégayer. Le glyphe et l'intitulé sont groupés en bas, sur l'axe de la vignette, le premier posé juste au-dessus du second. Ce qui les désalignait d'un volet à l'autre n'était pas leur place mais la longueur des intitulés : les quatre boîtes font la même hauteur, et « Construction de modèles souverains adaptés aux réalités africaines » tient sur trois lignes quand les autres n'en prennent qu'une — calé par le bas, le bloc du quatrième était trois fois plus haut et son glyphe remontait d'autant. La réserve posée sur l'intitulé, plus bas, règle cela à la source. */ /* Les photographies sont retirées, et avec elles le rapport de forme imposé : une boîte carrée qui ne contient plus qu'un glyphe et deux lignes de texte est une boîte à moitié vide. La hauteur vient désormais du contenu, et les quatre volets s'égalisent par la grille — le plus long des intitulés donne la mesure aux trois autres, comme avant. Le contenu se centre au lieu de se caler en bas : calé en bas il visait le tiers inférieur d'une image, il n'y a plus d'image à laisser voir. Le volet repasse en clair, et c'est le site qui le veut ainsi : la matière sombre y ouvre et y ferme la page — le héros, le bandeau du pied — et n'apparaît nulle part entre les deux. Elle n'était admise ici que parce qu'une photographie l'apportait. Sans elle, quatre aplats sombres au milieu d'une section blanche devenaient l'objet le plus lourd du quartier, avant le titre qui les annonce, et deux encres sombres se répondaient d'un bout à l'autre de la page sans se ressembler. Le dessin retenu est celui des cartes de services, à trois sections d'ici : fond sable, filet clair, rayon commun. C'est la carte du site — il n'y en a qu'une —, et la rangée cesse d'être une exception à expliquer. */ /* Le contenu se cale en haut depuis que le volet ouvre sur une image : centré, l'image se décollait du bord dans les volets moins hauts que leur voisin — la grille les égalise sur le plus long des intitulés. Le vide se met donc en bas, où il ne se compare à rien. */ .spec{position:relative;display:flex;flex-direction:column;align-items:center; justify-content:flex-start; padding:clamp(30px,3.2vw,44px) clamp(18px,1.8vw,26px) clamp(18px,1.9vw,24px); text-align:center; border-radius:var(--r-m); background:var(--sand);border:1px solid var(--line); transition:border-color .25s ease;} /* L'image reprend sa place en tête de volet. Elle sort du padding par une marge négative de la même valeur, comme dans le damier du positionnement : elle touche ainsi les trois bords, et le filet du volet lui sert de cadre — un second contour à l'intérieur du premier ferait une bordure double. Cadrage 16:10, celui des cartes de services ; le fond sable tient la case pendant le chargement différé. */ /* Le cadre porte désormais l'affiche du cabinet, une par spécialité, carrée et dense : l'intitulé, la qualification de la cible et les rubriques y sont peints. Un cadre 16:10 en amputait le haut et le bas ; il prend le format du fichier. Comme les affiches de la charte de valeurs, elles ne s'ouvrent pas et ne bougent pas : ni clic, ni loupe, ni zoom au survol. */ .spec-media{align-self:stretch;position:relative;display:block;overflow:hidden; margin:calc(-1 * clamp(30px,3.2vw,44px)) calc(-1 * clamp(18px,1.8vw,26px)) clamp(14px,1.5vw,18px); aspect-ratio:1/1;background:var(--sand); border-radius:calc(var(--r-m) - 1px) calc(var(--r-m) - 1px) 0 0; padding:0;border:0;} .spec-media img{display:block;width:100%;height:100%;object-fit:cover;} /* Le survol tenait au zoom de la photographie ; il ne reste que le filet qui fonce, comme sur les cartes de services. Même geste, même durée. */ .spec:hover{border-color:var(--line-ink);} /* Le voile a disparu avec les photographies : c'était un dégradé d'encre bleu nuit posé sur l'image pour que le glyphe et l'intitulé y passent, et pour tenir comme une série quatre vues qui n'avaient pas la même lumière. Sur un aplat uni, il n'assombrissait plus rien d'utile. */ /* Le bleu est passé du fond au trait : plus de pastille pleine, le glyphe lui-même porte la couleur. La boîte garde sa taille — c'est elle qui aligne les quatre intitulés sur une même ligne, quel que soit le dessin qu'elle contient. Le glyphe, lui, grandit d'un tiers et son trait s'épaissit légèrement : sans le disque derrière lui, il lui faut cette masse pour tenir en face des cartes qui l'entourent. */ .spec-ico{position:relative;display:grid;place-items:center; width:clamp(30px,2.5vw,34px);aspect-ratio:1; /* Le glyphe était passé au blanc parce qu'aucun bleu ne tient sur une photographie dont la lumière change d'un volet à l'autre. Le fond est redevenu clair : le bleu du cabinet reprend sa place, celle qu'il occupe dans tous les autres registres de la page — les trois arguments du « pourquoi », les quatre quartiers du positionnement. C'est la couleur qui change, pas le dessin : les quatre figures et leurs corrections optiques restent celles qui ont été réglées pour cette série. */ color:var(--blue);} /* Le glyphe redescend d'un quart : à 46px il faisait presque la hauteur de son intitulé et prenait le pas sur lui, alors que ce qui doit se lire d'abord dans le volet est le nom de la spécialité. Le trait s'affine d'autant — 1,3 pour 1,4 — sinon un dessin réduit paraît plus lourd, pas plus léger. */ /* L'ombre portée qui détachait le trait blanc du haut d'une photographie n'a plus lieu d'être : le fond est un aplat, et un trait de 1,28 y porte seul. */ .spec-ico svg{width:calc(clamp(23px,1.9vw,26px) * var(--ico-k,1)); height:auto;stroke-width:1.28;} /* Correction optique, volet par volet. Quatre dessins mis à la même taille de boîte ne pèsent pas le même poids à l'œil : mesurés sur le rendu, à 36px de boîte, la puce couvre 375 pixels d'encre quand le bouclier n'en couvre que 262, et le bouclier est le seul dont le dessin n'occupe pas toute sa largeur — 25px là où les trois autres en font 30. D'où le déséquilibre : la puce avance, le bouclier recule. Le facteur ne touche qu'à la taille du dessin, pas à sa boîte : les quatre pastilles gardent la même emprise, et les intitulés dessous restent alignés. Les mesures ci-dessus valent pour ce jeu d'icônes ; changer un glyphe demande de refaire le calcul, sans quoi le facteur corrige une masse qui n'existe plus. C'est ce qui vient d'arriver au quatrième : son bouclier doublait celui de « Expertise certifiée », plus haut dans la même section, et a laissé la place à un empilement de strates — un dessin qui remplit sa largeur comme les trois autres, d'où le facteur ramené à 1. */ .spec:nth-child(2) .spec-ico{--ico-k:.94;} .spec:nth-child(4) .spec-ico{--ico-k:1;} /* Les intitulés de carte restent en Inter dans tout le site : à cette échelle ils fonctionnent comme des libellés, pas comme des titres. L'intitulé se range juste sous sa pastille, à écart fixe. Il a occupé un temps toute la hauteur libre du volet pour s'y centrer : la grille étire les quatre volets à la hauteur du plus haut — celui des modèles souverains, trois lignes — de sorte que les trois autres, qui n'en ont qu'une, voyaient leur intitulé descendre au milieu d'un vide de quarante pixels. L'écart à l'icône dépendait alors de la longueur du texte, ce qui est exactement ce qu'un alignement ne doit pas faire. Le blanc que ces trois-là n'utilisent pas se range donc en bas du volet, où il ne sépare rien. La réserve de deux lignes qui alignait les anciennes définitions, elle, n'a plus d'objet : il n'y a plus rien sous les intitulés. */ /* Aucune réserve de hauteur sur l'intitulé : chaque glyphe se pose au ras de son texte, et le bloc entier au ras du bas de la vignette. Le quatrième intitulé tenant sur trois lignes, son glyphe monte donc plus haut que les trois autres — c'est le prix de cette proximité, et il est assumé : un glyphe à deux lignes de son texte, pour l'aligner sur un voisin, se lisait comme un élément détaché plutôt que comme la marque de l'intitulé. */ /* La phrase de qualification est posée en clair sous l'intitulé, sans repli ni survol : elle qualifie la spécialité — pour qui elle vaut, ce qu'elle garantit — et c'est précisément ce qu'un décideur cherche à vérifier en deux minutes. La cacher derrière un geste la rendait invisible à qui ne survole pas, et inexistante sur un écran tactile. */ /* Les deux ombres de texte tombent avec les photographies : elles décollaient le blanc d'un fond qui variait d'un pixel à l'autre. Le fond est clair, l'encre reprend celle du reste de la page — intitulé en encre pleine, qualification en secondaire, les deux couleurs de texte du site et aucune autre. */ .spec-note{position:relative;margin-top:clamp(5px,0.6vw,7px); font-size:13px;line-height:1.5;color:var(--ink-2);} .spec-name{position:relative;margin-top:clamp(7px,0.8vw,9px); font-weight:500;font-size:clamp(15.5px,1.2vw,17px);line-height:1.34; letter-spacing:-.02em;color:var(--ink);text-wrap:balance;} /* --- Notre intervention ---------------------------------------------------- */ /* Aucune surface : le propos se tient sur le blanc de la section, séparé des volets par un filet court et centré. Un aplat de couleur en aurait fait un second appel à l'action, alors que la page en compte déjà un — le bandeau bleu — et qu'il ne doit y en avoir qu'un. Rien pour l'annoncer : ni intitulé, ni filet. C'est l'écart au-dessus qui sépare la phrase des quatre volets, et il est exactement celui qui sépare ces volets du titre — la rangée se tient au milieu, à égale distance des deux. */ /* `.hook` portait ce propos : une phrase seule, en sérif et en grand corps, centrée sous les volets. Elle est retirée du document — l'en-tête de la section dit la même chose dans les mêmes termes —, et ses règles avec elle. La section s'arrête maintenant sur la rangée des spécialités. */ /* ══════════════════════════════════════════════════════════ SIGNATURE ═══ */ /* Colophon : six termes groupés au centre, séparés par le point médian bleu des spécialités — le même signe pour la même fonction dans la même section. Répartis d'un bord à l'autre, ils flottaient sur 1440px sans se lire comme une devise ; et l'axe central est celui de tout ce qui précède. */ /* La signature est prise dans l'en-tête de la section, entre le badge et le titre. Aucun filet : elle ne sépare rien, elle s'insère. Elle portait un trait pleine largeur quand elle fermait la section — là c'était une clôture ; ici il aurait coupé l'en-tête en deux, et sur ce site un filet pleine largeur sépare deux sections. Les deux cales l'isolent de ce qui l'encadre : celle du haut la détache du badge, celle du bas s'ajoute aux 16px que le site pose au-dessus de tout h2 d'en-tête. Elles sont larges — près de cinquante points de part et d'autre : la signature est prise entre une pastille et un titre de trente-trois points, et serrée entre les deux elle passait pour une légende du badge. C'est son libellé en capitales qui l'annonce, rien d'autre. */ .sig{margin-top:clamp(28px,3.2vw,44px);margin-bottom:clamp(24px,2.8vw,38px); text-align:center;} .sig-k{display:block;font-size:12.5px;font-weight:600; text-transform:uppercase;letter-spacing:.16em;color:var(--ink-2);} /* Les six termes tiennent sur une seule ligne, et c'est cette contrainte qui fixe leur corps : la devise fait soixante-quatorze signes, la mesure de l'en-tête neuf cents points, et au-delà de vingt-cinq la ligne se replie — « Innovation & Fiabilité » tombait seul sur un second rang, ce qui casse une devise en deux moitiés inégales. Le plafond suit donc la largeur disponible : `2.55vw` prend la main sous mille points, où l'en-tête se resserre, et le plancher de dix-sept tient la lisibilité sur téléphone — là, le repli est normal, il n'y a pas de ligne à préserver. */ /* Le sélecteur porte les deux classes, et ce n'est pas une précaution : la signature vit maintenant dans `.head`, où le site pose `.head p{font-size:16px}`. Deux classes contre une classe et un type, la règle de l'en-tête l'emportait — la devise sortait à 16 points quoi qu'on écrive ici, et la mesure de 68 signes de `.head-wide p` la bornait par-dessus le marché. */ .sig .sig-l{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline; gap:.34em .75em;margin-top:clamp(16px,1.7vw,22px);max-width:none; font-family:"Newsreader","Iowan Old Style",Charter,Georgia,serif; font-size:clamp(17px,2.55vw,25px);line-height:1.3;letter-spacing:-.022em; color:var(--ink);} /* Aucun des six ne se coupe : un terme scindé en fin de ligne se lirait comme une faute, et sur une devise de six mots il n'y a rien à gagner à le permettre. */ .sig .sig-l span{white-space:nowrap;} /* Les liaisons du deck — tirets demi-cadratins, esperluette avant le dernier terme — sont dessinées et non écrites : dans le balisage, une synthèse vocale les lirait entre chaque mot. Elles précèdent leur terme plutôt que de le suivre, pour qu'aucune ne traîne en fin de ligne quand la liste se replie. */ .sig-l span+span::before{content:"–";color:var(--blue);margin-right:.7em;} .sig-l .sig-last::before{content:"&";font-style:italic;} /* Fin de section, forme unique : une phrase, un bouton, centrés, sans cadre. Le cabinet et les services la partagent à l'identique — un appel qui change de forme à chaque section ne s'apprend jamais. Le seul appel encadré de la page est le bandeau bleu, et il n'apparaît qu'une fois. */ .sec-cta{display:flex;flex-direction:column;align-items:center;text-align:center; gap:clamp(18px,2vw,24px);margin-top:clamp(36px,4vw,52px);} .sec-cta p{max-width:44ch;font-size:16px;color:var(--ink-2);} /* La promesse qui ferme « Nos services » est une phrase qu'on lit d'un trait, pas un paragraphe : elle abandonne la mesure de 44ch et tient sur une ligne. La taille descend avec la fenêtre pour que la ligne reste entière au lieu de déborder. En dessous de 700px elle ne peut plus tenir sans devenir illisible — elle reprend alors le retour à la ligne, équilibré sur deux lignes. Le sélecteur double la classe : `.sec-cta p` est repris à 961px et plus, et une classe simple n'aurait pas suffi à le reprendre. */ .sec-cta.sec-cta--line p{max-width:none;white-space:nowrap;font-size:clamp(12px,1.62vw,16px);} /* Cette promesse-là est encadrée de bleu : c'est la seule de la page, et elle ferme l'unique page où l'offre est énoncée en entier. Le filet reprend l'accent unique, le fond n'en garde qu'un voile — la phrase doit rester du texte, pas devenir un bouton en concurrence avec celui qui la suit. Le padding est compté dans la largeur (box-sizing hérité) et la taille de la ligne a été redescendue d'un cran juste au-dessus pour lui faire place sans que la ligne unique déborde de la colonne. */ .sec-cta.sec-cta--line p{max-width:100%; padding:clamp(14px,1.6vw,20px) clamp(18px,2.4vw,32px); border:1px solid var(--blue);border-radius:14px; background:rgba(4,114,174,.045);color:var(--blue);font-weight:500;} @media (max-width:699px){ .sec-cta.sec-cta--line p{max-width:44ch;white-space:normal;text-wrap:balance;font-size:15px; padding:16px 18px;} } /* ================================================================= ADN === */ /* ================================================ VISION & MISSION ====== */ /* Trois cartes égales alignées sous un en-tête centré : c'était l'anti- référence n°1 du PRODUCT.md — la grille de boîtes interchangeables — et l'inverse du principe « la hiérarchie avant la symétrie ». Tout y était centré, badge, titre, chapeau, intitulé, cartes, signature ; six axes identiques, aucun point d'entrée pour l'œil. La section se lit en trois temps : l'en-tête centré que porte chaque section de la page, puis l'image qui donne les preuves, puis les trois mouvements. Aucun aplat de couleur : c'est la photographie qui fait le contraste, et c'est le seul endroit de la page où une image occupe toute la mesure. Les chiffres du cabinet sont posés dessus. Ils vivaient au milieu de « Qui sommes-nous », où ils formaient trois colonnes de texte de plus dans une section qui en comptait déjà beaucoup ; ici ils deviennent l'objet que l'œil rencontre en arrivant. Le voile qui les porte n'est pas un aplat mais un dégradé photographique, celui des cartes de services et du héros. */ /* Les deux parties partagent la rangée à parts égales, séparées par le filet seul : la vision à gauche, la mission à droite. Aucune surface derrière elles — ce qui distingue une colonne de sa voisine est son contenu et le trait entre les deux, pas un cadre de plus. */ /* La cale sous le badge est celle des autres sections : sans elle, la paire remontait jusqu'à lui et le filet qui la sépare passait derrière la pastille, à la hauteur exacte des deux intitulés. */ .vm{display:grid;grid-template-columns:1fr 1fr; gap:clamp(28px,3.4vw,56px);align-items:stretch; max-width:1060px;margin:clamp(52px,5.6vw,80px) auto 0;} /* Les deux colonnes finissent à la même hauteur, et c'est la grille qui s'en charge : elles s'étirent toutes deux sur la plus haute — la mission, dont le registre compte trois entrées contre cinq lignes à la vision. Ce qui reste à régler est la répartition du blanc à l'intérieur de la colonne courte : le libellé garde sa place en haut, en face de son vis-à-vis, et la phrase se centre dans ce qui reste. Alignée par le haut, elle laissait la soixantaine de pixels d'écart s'accumuler en bas de la colonne, contre le filet, où le déséquilibre se voyait d'un coup d'œil ; répartie, elle décale la phrase d'une trentaine de pixels sous son libellé, ce qui ne se voit pas. Le centrage passe par la marge automatique et non par un `display:flex` sur le titre : la phrase contient un `em`, et en boîte flex chacun de ses trois morceaux — avant, pendant, après — devient un élément à part, posé à côté des autres. La phrase s'était disloquée en trois colonnes. */ .vm-part{display:flex;flex-direction:column;} /* La déclaration et le principe qui la suit forment un seul bloc, et c'est ce bloc qui se centre dans la colonne : la cale automatique passe donc au-dessus du premier et au-dessous du dernier. Portées toutes deux par la déclaration, les deux cales l'auraient centrée pour elle-même et poussé le principe en bas de colonne, détaché d'elle. */ .vm-note{margin-top:auto;} .vm-vision{margin-bottom:auto;} /* La section ne porte que deux colonnes courtes : à la cale commune, elle faisait une bande de 460 points entre deux sections qui en font près du double, et se lisait comme un intervalle entre elles plutôt que comme une étape à part entière. Le pas vertical passe donc à une fois et quart celui des autres — c'est la seule à en dévier, et c'est parce qu'elle est la seule dont le contenu tient en huit lignes. */ #vision{padding-top:calc(var(--sp) * 1.28);padding-bottom:calc(var(--sp) * 1.28);} .vm-part+.vm-part{border-left:1px solid var(--line); padding-left:clamp(28px,3.4vw,56px);} /* --- Ce qu'il fait -------------------------------------------------------- */ /* Les deux intitulés de colonne, à la même hauteur et dans la même graisse : c'est ce qui fait lire les deux parties comme une paire. Chacun se centre sur l'axe de sa colonne — pas sur celui de la section, qui les aurait ramenés tous deux vers le filet du milieu. */ .vm-k{display:block;text-align:center;margin-bottom:10px; font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase; color:var(--ink-2);} /* L'amorce de la mission — « Accompagner les organisations dans : » — n'est pas un titre : c'est le début de la phrase que les trois cellules achèvent. Elle se pose donc entre le libellé et la rangée, à l'échelle du corps courant, et garde l'écart qui la lie à ce qui suit. */ .vm-lead{margin:0 0 clamp(22px,2.4vw,30px); font-size:clamp(17px,1.2vw,17px);line-height:1.6;color:var(--ink);} /* Les deux colonnes sont écrites dans le même caractère et au même corps. La vision portait un grand corps en sérif, la mission le texte courant en Inter : côte à côte, à égalité de rang sous deux libellés jumeaux, elles se lisaient comme un titre et sa note plutôt que comme les deux moitiés d'une même déclaration. C'est le libellé au-dessus qui dit ce qu'on lit — il n'y a pas besoin d'une deuxième grammaire pour cela. Le principe ouvre, l'engagement suit ; l'un et l'autre prennent l'encre pleine et la mesure de lecture des trois mouvements d'en face. La déclaration reste un `h2` dans le plan du document : c'est son rang qui ne change pas, pas son dessin. */ /* Justifiés, et pour que la justification tienne il a fallu lui donner de quoi travailler. Bornés à trente-quatre signes dans une colonne qui en offre quarante-huit, les deux textes n'avaient pas assez de mots par ligne : le blanc s'accumulait autour des mots courts — « flux », « les » — et creusait des rivières. La mesure s'ouvre donc à la colonne entière, et la césure automatique prend le relais : un mot long coupé en fin de ligne coûte un trait d'union, un mot long reporté coûte une ligne étirée. La page est en `lang="fr"`, la coupure suit donc les règles françaises. */ .vm-note{margin:0 0 clamp(16px,1.8vw,22px); font-size:clamp(17px,1.3vw,18.5px);line-height:1.6;color:var(--ink); text-align:justify;text-justify:inter-word;hyphens:auto;} .vm-vision{font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:clamp(17px,1.3vw,18.5px);line-height:1.6; font-weight:400;letter-spacing:0;color:var(--ink); text-align:justify;text-justify:inter-word;hyphens:auto;} .vm-vision em{font-style:normal;color:var(--blue);} /* La section ne porte que deux colonnes courtes : à la cale commune, elle faisait une bande de 460 points entre deux sections qui en font près du double, et se lisait comme un intervalle entre elles plutôt que comme une étape à part entière. Le pas vertical passe donc à une fois et quart celui des autres — c'est la seule à en dévier, et c'est parce qu'elle est la seule dont le contenu tient en huit lignes. */ #vision{padding-top:calc(var(--sp) * 1.28);padding-bottom:calc(var(--sp) * 1.28);} .vm-part+.vm-part{border-left:1px solid var(--line); padding-left:clamp(28px,3.4vw,56px);} /* --- Ce qu'il fait -------------------------------------------------------- */ /* Les deux intitulés de colonne, à la même hauteur et dans la même graisse : c'est ce qui fait lire les deux parties comme une paire. Chacun se centre sur l'axe de sa colonne — pas sur celui de la section, qui les aurait ramenés tous deux vers le filet du milieu. */ .vm-k{display:block;text-align:center;margin-bottom:10px; font-size:11px;font-weight:500;letter-spacing:.15em;text-transform:uppercase; color:var(--ink-2);} /* L'amorce de la mission — « Accompagner les organisations dans : » — n'est pas un titre : c'est le début de la phrase que les trois cellules achèvent. Elle se pose donc entre le libellé et la rangée, à l'échelle du corps courant, et garde l'écart qui la lie à ce qui suit. */ .vm-lead{margin:0 0 clamp(22px,2.4vw,30px); font-size:clamp(17px,1.2vw,17px);line-height:1.6;color:var(--ink);} /* Les trois points forment un registre : une ligne chacune, un filet entre elles, et la même cale au-dessus et au-dessous du texte. C'est ce qui donne sa hauteur à la colonne — trois lignes serrées ne faisaient qu'un paragraphe de trois lignes, plus court que la phrase de la vision d'en face, et la mission passait pour la moindre des deux alors qu'elle est le développement de l'autre. Le filet est celui qui sépare les sections de la page, à l'horizontale : il ouvre la liste sous l'amorce et scande les entrées sans rien encadrer. Le dernier n'en porte pas dessous, c'est le bord de la colonne qui ferme. */ .moves{list-style:none;display:grid;} .move{display:flex;align-items:center;gap:clamp(14px,1.4vw,18px); text-align:left;padding:clamp(18px,2vw,24px) 0; border-top:1px solid var(--line);} /* Le glyphe reprend de l'échelle : dans un registre, il tient le bord gauche de la ligne et doit peser autant que le texte qu'il accompagne. À 34 points il faisait une puce ; à 46 il fait une entrée. */ .move-ico{display:flex;align-items:center;justify-content:center;flex:none; width:clamp(40px,3.4vw,46px);height:clamp(40px,3.4vw,46px); border:1px solid var(--sand-line);border-radius:50%; color:var(--blue);} .move-ico svg{width:21px;height:21px;} /* La formule est le contenu du point, pas une glose : elle prend l'encre pleine et l'échelle du corps courant. Centrée sur la hauteur du glyphe — une ligne comme deux — plutôt qu'alignée par le haut : sur la troisième, qui se replie, le dessin serait resté accroché à la première ligne. */ .move p{margin:0;font-size:clamp(18px,1.3vw,18.5px);line-height:1.52; color:var(--ink);} /* =========================================== POURQUOI TAHA CONSULTING == Trois arguments en rangée, chacun ouvert par un filet vertical — la structure de la diapositive du cabinet, transposée aux couleurs de la page. Le filet est celui du chapeau du héros : deux points de bleu, posés à gauche de ce qu'ils introduisent. C'est déjà la marque du site pour « voici ce qui compte », et il n'y avait pas de raison d'en inventer une autre. Les trois colonnes sont égales, contrairement aux blocs qu'elles remplacent : les trois phrases font une ligne chacune, aucune ne pèse plus que les autres, et une hiérarchie inventée là où le texte n'en porte pas se verrait pour ce qu'elle est. */ /* Le bloc déborde l'en-tête qui le contient. Celui-ci tient sa mesure de 900 points d'un titre et d'un chapeau — une ligne de texte qu'on lit d'un bout à l'autre —, tandis qu'ici trois colonnes se partagent la largeur : chacune n'en recevait que 270, de quoi couper une phrase de neuf mots en trois lignes. Le débordement est calculé sur ce qui reste entre l'en-tête et les bords du conteneur, et tombe à zéro dès que la place manque : le bloc ne peut donc jamais sortir de la page. */ .pw{--pw-debord:clamp(0px,(100vw - 1000px) / 4,150px); width:calc(100% + 2 * var(--pw-debord)); margin-left:calc(-1 * var(--pw-debord)); margin-top:clamp(46px,5vw,72px);margin-bottom:clamp(46px,5vw,72px); text-align:center;} /* Le libellé reprend le dessin de celui de la signature, deux blocs plus haut : la page a déjà cette forme pour annoncer une partie à l'intérieur d'une section. */ .pw-k{display:block;text-align:center;margin-bottom:16px; font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-2);} /* Le bloc vit dans l'en-tête de section, dont la mesure est de 900 points : trois colonnes y tiennent à 270 chacune, ce que les trois phrases d'une ligne demandent, pas davantage. */ /* Le titre prend l'échelle des titres de section — même corps, même interligne, même sérif que le h2 de « Qui sommes-nous » ou du positionnement. C'est un titre comme les autres, et rien ne justifiait de le rapetisser : il reste un `h3` dans la structure du document, pour ne pas ouvrir une seconde section dans un en-tête qui en compte déjà une, mais cela ne regarde que le plan. Le chapeau porte les deux classes dans son sélecteur : `.head p` fixe un corps de 16px et une mesure de 68 signes à tout paragraphe d'en-tête, et l'emporterait sinon sur une classe seule. */ /* Le titre tient sur une seule ligne : à 30 signes de mesure il se repliait en deux, alors que la phrase en fait 44 et que l'en-tête lui offre 900 points de large. La borne saute donc ; sous 700px, où la ligne ne rentre plus, le repli se fait tout seul et `balance` répartit les deux lignes. */ .pw-t{max-width:none;margin:0 auto; font-family:"Newsreader","Iowan Old Style",Charter,Georgia,serif; font-weight:400;font-size:clamp(26px,2.35vw,33px);line-height:1.14; letter-spacing:-.018em;color:var(--ink);text-wrap:balance;} .pw-t em{font-style:normal;color:var(--blue);} .pw .pw-p{max-width:52ch;margin:16px auto 0; font-size:15px;line-height:1.65;color:var(--ink-2);} /* L'écart avant le registre est porté par le titre comme par le chapeau : le chapeau a disparu du bloc, et un `.pw-p + .pw-list` seul aurait laissé les trois colonnes au ras du titre. */ .pw .claim + .pw-list, .pw .pw-t + .pw-list, .pw .pw-p + .pw-list{margin-top:clamp(34px,3.8vw,50px);} /* Le titre de section s'intercale entre la phrase du bloc et le registre : il se détache de la première d'un écart franc, sans quoi les deux se lisaient comme un seul énoncé en deux corps. */ .pw .pw-t + .claim{margin-top:clamp(22px,2.4vw,30px);} .pw-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(22px,2.6vw,42px);} /* Le filet déborde le contenu en haut comme en bas : une colonne dont le trait s'arrête au ras de la première et de la dernière ligne paraît serrée dans sa bordure. Les trois s'étirent d'ailleurs à la même hauteur — la grille le fait d'elle-même — donc ce qu'on donne à l'une, on le donne aux trois. */ .pw-item{border-left:2px solid var(--blue); padding:clamp(18px,2.2vw,32px) clamp(20px,2.1vw,30px) clamp(20px,2.4vw,36px);} /* Le premier n'a pas de filet : les deux qui restent séparent les colonnes au lieu de border chacune la sienne. Un trait devant la première ligne du bloc n'a rien à sa gauche à distinguer — il ornait, il ne séparait pas. */ .pw-item:first-child{border-left:0;} /* Le glyphe précède le titre sur la même ligne : à cette échelle il est une marque, pas une illustration, et posé au-dessus il aurait pris la place d'un titre de plus. */ /* Tout est centré sur l'axe de la colonne — glyphe, titre, phrase. Le second axe que le glyphe seul ouvrait n'existe plus : les trois éléments partagent le même, et les filets ne bordent plus le texte, ils séparent les colonnes. */ .pw-ico{display:block;color:var(--blue);margin-bottom:clamp(20px,2.3vw,30px);} .pw-ico svg{width:26px;height:26px;} .pw-item h3{font-size:clamp(17.5px,1.35vw,19.5px);font-weight:500; letter-spacing:-.02em;color:var(--ink);} .pw-item p{margin-top:15px;font-size:15px;line-height:1.75;color:var(--ink-2); max-width:none;} /* Le lien vers le profil : le logo à sa couleur de marque, le libellé au bleu du cabinet. Il se distingue du texte sans faire un bouton — à cette place, un bouton demanderait une action là où le bloc n'énonce qu'un fait. */ .pw-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:20px; font-size:13.5px;font-weight:500;color:var(--blue); text-decoration:none;transition:color .2s;} .pw-link .ico-brand{width:15px;height:15px;fill:#0A66C2;flex:none;} /* Souligné en permanence, et non au seul survol : c'est le seul lien du corps de la page, dans un bloc qui n'en compte aucun autre — rien ne le désigne comme cliquable si le trait n'apparaît qu'une fois le pointeur dessus, et un écran tactile n'a pas de survol. Le trait se décolle de deux points sous la ligne de base, assez pour ne pas mordre les jambages. */ .pw-link span{border-bottom:1px solid currentColor;padding-bottom:2px; transition:border-color .2s;} .pw-link:hover{color:var(--blue-h);} /* Sous 860px, trois colonnes tomberaient à moins de deux cents points chacune : la rangée devient une pile, et les filets verticaux passent à l'horizontale entre les blocs — même geste, autre sens, comme partout ailleurs sur le site. */ @media(max-width:860px){ .pw{--pw-debord:0px;} .pw-list{grid-template-columns:1fr;gap:0;} .pw-item{border-left:0;border-top:1px solid var(--line); padding:clamp(22px,3vw,30px) 0;} .pw-item:first-child{border-top:0;padding-top:0;} } /* ================================================= POSITIONNEMENT ======= */ /* La seule section sans image de la page, et c'est ce qui lui donne sa place : entre six sections illustrées et la bande bleue, elle fait respirer par la typographie plutôt que d'ajouter une septième grille de photos. Un damier, pas quatre cartes : les quartiers ne sont pas des objets posés sur le fond, ils sont découpés dans une seule surface par deux filets qui la traversent. C'est ce qui le distingue des cartes de services et des blocs de « pourquoi nous » — et ce qui permet de n'avoir aucune ombre, aucun écart entre les quartiers, rien qu'un pixel de filet. L'interstice est obtenu par gap:1px sur un fond de filet : les quartiers sont blancs, le fond passe entre eux. Une bordure par quartier aurait doublé les traits intérieurs à deux pixels. Ce qui a disparu ici : le carrousel qui n'en montrait qu'une facette à la fois, ses deux flèches, son compteur, et les numéros 01-04 de ses vues. Rien de tout cela ne servait un contenu de quatre phrases, et l'ordre n'y porte aucun sens — ces facettes coexistent, elles ne se succèdent pas comme les quatre temps de l'approche. */ .pos{display:grid;grid-template-columns:1fr 1fr;gap:1px; margin-top:clamp(34px,4vw,52px); background:var(--sand-line); border:1px solid var(--sand-line);border-radius:var(--r-m); overflow:hidden;list-style:none;} /* Contenu centré dans son quartier, comme les blocs de « pourquoi nous » : le damier est déjà une figure symétrique, un texte aligné à gauche y aurait laissé quatre bords droits irréguliers au milieu de la surface. Centré horizontalement, mais calé en haut : les quartiers d'une même rangée prennent la hauteur du plus haut, et un contenu centré sur la verticale y décalait les deux intitulés et les deux titres de la rangée d'une dizaine de pixels. Le vide se met en bas, où il ne se compare à rien. */ .pos-item{background:var(--paper);padding:clamp(26px,2.8vw,40px); text-align:center;} /* Intitulé et glyphe sur une seule ligne : ils nomment la même chose, et empilés ils auraient fait quatre niveaux de lecture par quartier. Le bleu est le seul accent admis ; le glyphe suit la couleur du texte. */ .pos-k{display:flex;align-items:center;justify-content:center;gap:10px; color:var(--blue); font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;} .pos-k svg{width:20px;height:20px;flex:none;} .pos-item h3{margin-top:14px;font-size:clamp(19px,1.4vw,20.5px);font-weight:500; letter-spacing:-.025em;line-height:1.2;color:var(--ink);} /* Mesure tenue à 42 caractères, la même règle que les blocs de la page : centré, un paragraphe plus large donne des lignes dont l'œil perd le début en revenant à la ligne. */ .pos-item p{max-width:42ch;margin:10px auto 0; font-size:15px;line-height:1.65;color:var(--ink-2);} /* Les trois rôles : mêmes quartiers, mais un glyphe et un intitulé seulement. Sans paragraphe dessous, le quartier se vide par le bas — le contenu se centre donc sur la verticale, et le glyphe passe au-dessus du titre au lieu de partager sa ligne. Le corps monte d'un cran : ces trois lignes portent la section à elles seules. */ .pos-3{grid-template-columns:repeat(3,1fr);} /* Contenu calé en haut, jamais centré sur la verticale : « Accélérateur de souveraineté digitale » passe sur deux lignes là où ses voisins tiennent sur une, et un centrage vertical décalait alors son glyphe d'une demi-ligne par rapport aux deux autres. Le vide se met en bas, où il ne se compare à rien — la même règle que les quartiers à quatre. */ .pos-3 .pos-item{display:flex;flex-direction:column;align-items:center; justify-content:flex-start;gap:16px; padding-top:clamp(30px,3.2vw,44px); min-height:clamp(150px,14vw,190px);} .pos-3 .pos-k svg{width:26px;height:26px;} .pos-3 .pos-item h3{margin-top:0;font-size:clamp(18px,1.5vw,21px);} /* L'image du rôle, en tête de quartier. Elle sort du padding par une marge négative de la même valeur — c'est ce qui la fait toucher les trois bords sans avoir à vider le quartier de son padding et à le rendre à un enfant. `align-self:stretch` la dispense du centrage que la colonne impose à tout ce qu'elle contient : centrée, elle aurait gardé sa largeur d'image au milieu d'un quartier plus large. Le rapport 16:10 est celui des cartes de services, et le fond sable tient la case pendant le chargement — sans lui, une image en `lazy` laisse un trou blanc dans un damier dont les quartiers sont déjà blancs. Aucun écart sous elle : le `gap` de la colonne s'en charge, et l'ajouter ici l'aurait doublé. */ .pos-media{align-self:stretch;overflow:hidden; margin:calc(-1 * clamp(30px,3.2vw,44px)) calc(-1 * clamp(26px,2.8vw,40px)) 0; aspect-ratio:16/10;background:var(--sand);} .pos-media img{display:block;width:100%;height:100%;object-fit:cover;} /* `.pos-lead` portait l'amorce « Nous intervenons comme : », et la règle qui la suivait resserrait l'écart entre elle et la rangée. L'amorce est retirée : le damier reprend donc la cale pleine de `.pos`, celle qui vaut pour toute rangée posée sous un chapeau de section. */ /* ═══════════════════════════════════════════════════════ ENGAGEMENT ═════ */ /* Le positionnement se ferme sur ce qu'est une mission pour le cabinet. La parole donnée qui suivait a rejoint la fin de « Vision & mission » : elle y conclut ce que la section énonce, quand ici elle doublait une clôture. En partant, elle a emporté la fermeture. Ce qui restait — quinze points de gris sur soixante-six signes — était le premier des deux temps, celui qui posait le propos avant que le second, en sérif et d'un corps au-dessus, ne referme la section. Seul, il finissait la section sur une note de bas de page. Il prend donc la forme de la clôture de « Qui sommes-nous » : même sérif, même corps, même encre pleine, même mesure de cinquante signes. Deux sections qui se ferment de la même façon se lisent comme deux étapes d'un même raisonnement ; leur fond, blanc ici et sable là, suffit à les distinguer. */ .pledge{margin-top:clamp(44px,4.8vw,66px);text-align:center;} .pledge > p{margin:0 auto;max-width:50ch; font-family:"Newsreader","Iowan Old Style",Charter,Georgia,serif; font-size:clamp(20px,1.5vw,21.5px);line-height:1.45; letter-spacing:-.02em;color:var(--ink);text-wrap:pretty;} /* `.pledge-l` mettait la parole donnée en clôture de « Vision & mission » : au sérif, d'un corps au-dessus du reste, ouverte par un filet court de la largeur de sa mesure. Cette phrase est remontée à la place de la vision, où elle prend le dessin de `.vm-vision` ; la règle n'avait plus rien à habiller. */ /* Deux colonnes tiennent tant qu'un quartier garde une mesure lisible ; en dessous, le damier devient une colonne et les filets, de simples séparateurs horizontaux. */ /* Les spécialités passent en colonne quand un quartier n'a plus la largeur de poser son intitulé sur deux lignes. Les filets suivent : celui qui séparait deux voisines devient celui qui sépare deux rangées, sinon la grille garde des traits en tête de ligne et en perd entre les rangs. */ /* Quatre volets tiennent tant que chacun garde la mesure d'un intitulé sur deux lignes ; en dessous, ils passent à deux, puis à un. */ @media(max-width:1080px){ .specs{grid-template-columns:repeat(2,minmax(0,1fr));} } @media(max-width:560px){ .specs{grid-template-columns:1fr;} /* Sur une colonne, le volet prenait toute la largeur de l'écran : en 4 sur 5 il faisait près de 450 points de haut, et les quatre occupaient deux écrans de téléphone à eux seuls — d'où un cadrage paysage forcé. Sans photo, la hauteur suit le texte et le problème ne se pose plus. */ /* La signature garde sur téléphone la forme qu'elle a sur portable : les six termes liés par leurs tirets bleus et l'esperluette finale. Ils sautaient ici pour éviter qu'une ligne repliée ne commence par un tiret ; c'est un défaut mineur au regard d'une devise qui change de dessin selon l'écran. */ .sig-l{gap:.25em .6em;} } @media(max-width:900px){ /* « Accélérateur de souveraineté digitale » ne tient pas sur trois colonnes en dessous de cette largeur : il y passait sur trois lignes quand ses deux voisins en gardaient une. */ /* Sur une colonne, le damier se resserre et se centre au lieu de courir d'un bord à l'autre. C'est ce qui règle la hauteur des images sans toucher à leur cadrage : à cinq cent quarante points de large, une photographie en 16:10 en fait trois cent trente de haut — sur toute la largeur d'une tablette elle en aurait fait cinq cents, et les trois auraient occupé deux écrans avant le premier intitulé. Le cadre a porté un temps un rapport 21:9 pour tenir cette hauteur : il rognait le haut et le bas de photographies cadrées en 16:10, c'est-à-dire les visages, exactement ce qu'elles sont là pour montrer. Le rapport reste donc celui des fichiers, à toutes les largeurs — rien n'est recadré. */ .pos-3{grid-template-columns:1fr; max-width:540px;margin-left:auto;margin-right:auto;} } @media(max-width:760px){ .pos{grid-template-columns:1fr;} } /* ============================================== CHARTE DE VALEURS ======= */ /* Une frise, pas une liste : cinq portraits côte à côte, lus comme un seul objet. Empilées en cinq lignes, les valeurs se parcouraient une par une et perdaient ce qui fait une charte — le fait qu'elles tiennent ensemble. Les cinq images sont alignées sur une même horizontale : elles se valent, et un décalage alterné suggérait une hiérarchie qui n'existe pas. */ /* Les cinq affiches sur une seule ligne, à la demande du cabinet, dans la largeur ordinaire de la page. Le cadre est carré, comme elles : à largeur constante, tout redressement du cadre se paie en largeur d'image, et leur texte — titre, paragraphe, puces — est composé jusqu'aux quatre bords. Il n'y a donc rien à rogner. La lecture se fait ailleurs : chaque affiche est un bouton, et s'ouvre en grand dans la visionneuse de fin de page. La vignette annonce, la visionneuse donne à lire. */ .values{list-style:none;display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(14px,1.5vw,22px);margin-top:clamp(40px,4.5vw,58px);} .value{display:flex;flex-direction:column;} /* Le cadre est carré depuis que les cinq photographies ont laissé la place aux affiches du cabinet : elles portent le nom de la valeur et son engagement peints dedans, et un cadre 3/4 en amputait le titre. Le zoom au survol est tombé pour la même raison — agrandir une affiche, c'est en pousser le texte hors du cadre. */ /* Les cinq affiches de la charte ne s'ouvrent pas et ne bougent pas : ni clic, ni loupe, ni zoom au survol. Elles se donnent entières, telles quelles. */ .value-media{aspect-ratio:1/1;overflow:hidden;border-radius:var(--r-m); background:var(--sand-line);margin:0;} .value-media img{width:100%;height:100%;object-fit:cover;display:block;} /* La loupe et la visionneuse ont été retirées : plus aucune affiche de la page ne s'ouvre en grand, ni celles de la charte, ni celles des spécialités. */ .value-body{padding-top:clamp(16px,1.8vw,22px);text-align:center;} .value h3{font-size:clamp(20px,1.55vw,22px);font-weight:500; letter-spacing:-.03em;line-height:1.1;color:var(--ink);} .value-body p{margin-top:9px;font-size:14px;line-height:1.55;color:var(--ink-2);} /* Apparition au défilement. Un seul geste — même distance, même courbe — et un décalage en cascade à l'intérieur d'un groupe, jamais entre sections. */ .reveal.armed{opacity:0;transform:translateY(18px); transition:opacity .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1);} .reveal.armed.in{opacity:1;transform:none;} .reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s} .reveal.d3{transition-delay:.21s}.reveal.d4{transition-delay:.28s} .reveal.d5{transition-delay:.35s} /* ============================================================ SERVICES === */ /* Six cartes en trois colonnes : l'image occupe le haut du bloc, le texte le bas, sur fond blanc. Le texte n'est plus posé sur la photo — il a sa propre surface, ce qui rend le livrable et la phase lisibles sans dépendre d'un voile, et rend chaque carte scannable d'un coup d'œil. */ .srv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.5vw,20px); margin-top:clamp(40px,4.5vw,58px);} .srv{position:relative;display:flex;flex-direction:column;overflow:hidden; background:var(--sand);border:1px solid var(--line);border-radius:var(--r-m); transition:border-color .25s ease;} .srv:hover{border-color:var(--line-2);} /* 16:10, le rapport des visuels du positionnement : la page n'a que deux rangées d'images à intitulé court, et elles se répondent d'un même cadrage. */ .srv-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--line);} .srv-media img{width:100%;height:100%;object-fit:cover; transition:transform .5s cubic-bezier(.22,.61,.36,1);} .srv:hover .srv-media img{transform:scale(1.04);} /* L'affiche du cabinet est verticale — 1024×1536 — et le cadre de la rangée est en 16:10 : les trois cartes gardent la même hauteur, c'est ce qui tient la rangée. L'affiche y est donc posée ENTIÈRE, `contain` et non `cover` : elle prend toute la hauteur du cadre, rien n'est rogné, ni le titre en tête ni le bandeau du pied. Elle a été rognée jusqu'au 1er septembre 2026 — on n'en voyait qu'une bande médiane, le texte peint dedans passait à la trappe. Ce que `contain` laisse libre de chaque côté n'est pas une bande grise : le pseudo-élément reprend la même affiche en fond, agrandie et floutée, et la remplit de ses propres teintes. Un seul fichier pour les deux, déjà en cache quand le fond se peint. Pas de zoom au survol non plus : les 4 % qui grandissent une photographie sans dommage feraient ici ressortir du cadre ce qu'on vient d'y faire tenir. Le survol de la carte reste marqué par son filet et par la pastille de la flèche. */ .srv-media--affiche{background:#0d0d0f;} .srv-media--affiche::before{content:"";position:absolute;inset:-8%; background:url("/assets/srv-leadership-23.547aeada.webp") center/cover no-repeat; filter:blur(22px) saturate(.85) brightness(.92);} .srv-media--affiche img{position:relative;object-fit:contain;} .srv:hover .srv-media--affiche img{transform:none;} /* Le lien couvre la carte entière — c'est lui qui la rend cliquable — et la pastille n'en est que la marque visible, sur l'image. Le titre reste ainsi un vrai

au lieu d'être noyé dans un lien. */ .srv-go{position:absolute;inset:0;z-index:3;} .srv-go i{position:absolute;top:11px;right:11px; display:grid;place-items:center;width:34px;height:34px;border-radius:9999px; background:rgba(255,255,255,.94);transition:background .25s ease;} .srv-go svg{width:15px;height:15px;color:var(--ink);stroke:currentColor;stroke-width:1.8; fill:none;stroke-linecap:round;stroke-linejoin:round; transition:transform .25s ease,color .25s ease;} .srv:hover .srv-go i{background:var(--blue);} .srv:hover .srv-go svg{color:#fff;transform:translate(2px,-2px);} .srv-go:focus-visible{outline:2px solid var(--blue);outline-offset:-3px;border-radius:inherit;} /* Fond sable sous le texte : la carte se lit en deux temps, l'image puis l'énoncé, et c'est la valeur du bloc qui la détache du fond de section. Ce bloc suit donc la section, en sens inverse : sable quand elle est blanche, blanc quand elle est sable. « Nos services » est repassée au blanc pour que « Vision & mission » ne partage pas son fond avec « Notre approche » — le bandeau prend le sable en retour, sans quoi c'était blanc sur blanc et la carte n'avait plus d'autre bord que son filet. */ .srv-txt{display:flex;flex-direction:column;flex:1;text-align:center; padding:clamp(16px,1.5vw,20px);background:var(--sand); border-top:1px solid var(--line);} .srv-name{display:block;margin-bottom:7px;font-size:clamp(17px,1.25vw,18.5px); font-weight:500;letter-spacing:-.03em;line-height:1.1;color:var(--ink);} .srv-txt p{font-size:13.5px;line-height:1.5;color:var(--ink-2);} .srv-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:7px 12px;margin-top:auto;padding-top:14px;} .srv-out{font-size:12px;color:var(--ink-2);} .srv-out b{font-weight:500;color:var(--ink);} /* La phase se lit comme une mention en petites capitales, adossée à un filet vertical : plus sobre qu'une pastille, et ça ne fait pas décoration. */ .phase{display:inline-block;padding-left:10px;border-left:2px solid var(--blue); font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em; color:var(--ink-2);white-space:nowrap;} .phase.p2{border-left-color:rgba(37,99,235,.6);} .phase.p3{border-left-color:rgba(37,99,235,.4);} .phase.p4{border-left-color:rgba(37,99,235,.25);} /* ============================================================ APPROCHE === */ /* Étapes qui défilent d'elles-mêmes, image synchronisée. La barre sous l'étape active dit combien de temps il reste avant le passage à la suivante — sans elle, le changement automatique paraît arbitraire. */ /* Image à gauche, étapes à droite. L'ordre du DOM suit l'ordre visuel : le focus clavier atteint les boutons après l'image, pas l'inverse. */ .fsteps{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(32px,5vw,72px);align-items:center;margin-top:clamp(44px,5vw,64px);} .fsteps-list{--fstep-gap:clamp(22px,2.6vw,34px);list-style:none; display:flex;flex-direction:column;gap:var(--fstep-gap);} .fstep{position:relative;display:flex;align-items:flex-start;gap:20px; opacity:.34;transition:opacity .5s ease;} .fstep.is-done{opacity:.72;} .fstep.is-active{opacity:1;} /* Le titre porte le bouton ; son ::after étend la zone cliquable à toute l'étape. Un