/* * ETUDE AI OVERVIEW - FEUILLE DE STYLE AUTONOME * * Reprise fidele du carrousel LinkedIn de l'etude * ("2026-09 - Carrousel LinkedIn - Etude AIO"). Les variables, le degrade, les * deux halos, le traitement des cartes et celui des diapositives claires sont * repris tels quels : seules les tailles sont adaptees, le carrousel etant * dessine pour un carre de 1080 px ou tout est deux a trois fois plus gros. * * Regle : ne rien inventer ici. Si une couleur ou un effet manque, il vient du * carrousel ou il ne vient pas. La page et le carrousel seront vus le meme jour * par les memes gens. * * UNE SEULE CHOSE N'EST PAS REPRISE TELLE QUELLE : LES GRAISSES. * Le carrousel est lu a 1080 px de cote, ou un texte courant en 600 passe pour * du normal. A 15 px sur un ecran, le meme 600 est franchement gras. L'echelle * a donc ete decalee de deux crans vers le bas, en gardant les proportions : * * 900 titraille pure : h1, gros chiffres des tuiles * 800 h2, marque de l'en-tete * 700 h3, petites capitales, libelles de champs * 600 elements actifs ou cliquables, mot-cle d'une ligne * 500 tout le texte courant, chiffres des tableaux * * Quand une graisse parait devoir monter, c'est presque toujours qu'il manque * du contraste ou de l'espace, pas du gras. */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap'); :root{ --red: #e01b0f; --red2: #ef4a26; --orange: #f2542d; --peach: #f9b49b; --peach2: #fbcdbb; --ink: #241a18; --ink2: #6b5d59; --line: #e7e0dd; --font: "Archivo", -apple-system, "Segoe UI", sans-serif; } *{ margin:0; padding:0; box-sizing:border-box; } body{ font-family:var(--font); background:#fff; color:var(--ink); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } a{ color:var(--red); text-decoration:none; } a:hover{ color:var(--orange); text-decoration:underline; } /* * Un seul anneau de focus pour toute la page, au clavier uniquement. * :focus-visible et non :focus : sans ca, chaque clic a la souris sur un bouton * laisse un cadre disgracieux, ce qui pousse en general a supprimer l'anneau - * et a rendre la page inutilisable au clavier. */ :focus-visible{ outline:2px solid var(--red); outline-offset:2px; border-radius:3px; } .wrap{ max-width:1120px; margin:0 auto; padding:0 24px; position:relative; z-index:1; } /* ---------------------------------------------------------------- en-tete */ .site_head{ border-bottom:1px solid var(--line); background:rgba(255,255,255,.94); backdrop-filter:blur(8px); position:sticky; top:0; z-index:20; } .site_head .wrap{ display:flex; align-items:center; gap:28px; height:62px; } /* VERROU MARQUE + RUBRIQUE Le logo dit qui publie, le titre dit quoi : sans lui, un visiteur venu du QR code ne savait pas qui avait produit l'etude avant d'avoir atteint le pied de page. Le conteneur a son propre gap parce que celui de .wrap, 28px, est calibre pour separer des blocs - il aurait desolidarise les deux moities du verrou. */ /* ALIGNEMENT SUR LA LIGNE DE BASE, PAS SUR LES BOITES align-items:center centrait la boite du logo sur celle du titre. Or l'encre d'un texte n'est pas centree dans sa ligne - il reste de la place sous la ligne de base pour les jambages - et le logo se retrouvait 6 px trop bas. En baseline, le bas de l'image se pose sur la ligne de base du titre, ce qui est exactement la facon dont un logotype se cale a cote d'un mot. */ .site_head .brand_wrap{ display:flex; align-items:baseline; gap:13px; } /* line-height:0 supprime le talon sous l'image : sans lui l'interligne du lien ajoute quelques pixels et le logo remonte au-dessus de la ligne de base. */ .site_head .brand_logo{ display:block; line-height:0; } /* 14px = la hauteur de capitale du titre (13px mesures sur un E a 19px/800), arrondie au-dessus. La hauteur du FICHIER ne pouvait pas servir de reference : ce logo n'a aucune marge interne, ses 18px etaient donc 18px de lettres, soit un tiers de plus que les capitales d'a cote. */ .site_head .brand_logo img{ display:block; height:14px; width:auto; } /* Le filet separe sans peser : un caractere "|" suivrait la graisse et l'interlettrage du texte, et se decalerait de la ligne optique. */ .site_head .brand_sep{ align-self:center; width:1px; height:17px; background:var(--line); } .site_head .brand{ font-weight:800; color:var(--ink); letter-spacing:-.025em; font-size:19px; } .site_head .brand:hover{ color:var(--ink); text-decoration:none; } .site_head .brand svg{ width:17px; height:17px; } .site_head nav{ display:flex; gap:24px; margin-left:auto; font-size:14.5px; } /* Sur petit ecran RIEN NE CEDE DU VERROU : l'etude est annoncee par un kakemono a QR code, le trafic est donc d'abord mobile - c'est exactement la ou le nom de l'editeur doit rester visible. On reduit les tailles et les ecarts. */ @media (max-width:560px){ .site_head .wrap{ gap:14px; } .site_head .brand_wrap{ gap:9px; } .site_head .brand_logo img{ height:12px; } .site_head .brand{ font-size:15.5px; } .site_head nav{ gap:13px; font-size:12.5px; } /* "Explorer les mots-clés" est le libelle le plus long : on coupe son complement plutot que de rapetisser tout le reste. */ .site_head .nav_plus{ display:none; } } /* SOUS 430px, LE TITRE CEDE ET LE LOGO RESTE. Il n'y a pas la place pour le logo, le titre et trois entrees de menu : a 390px l'entete reclamait encore 44px de trop. C'est le titre qu'on retire, pas le logo - l'etude est annoncee par un kakemono a QR code, donc lue d'abord sur telephone, et c'est justement la que le nom de l'editeur doit rester. Le titre, lui, est repris tel quel par le h1 juste en dessous. A noter : l'entete debordait DEJA avant l'ajout du logo, d'environ 200px, faute de toute regle mobile. */ @media (max-width:430px){ .site_head .brand, .site_head .brand_sep{ display:none; } } /* Les 320px (iPhone SE, petits Android) restaient 16px trop justes une fois le titre retire : il ne reste que le logo et les trois entrees, on resserre donc les ecarts plutot que de sacrifier une entree de menu. */ @media (max-width:360px){ .site_head .wrap{ gap:10px; } .site_head nav{ gap:9px; font-size:12px; } .site_head .brand_logo img{ height:11px; } } .site_head nav a{ color:var(--ink2); font-weight:500; } .site_head nav a.on{ color:var(--ink); font-weight:700; } /* -------------------------------------------------------------------- hero * * .bg, .orb, .o1 et .o2 sont les classes du carrousel, valeurs inchangees : * le degrade va du rouge a l'orange - il ne s'assombrit jamais - et les deux * halos blancs tres pales sont ce qui donne sa profondeur au fond. */ .hero{ position:relative; overflow:hidden; color:#fff; padding:76px 0 62px; } .hero .bg{ position:absolute; inset:0; background:linear-gradient(150deg,var(--red) 0%,var(--red2) 55%,var(--orange) 100%); } .hero .orb{ position:absolute; border-radius:50%; background:rgba(255,255,255,.055); } .hero .o1{ width:1180px; height:1180px; right:-420px; top:-300px; } .hero .o2{ width:680px; height:680px; left:-260px; bottom:-300px; background:rgba(255,255,255,.04); } h1{ font-size:clamp(32px,5vw,58px); font-weight:900; letter-spacing:-.035em; line-height:1.02; text-wrap:balance; margin:0 0 24px; max-width:15em; } /* LA RELANCE Hors du h1 - le titre ne porte que du mesure - mais typographiee a l'identique pour se lire comme sa troisieme ligne. Toute retouche du h1 ci-dessus doit etre repercutee ici, sinon les deux blocs se desolidarisent. Peche et non blanc : meme taille, mais un cran en retrait, pour que le chiffre garde la primeur. #f9b49b = --peach. La marge basse du h1 passe a 0 : c'est la relance qui porte l'espace avant le chapo, sinon les deux lignes du titre se separeraient. */ .hero h1{ margin-bottom:0; } .hero .relance{ font-size:clamp(32px,5vw,58px); font-weight:900; letter-spacing:-.035em; line-height:1.02; color:var(--peach); margin:0 0 24px; max-width:15em; } .hero .chapo{ font-size:19px; font-weight:500; line-height:1.42; color:#fff; max-width:44em; margin:0 0 44px; } /* Trois tuiles : pas de palier a deux colonnes, qui laisserait toujours une tuile orpheline sur sa ligne. On passe de 3 a 1 d'un coup. */ /* gap elargi a 30px pour loger le chevron sans coller aux tuiles */ .figures{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; } /* CHEVRONS ENTRE LES TUILES Les trois chiffres s'emboitent - chacun se compte dans le precedent - et le chapo le dit, mais trois cartes alignees ne le montrent pas. Le chevron rend l'enchainement visible sans ajouter un mot. Trace en bordures plutot qu'en SVG ou en glyphe : pas de fichier a charger, et il suit la couleur qu'on lui donne sans se soucier de la police disponible. */ .figure{ position:relative; } .figure:not(:last-child)::after{ content:""; position:absolute; z-index:2; right:-21px; top:50%; width:11px; height:11px; border-top:3px solid var(--red); border-right:3px solid var(--red); transform:translateY(-50%) rotate(45deg); } @media(max-width:760px){ .figures{ grid-template-columns:1fr; gap:38px; } /* en colonne unique, le chevron passe sous la tuile et pointe vers le bas : laisse a droite, il aurait designe le vide */ .figure:not(:last-child)::after{ right:auto; left:50%; top:auto; bottom:-26px; transform:translateX(-50%) rotate(135deg); } } /* Les tuiles ont quitte le bandeau rouge pour une section blanche : tout leur habillage etait construit sur des blancs transparents, illisibles sur fond clair. Elles passent en gris chaud sur liseré, comme la barre de resultats de l'explorateur. */ .figure{ background:#faf7f6; border:1px solid var(--line); border-radius:22px; padding:26px 26px 24px; } .figure .k{ font-size:12.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink2); } .figure .v{ font-size:44px; font-weight:900; letter-spacing:-.04em; line-height:1; margin:14px 0 10px; color:var(--ink); } .figure .s{ font-size:14.5px; font-weight:500; line-height:1.4; color:var(--ink2); } /* La derniere tuile porte le chiffre du titre : c'est le seul aplat rouge de la section, et il tombe en fin de lecture - la demonstration finit dessus. */ .figure.hi{ background:var(--red); border-color:var(--red); } .figure.hi .k{ color:#fff; opacity:.8; } .figure.hi .v{ color:#fff; } .figure.hi .s{ color:#fff; opacity:.92; } /* * Appel vers l'explorateur, sous les tuiles. Bouton blanc a texte rouge : * c'est le seul element blanc plein du bandeau avec la carte mise en avant, * donc le seul autre point ou l'oeil s'arrete. */ /* justify-content:center depuis que le bouton est seul : la mention qui l'accompagnait a gauche a ete retiree, un bouton seul cale a gauche sous un bandeau pleine largeur paraissait tombe la par accident. */ .hero_cta{ display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; margin-top:34px; max-width:none; } .hero_cta .btn.white{ background:#fff; color:var(--red); font-size:16px; font-weight:700; padding:15px 30px; border-radius:12px; } .hero_cta .btn.white:hover{ background:var(--peach2); color:var(--red); text-decoration:none; } .hero_cta span{ font-size:14.5px; font-weight:500; color:#fff; } /* --------------------------------------------------- sections claires * * Equivalent des diapositives .light du carrousel : fond blanc franc, titre en * encre, sur-titre en rouge, filets en --line. Pas de fond teinte. */ section{ padding:64px 0; border-bottom:1px solid var(--line); background:#fff; } /* Le bloc produit, en fin de page. Fond legerement teinte : il ne doit pas se lire comme une section de resultats. La frontiere entre ce qui est mesure et ce qui est vendu doit se voir avant meme d'etre lue. */ section.apres{ background:#fdf7f5; border-bottom:0; } h2{ font-size:clamp(24px,3vw,36px); font-weight:800; letter-spacing:-.025em; line-height:1.1; text-wrap:balance; margin:0 0 18px; color:var(--ink); } /* SECTION DE CONCLUSION Elle repond a la question posee dans le hero et n'apporte aucun chiffre neuf : c'est une lecture de ceux d'avant. Le fond sombre la sort donc de la serie des sections de resultats, toutes en blanc - on voit au premier coup d'oeil qu'on change de registre. Pas de border-bottom : sur un aplat sombre, le filet clair des autres sections se verrait comme une rayure au lieu d'une separation. CONTRASTES sur --ink (#241a18), tous au-dessus du seuil AA de 4,5:1 valable meme pour du corps de texte : orange #f2542d -> 4,9:1 texte #efe7e4 -> 14,0:1 peche #f9b49b -> 9,7:1 Le texte n'est pas en blanc pur : sur un aplat sombre il vibre, un blanc casse se lit plus longtemps sans fatigue. */ section.conclusion{ background:var(--ink); border-bottom:0; } section.conclusion h2{ color:var(--orange); } /* Le titre reprend le degrade anime des phrases de transition, adapte au fond sombre : le rouge d'origine n'y tiendrait que 3,5:1, on part donc de l'orange vers le peche - 4,9:1 et 9,7:1, confortables tous les deux. Comme pour .transition : degrade SYMETRIQUE pour que l'aller-retour boucle sans saut, et inline-block obligatoire - en bloc la boite occuperait toute la largeur et le degrade se deploierait sur du vide a droite du texte. Les deux teintes intermediaires sont ecrites en clair plutot que prises dans --peach : celui-ci est un rose pale concu pour du texte sur fond rouge, au centre d'un degrade sur fond sombre il virait au blanc et delavait le titre. Le point mobile reste donc franchement orange, seulement eclairci. Contrastes sur --ink : #f6713f 6,0:1 et #fa9a6e 8,1:1. */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ section.conclusion h2{ display:inline-block; background:linear-gradient(95deg, var(--orange) 0%, #f6713f 30%, #fa9a6e 50%, #f6713f 70%, var(--orange) 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:aio_degrade 7s ease-in-out infinite; } } /* .lead ET les p ordinaires : ces derniers heritent de --ink via body, donc du sombre sur du sombre si on ne les reprend pas. */ section.conclusion .lead, section.conclusion > .wrap > p{ color:#efe7e4; } /* La conclusion est un bloc de lecture suivi, pas un chapo puis des notes : ses trois paragraphes portent donc tous .lead, ce qui leur donne la meme typo qu'ailleurs dans la page (16,5 px, graisse 500) sans dupliquer une seule valeur. Seule la marge est reprise : les 34 px de .lead sont calcules pour un chapo isole, trois d'affilee delitaient le bloc. */ section.conclusion > .wrap > p.lead{ margin-bottom:18px; } section.conclusion > .wrap > p.lead:last-child{ margin-bottom:0; } /* le rouge des liens du site disparaitrait sur ce fond : on passe au peche */ section.conclusion a{ color:var(--peach); } section.conclusion a:hover{ color:#fff; } /* PHRASE DE TRANSITION Taille de titre, mais ce n'est pas un titre : elle relance la lecture entre le resume chiffre et le detail. Un peu plus grosse qu'un h2 pour qu'on ne la confonde pas avec le debut d'une section - elle appartient a celle qui se termine, pas a celle qui commence. Le selecteur porte le p : "section > .wrap > p" vaut (0,1,2) et l'emportait sur un simple ".transition" (0,1,0), qui perdait donc sa marge haute. */ /* La marge se pose sur CE QUI SUIT, pas en bas de la transition : quand elle termine sa section - cas de "Regardons de plus près." - il n'y a rien a espacer, et une marge basse ne ferait qu'y rallonger le blanc. */ section > .wrap > p.transition + *{ margin-top:38px; } section > .wrap > p.transition{ display:inline-block; font-size:clamp(30px,4vw,48px); font-weight:900; letter-spacing:-.03em; line-height:1.1; margin:56px 0 0; max-width:18em; /* couleur de repli : elle reste seule si le degrade sur texte n'est pas supporte, et un texte transparent sans repli serait invisible */ color:var(--red); } /* Le degrade reprend celui du bandeau - rouge vers orange - pour que la phrase fasse echo au haut de page. inline-block plus haut est indispensable : en bloc, la boite s'etendrait sur les 18em de max-width et le degrade se deploierait sur du vide, le texte n'en recevant qu'une tranche. IL EST ANIME : background-size a 220 % puis background-position qui va et vient, ce qui fait glisser l'orange a travers les lettres. On n'anime que background-position - une propriete que le navigateur compose sans reflow, donc sans cout de rendu. Le degrade est SYMETRIQUE (rouge aux deux bouts) : l'aller-retour se boucle alors sans saut visible. */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ section > .wrap > p.transition{ background:linear-gradient(95deg, var(--red) 0%, var(--red2) 28%, var(--orange) 50%, var(--red2) 72%, var(--red) 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:aio_degrade 7s ease-in-out infinite; } } @keyframes aio_degrade{ 0%, 100%{ background-position:0% 50%; } 50% { background-position:100% 50%; } } /* Une animation en boucle sur un texte est exactement ce que ce reglage systeme demande de couper. Le degrade reste, il cesse simplement de bouger. */ @media (prefers-reduced-motion:reduce){ section > .wrap > p.transition, section.conclusion h2{ animation:none; } } /* Le reset *{margin:0} prive les

de toute marge, et h3 n'avait pas de marge haute : sur une page courte ca passait, sur la methodologie tout se collait. On redonne le rythme UNIQUEMENT a la prose en section - les cartes et le bandeau ont leur propre espacement et ne doivent pas y toucher. */ h3{ font-size:18px; font-weight:700; letter-spacing:-.02em; margin:38px 0 10px; } .card h3{ margin:0 0 10px; } section > .wrap > p{ margin:0 0 16px; } section > .wrap > .table_wrap{ margin:0 0 22px; } .lead{ font-size:16.5px; font-weight:500; line-height:1.5; color:var(--ink2); max-width:46em; margin:0 0 34px; } p{ max-width:46em; } .two{ display:grid; grid-template-columns:1fr 1fr; gap:22px; } @media(max-width:820px){ .two{ grid-template-columns:1fr; } } .card{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:30px 32px 28px; } .card p{ margin:0; color:var(--ink2); font-size:15.5px; font-weight:500; line-height:1.45; } .card .tag{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; margin-bottom:12px; color:var(--red); } .tag.sync{ color:var(--ink2); } .tag.async{ color:var(--red); } /* ---------------------------------------------------------------- graphes */ .chart{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:28px 30px 16px; position:relative; } .chart svg{ width:100%; height:auto; display:block; overflow:visible; } /* AGRANDISSEMENT SUR PETIT ECRAN Masque par defaut : au-dela de 760 px le graphe tient en entier et le bouton n aurait rien a agrandir. Il n apparait que dans la requete media plus bas. */ .chart_zoom{ display:none; } .chart_zone{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .chart .legend{ display:flex; flex-wrap:wrap; gap:24px; font-size:14px; font-weight:500; color:var(--ink2); padding:18px 2px 8px; } .chart .legend i{ width:24px; height:4px; border-radius:2px; display:inline-block; vertical-align:middle; margin-right:9px; } .toggle{ display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:24px; background:#fff; } .toggle button{ background:transparent; border:0; color:var(--ink2); font:inherit; font-size:14px; font-weight:600; padding:10px 22px; cursor:pointer; letter-spacing:-.01em; } .toggle button.on{ background:var(--ink); color:#fff; } /* -------------------------------------------------------- tableaux (.light) */ .table_wrap{ overflow-x:auto; } table{ width:100%; border-collapse:collapse; min-width:660px; } /* LES EN-TETES PEUVENT PASSER A LA LIGNE, PAS LES DONNEES. Ils etaient en nowrap, ce qui faisait fixer la largeur de chaque colonne par son titre : "Corpus represente" et "Mots-cles releves", en capitales espacees, reservaient une centaine de pixels de plus que les nombres qu'ils coiffent. A sept colonnes le tableau debordait. Sur deux lignes ils ne coutent plus que leur mot le plus long, et les chiffres, eux, gardent leur nowrap plus bas : c'est un nombre qui ne doit jamais se couper, pas un titre. */ thead th{ font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink2); padding:0 8px 14px; text-align:right; white-space:normal; vertical-align:bottom; } thead th:first-child{ text-align:left; } /* .asy : rouge + barre sur les deux colonnes async, a l'identique. Le rouge est une categorie - le meme que .tag.async et que la courbe du graphe - et l'async desktop et l'async mobile sont la MEME grandeur mesuree sur deux appareils. Accentuer l'une des deux reviendrait a dire qu'elles ne pesent pas pareil, ce qui est faux : ce tableau est une reference, pas une demonstration. */ thead th.asy{ color:var(--red); } tbody td{ font-size:15.5px; font-weight:500; padding:13px 8px; text-align:right; border-top:1px solid var(--line); white-space:nowrap; font-variant-numeric:tabular-nums; } tbody td:first-child{ text-align:left; font-weight:600; } tbody td.asy{ color:var(--red); font-weight:700; } /* LIGNES CLIQUABLES DU TABLEAU PAR STRATE Le lien occupe la premiere cellule et hérite de sa couleur : une ligne de tableau entierement bleue ferait lien avant de faire donnee. */ tbody tr.clic{ cursor:pointer; } tbody tr.clic:hover{ background:#fdf4f1; } td a.strate{ color:inherit; font-weight:inherit; display:inline-flex; align-items:center; gap:10px; } td a.strate:hover{ text-decoration:none; } /* La notice garde sa place en permanence (opacity, pas display) : la revéler au survol ne doit pas elargir la colonne et decaler tout le tableau. */ .go{ font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--red); background:var(--peach2); border-radius:999px; padding:3px 11px; white-space:nowrap; opacity:0; transition:opacity .12s ease; } tbody tr.clic:hover .go, td a.strate:focus-visible .go{ opacity:1; } /* Sans survol - tactile - la notice resterait invisible a jamais : on l'affiche. */ @media(hover:none){ .go{ opacity:1; } } tbody td.mut{ color:var(--ink2); font-weight:500; } /* LIGNE DE TOTAL Filet plus marque que les separations de lignes, et le total reprend la couleur pleine du texte meme dans les colonnes .mut : c'est la seule ligne du tableau qui se lit comme un resultat et non comme une observation. Pas de survol : elle n'est pas cliquable, et le laisser reagir promettrait un lien qui n'existe pas. */ tbody tr.total td{ border-top:2px solid var(--ink); font-weight:700; } tbody tr.total td.mut{ color:var(--ink); font-weight:700; } /* Note de lecture sous un tableau : plus petite que le corps, pour se lire comme une precision et non comme un paragraphe de plus. */ .note_table{ font-size:14px; color:var(--ink2); margin-top:14px; max-width:820px; } td.kw{ white-space:normal; max-width:420px; font-weight:600; } /* * Correspondance exacte : aucune mise en forme particuliere, elle est juste * remontee en premiere ligne. La classe reste posee comme point d'accroche si * on veut la distinguer un jour. */ tbody tr:hover{ background:#fdf6f4; } /* * "Ouvrir dans Google" : revele au survol de la ligne, en gris discret. L'etude * dit ce que Google affichait a la mi-septembre 2026 ; ce lien permet d'aller * verifier ce qu'il affiche maintenant, ce qui est la premiere chose qu'un * lecteur voudra faire - mais ca reste un outil de verification, pas un appel a * l'action, d'ou l'absence de pastille. rel="nofollow" parce que la page compte * autant de liens sortants qu'elle affiche de lignes. * * Sur un ecran tactile il n'y a pas de survol : le tag y est donc affiche en * permanence (media hover:none), sinon il serait purement inaccessible. */ td.kw a.g{ display:inline-block; margin-left:14px; vertical-align:1px; font-size:12px; font-weight:600; color:var(--ink2); border:1px solid var(--line); background:#fff; padding:3px 11px; border-radius:100px; white-space:nowrap; opacity:0; transition:opacity .12s ease; } /* l icone ne sert que sur petit ecran : en grand, le texte du lien suffit */ td.kw a.g .ico{ display:none; width:15px; height:15px; } tbody tr:hover td.kw a.g{ opacity:1; } td.kw a.g:focus{ opacity:1; outline:2px solid var(--red); outline-offset:2px; } td.kw a.g:hover{ color:var(--red); border-color:var(--red); text-decoration:none; } /* ------------------------------------------ depliage du detail sous la ligne */ /* Le chevron est la SEULE affordance de la ligne : il a donc une zone de clic reelle, pas seulement la taille du glyphe. 26px de cote, c'est court pour le doigt, mais la ligne entiere n'est pas cliquable a dessein - un clic accidentel qui deplie une iframe de SERP serait pire que deux essais. */ /* Toute la cellule du mot-cle deplie la ligne : le curseur doit le dire, sinon le chevron reste la seule cible que lon devine. Le lien Google garde le sien. */ tr.kwrow > td.kw{ cursor:pointer; } tr.kwrow > td.kw a{ cursor:pointer; } button.dep{ background:none; border:0; padding:0; margin:0 9px 0 0; cursor:pointer; width:26px; height:26px; vertical-align:middle; display:inline-flex; align-items:center; justify-content:center; } button.dep:focus-visible{ outline:2px solid var(--red); outline-offset:1px; border-radius:6px; } /* Chevron dessine en CSS plutot qu'en SVG ou en caractere : un glyphe comme "▸" change de dessin et de chasse selon la police installee, et la rotation d'un caractere ne se centre jamais proprement. */ .chev{ width:7px; height:7px; display:block; border-right:2px solid var(--ink2); border-bottom:2px solid var(--ink2); transform:rotate(-45deg); transform-origin:60% 60%; transition:transform .15s ease, border-color .15s ease; } button.dep:hover .chev{ border-color:var(--red); } button.dep[aria-expanded="true"] .chev{ transform:rotate(45deg); border-color:var(--red); } /* LA LIGNE OUVERTE ET SON PANNEAU NE DOIVENT ETRE SEPARES PAR RIEN. Deux regles generales du tableau debordaient sur le panneau : - tbody td porte un border-top, qui tracait un filet entre la ligne et ses onglets alors qu'ils forment un seul bloc ; - tbody tr:hover teinte la ligne survolee, et s'appliquait aussi a tr.det : promener la souris dans le detail rosissait tout le panneau, iframe comprise. La ligne mere garde son survol : c'est une ligne du tableau. Le panneau non : c'en est le contenu. */ /* Fond NEUTRE et non rose : le premier essai reprenait le #fdf7f5 de la page, qui sur une ligne de tableau se lisait comme un surlignage. Ce gris chaud tres clair ne signale rien, il pose juste un plan sous la vue. Le tout blanc, lui, ne delimitait plus rien du tout. */ tr.det > td{ padding:14px 16px 18px; border-top:0; background:#f7f5f4; } /* LA LIGNE OUVERTE PREND LE MEME FOND QUE SON PANNEAU : les deux ne font qu un bloc, et c est ce fond commun qui le dit - sans lui, le panneau semblait pose sous une ligne quelconque. La regle porte sur le TD et non sur le TR : le fond du td se peint par-dessus celui du tr, donc elle l emporte sur la teinte de survol des lignes, que la ligne ouverte ne doit plus prendre. */ tr.kwrow:has(+ tr.det:not([hidden])) > td{ background:#f7f5f4; } tr.det:hover{ background:none; } /* Onglets soulignes plutot que pastilles : quatre pastilles alignees sous une ligne de tableau faisaient un second niveau de boutons, en concurrence avec les pastilles sync/async de la ligne juste au-dessus. */ .det_tabs{ display:flex; flex-wrap:wrap; align-items:center; gap:22px; border-bottom:1px solid #e3dcd9; margin:0 0 14px; } .det_tabs button{ position:relative; background:none; border:0; padding:10px 0 11px; font:inherit; font-size:13px; font-weight:600; color:var(--ink2); cursor:pointer; } .det_tabs button:hover{ color:var(--ink); } .det_tabs button.on{ color:var(--red); } /* Le trait deborde d'un pixel vers le bas pour couvrir le filet du conteneur : sans ca les deux se superposent et l'onglet actif parait desaligne. */ .det_tabs button.on::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--red); } /* La vue redevient une carte blanche posee sur le plan gris. Le cadre ne genait pas en soi : c est sa combinaison avec le fond rose qui faisait une boite dans une boite. Rayon discret, 8px, pour ne pas concurrencer les pastilles de la ligne. HAUTEUR FIXE, ET ELLE NE PEUT PAS ETRE AUTOMATIQUE : les deux vues sont servies en bac a sable sans allow-same-origin, donc la page parente ne peut pas lire leur hauteur. 420px suffisent a lire un detail AIO d'un coup ; la classe "haut" monte a 620px pour le HTML brut, qui est une SERP entiere. */ .det_frame{ width:100%; height:420px; display:block; background:#fff; border:1px solid var(--line); border-radius:8px; } /* Le voile couvre exactement l iframe : c est ce qui masque le document precedent, qui reste affiche tant que le nouveau ne se peint pas. Il doit donc etre OPAQUE, et reprendre le cadre de l iframe pour que la boite ne change pas d aspect pendant le chargement. */ .det_vue{ position:relative; } .det_load{ position:absolute; inset:0; z-index:2; display:none; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line); border-radius:8px; font-size:13px; font-weight:600; color:var(--ink2); } .det_vue.attente .det_load{ display:flex; } .det_frame.haut{ height:620px; } @media (max-width:760px){ .det_frame{ height:340px; } .det_frame.haut{ height:420px; } .det_tabs{ gap:16px; } /* LE GRAPHE PAR TRANCHE SUR TELEPHONE Le SVG fait 860 de large dans son viewBox. Reduit a la largeur d un telephone, ses libelles d axe - poses a 12 px dans ce repere - tombent sous les 5 px reels : dessines, mais pas lisibles. Le bouton leur rend leur taille et laisse parcourir le graphe au doigt. Le padding du .chart passe de 30 a 16 px : trente pixels de chaque cote sur un ecran de 360, c est un sixieme de la largeur perdu pour du vide. */ .chart{ padding:22px 16px 12px; } .chart_zoom{ display:inline-flex; align-items:center; gap:7px; position:absolute; top:10px; right:10px; z-index:2; background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 13px 7px 11px; cursor:pointer; font:inherit; font-size:12.5px; font-weight:700; color:var(--ink2); letter-spacing:.02em; } .chart_zoom svg{ width:14px; height:14px; display:block; flex:none; } /* la zone ne defile QUE une fois agrandie : sans min-width le SVG se cale sur la largeur disponible et il n y a rien a faire defiler */ .chart.zoom .chart_zone{ overflow-x:auto; } .chart.zoom .chart_zone svg{ min-width:760px; } /* Indice de defilement : un degrade sur le bord droit, qui dit qu il reste du graphe au-dela. Pose sur le conteneur, donc immobile pendant que le contenu defile. Il disparait tant que le graphe n est pas agrandi. */ .chart.zoom{ position:relative; } .chart.zoom::after{ content:""; position:absolute; top:60px; right:1px; bottom:70px; width:34px; background:linear-gradient(to right, rgba(255,255,255,0), #fff); pointer-events:none; border-radius:0 22px 22px 0; } /* LA COLONNE MOT-CLE PRENAIT TOUT L'ECRAN Elle est en white-space:normal et plafonnee a 420 px : sur un telephone, cette seule colonne remplissait la zone visible et les quatre autres - volume, CPC, desktop, mobile - restaient hors champ. On ne voyait donc que ce qu'on savait deja, la liste des mots-cles. 40 % de la largeur du tableau lui suffisent : les mots-cles passent a la ligne, ce qu'ils faisaient deja, et le volume entre dans le champ. Le reste se parcourt au doigt comme avant. Cible restreinte a .kwtable : les tableaux de l'etude et de la methodologie n'ont pas de colonne de texte long et n'ont rien a y gagner. */ .kwtable{ min-width:560px; } .kwtable td.kw, .kwtable thead th:first-child{ width:40%; } /* MOT-CLE SUR UNE SEULE LIGNE Une fois l'icone Google sortie du flux, deux mots-cles sur cinquante seulement demandaient encore deux lignes - assez pour que le tableau paraisse irregulier, trop peu pour justifier de les couper. Le nowrap les ramene sur une ligne et la colonne passe de 224 a 251 px, absorbes par les autres colonnes : la largeur du tableau ne bouge pas. Le max-width est en PIXELS, et c'est la seule forme qui marche : en pourcentage il se resout sur la largeur du tableau, qui grandit avec la colonne - la contrainte se mord la queue et ne borne rien. Mesure faite : avec un pourcentage, un mot-cle de 70 caracteres emmenait le tableau a 867 px ; avec 280 px, il s'arrete a 582 et se termine en points de suspension. Aucun mot-cle de la page n'y touche aujourd'hui. */ .kwtable td.kw{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:280px; } .kwtable tbody td{ font-size:14.5px; padding:11px 6px; } .kwtable thead th{ padding:0 6px 12px; font-size:11.5px; letter-spacing:.06em; } /* LE FORMULAIRE DE FILTRES SUR TELEPHONE Les champs ont des largeurs fixes - 172 px pour les saisies, 134 pour les listes, 238 pour "Presence AIO". Sur un ecran etroit, flex-wrap les empilait comme il pouvait : deux champs sur une ligne, un seul sur la suivante, des trous partout, et une hauteur de formulaire qui poussait le tableau hors de l'ecran. Deux par ligne, donc, en laissant tomber les largeurs fixes. "Presence AIO" garde la ligne entiere : c'est le seul filtre dont les libelles sont des phrases - "Ordinateur ou mobile async" - et a demi-largeur ils se feraient tronquer par le selecteur natif. */ .filters{ gap:10px; } .filters .field{ flex:1 1 calc(50% - 5px); min-width:0; } .filters .field.wide{ flex-basis:100%; } .filters .field input, .filters .field select, .filters .field.wide select{ width:100%; min-width:0; } /* Les deux boutons passent a la ligne du dessous et la remplissent, moities egales. Le flex-grow fait le reste quand "Effacer" est absent : "Filtrer" prend alors toute la largeur au lieu de rester seul a gauche. */ .filters .btn{ flex:1 1 calc(50% - 5px); box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; padding:13px 18px; text-align:center; } /* "Effacer" est un borde, "Filtrer" un