/* IDYHLH — transcription de la plaquette v48, planche par planche. * * LES VALEURS SONT RELEVÉES DANS LE PDF, PAS ESTIMÉES À L'ŒIL. Les couleurs * sortent d'un comptage des pixels du document rendu à 150 dpi ; la police est * celle qu'il embarque, Lato, servie en local depuis le dépôt. * * AUCUNE VARIABLE SUR :root. `sb-yhb` pose ses `--sb-*` sur `:root`, et deux * extensions y ajoutent les leurs. Tout vit donc sur `.idyhlh`. */ @font-face{font-family:"Lato IDYHLH";src:url("fonts/lato-400.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Lato IDYHLH";src:url("fonts/lato-700.woff2") format("woff2"); font-weight:700;font-style:normal;font-display:swap} .idyhlh{ --i-fond:#F7F9FB; --i-encre:#1B1E3A; --i-gris:#5A6A7D; --i-blanc:#FFFFFF; --i-violet:#6A3EA0; --i-magenta:#A02497; --i-bleu:#259ED7; --i-bleufonce:#176B9E; --i-blob-bleu:#ECF2F9; --i-blob-rose:#F4EEF4; --i-nuit:#1B1E3A; --i-nuit-blob:#262951; --i-nuit-blob2:#2D2049; --i-ciel:#8ED0F2; --i-bord:#E6EAF0; --i-ombre:0 2px 10px rgba(27,30,58,.06); --i-rayon:14px; font-family:"Lato IDYHLH",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--i-encre); background:var(--i-fond); font-weight:400; line-height:1.45; -webkit-font-smoothing:antialiased; } .idyhlh *{box-sizing:border-box} /* ── la planche ───────────────────────────────────────────────────────── Chaque planche du PDF devient une section pleine largeur. Elle garde sa composition, pas son format 16:9 : un rapport figé rendrait le texte illisible sur un téléphone, et la transcription doit se lire partout. */ /* L'ALTERNANCE DES FONDS. Le PDF pose toutes ses planches sur le même #F7F9FB : à l'écran, quatorze sections d'affilée sur un seul ton se lisent comme un seul bloc, et rien ne dit où une planche finit. On alterne donc deux tons de la même famille — celui du document, et un cran plus soutenu pris dans la tache bleue qu'il utilise déjà. L'écart est volontairement faible : il sépare sans fabriquer des bandes. */ /* CHAQUE PLANCHE OCCUPE AU MOINS 80 % DE L'ÉCRAN, et centre son contenu dedans. Le document donne à chaque planche une page entière ; empilées à leur hauteur de texte, elles se touchaient et plus rien ne respirait. `min-height` et non `height` : une planche plus haute que l'écran — les cinq leviers, le réseau — grandit sans être coupée. */ .idyhlh__planche{position:relative; overflow:hidden; background:var(--i-fond); min-height:80vh; display:flex; flex-direction:column; justify-content:center; padding:clamp(48px,7vw,92px) 0 clamp(52px,7vw,96px)} .idyhlh__planche:nth-of-type(even){background:#EEF2F7} /* ⚠️ LE MODIFICATEUR `--nuit` N'A PLUS DE PORTEUR. La planche de clôture était la seule, et elle a été retirée le 29.09. Ses règles sont parties avec elle : une feuille qui décrit un état que le balisage ne produit plus se lit comme une possibilité, et on finit par la croire. Si une planche sombre revient, elle se réécrit — ce n'est pas le travail coûteux. */ .idyhlh__wrap{position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:0 clamp(16px,4vw,44px)} /* les taches de fond, décoratives */ .idyhlh__blob{position:absolute; border-radius:50%; z-index:1; pointer-events:none} .idyhlh__blob--bleu{background:var(--i-blob-bleu)} .idyhlh__blob--rose{background:var(--i-blob-rose)} .idyhlh__blob--hg{width:min(46vw,520px); aspect-ratio:1; top:-18%; left:-14%} .idyhlh__blob--hd{width:min(52vw,600px); aspect-ratio:1; top:-30%; right:-12%} .idyhlh__blob--bd{width:min(40vw,460px); aspect-ratio:1; bottom:-26%; right:-10%} .idyhlh__blob--bg{width:min(34vw,380px); aspect-ratio:1; bottom:-24%; left:-12%} .idyhlh__titre{font-size:clamp(28px,4.2vw,44px); line-height:1.12; font-weight:400; letter-spacing:-.012em; margin:0 0 14px} /* LE CHAPÔ A LA LARGEUR DU TITRE. Il était bridé à 62 caractères : il cassait ses lignes bien avant le bord alors que le titre, lui, allait au bout — deux colonnes de largeurs différentes dans le même bloc, et des retours à la ligne que rien ne justifiait. Yan, le 28.09. */ .idyhlh__chapo{font-size:clamp(15px,1.5vw,19px); color:var(--i-gris); margin:0 0 clamp(26px,3.4vw,46px); line-height:1.42; max-width:none} /* `sb-yhb` borne la mesure de ses paragraphes — c'est juste pour de la prose, faux ici : le chapô d'une planche accompagne son titre et doit aller aussi loin que lui. On écrase la règle du thème plutôt que de la contourner. */ .idyhlh .idyhlh__chapo, .idyhlh__planche p.idyhlh__chapo{max-width:none} /* ── planche 01 et 14 : les couvertures ─────────────────────────────── */ /* LE MONOGRAMME EN GRAND, sur la couverture seulement. C'est là qu'il pose la marque ; ailleurs il encombre. Il se retire du flux pour ne pas pousser le titre, et disparaît quand la largeur ne lui laisse plus de place. */ .idyhlh__couv{position:relative} /* LE SIGNE RESTE DANS LA BANDE DU TITRE. Centré sur la hauteur de la planche, il descendait par-dessus la rangée des trois maisons. Il s'ancre donc en haut, comme dans le document, où il occupe le quart droit au-dessus du filet. */ /* LE SIGNE RENTRE VERS L'INTÉRIEUR. Collé au bord droit de la planche, il sortait du bloc de texte et déséquilibrait la couverture. Il s'aligne maintenant sur la marge de la page, comme tout le reste. */ .idyhlh__couv-haut{display:grid; align-items:center} .idyhlh__couv-haut .idyhlh__marque{align-items:center; gap:0} /* LE MOT-MARQUE EN NOIR SOUS LE SIGNE. Le fichier est en couleurs ; on le noircit au rendu plutôt que d'ajouter un second fichier à tenir d'accord. La signature, elle, garde l'accent de la maison. */ .idyhlh__couv-haut .idyhlh__idyhlh{filter:brightness(0); height:38px; margin-top:clamp(14px,2vw,22px)} @media (max-width:860px){ .idyhlh__couv-haut{grid-template-columns:1fr} } /* « Prioriser l'investissement » TIENT SUR UNE LIGNE. Le titre était bridé à 18 caractères : la première ligne en fait 25 et se coupait après « Prioriser », ce que le saut de ligne du texte ne demandait pas. La bride saute, le corps descend d'un cran, et le monogramme se resserre pour lui laisser la place. Yan, le 28.09. */ .idyhlh__couv .idyhlh__titre{font-size:clamp(30px,5.1vw,56px); line-height:1.1} .idyhlh__couv .idyhlh__soustitre{font-size:clamp(17px,2.1vw,25px); color:var(--i-magenta); margin:0} .idyhlh__signature{color:var(--i-magenta); font-size:clamp(16px,1.8vw,21px)} .idyhlh__couv-pied{display:flex; align-items:flex-start; justify-content:space-between; gap:clamp(24px,4vw,56px); flex-wrap:wrap; margin-top:clamp(34px,5vw,64px); padding-top:26px; border-top:1px solid var(--i-bord)} /* LA MARQUE ET SA SIGNATURE FONT UN BLOC. La signature se posait à l'autre bout de la ligne, sans rien à quoi s'accrocher. Sous le monogramme et à sa largeur, elle en devient la légende. `width:max-content` fait que le bloc prend la largeur de l'image, et la signature s'y étale. */ .idyhlh__marque{display:flex; flex-direction:column; width:max-content} .idyhlh__idyhlh{height:58px; width:auto; display:block} /* LA SIGNATURE PREND LA PLACE DE LA LIGNE DE SOUS-TITRE. Le lockup portait « INTERNET DIFFUSION · YAN HALTEY · LINA HADID » sous le mot-marque ; les trois maisons sont déjà nommées par leurs logos, à droite. On sert donc le mot-marque seul, et la signature s'assoit à cette place — même largeur, même distance, elle en devient la ligne. */ .idyhlh__marque .idyhlh__signature{display:block; width:100%; margin-top:10px; font-size:clamp(14px,1.5vw,17.5px); letter-spacing:.01em} /* LES TROIS MAISONS, PLUS PRÉSENTES. À 38 px elles se lisaient à peine à côté d'un monogramme deux fois plus haut. La hauteur est portée à 52 px, et le lockup d'Internet Diffusion à 44 : il est large et deux fois plus bas que les deux marques carrées, une hauteur unique le rendait énorme. */ /* LES TROIS MAISONS SUR UNE MÊME LIGNE ET UNE MÊME HAUTEUR. Elles avaient des proportions et des hauteurs différentes, et flottaient chacune à son niveau. Chaque logo reçoit désormais la MÊME boîte — 54 px de haut — et s'y inscrit sans se déformer. La boîte garantit l'alignement, `object-fit:contain` garantit la hauteur. */ /* LES TROIS MAISONS : MÊME BOÎTE, ET 20 % DE PLUS. `align-items:stretch` plus une hauteur fixe sur la boîte : chaque logo s'inscrit dans le MÊME rectangle et s'y centre. C'est la boîte qui aligne, pas l'œil — deux logos de proportions différentes finissent sur la même ligne haute et la même ligne basse. 54 px → 65 px, comme demandé. */ .idyhlh__couv-logos{flex-wrap:wrap} .idyhlh__couv-logos img{width:auto; object-position:center center; display:block; align-self:center} /* ── planche 02 : les constats, une rangée par domaine ──────────────── */ .idyhlh__constats{display:flex; flex-direction:column; gap:12px} .idyhlh__constat{display:grid; grid-template-columns:minmax(210px,1fr) 1.3fr 1.3fr; gap:clamp(14px,2.4vw,32px); align-items:center; background:var(--i-blanc); border-radius:var(--i-rayon); box-shadow:var(--i-ombre); padding:clamp(14px,1.8vw,20px) clamp(16px,2.2vw,26px)} .idyhlh__constat-nom{display:flex; align-items:center; gap:14px; font-weight:700; font-size:16px} .idyhlh__constat p{margin:0; color:var(--i-gris); font-size:15.5px} /* la pastille d'icône, dégradée comme dans le document */ .idyhlh__ico{flex:0 0 auto; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(140deg,var(--i-violet),var(--i-magenta))} .idyhlh__ico svg{width:21px; height:21px; fill:none; stroke:#fff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round} .idyhlh__ico--humain{background:linear-gradient(140deg,#7B4BA8,#6A3EA0)} .idyhlh__ico--strategie{background:linear-gradient(140deg,#8E2F94,#6E1B5E)} .idyhlh__ico--marketing{background:linear-gradient(140deg,#3BB0E3,#1C7FB5)} .idyhlh__ico--branding{background:linear-gradient(140deg,#B92E9E,#8E1C7C)} .idyhlh__ico--optimisation{background:linear-gradient(140deg,#2E8FC4,#176B9E)} /* ── planche 03 : la comparaison ────────────────────────────────────── */ .idyhlh__compare{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,26px)} .idyhlh__col{background:var(--i-blanc); border-radius:var(--i-rayon); box-shadow:var(--i-ombre); padding:clamp(18px,2.4vw,28px)} .idyhlh__col h3{font-size:18px; font-weight:700; margin:0 0 20px} .idyhlh__col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px} .idyhlh__col li{display:flex; align-items:center; gap:12px; font-size:16px; color:#B7BEC9} .idyhlh__col li.is-on{color:var(--i-encre)} .idyhlh__pt{width:15px; height:15px; border-radius:50%; flex:0 0 auto; border:1.6px solid #D3D9E2; background:transparent} .idyhlh__col li.is-on .idyhlh__pt{border-color:transparent} .idyhlh__col--nous{background:var(--i-encre)} .idyhlh__col--nous h3{color:#fff} /* LES DEUX ÉTATS, SINON L'ENCRE GAGNE SUR L'ENCRE. `.idyhlh__col li.is-on` pèse deux classes, `.idyhlh__col--nous li` une seule : la règle générale l'emportait et posait du #1B1E3A sur un fond #1B1E3A. Les libellés de la colonne IDYHLH étaient invisibles, seules les pastilles se voyaient. */ .idyhlh__col--nous li, .idyhlh__col--nous li.is-on{color:#fff; font-weight:700} /* La couleur vient du domaine, posée en ligne ; on ne garde ici que le retrait du contour, sinon un cercle creux resterait dessiné sous le plein. */ .idyhlh__col--nous .idyhlh__pt{border-color:transparent} /* ── planche 04 : les cinq leviers ──────────────────────────────────── */ .idyhlh__leviers{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.8vw,22px)} .idyhlh__levier{background:var(--i-blanc); border-radius:var(--i-rayon); box-shadow:var(--i-ombre); padding:clamp(18px,2.2vw,26px); display:flex; flex-direction:column} .idyhlh__levier .idyhlh__ico{margin-bottom:18px} .idyhlh__levier h3{font-size:17px; margin:0 0 14px; font-weight:700; line-height:1.24} .idyhlh__levier p{margin:0 0 16px; font-size:15.5px} .idyhlh__levier ul{list-style:none; margin:auto 0 0; padding:0; display:flex; flex-direction:column; gap:7px} .idyhlh__levier li{font-size:15px; color:var(--i-encre)} .idyhlh__levier li::before{content:"• "; color:var(--i-encre)} .idyhlh__levier--humain h3{color:var(--i-violet)} .idyhlh__levier--strategie h3{color:#6E1B5E} .idyhlh__levier--marketing h3{color:var(--i-bleu)} .idyhlh__levier--branding h3{color:var(--i-magenta)} .idyhlh__levier--optimisation h3{color:var(--i-bleufonce)} /* ── planche 05 : les quatre temps, et la répartition ───────────────── */ /* LES QUATRE TEMPS TIENNENT TOUTE LA LARGEUR. Ils se tassaient à gauche et laissaient un tiers de la planche vide. Les chevrons prennent la place restante : les quatre repères se répartissent d'eux-mêmes, quelle que soit la longueur des libellés. */ .idyhlh__temps{display:flex; align-items:center; gap:clamp(8px,1.2vw,16px); width:100%; margin-bottom:clamp(26px,3.4vw,42px)} .idyhlh__temps-item{display:flex; align-items:center; gap:13px; font-weight:700; font-size:16.5px; flex:0 0 auto; white-space:nowrap} .idyhlh__temps-fleche{flex:1 1 auto; text-align:center; color:#C3CAD4; font-size:17px} .idyhlh__ico--nuit{background:var(--i-encre)} .idyhlh__repartition{background:var(--i-blanc); border-radius:var(--i-rayon); box-shadow:var(--i-ombre); padding:clamp(20px,2.8vw,34px)} .idyhlh__jauges{display:flex; flex-direction:column; gap:15px} /* ── planche 06 : la démarche en chevrons ───────────────────────────── */ /* LES CHEVRONS RESPIRENT, ET ILS ARRIVENT DE GAUCHE À DROITE. À 6 px ils se touchaient : la pointe de l'un entrait dans le creux du suivant et la chaîne se lisait comme un seul bloc. 16 px suffisent à les séparer sans casser la progression. Ils entrent l'un après l'autre, dans l'ordre de la démarche — c'est une suite d'étapes, l'animation le dit. */ /* LA DÉMARCHE : QUATRE ÉTAPES, CHACUNE D'UN BLOC. `subgrid` rend les deux rangées de l'étape à la grille du dessus — les quatre chevrons s'alignent entre eux, les quatre textes aussi, comme quand c'étaient deux grilles séparées. La différence est invisible au grand écran et décisive sur un téléphone : l'étape ne se coupe plus en deux. */ /* ⚠️ LES DEUX RANGÉES SE DÉCLARENT. Un `subgrid` hérite des pistes de son parent : sans `grid-template-rows` explicite, le parent n'en a aucune à prêter, l'héritage échoue et chaque étape se replaçait toute seule sur sa propre ligne — quatre bandeaux pleine largeur au grand écran. Deux pistes déclarées, et les quatre étapes reprennent leurs colonnes. */ .idyhlh__demarche{display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:auto auto; gap:22px clamp(10px,1.4vw,16px)} .idyhlh__etape{display:grid; grid-row:span 2; grid-template-rows:subgrid; gap:0} .idyhlh__planche[data-vu="0"] .idyhlh__etape{opacity:0; transform:translateX(-22px)} .idyhlh__planche[data-vu="1"] .idyhlh__etape{opacity:1; transform:none; transition:opacity .55s ease, transform .55s cubic-bezier(.22,.9,.32,1)} .idyhlh__planche[data-vu="1"] .idyhlh__etape:nth-child(1){transition-delay:.05s} .idyhlh__planche[data-vu="1"] .idyhlh__etape:nth-child(2){transition-delay:.17s} .idyhlh__planche[data-vu="1"] .idyhlh__etape:nth-child(3){transition-delay:.29s} .idyhlh__planche[data-vu="1"] .idyhlh__etape:nth-child(4){transition-delay:.41s} .idyhlh__chevron{display:flex; align-items:center; gap:13px; color:#fff; font-weight:700; font-size:17px; padding:clamp(18px,2.2vw,26px) clamp(16px,2vw,24px); min-height:104px; clip-path:polygon(0 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,0 100%)} /* ⚠️ PAS DE RÈGLE `:first-child` ICI. Elle répétait mot pour mot le tracé de la règle du dessus — sans rien changer au grand écran, mais avec un point de poids de plus. Sur un téléphone, le `clip-path:none` du repli ne pouvait donc pas la battre : le PREMIER chevron gardait sa pointe et les trois autres la perdaient. C'est ce que Yan voyait. */ .idyhlh__chevron svg{width:26px; height:26px; flex:0 0 auto; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round} .idyhlh__etape-txt{padding-top:0} .idyhlh__duree{display:inline-block; border-radius:999px; padding:7px 16px; font-weight:700; font-size:15px; border:1.6px solid currentColor; margin-bottom:16px} .idyhlh__etape-txt p{margin:0; color:var(--i-gris); font-size:15.5px} /* ── planche 07 : le tableau des étapes ─────────────────────────────── */ .idyhlh__grille{display:grid; grid-template-columns:minmax(200px,1fr) repeat(3,1.05fr); gap:10px clamp(10px,1.6vw,18px); align-items:center} .idyhlh__grille-tete{border-radius:10px; padding:14px 18px; color:#fff; font-weight:700; font-size:16px} .idyhlh__grille-tete small{display:block; font-weight:400; opacity:.86; font-size:15px} .idyhlh__grille-dom{display:flex; align-items:center; gap:12px; font-size:16px} .idyhlh__dot{width:12px; height:12px; border-radius:50%; flex:0 0 auto} .idyhlh__case{background:var(--i-blanc); border-radius:10px; box-shadow:var(--i-ombre); padding:14px; min-height:58px; display:flex; align-items:center} .idyhlh__jeton{display:inline-block; border-radius:999px; padding:8px 16px; font-size:15.5px; border:1.6px solid currentColor; color:var(--i-encre)} .idyhlh__jeton--continu{border-style:dashed} .idyhlh__case--vide{background:transparent; box-shadow:none} /* ── planche 08 : la pyramide ───────────────────────────────────────── */ .idyhlh__pyramide{display:grid; grid-template-columns:minmax(260px,.9fr) 1.1fr; gap:clamp(20px,3.4vw,52px); align-items:center} /* LA PYRAMIDE SE CALCULE, ELLE NE S'ESTIME PAS. Les quatre étages portaient des pourcentages posés à l'œil : leurs pentes ne se rejoignaient pas, et la silhouette penchait. Pour un triangle de base L découpé en n tranches d'égale hauteur, la tranche k (1..n) fait k/n de large en bas et (k-1)/n en haut. Rapportée à SA propre largeur, son arête haute vaut donc (k-1)/k, et le retrait de chaque côté 1/(2k) — soit 50 %, 25 %, 16,667 % et 12,5 %. Rien d'ajusté ensuite. */ .idyhlh__etages{display:flex; flex-direction:column; gap:4px; align-items:center} .idyhlh__etage{color:#fff; font-weight:700; font-size:16px; text-align:center; display:grid; place-items:center; min-height:58px; padding:10px 6% 10px; width:100%} .idyhlh__etage--1{width:25%; clip-path:polygon(50% 0,50% 0,100% 100%,0 100%); padding-inline:0} .idyhlh__etage--2{width:50%; clip-path:polygon(25% 0,75% 0,100% 100%,0 100%)} .idyhlh__etage--3{width:75%; clip-path:polygon(16.667% 0,83.333% 0,100% 100%,0 100%)} .idyhlh__etage--4{width:100%; clip-path:polygon(12.5% 0,87.5% 0,100% 100%,0 100%)} /* LE SOMMET POSE SON LIBELLÉ EN BAS, pas au milieu. Une pointe n'a pas de largeur en son centre : centré verticalement, le texte débordait des deux côtés du tracé. Posé sur la base de la tranche, il tient dans le plein. */ .idyhlh__etage--1{align-items:end; padding-bottom:6px; font-size:14.5px} .idyhlh__etage--2{align-items:end; padding-bottom:8px} .idyhlh__mesures{display:flex; flex-direction:column; gap:clamp(18px,2.6vw,34px)} .idyhlh__mesure{display:flex; align-items:flex-start; gap:14px; font-size:16px} .idyhlh__mesure .idyhlh__dot{margin-top:6px} /* ── planche 09 : les trois maisons en cercles ──────────────────────── */ .idyhlh__cercles{display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(18px,3vw,44px); align-items:center} .idyhlh__cercles-txt{display:flex; flex-direction:column; gap:clamp(40px,7vw,96px)} .idyhlh__cercles-txt h3{margin:0 0 4px; font-size:17px; font-weight:700} .idyhlh__cercles-txt p{margin:0; color:var(--i-gris); font-size:16px} .idyhlh__cercles-txt--d{text-align:right} .idyhlh__fleur{position:relative; width:min(78vw,340px); aspect-ratio:1; margin:0 auto} .idyhlh__rond{position:absolute; width:55%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; box-shadow:0 8px 22px rgba(27,30,58,.16)} /* DANS LES CERCLES, LES MARQUES SONT BLANCHES. Le document les y pose en blanc sur la couleur de la maison. Les fichiers, eux, portent l'encre : on les blanchit au rendu plutôt que de garder un second jeu d'images à tenir d'accord avec le premier. */ /* DANS LES CERCLES, LES MARQUES SONT BLANCHES, et à leur mesure. Elles étaient à 62 % du disque : détourées au plus juste, elles le remplissaient jusqu'au bord. 44 % leur rend l'air du document. Le blanchiment reste au rendu — deux jeux d'images à tenir d'accord, c'est une divergence programmée. Le « D » d'Internet Diffusion est déjà blanc, pris sur son logo officiel ; le filtre ne lui fait rien. */ .idyhlh__rond img{width:44%; height:auto; filter:brightness(0) invert(1)} .idyhlh__rond--id{background:var(--i-bleu); top:0; left:0} .idyhlh__rond--lh{background:var(--i-violet); top:0; right:0} .idyhlh__rond--yhb{background:var(--i-magenta); bottom:0; left:22.5%} .idyhlh__coeur{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:26%; aspect-ratio:1; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 4px 14px rgba(27,30,58,.16); z-index:3} /* LE MONOGRAMME SE CENTRE SUR SON POINT, PAS SUR SA BOÎTE. Le fichier est détouré au plus juste : sa boîte va de la pointe du triangle à sa base, alors que le disque noir — ce que l'œil prend pour le centre — est à 15,35 % SOUS le milieu de l'image. Mesuré sur les pixels, pas estimé. Centré par la boîte, le signe paraissait donc posé trop bas dans le cercle. */ .idyhlh__coeur img{width:64%; transform:translateY(-15.35%)} .idyhlh__domaines{display:flex; flex-direction:column; gap:13px} .idyhlh__domaine{display:flex; align-items:center; gap:13px; font-size:16.5px} .idyhlh__jetons{display:flex; flex-wrap:wrap; gap:10px} .idyhlh__jetons span{border:1.5px solid var(--i-bord); border-radius:999px; padding:8px 16px; font-size:15.5px; background:var(--i-blanc)} /* ── ce que le téléphone impose ─────────────────────────────────────── */ @media (max-width:1040px){ .idyhlh__leviers{grid-template-columns:repeat(2,1fr)} .idyhlh__compare{grid-template-columns:repeat(2,1fr)} .idyhlh__demarche{grid-template-columns:repeat(2,1fr)} } @media (max-width:760px){ .idyhlh__constat{grid-template-columns:1fr; gap:10px}.idyhlh__leviers,.idyhlh__compare,.idyhlh__demarche{grid-template-columns:1fr}.idyhlh__repartition,.idyhlh__pyramide{grid-template-columns:1fr} .idyhlh__grille{grid-template-columns:1fr} .idyhlh__case--vide{display:none} .idyhlh__chevron{clip-path:none; border-radius:10px; min-height:0} .idyhlh__jauge{grid-template-columns:96px 1fr 44px} } /* ══════════════════════════════════════════════════════════════════════ LES GESTES DE LA PAGE ══════════════════════════════════════════════════════════════════════ Cette page a le droit d'avoir ses propres règles : elle transcrit un document, pas une page du site. Ce qui suit lui appartient, et ne touche rien d'autre — tout est sous `.idyhlh`. Rien n'est décoratif au point de gêner : chaque geste sert à lire. */ /* ── LE SURVOL ─────────────────────────────────────────────────────── Une carte se soulève d'un cheveu, une pastille s'éclaire, un lien se souligne en grandissant. Trois gestes, pas trente. */ .idyhlh__constat,.idyhlh__levier,.idyhlh__col{ transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease} .idyhlh__constat:hover,.idyhlh__levier:hover{ transform:translateY(-3px); box-shadow:0 8px 22px rgba(27,30,58,.10)} .idyhlh__col--nous:hover{transform:translateY(-3px)} .idyhlh__ico{transition:transform .34s cubic-bezier(.22,.61,.36,1)} .idyhlh__constat:hover .idyhlh__ico, .idyhlh__levier:hover .idyhlh__ico{transform:scale(1.07)} .idyhlh__rond{transition:transform .38s cubic-bezier(.22,.61,.36,1)} .idyhlh__fleur:hover .idyhlh__rond--id{transform:translate(-5px,-5px)} .idyhlh__fleur:hover .idyhlh__rond--lh{transform:translate(5px,-5px)} .idyhlh__fleur:hover .idyhlh__rond--yhb{transform:translateY(6px)} .idyhlh__couv-logos img{transition:opacity .28s ease, transform .28s ease; opacity:.82} .idyhlh__couv-logos img:hover{opacity:1; transform:translateY(-2px)} .idyhlh__jeton{transition:background .25s ease, color .25s ease} .idyhlh__jetons span{transition:border-color .25s ease, transform .25s ease} .idyhlh__jetons span:hover{border-color:var(--i-magenta); transform:translateY(-2px)} /* ── L'ENTRÉE EN SCÈNE ─────────────────────────────────────────────── Chaque planche monte de quelques pixels quand elle arrive. Posé par `data-vu` depuis un observateur : sans script, tout reste visible. */ .idyhlh__planche[data-vu="0"] .idyhlh__wrap > *{opacity:0; transform:translateY(14px)} .idyhlh__planche[data-vu="1"] .idyhlh__wrap > *{opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1)} .idyhlh__planche[data-vu="1"] .idyhlh__wrap > *:nth-child(2){transition-delay:.06s} .idyhlh__planche[data-vu="1"] .idyhlh__wrap > *:nth-child(3){transition-delay:.12s} .idyhlh__planche[data-vu="1"] .idyhlh__wrap > *:nth-child(4){transition-delay:.18s} /* Qui demande moins de mouvement n'en reçoit aucun. */ @media (prefers-reduced-motion:reduce){ .idyhlh *,.idyhlh *::before,.idyhlh *::after{transition:none!important; animation:none!important} .idyhlh__planche[data-vu="0"] .idyhlh__wrap > *{opacity:1; transform:none} } /* ── LA COUVERTURE SE RÉPARTIT ─────────────────────────────────────── Le hero centrait tout son contenu au milieu de ses 80 %, laissant un grand vide dessous et un signe qui flottait loin du texte. Le titre prend le haut, la rangée des marques le bas, et le signe s'aligne sur le bloc de contenu au lieu du bord de l'écran. */ /* LE BLOC DE TITRE SE CENTRE, les maisons restent en bas. Collé sous l'en-tête, il donnait une couverture déséquilibrée : beaucoup de vide dessous, rien dessus. `margin-top:auto` sur le pied suffit à le coller en bas, et le reste se centre dans la place qui lui est laissée. */ .idyhlh__couv .idyhlh__wrap{display:flex; flex-direction:column; flex:1; justify-content:center; gap:clamp(32px,6vh,90px)} .idyhlh__couv .idyhlh__couv-haut{margin-block:auto} .idyhlh__couv .idyhlh__couv-pied{margin-top:auto} @media (max-width:760px){ } /* ── LES TROIS MAISONS EN COLONNES ─────────────────────────────────── Trois planches pleines devenaient trois écrans pour trois présentations. Trois colonnes tiennent sur une planche, et chacune garde tout : son logo, sa ligne, ses domaines et ses marques. */ .idyhlh__troisboites{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,28px); align-items:stretch} .idyhlh__boite{display:flex; flex-direction:column; background:var(--i-blanc); border-radius:var(--i-rayon); box-shadow:var(--i-ombre); padding:clamp(20px,2.6vw,30px); transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease} .idyhlh__boite:hover{transform:translateY(-3px); box-shadow:0 8px 22px rgba(27,30,58,.10)} .idyhlh__boite header{border-bottom:1px solid var(--i-bord); padding-bottom:16px; margin-bottom:16px} .idyhlh__boite header img{height:40px; width:auto; max-width:150px; object-fit:contain; object-position:left center; display:block; margin-bottom:14px} .idyhlh__boite h3{margin:0; font-size:19px; font-weight:700} .idyhlh__boite-ligne{margin:4px 0 0; font-size:15px; color:var(--i-gris)} .idyhlh__boite-corps{margin:0 0 18px; font-size:15.5px; color:var(--i-gris)} .idyhlh__boite .idyhlh__domaines{gap:9px; margin-bottom:18px} .idyhlh__boite .idyhlh__domaine{font-size:15px} .idyhlh__boite-marques{list-style:none; margin:auto 0 0; padding:0; display:flex; flex-direction:column; gap:12px} .idyhlh__boite-marques li{display:flex; flex-direction:column; gap:2px} .idyhlh__boite-marques a{color:var(--i-magenta); text-decoration:none; font-size:15.5px; position:relative; align-self:flex-start} .idyhlh__boite-marques a::after{content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1.4px; background:currentColor; transition:right .3s cubic-bezier(.22,.61,.36,1)} .idyhlh__boite-marques a:hover::after{right:0} .idyhlh__boite-marques span{font-size:14px; color:#8D97A6} @media (max-width:900px){ .idyhlh__troisboites{grid-template-columns:1fr} } /* ══════════════════════════════════════════════════════════════════════ LE FIL CONDUCTEUR : TROIS LAMES ══════════════════════════════════════════════════════════════════════ Le signe de la maison est trois lames qui se rejoignent en un point, et c'est mot pour mot l'argument de l'offre — trois métiers, un interlocuteur. Le motif traverse donc la page : le signe s'assemble à l'ouverture, un fil aux trois teintes suit le défilement, et chaque planche s'ouvre sur ce même fil, court. Rien d'ajouté : c'est la marque qui sert de conducteur. */ /* ── LE BLOC DE MARQUE : UNE SEULE LARGEUR ──────────────────────────── */ .idyhlh__marque--haut{width:min(21vw,240px); align-items:stretch; gap:0} .idyhlh__signe-svg{width:100%; height:auto; display:block; overflow:visible} .idyhlh__couv-haut .idyhlh__marque--haut .idyhlh__idyhlh{width:100%; height:auto; filter:brightness(0); margin-top:clamp(12px,1.6vw,18px)} .idyhlh__marque--haut .idyhlh__signature{width:100%; text-align:center; margin-top:8px} /* ── LE SIGNE S'ASSEMBLE ────────────────────────────────────────────── */ .idyhlh__lame{transform-origin:100px 114.93px; opacity:0; animation:idyhlh-lame .72s cubic-bezier(.22,.9,.32,1) forwards} @keyframes idyhlh-lame{ from{opacity:0; transform:scale(.42) rotate(-14deg)} to {opacity:1; transform:none} } .idyhlh__point{transform-origin:100px 114.93px; opacity:0; animation:idyhlh-point .5s cubic-bezier(.34,1.42,.5,1) .58s forwards} @keyframes idyhlh-point{ from{opacity:0; transform:scale(0)} to{opacity:1; transform:none} } /* Au survol, les lames s'écartent d'un souffle — le même geste que les trois cercles de « Nos maisons ». */ .idyhlh__marque--haut:hover .idyhlh__lame{transition:transform .4s cubic-bezier(.22,.61,.36,1)} .idyhlh__marque--haut:hover .idyhlh__lame--1{transform:translate(-3px,-2px)} .idyhlh__marque--haut:hover .idyhlh__lame--2{transform:translate(3px,-2px)} .idyhlh__marque--haut:hover .idyhlh__lame--3{transform:translateY(3.5px)} /* ── LE FIL QUI SUIT LE DÉFILEMENT ──────────────────────────────────── */ .idyhlh__fil{position:fixed; top:0; left:0; right:0; height:3px; z-index:60; background:linear-gradient(90deg,#299ED7,#6A3EA0,#A02497); transform-origin:0 50%; transform:scaleX(var(--avance,0)); transition:transform .12s linear; pointer-events:none} /* ── CHAQUE PLANCHE S'OUVRE SUR LE MÊME FIL ─────────────────────────── */ .idyhlh__planche > .idyhlh__wrap::before{content:""; display:block; margin-bottom:clamp(18px,2.2vw,28px)} .idyhlh__planche[data-vu="1"] > .idyhlh__wrap::before{width:clamp(48px,7vw,96px)} .idyhlh__planche:not([data-vu]) > .idyhlh__wrap::before{width:clamp(48px,7vw,96px)} .idyhlh__couv > .idyhlh__wrap::before{display:none} @media (prefers-reduced-motion:reduce){ .idyhlh__lame,.idyhlh__point{animation:none; opacity:1} .idyhlh__fil{display:none} } /* ── LE TITRE ENTRE AVEC LE SIGNE ──────────────────────────────────── Le monogramme s'assemblait pendant qu'un titre déjà posé l'attendait. Les deux arrivent maintenant ensemble : le titre monte en fondu pendant que la première lame se pose, la signature suit. Même famille de courbes, mêmes durées — c'est une seule entrée, pas deux. */ .idyhlh__couv-texte > *{opacity:0; animation:idyhlh-entree .8s cubic-bezier(.22,.9,.32,1) forwards} /* ⚠️ LES RETARDS SONT REPRIS PLUS BAS. Yan, le 29.09 : « le triangle arrive d'abord, ensuite on voit la marque, et ensuite les phrases qui s'affichent successivement ». Voir « L'ORDRE D'ENTRÉE » en fin de feuille : les valeurs d'ici sont conservées pour que le bloc reste lisible seul, mais ce sont celles du bas qui s'appliquent. */ @keyframes idyhlh-entree{ from{opacity:0; transform:translateY(16px)} to {opacity:1; transform:none} } .idyhlh__marque--haut .idyhlh__idyhlh, .idyhlh__marque--haut .idyhlh__signature{opacity:0; animation:idyhlh-entree .7s cubic-bezier(.22,.9,.32,1) forwards} /* ── LES TROIS LOGOS : L'ENCRE FAIT LA BOÎTE ───────────────────────── Ils ne s'alignaient pas parce que leurs viewBox étaient CARRÉS (800×800 et 3167×3167) alors que leur encre ne remplissait pas le carré : à hauteur de boîte égale, l'encre de chacun tombait à une hauteur différente. Les viewBox sont recadrés sur l'encre mesurée, le PNG l'était déjà — les trois ont donc maintenant encre = boîte, et une seule hauteur les aligne exactement. */ .idyhlh__couv-logos img{object-fit:fill} @media (prefers-reduced-motion:reduce){ .idyhlh__couv-texte > *, .idyhlh__marque--haut .idyhlh__idyhlh, .idyhlh__marque--haut .idyhlh__signature{animation:none; opacity:1} } /* ══════════════════════════════════════════════════════════════════════ LA RÉPARTITION, MANIPULABLE ══════════════════════════════════════════════════════════════════════ */ .idyhlh__repartition{display:grid; grid-template-columns:minmax(200px,.8fr) 1.2fr; gap:clamp(24px,3.6vw,52px); align-items:center} .idyhlh__repartition-note{grid-column:1/-1; margin:clamp(14px,2vw,22px) 0 0; font-size:14px; color:#8D97A6} /* ── LE CAMEMBERT ──────────────────────────────────────────────────── Un anneau dessiné au trait : chaque part est un cercle dont on ne montre qu'un arc, posé bout à bout par `stroke-dashoffset`. Une seule forme à animer, et les proportions restent justes quelles que soient les valeurs. */ .idyhlh__camembert{margin:0; display:flex; flex-direction:column; align-items:center; gap:16px} .idyhlh__camembert svg{width:min(62vw,210px); height:auto; transform:rotate(-90deg)} .idyhlh__cam-fond{fill:none; stroke:#E6EAF0; stroke-width:7} .idyhlh__cam-part{fill:none; stroke-width:7; stroke-linecap:butt; transition:stroke-dasharray .45s cubic-bezier(.22,.61,.36,1), stroke-dashoffset .45s cubic-bezier(.22,.61,.36,1)} .idyhlh__camembert figcaption{text-align:center; line-height:1.35} .idyhlh__camembert b{display:block; font-size:16px} .idyhlh__camembert span{font-size:14.5px; color:var(--i-gris)} /* ── LES CURSEURS ──────────────────────────────────────────────────── De vrais `` : clavier, tactile et lecteurs d'écran les comprennent d'eux-mêmes. La peinture seule est à nous. */ .idyhlh__jauge{display:grid; grid-template-columns:112px 1fr 56px; gap:16px; align-items:center} .idyhlh__jauge label{font-size:16px; font-weight:700} .idyhlh__jauge output{text-align:right; font-size:16px; font-variant-numeric:tabular-nums} .idyhlh__jauge input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:22px; background:transparent; cursor:grab; margin:0} .idyhlh__jauge input[type=range]:active{cursor:grabbing} .idyhlh__jauge input[type=range]::-webkit-slider-runnable-track{height:7px; border-radius:4px; background:linear-gradient(90deg,var(--teinte) var(--avance,0%),#E6EAF0 var(--avance,0%))} .idyhlh__jauge input[type=range]::-moz-range-track{height:7px; border-radius:4px; background:#E6EAF0} .idyhlh__jauge input[type=range]::-moz-range-progress{height:7px; border-radius:4px; background:var(--teinte)} .idyhlh__jauge input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; margin-top:-7.5px; border:2.6px solid var(--teinte); box-shadow:0 1px 4px rgba(27,30,58,.18); transition:transform .18s ease} .idyhlh__jauge input[type=range]::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:#fff; border:2.6px solid var(--teinte); box-shadow:0 1px 4px rgba(27,30,58,.18)} .idyhlh__jauge input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)} .idyhlh__jauge input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--i-bleu); outline-offset:2px} @media (max-width:760px){ .idyhlh__repartition{grid-template-columns:1fr} .idyhlh__jauge{grid-template-columns:96px 1fr 46px; gap:12px} } /* ══════════════════════════════════════════════════════════════════════ TROIS ENTRÉES QUI DISENT CE QUE LEUR PLANCHE DIT ══════════════════════════════════════════════════════════════════════ Une animation qui illustre son propos se lit ; une animation décorative se subit. Les trois ci-dessous suivent chacune la phrase de leur planche. */ /* ── 07 · « vos gains financent la suite » : colonne après colonne ──── */ .idyhlh__planche[data-vu="0"] .idyhlh__case{opacity:0; transform:translateX(-14px)} .idyhlh__planche[data-vu="1"] .idyhlh__case{opacity:1; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.22,.9,.32,1)} /* Trois colonnes : la position dans la rangée donne le temps d'arrivée, donc « au lancement » se remplit avant « ensuite », qui précède « dans la durée ». C'est l'ordre du réinvestissement. */ .idyhlh__planche[data-vu="0"] .idyhlh__grille-tete{opacity:0; transform:translateY(-10px)} .idyhlh__planche[data-vu="1"] .idyhlh__grille-tete{opacity:1; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.22,.9,.32,1)} /* ── 08 · « se construit depuis sa base » : de bas en haut ──────────── */ .idyhlh__planche[data-vu="0"] .idyhlh__etage{opacity:0; transform:translateY(18px) scaleY(.82)} .idyhlh__planche[data-vu="1"] .idyhlh__etage{opacity:1; transform:none; transform-origin:50% 100%; transition:opacity .5s ease, transform .6s cubic-bezier(.22,.9,.32,1)} /* La base d'abord, le sommet en dernier — c'est le titre de la planche. */ .idyhlh__planche[data-vu="1"] .idyhlh__etage--4{transition-delay:.04s} .idyhlh__planche[data-vu="1"] .idyhlh__etage--3{transition-delay:.20s} .idyhlh__planche[data-vu="1"] .idyhlh__etage--2{transition-delay:.36s} .idyhlh__planche[data-vu="1"] .idyhlh__etage--1{transition-delay:.52s} .idyhlh__planche[data-vu="0"] .idyhlh__mesure{opacity:0; transform:translateX(16px)} .idyhlh__planche[data-vu="1"] .idyhlh__mesure{opacity:1; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.22,.9,.32,1)} .idyhlh__planche[data-vu="1"] .idyhlh__mesure:nth-child(1){transition-delay:.20s} .idyhlh__planche[data-vu="1"] .idyhlh__mesure:nth-child(2){transition-delay:.34s} .idyhlh__planche[data-vu="1"] .idyhlh__mesure:nth-child(3){transition-delay:.48s} .idyhlh__planche[data-vu="1"] .idyhlh__mesure:nth-child(4){transition-delay:.62s} /* ── 09 · « un seul interlocuteur » : les trois convergent ──────────── */ .idyhlh__planche[data-vu="0"] .idyhlh__rond--id{opacity:0; transform:translate(-34px,-26px) scale(.86)} .idyhlh__planche[data-vu="0"] .idyhlh__rond--lh{opacity:0; transform:translate(34px,-26px) scale(.86)} .idyhlh__planche[data-vu="0"] .idyhlh__rond--yhb{opacity:0; transform:translateY(38px) scale(.86)} .idyhlh__planche[data-vu="1"] .idyhlh__rond{opacity:1; transform:none; transition:opacity .6s ease, transform .75s cubic-bezier(.22,.9,.32,1)} .idyhlh__planche[data-vu="1"] .idyhlh__rond--lh{transition-delay:.08s} .idyhlh__planche[data-vu="1"] .idyhlh__rond--yhb{transition-delay:.16s} /* Le cœur tombe en dernier : les trois maisons se rejoignent, PUIS il y a un seul interlocuteur. Même geste que le point du monogramme. */ .idyhlh__planche[data-vu="0"] .idyhlh__coeur{opacity:0; transform:translate(-50%,-50%) scale(0)} .idyhlh__planche[data-vu="1"] .idyhlh__coeur{opacity:1; transform:translate(-50%,-50%) scale(1); transition:opacity .4s ease .52s, transform .5s cubic-bezier(.34,1.42,.5,1) .52s} .idyhlh__planche[data-vu="0"] .idyhlh__cercles-txt > *{opacity:0; transform:translateY(12px)} .idyhlh__planche[data-vu="1"] .idyhlh__cercles-txt > *{opacity:1; transform:none; transition:opacity .5s ease .34s, transform .5s cubic-bezier(.22,.9,.32,1) .34s} @media (prefers-reduced-motion:reduce){ .idyhlh__planche[data-vu="0"] .idyhlh__case, .idyhlh__planche[data-vu="0"] .idyhlh__grille-tete, .idyhlh__planche[data-vu="0"] .idyhlh__etage, .idyhlh__planche[data-vu="0"] .idyhlh__mesure, .idyhlh__planche[data-vu="0"] .idyhlh__rond, .idyhlh__planche[data-vu="0"] .idyhlh__cercles-txt > *, .idyhlh__planche[data-vu="0"] .idyhlh__etape{opacity:1; transform:none} .idyhlh__planche[data-vu="0"] .idyhlh__coeur{opacity:1; transform:translate(-50%,-50%)} } /* ══════════════════════════════════════════════════════════════════════ LE RÉSEAU EN COURONNE ══════════════════════════════════════════════════════════════════════ Trente étiquettes alignées disaient « on fait tout » — exactement ce que vingt-sept concurrents sur quarante-six disent déjà. Six portes en cercle disent « dites-nous ce qu'il vous faut ». Le motif est celui de la carte Constellation de la maison : le visiteur le reconnaît, et le signe au centre rappelle le fil conducteur. */ .idyhlh__couronne{display:grid; grid-template-columns:minmax(300px,.95fr) 1.05fr; gap:clamp(28px,4.5vw,64px); align-items:center} /* ── LA ROUE ───────────────────────────────────────────────────────── Chaque porte est posée par son angle : `rotate` pour l'amener sur le cercle, `translate` pour l'écarter du centre, `rotate` inverse pour la remettre droite. Rien n'est placé à la main, donc ajouter une famille ne demande pas de replacer les autres. */ .idyhlh__roue{position:relative; aspect-ratio:1; margin:0 auto} .idyhlh__roue-coeur{position:absolute; top:50%; left:50%; width:27%; display:block} .idyhlh__roue-coeur svg{width:100%; height:auto; display:block} .idyhlh__porte{position:absolute; top:50%; left:50%; width:44%; display:flex; flex-direction:column; align-items:center; gap:8px; background:none; border:0; padding:0; cursor:pointer; color:inherit; font:inherit; text-align:center; transition:transform .45s cubic-bezier(.22,.61,.36,1)} .idyhlh__porte-ico{border-radius:50%; display:grid; place-items:center; background:var(--i-blanc); box-shadow:var(--i-ombre); border:1.6px solid var(--i-bord); transition:background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22,.61,.36,1)} .idyhlh__porte-ico svg{fill:none; stroke:var(--teinte); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; transition:stroke .3s ease} .idyhlh__porte-nom{font-weight:700; line-height:1.25; max-width:15ch; color:var(--i-gris); transition:color .3s ease} .idyhlh__porte:hover .idyhlh__porte-ico{transform:scale(1.09); border-color:var(--teinte)} .idyhlh__porte:hover .idyhlh__porte-nom{color:var(--i-encre)} .idyhlh__porte:focus-visible .idyhlh__porte-ico{outline:2px solid var(--teinte); outline-offset:3px} .idyhlh__porte.is-ouverte .idyhlh__porte-ico{background:var(--teinte); border-color:var(--teinte); box-shadow:0 6px 18px color-mix(in srgb,var(--teinte) 40%,transparent)} .idyhlh__porte.is-ouverte .idyhlh__porte-ico svg{stroke:#fff} .idyhlh__porte.is-ouverte .idyhlh__porte-nom{color:var(--i-encre)} /* ── LE PANNEAU ────────────────────────────────────────────────────── Une seule vue visible à la fois. Les autres restent dans le flux mais masquées : le contenu reste lisible sans script, et la hauteur ne saute pas d'une famille à l'autre. */ .idyhlh__panneau{position:relative; min-height:230px} .idyhlh__panneau-vue{position:absolute; inset:0; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .35s ease, transform .35s cubic-bezier(.22,.9,.32,1)} .idyhlh__panneau-vue.is-ouverte{opacity:1; visibility:visible; transform:none; position:relative} .idyhlh__panneau-vue h3{margin:0 0 18px; font-size:clamp(20px,2.3vw,26px); font-weight:700} .idyhlh__panneau-vue h3::before{content:""; display:block; width:44px; height:3px; border-radius:2px; background:var(--teinte); margin-bottom:14px} .idyhlh__panneau-vue .idyhlh__jetons span{border-color:var(--i-bord); transition:border-color .25s ease, color .25s ease, transform .25s ease} .idyhlh__panneau-vue .idyhlh__jetons span:hover{border-color:var(--teinte); color:var(--teinte)} /* Les métiers arrivent l'un après l'autre : la porte s'ouvre, ils entrent. */ .idyhlh__panneau-vue.is-ouverte .idyhlh__jetons span{animation:idyhlh-entree .42s cubic-bezier(.22,.9,.32,1) both} .idyhlh__panneau-vue.is-ouverte .idyhlh__jetons span:nth-child(1){animation-delay:.02s} .idyhlh__panneau-vue.is-ouverte .idyhlh__jetons span:nth-child(2){animation-delay:.06s} .idyhlh__panneau-vue.is-ouverte .idyhlh__jetons span:nth-child(3){animation-delay:.10s} .idyhlh__panneau-vue.is-ouverte .idyhlh__jetons span:nth-child(4){animation-delay:.14s} .idyhlh__panneau-vue.is-ouverte .idyhlh__jetons span:nth-child(5){animation-delay:.18s} .idyhlh__panneau-vue.is-ouverte .idyhlh__jetons span:nth-child(6){animation-delay:.22s} /* ── LA COURONNE SE POSE EN ARRIVANT ─────────────────────────────────── */ .idyhlh__planche[data-vu="0"] .idyhlh__porte{opacity:0} .idyhlh__planche[data-vu="1"] .idyhlh__porte{opacity:1; transition:opacity .5s ease, transform .7s cubic-bezier(.22,.9,.32,1)} .idyhlh__planche[data-vu="1"] .idyhlh__porte:nth-of-type(2){transition-delay:.07s} .idyhlh__planche[data-vu="1"] .idyhlh__porte:nth-of-type(3){transition-delay:.14s} .idyhlh__planche[data-vu="1"] .idyhlh__porte:nth-of-type(4){transition-delay:.21s} .idyhlh__planche[data-vu="1"] .idyhlh__porte:nth-of-type(5){transition-delay:.28s} .idyhlh__planche[data-vu="1"] .idyhlh__porte:nth-of-type(6){transition-delay:.35s} @media (max-width:860px){ .idyhlh__couronne{grid-template-columns:1fr} .idyhlh__roue{width:min(92vw,340px)} .idyhlh__porte{width:46%} .idyhlh__porte-nom{font-size:12px} .idyhlh__panneau{min-height:0} } @media (prefers-reduced-motion:reduce){ .idyhlh__planche[data-vu="0"] .idyhlh__porte{opacity:1; transform:translate(-50%,-50%) rotate(var(--angle)) translate(0,-138%) rotate(calc(-1 * var(--angle)))} .idyhlh__panneau-vue.is-ouverte .idyhlh__jetons span{animation:none} } /* ── « CES CURSEURS SE PRENNENT EN MAIN » ──────────────────────────── Un curseur qui ne bouge pas ressemble à un graphique. À l'arrivée de la planche, chaque poignée fait un aller-retour de quelques pixels, l'une après l'autre : le geste dit ce que le texte n'a pas besoin de dire. C'est le TRANSFORM de la poignée qui bouge, jamais la valeur — le camembert ne bronche pas, et rien n'est faussé. */ @keyframes idyhlh-invite{ 0%,100%{transform:translateX(0)} 28% {transform:translateX(7px)} 62% {transform:translateX(-4px)} } .idyhlh__planche[data-vu="1"] .idyhlh__jauge input[type=range]::-webkit-slider-thumb{ animation:idyhlh-invite 1.05s cubic-bezier(.34,1.1,.5,1) .55s both} .idyhlh__planche[data-vu="1"] .idyhlh__jauge input[type=range]::-moz-range-thumb{ animation:idyhlh-invite 1.05s cubic-bezier(.34,1.1,.5,1) .55s both} .idyhlh__planche[data-vu="1"] .idyhlh__jauge:nth-child(2) input[type=range]::-webkit-slider-thumb{animation-delay:.64s} .idyhlh__planche[data-vu="1"] .idyhlh__jauge:nth-child(3) input[type=range]::-webkit-slider-thumb{animation-delay:.73s} .idyhlh__planche[data-vu="1"] .idyhlh__jauge:nth-child(4) input[type=range]::-webkit-slider-thumb{animation-delay:.82s} .idyhlh__planche[data-vu="1"] .idyhlh__jauge:nth-child(5) input[type=range]::-webkit-slider-thumb{animation-delay:.91s} /* Dès qu'on y touche, l'invite se tait : elle n'a plus rien à dire. */ .idyhlh__repartition.is-touchee input[type=range]::-webkit-slider-thumb{animation:none} .idyhlh__repartition.is-touchee input[type=range]::-moz-range-thumb{animation:none} @media (prefers-reduced-motion:reduce){ .idyhlh__planche[data-vu="1"] .idyhlh__jauge input[type=range]::-webkit-slider-thumb, .idyhlh__planche[data-vu="1"] .idyhlh__jauge input[type=range]::-moz-range-thumb{animation:none} } /* ── L'ANNEAU DES PARTENAIRES ──────────────────────────────────────── Le document pose autour des trois maisons une couronne de cercles creux, jamais nommés : c'est le réseau, appelé selon les besoins. On la reprend, et on la fait tourner très lentement — assez pour qu'on la remarque, pas assez pour qu'elle prenne le pas sur les trois maisons. Les seize positions se calculent par leur angle, comme la couronne du réseau : même famille de geste d'un bout à l'autre de la page. */ .idyhlh__anneau{position:absolute; z-index:0; pointer-events:none; animation:idyhlh-tourne 86s linear infinite} .idyhlh__anneau i{position:absolute; top:50%; left:50%; width:var(--r); height:var(--r); border-radius:50%; border:1.4px solid rgba(27,30,58,.16); transform:translate(-50%,-50%) rotate(var(--a)) translate(0,-50cqmin)} @keyframes idyhlh-tourne{ to{transform:rotate(360deg)} } .idyhlh__fleur{container-type:size} /* Le survol des maisons ralentit l'anneau : l'attention va aux trois cercles. */ .idyhlh__cercles:hover .idyhlh__anneau{animation-duration:220s} @media (prefers-reduced-motion:reduce){ .idyhlh__anneau{animation:none} } /* ── 02 ET 04 · LES RANGÉES ARRIVENT L'UNE APRÈS L'AUTRE ───────────── Cinq constats qui apparaissent d'un bloc se lisent comme un mur. Décalés, l'œil les prend un par un — et c'est bien ainsi qu'on les lit, chacun étant une situation à reconnaître. Même chose pour les cinq leviers. Le décalage s'arrête à 5 : au-delà, l'attente devient une perte de temps. */ .idyhlh__planche[data-vu="0"] .idyhlh__constat, .idyhlh__planche[data-vu="0"] .idyhlh__levier{opacity:0; transform:translateY(16px)} .idyhlh__planche[data-vu="1"] .idyhlh__constat, .idyhlh__planche[data-vu="1"] .idyhlh__levier{opacity:1; transform:none; transition:opacity .52s ease, transform .52s cubic-bezier(.22,.9,.32,1)} /* LE PAS EST PORTÉ À 0,18 s. À 0,09 s les cinq rangées arrivaient presque ensemble : on voyait un bloc trembler, pas une liste se poser. À 0,18 s on compte un, deux, trois — et l'ensemble reste sous la seconde. */ .idyhlh__planche[data-vu="1"] .idyhlh__constat:nth-child(1){transition-delay:.06s} .idyhlh__planche[data-vu="1"] .idyhlh__constat:nth-child(2){transition-delay:.24s} .idyhlh__planche[data-vu="1"] .idyhlh__constat:nth-child(3){transition-delay:.42s} .idyhlh__planche[data-vu="1"] .idyhlh__constat:nth-child(4){transition-delay:.60s} .idyhlh__planche[data-vu="1"] .idyhlh__constat:nth-child(5){transition-delay:.78s} .idyhlh__planche[data-vu="1"] .idyhlh__levier:nth-child(1){transition-delay:.04s} .idyhlh__planche[data-vu="1"] .idyhlh__levier:nth-child(2){transition-delay:.13s} .idyhlh__planche[data-vu="1"] .idyhlh__levier:nth-child(4){transition-delay:.31s} .idyhlh__planche[data-vu="1"] .idyhlh__levier:nth-child(5){transition-delay:.40s} /* Dans chaque constat, la pastille se pose un cheveu après sa rangée. */ .idyhlh__planche[data-vu="0"] .idyhlh__constat .idyhlh__ico{opacity:0; transform:scale(.7)} .idyhlh__planche[data-vu="1"] .idyhlh__constat .idyhlh__ico{opacity:1; transform:none; transition:opacity .4s ease, transform .5s cubic-bezier(.34,1.42,.5,1)} .idyhlh__planche[data-vu="1"] .idyhlh__constat:nth-child(1) .idyhlh__ico{transition-delay:.18s} .idyhlh__planche[data-vu="1"] .idyhlh__constat:nth-child(2) .idyhlh__ico{transition-delay:.36s} .idyhlh__planche[data-vu="1"] .idyhlh__constat:nth-child(3) .idyhlh__ico{transition-delay:.54s} .idyhlh__planche[data-vu="1"] .idyhlh__constat:nth-child(4) .idyhlh__ico{transition-delay:.72s} .idyhlh__planche[data-vu="1"] .idyhlh__constat:nth-child(5) .idyhlh__ico{transition-delay:.90s} /* Et les trois colonnes des maisons, même famille de geste. */ .idyhlh__planche[data-vu="0"] .idyhlh__boite{opacity:0; transform:translateY(18px)} .idyhlh__planche[data-vu="1"] .idyhlh__boite{opacity:1; transform:none; transition:opacity .55s ease, transform .55s cubic-bezier(.22,.9,.32,1)} .idyhlh__planche[data-vu="1"] .idyhlh__boite:nth-child(2){transition-delay:.12s} .idyhlh__planche[data-vu="1"] .idyhlh__boite:nth-child(3){transition-delay:.24s} @media (prefers-reduced-motion:reduce){ .idyhlh__planche[data-vu="0"] .idyhlh__constat, .idyhlh__planche[data-vu="0"] .idyhlh__levier, .idyhlh__planche[data-vu="0"] .idyhlh__boite, .idyhlh__planche[data-vu="0"] .idyhlh__constat .idyhlh__ico{opacity:1; transform:none} } /* ── 04 · LES LEVIERS SORTENT DU CENTRE ────────────────────────────── « Réunis, vos leviers valent plus que leur somme. » La phrase dit qu'ils viennent d'un même point : les cinq cartes partent donc du centre de la rangée et s'écartent vers leur place. Celle du milieu ne bouge pas — c'est elle, le point de départ. Le décalage de départ se mesure en largeurs de carte, donc il suit la largeur réelle quelle que soit la fenêtre. */ .idyhlh__planche[data-vu="0"] .idyhlh__levier{opacity:0; transform:scale(.78)} .idyhlh__planche[data-vu="0"] .idyhlh__levier:nth-child(1){transform:translateX(210%) scale(.78)} .idyhlh__planche[data-vu="0"] .idyhlh__levier:nth-child(2){transform:translateX(105%) scale(.78)} .idyhlh__planche[data-vu="0"] .idyhlh__levier:nth-child(3){transform:scale(.78)} .idyhlh__planche[data-vu="0"] .idyhlh__levier:nth-child(4){transform:translateX(-105%) scale(.78)} .idyhlh__planche[data-vu="0"] .idyhlh__levier:nth-child(5){transform:translateX(-210%) scale(.78)} .idyhlh__planche[data-vu="1"] .idyhlh__levier{opacity:1; transform:none; transition:opacity .5s ease, transform .82s cubic-bezier(.19,.9,.28,1)} /* Le centre part le premier, les extrêmes en dernier : l'écartement se lit comme une ouverture, pas comme cinq cartes qui glissent. */ .idyhlh__planche[data-vu="1"] .idyhlh__levier:nth-child(3){transition-delay:.02s} .idyhlh__planche[data-vu="1"] .idyhlh__levier:nth-child(2), .idyhlh__planche[data-vu="1"] .idyhlh__levier:nth-child(4){transition-delay:.10s} .idyhlh__planche[data-vu="1"] .idyhlh__levier:nth-child(1), .idyhlh__planche[data-vu="1"] .idyhlh__levier:nth-child(5){transition-delay:.18s} /* Pendant l'écartement, la rangée ne doit pas pousser une barre de défilement horizontale : les cartes sortent du cadre avant d'y revenir. */ .idyhlh__leviers{overflow:clip} @media (max-width:1040px){ /* En deux colonnes, l'écartement n'a plus de centre à quitter. */ .idyhlh__planche[data-vu="0"] .idyhlh__levier, .idyhlh__planche[data-vu="0"] .idyhlh__levier:nth-child(n){transform:translateY(16px)} } @media (prefers-reduced-motion:reduce){ .idyhlh__planche[data-vu="0"] .idyhlh__levier, .idyhlh__planche[data-vu="0"] .idyhlh__levier:nth-child(n){opacity:1; transform:none} } /* ══════════════════════════════════════════════════════════════════════ LA COUVERTURE, TOUT CENTRÉ ══════════════════════════════════════════════════════════════════════ Le signe à droite et le texte à gauche donnaient deux blocs qui se regardaient sans se répondre. Empilés et centrés, ils font une seule composition : la marque pose, le titre annonce, les maisons signent. L'ordre visuel est inversé par `order` plutôt que dans le gabarit : le balisage garde le titre en premier, ce qui est juste pour un lecteur d'écran et pour la structure du document. */ .idyhlh__couv-haut{grid-template-columns:1fr; justify-items:center; text-align:center; gap:clamp(20px,3vw,34px)} .idyhlh__couv-haut .idyhlh__marque--haut{order:-1; width:min(46vw,250px)} /* PAS DE BRIDE SUR LE BLOC DE TEXTE. À 24 caractères, le titre — qui monte à 56 px — se coupait en cinq lignes. Le saut de ligne écrit dans le gabarit suffit à le tenir en deux ; le bloc prend la largeur qu'il lui faut. */ .idyhlh__couv .idyhlh__titre{max-width:none; text-wrap:balance} .idyhlh__couv .idyhlh__soustitre{margin-inline:auto} /* Les trois maisons se centrent aussi, et perdent 20 % : à 65 px elles pesaient plus que la signature qu'elles accompagnent. */ .idyhlh__couv-logos{width:100%} .idyhlh__couv-logos img{height:52px} @media (max-width:860px){ .idyhlh__couv-haut .idyhlh__marque--haut{width:min(60vw,210px)} .idyhlh__couv-texte{max-width:none} } /* ── 03 · LES CARTES, PUIS LES POINTS RANGÉE PAR RANGÉE ────────────── Deux temps, et ils disent deux choses. Les quatre cartes arrivent de gauche à droite : ce sont quatre acteurs qu'on présente. Puis les cinq domaines s'allument ligne par ligne, la même ligne dans les quatre cartes à la fois — c'est ainsi qu'on lit ce tableau, par domaine et non par colonne, et c'est ce qui fait voir que la dernière colonne les a tous. */ .idyhlh__planche[data-vu="0"] .idyhlh__col{opacity:0; transform:translateX(-22px)} .idyhlh__planche[data-vu="1"] .idyhlh__col{opacity:1; transform:none; transition:opacity .5s ease, transform .55s cubic-bezier(.22,.9,.32,1)} .idyhlh__planche[data-vu="1"] .idyhlh__col:nth-child(1){transition-delay:.04s} .idyhlh__planche[data-vu="1"] .idyhlh__col:nth-child(2){transition-delay:.16s} .idyhlh__planche[data-vu="1"] .idyhlh__col:nth-child(3){transition-delay:.28s} .idyhlh__planche[data-vu="1"] .idyhlh__col:nth-child(4){transition-delay:.40s} /* Les points attendent que les cartes soient posées : 0,58 s, soit la dernière carte plus sa durée. */ .idyhlh__planche[data-vu="0"] .idyhlh__col li{opacity:0; transform:translateY(6px)} .idyhlh__planche[data-vu="1"] .idyhlh__col li{opacity:1; transform:none; transition:opacity .42s ease, transform .42s cubic-bezier(.22,.9,.32,1)} .idyhlh__planche[data-vu="1"] .idyhlh__col li:nth-child(1){transition-delay:.58s} .idyhlh__planche[data-vu="1"] .idyhlh__col li:nth-child(2){transition-delay:.74s} .idyhlh__planche[data-vu="1"] .idyhlh__col li:nth-child(3){transition-delay:.90s} .idyhlh__planche[data-vu="1"] .idyhlh__col li:nth-child(4){transition-delay:1.06s} .idyhlh__planche[data-vu="1"] .idyhlh__col li:nth-child(5){transition-delay:1.22s} /* La pastille pleine se pose un cheveu après son libellé : on lit le mot, puis on voit qui l'a. */ .idyhlh__planche[data-vu="0"] .idyhlh__col li.is-on .idyhlh__pt{transform:scale(0)} .idyhlh__planche[data-vu="1"] .idyhlh__col li.is-on .idyhlh__pt{transform:none; transition:transform .42s cubic-bezier(.34,1.42,.5,1)} .idyhlh__planche[data-vu="1"] .idyhlh__col li:nth-child(1) .idyhlh__pt{transition-delay:.68s} .idyhlh__planche[data-vu="1"] .idyhlh__col li:nth-child(2) .idyhlh__pt{transition-delay:.84s} .idyhlh__planche[data-vu="1"] .idyhlh__col li:nth-child(3) .idyhlh__pt{transition-delay:1.00s} .idyhlh__planche[data-vu="1"] .idyhlh__col li:nth-child(4) .idyhlh__pt{transition-delay:1.16s} .idyhlh__planche[data-vu="1"] .idyhlh__col li:nth-child(5) .idyhlh__pt{transition-delay:1.32s} @media (prefers-reduced-motion:reduce){ .idyhlh__planche[data-vu="0"] .idyhlh__col, .idyhlh__planche[data-vu="0"] .idyhlh__col li, .idyhlh__planche[data-vu="0"] .idyhlh__col li.is-on .idyhlh__pt{opacity:1; transform:none} } /* ── 06 · LES CHEVRONS PRENNENT VIE ────────────────────────────────── Ils arrivaient de gauche à droite puis restaient inertes. Une chaîne d'étapes doit donner envie d'avancer : au survol le chevron se décale d'un cheveu vers l'avant, son icône avec, et sa durée se colore. Le geste va dans le sens de la lecture — vers l'étape suivante. */ .idyhlh__chevron{transition:transform .32s cubic-bezier(.22,.61,.36,1), filter .32s ease; cursor:default} .idyhlh__chevron svg{transition:transform .32s cubic-bezier(.34,1.32,.5,1)} .idyhlh__demarche:hover .idyhlh__chevron{filter:saturate(.72) opacity(.8)} .idyhlh__demarche .idyhlh__chevron:hover{transform:translateX(7px); filter:none} .idyhlh__chevron:hover svg{transform:scale(1.12)} /* La durée sous le chevron suit son état : elle appartient à l'étape. */ .idyhlh__etape-txt{transition:transform .32s cubic-bezier(.22,.61,.36,1)} .idyhlh__duree{transition:background .28s ease, color .28s ease} /* ── 07 · LES TROIS TEMPS S'ANNONCENT L'UN APRÈS L'AUTRE ───────────── « Au lancement », « Ensuite », « Dans la durée » : c'est une chronologie. Les trois en-têtes arrivaient ensemble, ce qui l'effaçait. Décalés, ils la redisent avant même qu'on lise les cases. */ .idyhlh__planche[data-vu="1"] .idyhlh__grille-tete:nth-of-type(1){transition-delay:.06s} .idyhlh__planche[data-vu="1"] .idyhlh__grille-tete:nth-of-type(2){transition-delay:.26s} .idyhlh__planche[data-vu="1"] .idyhlh__grille-tete:nth-of-type(3){transition-delay:.46s} /* Les cases suivent leur colonne, après son en-tête. */ .idyhlh__planche[data-vu="1"] .idyhlh__case:nth-of-type(4n+2){transition-delay:.30s} .idyhlh__planche[data-vu="1"] .idyhlh__case:nth-of-type(4n+3){transition-delay:.50s} .idyhlh__planche[data-vu="1"] .idyhlh__case:nth-of-type(4n+4){transition-delay:.70s} @media (prefers-reduced-motion:reduce){ .idyhlh__chevron,.idyhlh__chevron svg,.idyhlh__etape{transition:none} } /* ── L'ANNEAU DES PARTENAIRES, VISIBLE ─────────────────────────────── Douze cercles au lieu de seize, mais trois fois plus gros et au trait plus franc : à cinq pixels ils passaient pour du bruit de fond. */ .idyhlh__anneau{inset:-22%} .idyhlh__anneau i{border-width:2px; border-color:rgba(27,30,58,.22)} /* ── LE PIED DE LA PLANCHE DES MAISONS ─────────────────────────────── Yan Haltey Brands descend sous sa propre bulle, et le réseau se pose au pied de l'ensemble : il n'est pas une bulle, il est l'anneau qui les entoure toutes. */ .idyhlh__cercles-pied{display:flex; flex-direction:column; align-items:center; gap:clamp(14px,2vw,22px); text-align:center; margin-top:clamp(18px,2.6vw,32px)} .idyhlh__cercles-pied h3{margin:0 0 4px; font-size:17px; font-weight:700} .idyhlh__cercles-pied p{margin:0; color:var(--i-gris); font-size:16px} .idyhlh__cercles-reseau{padding-top:clamp(12px,1.8vw,18px); position:relative} .idyhlh__cercles-reseau::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:44px; height:1px; background:var(--i-bord)} .idyhlh__cercles-reseau h3{font-size:15.5px} .idyhlh__cercles-reseau p{font-size:15px; opacity:.82} .idyhlh__planche[data-vu="0"] .idyhlh__cercles-pied > *{opacity:0; transform:translateY(12px)} .idyhlh__planche[data-vu="1"] .idyhlh__cercles-pied > *{opacity:1; transform:none; transition:opacity .5s ease .46s, transform .5s cubic-bezier(.22,.9,.32,1) .46s} .idyhlh__planche[data-vu="1"] .idyhlh__cercles-pied > *:nth-child(2){transition-delay:.58s} /* ── LA COURONNE GAGNE 20 % ────────────────────────────────────────── À 400 px elle tenait dans un coin de la planche alors qu'elle en est le sujet. Le panneau garde sa largeur : c'est la roue qui grandit. */ .idyhlh__roue{width:min(86vw,480px)} .idyhlh__porte-ico{width:60px; height:60px} .idyhlh__porte-ico svg{width:26px; height:26px} .idyhlh__porte-nom{font-size:14.5px} @media (prefers-reduced-motion:reduce){ .idyhlh__planche[data-vu="0"] .idyhlh__cercles-pied > *{opacity:1; transform:none} } /* ── LA CLÔTURE RÉPOND À LA COUVERTURE ─────────────────────────────── Même composition centrée, mêmes proportions : les deux bouts de la page se regardent. La marque passe AU-DESSUS du filet, sa signature dessous — elle en devient la légende, comme sur la couverture. */ /* ── LA COUVERTURE TIENT SA LARGEUR ────────────────────────────────── Yan, le 29.09. Trois défauts qui venaient tous de la même cause : des brides en `ch` posées quand la composition était encore en deux colonnes. Centrée, la colonne dispose de toute la page, et les brides la rendaient quatre fois plus étroite que nécessaire — « Prioriser l'investissement » se coupait en trois, la ligne de sous-titre en trois aussi. Les brides sautent ; le saut de ligne écrit dans le gabarit suffit à tenir le titre en deux lignes, et le sous-titre tient sur une. */ .idyhlh__couv-texte{max-width:none} .idyhlh__couv .idyhlh__soustitre{max-width:none; text-wrap:nowrap} @media (max-width:760px){ .idyhlh__couv .idyhlh__soustitre{text-wrap:balance} } /* LA SIGNATURE FAIT LA LARGEUR DU SIGNE. Elle était centrée dans une boîte à la largeur du triangle, donc plus courte que lui d'un bon quart : le bloc de marque finissait sur une ligne qui ne rejoignait ni l'une ni l'autre des pointes. Justifiée des deux bords, elle tient exactement la base du triangle et le mot-marque — trois éléments, une seule largeur. */ .idyhlh__marque .idyhlh__signature{text-align:justify; text-align-last:justify} /* LES TROIS MAISONS, À PAS ÉGAL. En boîte souple, l'écart se mesurait entre les bords des images : le lockup d'Internet Diffusion est trois fois plus large que les deux marques carrées, donc les blancs n'étaient pas égaux. Trois colonnes de MÊME largeur, chaque logo centré dans la sienne : ce sont les centres qui sont à pas égal, et l'œil ne lit que ça. */ .idyhlh__couv-logos{display:grid; grid-template-columns:repeat(3,minmax(0,200px)); justify-content:center; align-items:center; gap:clamp(18px,2.6vw,40px)} .idyhlh__couv-logos img{margin-inline:auto; max-width:100%} @media (max-width:560px){ .idyhlh__couv-logos{grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px} .idyhlh__couv-logos img{height:40px} } /* LA JUSTIFICATION NE DOIT PAS SE VOIR. Justifiée seule, la signature tenait bien la largeur mais à coups de blancs de 25 px entre quatre mots : on lisait l'écartement avant la phrase. Le corps monte donc jusqu'à ce que la ligne fasse NATURELLEMENT à peu près la largeur du bloc ; la justification ne sert plus qu'à rattraper les derniers pixels, et ne se remarque pas. */ /* ⚠️ LE CORPS EST TAILLÉ SUR LA LANGUE LA PLUS LONGUE, PAS SUR LE FRANÇAIS. « Voir clair. Investir juste. » fait 26 signes ; « Klar sehen. Klug investieren. » en fait 29, et à 20,5 px la signature allemande passait à la ligne — la justification étirait alors le premier rang et laissait le second seul à gauche. À 18 px les trois langues tiennent sur une ligne, et la justification n'a plus qu'à combler quelques pixels. Mesuré, pas estimé. */ .idyhlh__marque--haut .idyhlh__signature{font-size:clamp(13px,1.42vw,18px)} /* ── LE SIGNE SE CENTRE SUR SON POINT, AU CŒUR DE LA COURONNE ──────── Même mesure que dans le trio des trois maisons, et même raison : le tracé va de la pointe à la base, donc le milieu de sa BOÎTE tombe au-dessus du disque noir que l'œil prend pour le centre. Le disque est à 114,93 sur une hauteur de 174,14, soit 16 % sous le milieu de la boîte. Centré par la boîte, le signe se posait 16 % trop bas dans la roue — visible dès qu'on compare avec les six familles, qui, elles, sont placées par leur angle. Yan, le 29.09. */ .idyhlh__roue-coeur{transform:translate(-50%,-50%) translateY(-16%)} /* ── LA COURONNE SE PLACE PAR SON RAYON, PAS PAR LA HAUTEUR DES BOÎTES ─ Yan, le 29.09 : « le triangle n'est pas bien centré ». Il l'était — sur le centre géométrique de la roue, au pixel. Ce qui ne l'était pas, c'est la couronne : chaque porte était posée à 138 % de SA PROPRE hauteur, et une porte contient son icône PUIS son libellé. Deux conséquences, et les deux se voient. Le centre d'une porte tombe entre l'icône et le texte, donc les six icônes flottaient AU-DESSUS du cercle qui les porte — et c'est le cercle des icônes que l'œil lit. Et comme « Ressources humaines » tient sur deux lignes quand « Juridique » en tient une, les portes n'avaient pas la même hauteur : leurs rayons non plus. Deux corrections, une cause. Le rayon devient une longueur déclarée sur la roue — il ne dépend plus de ce que contient une porte. Et chaque porte réserve AU-DESSUS de son icône la place exacte de son libellé, ce qui met l'icône au centre de sa boîte : l'icône se pose donc sur le cercle, et le signe au centre se retrouve au milieu des six, pas au milieu de six blocs de texte. */ .idyhlh__roue{--rayon:min(29.2vw,163px)} /* 34 % de min(86vw,480px) */ .idyhlh__porte{--h-nom:38px; padding-top:calc(var(--h-nom) + 8px); transform:translate(-50%,-50%) rotate(var(--angle)) translate(0,calc(-1 * var(--rayon))) rotate(calc(-1 * var(--angle)))} .idyhlh__porte-nom{height:var(--h-nom); margin:0} .idyhlh__porte.is-ouverte{transform:translate(-50%,-50%) rotate(var(--angle)) translate(0,calc(-1 * (var(--rayon) + 14px))) rotate(calc(-1 * var(--angle)))} .idyhlh__planche[data-vu="0"] .idyhlh__porte{ transform:translate(-50%,-50%) rotate(var(--angle)) translate(0,calc(-.28 * var(--rayon))) rotate(calc(-1 * var(--angle)))} @media (max-width:860px){ .idyhlh__roue{--rayon:min(31.3vw,116px)} /* 34 % de min(92vw,340px) */ .idyhlh__porte{--h-nom:32px} } /* ════════════════════════════════════════════════════════════════════ CINQ EFFETS, DEMANDÉS LE 29.09 — ET UN REPÈRE POUR LES DÉFAIRE ──────────────────────────────────────────────────────────────────── Le commit précédent porte l'étiquette `avant-effets` : `git checkout avant-effets -- sites/yanhaltey-v2/wordpress/plugins/yhb-offre-pme` rend la page exactement telle qu'elle était avant ce bloc. Tout ce qui suit est additif et tient dans cette seule section, justement pour que le retour en arrière soit une ligne et non une relecture. Les cinq sont gardés par `prefers-reduced-motion` ou par leur propre `@supports` : sur un navigateur qui ne sait pas, ou chez quelqu'un qui a demandé le calme, la page reste celle d'avant. ════════════════════ */ /* ── 1 · LE RYTHME : TROIS RESPIRATIONS, PAS UNE ───────────────────── Toutes les planches faisaient 80 vh. Quatorze fois la même hauteur, c'est un métronome : on défile sans savoir où on en est. Trois régimes, choisis sur ce que la planche CONTIENT — `:has()` les reconnaît, donc rien à baliser dans le gabarit et rien à tenir à jour quand une planche change. · La couverture et la clôture prennent l'écran entier : ce sont les deux seuls moments où la page ne demande rien, elle se présente. · Une planche à figure — la pyramide, la roue, le camembert, les leviers, les trois maisons — a besoin de place et la mérite : elle monte à 94 vh. · Une planche de texte seul redescend à 68 vh. Elle passe vite, et c'est très bien : c'est ce qui fait sentir que la suivante compte. */ .idyhlh__couv{min-height:100vh} .idyhlh__planche:has(.idyhlh__pyramide, .idyhlh__roue, .idyhlh__cercles, .idyhlh__repartition, .idyhlh__leviers, .idyhlh__troisboites){min-height:94vh} .idyhlh__planche:not(.idyhlh__couv):not(:has(.idyhlh__pyramide, .idyhlh__roue, .idyhlh__cercles, .idyhlh__repartition, .idyhlh__leviers, .idyhlh__troisboites)){min-height:68vh} /* ── 2 · LE FOND DÉRIVE ────────────────────────────────────────────── Les taches de couleur étaient peintes et immobiles : du papier peint. En les faisant dériver LENTEMENT et en sens contraires pendant que leur planche traverse l'écran, le fond prend une profondeur qu'on ne sait pas nommer — c'est exactement ce qu'on demande à un fond. L'animation est pilotée par le DÉFILEMENT, pas par une horloge : rien ne bouge quand on ne défile pas, et la dérive suit la main au lieu de tourner dans le vide. `view()` mesure la traversée de la tache elle-même, donc chaque planche a sa propre course sans que personne ne compte les pixels. Amplitude volontairement minuscule — de 4 à 9 % de la taille d'une tache large de 500 px, soit quelques dizaines de pixels sur toute la page. Si on la remarque, c'est raté. */ @supports (animation-timeline: view()) { .idyhlh__blob{animation:idyhlh-derive linear both; animation-timeline:view(); animation-range:cover 0% cover 100%} .idyhlh__blob--hd, .idyhlh__blob--bg{animation-name:idyhlh-derive-contre} @media (prefers-reduced-motion: no-preference) { } } @keyframes idyhlh-derive{ from{transform:translate3d(-1.5%,-5%,0) scale(1)} to {transform:translate3d(1.5%,7%,0) scale(1.07)} } @keyframes idyhlh-derive-contre{ from{transform:translate3d(2%,6%,0) scale(1.06)} to {transform:translate3d(-2%,-6%,0) scale(1)} } /* ── 3 · LE SIGNE EN PONCTUATION ───────────────────────────────────── Chaque planche s'ouvrait sur un filet aux trois teintes. Le filet disait « voici un titre » ; il ne disait pas de QUI. En posant le signe devant lui — minuscule, 18 px, ses trois lames et son point —, la marque ouvre elle-même chacune de ses pages. C'est le même motif qu'en couverture, au cœur de la roue et en clôture : à la quatrième fois, on l'attend. Le signe est une image de fond en data-URI, pas un fichier : une planche en porte un, il y en a douze, et douze requêtes pour 400 octets chacune n'ont pas de sens. Le filet reste, réduit — il est devenu la ligne sur laquelle le signe s'appuie, et s'ouvre toujours à l'entrée de la planche. */ .idyhlh__planche > .idyhlh__wrap::before{ height:18px; border-radius:0; background:none; width:clamp(52px,7.6vw,104px); background-image: url('data:image/svg+xml;utf8,'), linear-gradient(90deg,#299ED7,#6A3EA0,#A02497); background-repeat:no-repeat, no-repeat; background-size:18px 18px, calc(100% - 26px) 3px; background-position:left center, right center; transition:width .85s cubic-bezier(.22,.61,.36,1) .1s, opacity .5s ease .1s; opacity:0} .idyhlh__planche[data-vu="1"] > .idyhlh__wrap::before, .idyhlh__planche:not([data-vu]) > .idyhlh__wrap::before{ width:clamp(52px,7.6vw,104px); opacity:1} .idyhlh__planche[data-vu="0"] > .idyhlh__wrap::before{width:18px} /* ── 4 · DU GRAIN SUR LES FONDS NUIT ───────────────────────────────── Un aplat sombre à l'écran se lit comme un aplat d'écran. Un bruit très fin par-dessus lui donne la matière d'un papier imprimé — c'est le geste le moins cher qui éloigne le plus d'un rendu « fait en CSS ». Le bruit est calculé par le navigateur (`feTurbulence`), donc il pèse le poids de sa description : quelques centaines d'octets, aucune image à charger. `z-index:1` le met AU-DESSUS des taches de fond et SOUS le contenu, qui est en 2 ; `pointer-events:none` fait qu'il n'intercepte rien. Opacité 4,5 % : à 10 % on voit du bruit, à 4,5 % on voit du papier. */ .yhb-offre__cloture{position:relative; isolation:isolate} .yhb-offre__cloture::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.045; mix-blend-mode:overlay; background-image:url('data:image/svg+xml;utf8,'); background-size:180px 180px} .yhb-offre__cloture > *{position:relative; z-index:1} @media (prefers-reduced-motion:reduce){ .idyhlh__blob{animation:none} } /* LA BANDE DU FIL PREND LE FOND DE LA PREMIÈRE PLANCHE. Elle porte `sb-paper` comme sur les autres offres, donc le papier du thème ; ici la page a son propre fond, et deux clairs voisins qui ne sont pas le même clair se voient. Seule cette page est concernée : cette feuille n'est servie que sur elle. */ /* ⚠️ LES VALEURS EN CLAIR, PAS LES VARIABLES. Elles sont déclarées sur `.idyhlh`, et la bande du fil est AU-DESSUS de ce conteneur : elle ne les voit pas. Une `var()` qui ne résout pas rend la déclaration invalide, donc la règle était simplement ignorée — la bande gardait le papier du thème. C'est le genre de panne qui ne laisse aucune trace : pas d'erreur, pas de style. Trois valeurs recopiées, et le commentaire qui dit pourquoi. */ .yhb-offre__fil-bande{color:#1B1E3A} .yhb-offre__fil-bande .yhb-offre__fil a{color:#A02497} .yhb-offre__fil-bande .yhb-offre__fil span[aria-current]{color:#1B1E3A} /* ── L'ORDRE D'ENTRÉE DE LA COUVERTURE ─────────────────────────────── Yan, le 29.09 : « le triangle arrive d'abord, ensuite on voit la marque, et ensuite les phrases qui s'affichent successivement en fondu ». Jusqu'ici tout partait en même temps : les phrases montaient à 0,06 s pendant que les lames s'assemblaient encore, et le mot-marque arrivait APRÈS elles. On lisait donc le titre avant de savoir qui parle — l'inverse de ce que fait une couverture. La séquence devient celle d'une présentation : le signe s'assemble (trois lames, puis son point), la marque se nomme, sa signature la conclut, et seulement là le titre puis le sous-titre montent. Chaque temps commence quand le précédent est ARRIVÉ, pas quand il a commencé — d'où des écarts qui tiennent compte des durées, et non une cascade régulière. 0,10 · 0,26 · 0,42 les trois lames (0,72 s chacune) 0,58 le point au centre 1,00 IDYHLH 1,20 Voir clair. Investir juste. 1,48 le titre 1,70 le sous-titre 1,95 les trois maisons Deux secondes en tout : long pour une page, juste pour une ouverture qu'on ne voit qu'une fois. `prefers-reduced-motion` la supprime entièrement. */ .idyhlh__lame--1{animation-delay:.10s} .idyhlh__lame--2{animation-delay:.26s} .idyhlh__lame--3{animation-delay:.42s} .idyhlh__point{animation-delay:.58s} .idyhlh__marque--haut .idyhlh__idyhlh{animation-delay:1.00s} .idyhlh__marque--haut .idyhlh__signature{animation-delay:1.20s} .idyhlh__couv-texte > *:nth-child(1){animation-delay:1.48s} .idyhlh__couv-texte > *:nth-child(2){animation-delay:1.70s} .idyhlh__couv-logos{opacity:0; animation:idyhlh-entree .8s cubic-bezier(.22,.9,.32,1) 1.95s forwards} @media (prefers-reduced-motion:reduce){ .idyhlh__couv-logos{animation:none; opacity:1} } /* ── LE FIL D'ARIANE N'A PAS DE BANDE ──────────────────────────────── Yan, le 29.09 : « il y a un fond blanc en haut… enlève le fond derrière cette barre ». Le fond était pourtant celui de la planche, au même code — ce qui se voyait, c'est que la tache de couleur en haut à gauche, elle, ne passait PAS sous le fil : la planche la découpe à son bord supérieur, et ce bord commençait sous le fil. On lisait donc une barre là où il n'y avait qu'une absence de tache. Le fil sort du flux : hauteur nulle, son contenu déborde sur la planche. La planche commence donc tout en haut, sa tache avec elle, et le fil flotte par-dessus. Rien à synchroniser, aucune hauteur à tenir à jour. */ .yhb-offre__fil-bande{background:none; height:0; padding:0; overflow:visible; position:relative; z-index:6} .yhb-offre__fil-bande > .sb-wrap{padding-block:clamp(.85rem,1.9vh,1.35rem) 0} /* ════════════════════════════════════════════════════════════════════ LE TÉLÉPHONE — 29.09, sur signalement de Yan ──────────────────────────────────────────────────────────────────── Trois défauts, et les deux premiers n'en font qu'un. 1 · LA PAGE ENTIÈRE DÉBORDAIT vers la droite. Mesuré à 485 px de large : le `wrap` en faisait 708. Un seul écran impose sa largeur à tous les autres, et le titre de la couverture s'en trouvait coupé — c'est ce que Yan voyait, sans que la couverture y soit pour rien. Deux coupables, tous deux de la planche 05, tous deux de la même famille : un enfant qui refuse de rétrécir. · la frise des quatre temps, dont chaque repère est en `flex:0 0 auto` et `white-space:nowrap`. Quatre libellés insécables côte à côte font 700 px, et rien ne peut les plier. · le curseur de répartition : un `input[type=range]` a une largeur intrinsèque d'environ 460 px, et une piste de grille `1fr` vaut `minmax(auto,1fr)` — le `auto` prend cette largeur intrinsèque pour minimum. `min-width:0` est le seul mot qui le dise. 2 · LA MATRICE DE LA PLANCHE 07 perdait son axe. Repliée en une colonne, ses trois en-têtes de temps s'empilaient en haut et les quinze cases suivaient sans rattachement. On lisait une liste de jetons sans savoir de quel moment ils parlaient. 3 · LA PAGE ÉTAIT TROP LONGUE. Les hauteurs minimales en `vh`, qui donnent son rythme au grand écran, fabriquent du vide sur un téléphone : une planche y est déjà plus haute que l'écran par la seule longueur de son contenu. ════════════════════════════════ */ @media (max-width:760px){ /* ── 1 · plus rien ne force la largeur de la page ─────────────────── */ .idyhlh__temps{flex-wrap:wrap; gap:10px 14px} .idyhlh__temps-item{flex:0 1 auto; white-space:normal; font-size:15.5px} /* Les flèches reliaient quatre repères sur une ligne. Sur deux lignes elles ne relient plus rien et pointent dans le vide. */ .idyhlh__temps-fleche{display:none} /* ── L'ÉTAPE DEVIENT UNE CARTE ──────────────────────────────────── Empilée, la démarche donnait trois objets qui flottaient : une bande de couleur, une pastille collée dessous, un paragraphe plus bas. Yan, le 29.09 : « le texte est dessous, le label est collé — quelque chose de plus esthétique et plus compact ». Les trois deviennent UNE carte : la bande de couleur en fait l'en-tête, la durée s'y pose à droite, en blanc sur la couleur, et le texte occupe le corps. La pointe du chevron disparaît — dans une carte elle pointerait vers un bord. La durée est placée en absolu plutôt que déplacée dans le balisage : au grand écran elle reste la pastille sous le chevron, cernée de sa teinte, et ce balisage-là n'a pas à changer pour un téléphone. */ .idyhlh__etape{position:relative; grid-row:auto; grid-template-rows:auto auto; background:var(--i-blanc); border-radius:var(--i-rayon); box-shadow:var(--i-ombre); overflow:hidden} .idyhlh__demarche{gap:12px} .idyhlh__chevron{clip-path:none; border-radius:0; min-height:0; padding:14px 16px; font-size:16px; gap:11px} .idyhlh__chevron svg{width:22px; height:22px} /* ⚠️ LA DURÉE RESTE DANS LE FLUX. Posée en absolu sur le bandeau, elle entrait dans le titre dès qu'il était long : « Priorisation et décision » et « selon la complexité » se chevauchaient, et réserver la place de la plus large aurait étranglé les trois autres titres. Dans le corps de la carte, au-dessus du texte, elle ne peut rien heurter — et elle garde le cerné de sa teinte, comme au grand écran. */ .idyhlh__etape-txt{padding:12px 16px 15px} .idyhlh__duree{margin:0 0 9px; padding:5px 13px; font-size:13px} .idyhlh__etape-txt p{font-size:15px} .idyhlh__jauge{grid-template-columns:minmax(0,92px) minmax(0,1fr) 42px; gap:10px} .idyhlh__jauge input[type=range]{min-width:0; width:100%} .idyhlh__jauge label{font-size:15px} .idyhlh__camembert svg{width:min(56vw,180px)} /* ── 2 · LA MATRICE DEVIENT UN TABLEAU DE POINTS ────────────────── Troisième version, et les deux premières disaient pourquoi. Repliée par domaine, elle répétait « Au lancement » cinq fois. Repliée par moment, elle tenait debout mais prenait 1 250 px de haut pour onze pastilles de texte — « c'est pas très parlant, essaye autre chose ». Yan donne la direction : « un titre à gauche dans une colonne, à droite un truc sans texte dans le diagramme, avec des points, des petites barres ». C'est la forme que la donnée demandait depuis le début : cinq domaines, trois moments, et à chaque croisement une seule information — est-ce financé, et est-ce ponctuel ou continu. Un tableau de présence se lit d'un coup d'œil ; une liste de onze jetons se parcourt. Le tableau tient en 250 px au lieu de 1 250. Le NOM du levier reste dans le document, masqué à l'œil mais lu par une synthèse vocale et indexé : on retire le texte du dessin, pas de la page. */ .idyhlh__grille{grid-template-columns:1fr repeat(3,minmax(44px,54px)); gap:0; align-items:stretch; column-gap:2px} /* Les trois en-têtes perdent leur pastille colorée et leur sous-titre — « capital initial » n'a pas de place sur 50 px, et le titre de la planche le dit déjà. Ils deviennent trois libellés au-dessus de leur colonne, et gardent leur teinte en texte. */ .idyhlh__grille-tete{background:none !important; padding:0 2px 8px; font-size:11px; line-height:1.2; text-align:center; align-self:end; border-radius:0; color:var(--i-gris); letter-spacing:.02em} .idyhlh__grille-tete small{display:none} .idyhlh__grille-dom{font-size:14px; gap:9px; padding:11px 10px 11px 0; border-top:1px solid var(--i-bord); align-items:center} /* La case ne porte plus qu'une marque. Pleine, c'est une action datée ; creuse, c'est ce qui tourne en continu — la même distinction que le jeton en pointillés du grand écran, réduite à sa plus simple forme. */ .idyhlh__case{padding:0; min-height:0; background:none; box-shadow:none; border-radius:0; margin:0; border-top:1px solid var(--i-bord); display:grid; place-items:center} .idyhlh__case--vide{display:grid} .idyhlh__case--vide::after{content:""; width:12px; height:1.5px; border-radius:2px; background:var(--i-bord)} /* ⚠️ LA MARQUE DIT LE MOMENT, PAS SEULEMENT LA PRÉSENCE. Trois points identiques disaient « financé, financé, financé » — vrai, mais muet sur ce que la planche raconte : que l'effort GRANDIT à mesure que les gains le financent. Yan, le 29.09 : « un tiers de lune, une demi-lune, une pleine lune, comme ça on voit l'évolution ». La phase se lit donc directement dans la colonne : croissant au lancement, demi ensuite, pleine dans la durée. Le cerné reste à la teinte du domaine, de sorte qu'une lune presque vide se voit quand même — sans lui, le croissant aurait ressemblé à une case oubliée. Plus besoin de distinguer le « continu » par un anneau creux : les deux seuls leviers continus sont en troisième colonne, et la pleine lune dit déjà qu'ils tournent tout le temps. */ /* ⚠️ LA PART ÉCLAIRÉE SE PEINT SUR LE DISQUE ENTIER, PAS DANS UN CERNÉ. Premier essai : un cercle bordé, rempli au tiers par un dégradé. Le dégradé se mesure sur la boîte INTÉRIEURE au bord — sur quinze pixels dont quatre de bord, un tiers ne faisait plus que trois pixels visibles, et le croissant ressemblait à la demi-lune. Le bord disparaît : le disque entier porte la teinte en clair — c'est la face sombre —, et la phase la recouvre en plein. La différence entre un quart et une moitié se voit alors à quinze pixels. */ .idyhlh__jeton{font-size:0; padding:0; border:0; display:block; width:16px; height:16px; border-radius:50%; background:linear-gradient(90deg, currentColor 0 100%, color-mix(in srgb, currentColor 20%, transparent) 100% 100%)} .idyhlh__case[data-rang="0"] .idyhlh__jeton{ background:linear-gradient(90deg, currentColor 0 25%, color-mix(in srgb, currentColor 20%, transparent) 25% 100%)} .idyhlh__case[data-rang="1"] .idyhlh__jeton{ background:linear-gradient(90deg, currentColor 0 50%, color-mix(in srgb, currentColor 20%, transparent) 50% 100%)} /* La légende ne dit que ce que le dessin ne peut pas dire tout seul. */ .idyhlh__grille::after{content:""} .idyhlh__legende{display:flex; align-items:center; gap:8px; margin-top:14px; font-size:12.5px; color:var(--i-gris)} .idyhlh__legende i{width:13px; height:13px; border-radius:50%; border:2.5px solid var(--i-gris); flex:0 0 auto} /* ── 3 · la page se resserre ──────────────────────────────────────── */ /* Sur un téléphone, une planche est déjà plus haute que l'écran : lui imposer un minimum en `vh` n'ajoute que du blanc. On rend la hauteur au contenu, et on garde une respiration franche entre les planches. */ .idyhlh__planche, .idyhlh__couv, .idyhlh__planche:has(.idyhlh__pyramide, .idyhlh__roue, .idyhlh__cercles, .idyhlh__repartition, .idyhlh__leviers, .idyhlh__troisboites), .idyhlh__planche:not(.idyhlh__couv):not(:has(.idyhlh__pyramide, .idyhlh__roue, .idyhlh__cercles, .idyhlh__repartition, .idyhlh__leviers, .idyhlh__troisboites)){min-height:0} .idyhlh__planche{padding-block:clamp(38px,9vw,56px)} .idyhlh__couv{min-height:88vh} /* la couverture garde son plein écran */ .idyhlh__titre{font-size:clamp(26px,7.2vw,34px); line-height:1.15} .idyhlh__chapo{font-size:16px; margin-bottom:clamp(20px,5vw,28px)} .idyhlh__planche > .idyhlh__wrap::before{margin-bottom:16px} } /* ── LE BOUTON DE REPLI DES TROIS MAISONS ──────────────────────────── Il n'existe que sur un petit écran : au grand, les trois cartes tiennent côte à côte et il n'y a rien à replier. `hidden` dans le balisage, révélé par le script — donc absent aussi quand le script ne tourne pas, où la carte est entière et le bouton n'aurait servi à rien. */ .idyhlh__boite-voir{display:none} /* ⚠️ `display:contents`, ET C'EST INDISPENSABLE. La carte est une colonne flex, et sa liste de marques se colle en bas par `margin:auto 0 0` — une marge automatique ne pousse que contre le conteneur flex dont l'élément est ENFANT DIRECT. Emballer le bas de la carte dans une div pour pouvoir le replier l'aurait donc décollé du bas sur les trois cartes du grand écran, qui n'ont rien demandé. `display:contents` fait disparaître la boîte de la mise en page tout en la gardant pour le script : les enfants redeviennent directs, et `display:none` la referme quand même sur un téléphone. */ .idyhlh__boite-plus{display:contents} @media (max-width:760px){ /* ⚠️ UN SEUL FILET, DÉPLIÉ COMME REPLIÉ. L'en-tête de la carte ferme sur une ligne, et le bouton ouvrait sur une autre — or rien ne s'intercale entre les deux, dans aucun des deux états. Deux traits collés l'un sur l'autre, que Yan a vus tout de suite. Le filet de l'en-tête suffit ; le bouton n'en pose plus, et se rapproche. */ .idyhlh__boite-voir{display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:10px; padding:0; gap:12px; background:none; border:0; font:inherit; font-size:15px; font-weight:700; color:var(--i-magenta); cursor:pointer; text-align:left} .idyhlh__boite-voir i{width:9px; height:9px; flex:0 0 auto; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); transition:transform .25s cubic-bezier(.22,.61,.36,1)} .idyhlh__boite-voir[aria-expanded="true"] i{transform:rotate(-135deg) translate(-2px,-2px)} .idyhlh__boite.is-replie .idyhlh__boite-plus{display:none} /* ⚠️ UN SEUL FILET, PAS DEUX. L'en-tête de la carte pose déjà une ligne sous le nom ; le bouton en pose une seconde au-dessus de lui. Carte dépliée les deux servent — l'une ferme l'en-tête, l'autre ouvre le bouton, et du texte les sépare. Carte repliée il ne reste rien entre elles : deux traits et un blanc mort. Repliée, l'en-tête rend le sien. */ .idyhlh__boite.is-replie header{border-bottom:0; padding-bottom:0; margin-bottom:0} .idyhlh__boite.is-replie .idyhlh__boite-voir{margin-top:14px} .idyhlh__boite header{padding-bottom:12px; margin-bottom:0} .idyhlh__boite .idyhlh__boite-corps{margin-top:12px} .idyhlh__boite{padding:clamp(18px,4.6vw,24px)} /* Les cartes d'argument se resserrent aussi : à cinq ou six empilées, chaque pixel de rembourrage se paie six fois. */ .idyhlh__levier,.idyhlh__constat,.idyhlh__col,.idyhlh__carte-arg{padding:clamp(14px,3.8vw,20px)} .idyhlh__leviers,.idyhlh__compare{gap:10px} } @media (prefers-reduced-motion:reduce){ .idyhlh__boite-voir i{transition:none} } /* ── LES TROIS MAISONS, EN LISTE SOUS LE DESSIN ────────────────────── ⚠️ CE BLOC EST EN FIN DE FEUILLE, ET CE N'EST PAS UN HASARD. Écrit au milieu, il perdait contre les règles de base du pied de la fleur — même poids, déclarées plus bas, donc gagnantes. Le réseau gardait son filet de séparation en guise de pastille et sa ligne se pliait en accordéon, « Le réseau » à la verticale. Quand une surcharge vise des règles qu'on ne veut pas toucher, elle se place après elles ; monter la spécificité à la place aurait fabriqué un sélecteur que personne ne saurait relire. */ @media (max-width:760px){ /* ── LES TROIS MAISONS : LE DESSIN, PUIS LA LISTE ───────────────── En trois colonnes, les noms encadrent la fleur. Repliés, ils se retrouvaient dispersés autour d'elle — un au-dessus, un au-dessous, deux plus bas —, et on ne savait plus quel nom allait avec quel rond. Yan, le 29.09 : « mets-les en liste l'un sous l'autre avec une pastille de la couleur correspondante, et le visuel des trois ronds au-dessus ». C'est ce que fait la pastille : elle porte la teinte du rond, donc elle rattache la ligne au dessin sans qu'aucune flèche ne soit nécessaire. Le réseau, lui, reçoit un cercle CREUX — c'est le dessin de l'anneau qui entoure les trois, et il n'est pas une maison. */ /* ⚠️ `align-items` ENCORE. La règle de base centre les colonnes de la fleur ; passée en colonne flex, ce `center` rétrécit chaque ligne à la largeur de son texte — les deux premières entrées étaient rentrées de vingt pixels et leur filet ne traversait pas. Troisième fois que cette propriété change de sens en changeant de direction ; c'est le piège de la feuille. */ .idyhlh__cercles{display:flex; flex-direction:column; align-items:stretch; gap:0} .idyhlh__fleur{order:-1; margin-bottom:clamp(18px,4.5vw,26px)} .idyhlh__cercles-txt{display:contents} .idyhlh__cercles-txt > div, .idyhlh__cercles-pied > div{display:grid; grid-template-columns:14px 1fr; gap:2px 12px; align-items:start; text-align:left; padding:12px 0; border-top:1px solid var(--i-bord); margin:0} .idyhlh__cercles-txt > div::before, .idyhlh__cercles-pied > div::before{content:""; grid-row:span 2; width:14px; height:14px; border-radius:50%; background:var(--teinte,var(--i-gris)); margin-top:5px} .idyhlh__cercles-txt h3,.idyhlh__cercles-pied h3{margin:0; font-size:16px} .idyhlh__cercles-txt p,.idyhlh__cercles-pied p{margin:0; font-size:14.5px} .idyhlh__cercles-pied{display:flex; flex-direction:column; gap:0; margin:0} /* ⚠️ LE `::before` DU RÉSEAU SERVAIT DÉJÀ. Au grand écran c'est le petit filet qui le sépare des trois maisons — un trait de 44 px posé en absolu. N'en redéclarer que la couleur laissait le positionnement en place : la pastille restait un trait flottant, et la ligne se pliait en accordéon, « Le réseau » à la verticale. Un pseudo-élément qu'on réemploie se remet à zéro en entier. */ .idyhlh__cercles-reseau{padding-top:12px} /* ⚠️ DEUX CLASSES, PAS UNE. La règle générique des pastilles (`.idyhlh__cercles-pied > div::before`) en pèse deux ; celle du réseau n'en pesait qu'une et se faisait repeindre en plein. L'anneau creux dit que le réseau n'est pas une maison — c'est le seul endroit où le dessin porte l'information. */ .idyhlh__cercles-pied > .idyhlh__cercles-reseau::before{position:static; transform:none; width:14px; height:14px; border-radius:50%; margin-top:5px; background:transparent; background-image:none; border:2px solid var(--i-gris); box-sizing:border-box} /* Les trois colonnes de marques : assez larges pour que « lancement » ne se coupe pas en deux, assez étroites pour que le nom du domaine garde la sienne. */ .idyhlh__grille{grid-template-columns:1fr repeat(3,minmax(52px,62px))} .idyhlh__grille-tete{font-size:10.5px; overflow-wrap:normal; hyphens:none} .idyhlh__cercles-pied{align-items:stretch; text-align:left; margin-top:0} } /* ════════════════════════════════════════════════════════════════════ LE VERROU DU 06.10 — nouveau logo, même page ──────────────────────────────────────────────────────────────────── Le logo passe d'un signe nu surmonté d'un mot-marque en capitales à un VERROU horizontal : signe, « idyhlh » en bas de casse, et la ligne des trois maisons. Trois conséquences, et aucune n'est cosmétique. 1 · LE SIGNE A CHANGÉ DE DESSIN. Celui de septembre était une reconstruction ; celui-ci vient du logo lui-même. Sa boîte va de la pointe à la base, comme avant, mais son point tombe à 15,4 % sous le milieu — et non 15,35 % / 16 %, qui étaient les mesures de l'ancien. Toute règle qui centre le signe sur son POINT reprend ce chiffre. 2 · LE MOT-MARQUE N'EST PLUS UNE IMAGE. Il est dans le même SVG, donc il n'a plus ni largeur propre ni filtre d'inversion à tenir. Les règles qui le cadraient ne servent plus. 3 · LA COUVERTURE GARDE SA SÉQUENCE. Les lames portent les mêmes classes qu'avant, le mot est groupé à part : le signe s'assemble, le mot paraît, la signature suit, puis le titre. Rien de l'ordre que Yan a réglé le 29.09 ne bouge. ════════════════════════════════════════ */ .idyhlh__lockup-svg{width:100%; height:auto; display:block; overflow:visible} /* Le verrou est trois fois et demie plus large que haut, là où le signe seul était presque carré : à largeur égale il paraîtrait deux fois plus petit. Il prend donc la place des deux anciens blocs réunis. */ /* ⚠️ DEUX CLASSES, parce que le cadrage de la couverture en pèse deux : `.idyhlh__couv-haut .idyhlh__marque--haut` bridait le bloc à 250 px, la largeur qu'il fallait au signe seul. Le verrou en demande davantage. */ .idyhlh__couv-haut .idyhlh__marque--haut{width:min(66vw,420px)} /* LA SIGNATURE SE CENTRE, ELLE NE SE JUSTIFIE PLUS. Justifiée, elle tenait la largeur du mot-marque en capitales — un bloc de 250 px, où les blancs restaient discrets. Sous un verrou de 420 px, les mêmes quatre mots s'écarteraient de trente pixels chacun : on lirait l'écartement avant la phrase. Centrée, elle redevient une légende. */ .idyhlh__marque--haut .idyhlh__signature{margin-top:clamp(12px,1.6vw,18px); text-align:center; text-align-last:center; font-size:clamp(14px,1.45vw,18px)} /* ── LE SIGNE SE CENTRE SUR SON POINT, NOUVELLE MESURE ──────────────── */ .idyhlh__lame{transform-origin:65px 82.34px} .idyhlh__point{transform-origin:65px 82.34px} .idyhlh__coeur img{transform:translateY(-15.4%)} .idyhlh__roue-coeur{transform:translate(-50%,-50%) translateY(-15.4%)} /* ── LE MOT ENTRE APRÈS LE SIGNE ───────────────────────────────────── Il remplace l'ancienne image du mot-marque dans la séquence : mêmes retards, même courbe, pour que l'ouverture reste celle du 29.09. */ .idyhlh__lockup-mot{opacity:0; animation:idyhlh-entree .7s cubic-bezier(.22,.9,.32,1) 1.00s forwards} @media (prefers-reduced-motion:reduce){ .idyhlh__lockup-mot{animation:none; opacity:1} } /* Le cœur de la fleur est désormais le signe en ligne, comme la couronne : l'image matricielle était le dernier reste du dessin de septembre. */ .idyhlh__coeur .idyhlh__signe-svg{width:64%; height:auto; display:block; transform:translateY(-15.4%)}