` le meme jour ; les deux ne se separent pas. */ /* ⚠ L'ETAT OUVERT EST LE DEFAUT, ET LE REPLI EST L'EXCEPTION. Cette polarite n'est pas un gout : elle est ce qui rend la pilule utilisable SANS JavaScript. `

` porte `open` en permanence (voir `_lang_switch.html`), donc sans JS les langues sont toutes visibles en ligne — le comportement d'avant la pilule, qui marchait. C'est le JS qui pose `aria-expanded="false"` et REPLIE. Le repli se lit sur le declencheur, la ou ARIA veut l'etat d'un controle de divulgation, et `:has()` le remonte au conteneur. Une SEULE source d'etat, lue par tout le monde. */ .gk-langpill-opts { display: grid !important; grid-template-columns: 1fr; content-visibility: visible !important; padding-left: 2px; transition: grid-template-columns var(--gk-duration, 180ms) var(--gk-ease, cubic-bezier(.4, 0, .2, 1)), padding-left var(--gk-duration, 180ms) var(--gk-ease, ease); } .gk-langpill:has(> .gk-langpill-trigger[aria-expanded="false"]) .gk-langpill-opts { grid-template-columns: 0fr; padding-left: 0; } /* La piste : c'est elle qu'on coupe pendant que la colonne grandit. `min-width: 0` est obligatoire — sans lui la piste refuse de descendre sous sa largeur min-content et la pilule reste ouverte a l'arret. */ .gk-langpill-track { display: flex; align-items: center; gap: 2px; overflow: hidden; min-width: 0; } .gk-langpill-seg { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 24px; padding: 0 8px; border-radius: 999px; text-decoration: none; white-space: nowrap; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--text3, #64748b); /* État DÉPLIÉ — le défaut, même polarité que le conteneur au-dessus et pour la même raison : sans JS, les segments doivent être lisibles. */ opacity: 1; transform: translateX(0); transition: opacity var(--gk-duration-fast, 120ms) var(--gk-ease, ease-out), transform var(--gk-duration-fast, 120ms) var(--gk-ease, ease-out), background var(--gk-duration-fast, 120ms) ease-out, color var(--gk-duration-fast, 120ms) ease-out; } .gk-langpill:has(> .gk-langpill-trigger[aria-expanded="false"]) .gk-langpill-seg { opacity: 0; transform: translateX(-6px); } /* LE DÉCALÉ vit maintenant dans le VOCABULAIRE — `.gk-stagger` + `.gk-stagger-item`, `gateka.css` §C — et plus ici. (Étape 3 de la consultation …-eb82be, qui en fait son test d'acceptation : « si le vocabulaire ne sait pas exprimer le SEUL mouvement que le chrome expédie aujourd'hui, le vocabulaire est mal conçu ». Il le sait ; c'est cette suppression qui le prouve.) Ce qui a été déplacé sans changer d'un millième : le rang `--i` posé par le gabarit (une règle valable pour DEUX langues comme pour six — owner 2026-08-15 : « i want to have the same animation »), et sa BORNE `min()` à deux pas, sans laquelle le coût du dépliage est celui du DERNIER segment et grandit avec le nombre de langues (250 ms à trois, 440 à six, et aucun nombre de la règle au-dessus de 200 — §D5). La remise à zéro sous `prefers-reduced-motion` a suivi le décalé : le reset universel annule les DURÉES, pas les DÉLAIS, donc elle doit vivre là où le délai est déclaré. `_lang_switch.html` lie `gateka.css` pour que ce partiel emporte son vocabulaire chez les en-têtes sur mesure — `artsiderz.fr` liait `gk-nav.css` et PAS `gateka.css`, mesuré le 2026-08-15. */ .gk-langpill-seg:hover, .gk-langpill-seg:focus-visible { background: var(--surface, #fff); color: var(--text, #0f172a); } .gk-langpill-seg:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 1px; } /* LE DEMI-TOUR du globe à l'ouverture — l'accusé de réception du clic. */ .gk-langpill-globe { transition: transform var(--gk-duration, 180ms) var(--gk-ease, ease-out); } .gk-langpill:has(> .gk-langpill-trigger[aria-expanded="true"]) .gk-langpill-globe { transform: rotate(180deg); } /* ── La moitié « sortie » ──────────────────────────────────────────────── Le changement de langue est une NAVIGATION (cookie + 303, i18n serveur — `gk_base.html:255`, ADR-0038 §3). Rien ne survit au chargement, donc une timeline unique est impossible : le mouvement se joue en deux moitiés. ⚠ CE BLOC A ÉTÉ ÉCRIT SUR UNE HYPOTHÈSE FAUSSE, et il n'a jamais rien montré. Elle était écrite ici même : « les ~150 ms de latence réseau suffisent à voir le geste », donc on ne retardait pas le lien. Mais cette latence n'est pas du temps de RENDU : un clic sur un lien démarre la navigation immédiatement et le navigateur cesse de peindre. Les transitions posées au clic n'avaient donc pas une seule image. Owner 2026-08-15 : « when the language is selected […] no effect happen, a lag then a full reload of the page happen ». Le retard qu'on refusait d'ajouter, l'utilisateur le subissait déjà — et sans rien voir. `gk-nav.js` tient maintenant la navigation ~170 ms et la relance lui-même. C'est un coût RÉEL et assumé : on dépense du temps mort pour en faire un accusé de réception. Sous `prefers-reduced-motion`, on ne le dépense pas — le lien part tout de suite. ⚠ `.is-switching` doit BATTRE la règle d'ouverture du globe. Celle-ci est passée à `:has()` le même jour et pèse (0,4,0) ; sans le `.gk-langpill` en tête, ce sélecteur-ci pesait (0,3,0) et le globe restait bloqué à 180°. Une régression que rien n'aurait signalée. */ /* ⚠ PENDANT LA BASCULE, LES SEGMENTS S'EFFACENT. Owner 2026-08-15, capture a l'appui : « i expect a more subtile effect and not this double english stuff ». Le doublon etait le mien : au clic, le rouleau ecrit deja le nouveau code dans la pastille, PENDANT que le segment cliqué reste affiche — et je le peignais meme en accent avec un agrandissement, donc deux « EN » cote a cote pendant les 170 ms de retenue. On annoncait deux fois la meme chose, plus fort a chaque fois. Le choix est deja dit par le rouleau, qui le nomme dans la pastille. Les segments n'ont donc plus rien a dire : ils se retirent. Un seul message a la fois. ⚠ `max-width: 0` en plus de l'opacite : sans lui, la pilule garderait la largeur de ses segments effaces et se contracterait d'un coup au chargement suivant. */ /* ⚠ Les deux durées lisent le JETON, pas un nombre. Elles ont été écrites `150ms` et `110ms` le 2026-08-15 et faisaient rougir `test_operational_stylesheets_use_the_tokens_not_literals` — une porte partagée, donc `cs done` bloqué pour TOUTE molécule touchant gateka-core, pas seulement pour celle qui a écrit le nombre. Elles retombent sur `--gk-duration-fast` (120 ms) et non sur `--gk-duration` (180 ms) : la retenue de `gk-nav.js` est de ~170 ms, et une sortie de 180 ms ne finirait jamais avant que la page parte. Aucun raisonnement n'était attaché au 150/110 — c'était « un peu moins que 170 ». Le jeton dit la même chose, en un seul endroit. */ .gk-langpill.is-switching .gk-langpill-opts { grid-template-columns: 0fr; padding-left: 0; transition-duration: var(--gk-duration-fast, 120ms); } .gk-langpill.is-switching .gk-langpill-seg { opacity: 0; transition-duration: var(--gk-duration-fast, 120ms); } /* Le globe fait un demi-tour de plus, pas un tour complet : il PROLONGE celui de l'ouverture au lieu de repartir de zero. Un tour entier en 170 ms se lisait comme un sursaut. */ .gk-langpill.is-switching:has(> .gk-langpill-trigger) .gk-langpill-globe { transform: rotate(270deg); } /* ── LE ROULEMENT DU CODE — l'effet que l'owner demande sur le texte ───── Le code courant part vers le haut pendant que le code choisi arrive par le bas. C'est l'accusé de réception : il dit CE QUI a été choisi, pas seulement « quelque chose s'est passé ». Deux enfants empilés dans un rouleau, le second posé par `gk-nav.js` au clic. `-50%` et non une hauteur en pixels : le rouleau fait exactement deux lignes, donc la moitié est toujours la bonne, quelle que soit la taille de police héritée. */ .gk-langpill-code { display: inline-block; overflow: hidden; height: 1em; line-height: 1em; vertical-align: bottom; } .gk-langpill-roll { display: block; transition: transform var(--gk-duration, 180ms) var(--gk-ease, cubic-bezier(.4, 0, .2, 1)); } .gk-langpill-roll > span { display: block; height: 1em; line-height: 1em; } .gk-langpill.is-switching .gk-langpill-roll { transform: translateY(-50%); } /* ── La moitié « entrée » ──────────────────────────────────────────────── Jouée au chargement de la nouvelle page : la pastille arrive. Les deux demi-tours se rejoignent, donc un tour complet perçu. */ @keyframes gk-langpill-arrive { from { transform: scale(.86); opacity: .5; } 60% { transform: scale(1.05); opacity: 1; } to { transform: scale(1); opacity: 1; } } .gk-langpill-trigger { animation: gk-langpill-arrive var(--gk-duration, 180ms) var(--gk-ease, cubic-bezier(.34, 1.56, .64, 1)) both; } /* Une préférence système, pas une option esthétique. Tout tombe — et le dépliage reste FONCTIONNEL, juste instantané. */ @media (prefers-reduced-motion: reduce) { .gk-langpill-seg, .gk-langpill-globe, .gk-langpill-opts, .gk-langpill-track, .gk-langpill-roll, .gk-langpill { transition: none !important; } /* Le `transition-delay: 0ms !important` du décalé est parti avec lui, dans le bloc `prefers-reduced-motion` de `gateka.css` §C — une seule adresse pour une seule notion. */ .gk-langpill-trigger { animation: none; } } @media (max-width: 640px) { /* ⚠ `.gk-langpill .gk-langpill-globe` (0,2,0) et non `.gk-langpill-globe` (0,1,0). FontAwesome déclare `.fa-solid { display: var(--fa-display, inline-block) }` à la MÊME spécificité : à égalité, c'est l'ordre source qui tranche, et une media-query n'ajoute rien au calcul. Mesuré le 2026-08-15 par CDP getMatchedStylesForNode, à 390 px, page authentifiée : sur `beta.gateka.fr` cette règle gagne et le globe disparaît comme prévu ; sur `beta.artsiderz.fr` le globe RESTE peint, parce que `features.html:14` lie FontAwesome une SECONDE fois, après `gk-nav.css` — l'en-tête sur mesure d'Artsiderz l'avait déjà lié ligne 21. La règle était identique, la cascade non. Monter la spécificité rend la déclaration robuste à l'ordre de chargement, ce qu'aucun produit ne contrôle. Chasser les doublons de produit par produit corrigerait CETTE page et laisserait la suivante casser : `gateka.style.css_link()` existe, son équivalent FontAwesome n'existe pas — c'est une tâche à part, pas ce lot. */ .gk-langpill .gk-langpill-globe { display: none; } .gk-langpill-seg { min-width: 26px; padding: 0 6px; } } /* ── LE MOT DE LA MARQUE EN PARTICULES (Gateka uniquement) ──────────── Owner 2026-08-18 : « please do something better here » (capture de l'en-tête). Le mot-symbole de l'accroche est fait de briques depuis ce matin ; celui de la barre restait un `` en dégradé. Deux langages visuels pour une même marque, à 200 px l'un de l'autre. ⚠ CETTE CLASSE N'EXISTE QUE DANS LE `brand_html` DE GATEKA (packages.yaml). Les autres produits gardent leur marque : rien ici ne s'applique à eux, et ce fichier est partagé par les dix-huit. ⚠ LE TEXTE DE REPLI EST LA RÈGLE, LE CANVAS EST LE BONUS. Tant que le script n'a pas construit de particules, c'est « Gateka » qui s'affiche — sans JS, sans canvas, police non chargée. La classe `gk-mot-pret` est posée par le script APRÈS échantillonnage. Une marque de navigation ne peut pas dépendre d'un effet. Une fois prêt, le repli passe en masquage ACCESSIBLE et non en `display:none` : le canvas est `aria-hidden`, donc c'est ce texte qui porte le nom du lien pour un lecteur d'écran. */ /* ⚠ LE MOT EST PLUS GRAND ICI QUE LE TEXTE DE LA BARRE, et c'est ce qui rend la brique lisible. Owner 2026-08-18 : « remove the G. you can pick a lower definition bricks here, otherwise it is not readable ». Le raisonnement tient en une division. À 20 px, la hauteur de capitale fait ~14 px ; un pas de 2 px donne SEPT rangées pour dessiner une lettre, et sept rangées d'un échantillonnage (pas d'une fonte pensée pour ça) rendent une bouillie. Grossir la brique SANS grossir le mot aggrave : on passe à cinq rangées. Retirer le « G » libère ~44 px : le mot les prend. À 30 px la capitale fait ~21 px, et un pas de .105em (≈3 px) donne toujours sept rangées — mais des rangées de 3 px, franches, au lieu de 2 px empâtés. Même nombre de briques, trois fois la surface : c'est la « lower definition » demandée, et elle se lit. ⚠ LA BARRE NE GRANDIT PAS POUR AUTANT : `--nav-h` vaut 68 px et le mot en occupe ~30. Si tu montes encore la taille, vérifie la hauteur rendue de `.gk-nav-brand` avant de conclure — c'est elle qui pousse. */ .gk-nav-mot{position:relative;display:inline-flex;align-items:center;line-height:1; font-size:30px;letter-spacing:0} .gk-nav-mot canvas{display:none} .gk-nav-mot.gk-mot-pret canvas{display:block} .gk-nav-mot.gk-mot-pret .gk-nav-mot-repli{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} /* ⚠ CETTE RÈGLE EST ICI, APRÈS LA BASE, ET PAS DANS LE BLOC 460 px PLUS HAUT — c'est de l'ORDRE SOURCE, pas de la spécificité. `.gk-nav-mot` de base est déclarée en fin de fichier ; posée dans la media-query de la ligne 305, la version mobile passait AVANT et se faisait écraser par elle. Mesuré : la marque rendait 55 px dans une barre de 60 sur téléphone, exactement comme sur bureau — la règle existait et ne s'appliquait jamais. ⚠ LA BARRE MAIGRIT, LE MOT AUSSI : 68 px de haut sur bureau, 60 sur téléphone. Un mot de 30 px y laisse 2,5 px de jeu de chaque côté, c'est-à-dire qu'il touche presque le bord. */ @media (max-width: 460px) { .gk-nav-mot { font-size: 23px; } } /* ⚠ LA BARRE RÉTRÉCIT AU DÉFILEMENT, LE MOT DOIT SUIVRE. Mesuré après avoir fait défiler la page : la barre passe à 52 px (48 sur téléphone) et la marque en faisait 55 — elle DÉBORDAIT. Le défaut ne se voit qu'une fois la page défilée, donc pas sur une capture du haut de page, et pas davantage au chargement : c'est pour ça qu'il a survécu à trois passes de vérification. `.gk-nav-brand` est verrouillée (voir l'en-tête du fichier) : on ne touche pas à sa règle, on agit sur le mot, qui est à nous. */ /* ⚠ ON MET À L'ÉCHELLE, ON NE CHANGE PAS LA POLICE — et c'est une leçon sur ce canvas. J'ai d'abord écrit `font-size: 24px` ici : mesuré, la marque restait à 55 px. La raison n'est pas la cascade mais le fait que les dimensions du canvas sont FIGÉES À LA CONSTRUCTION (le script lit la police une fois, pose `width`/`height` en pixels, et ne recalcule qu'au redimensionnement de la fenêtre — pas au défilement). Une règle de police sur un canvas déjà peint ne fait rien. `transform: scale()` agit sur le rendu, sans rebâtir : 0.88 ramène les 55 px à 48, ce qui tient dans les 52 px de la barre repliée. Et `transform-origin: left` pour que le mot reste calé à gauche au lieu de glisser vers le centre pendant la transition. */ .gk-nav.is-scrolled .gk-nav-mot canvas{ transform:scale(.88);transform-origin:left center; transition:transform .25s var(--gk-ease, ease)} @media (prefers-reduced-motion:reduce){ .gk-nav.is-scrolled .gk-nav-mot canvas{transition:none} } /* ⚠ LA LIGNE DE MARQUE S'EFFACE AVANT DE DÉBORDER. Elle est la chose la moins importante de la barre : devant elle il y a la marque (identité) et derrière les commandes (langue, thème, connexion). Elle prend donc la place qui reste et disparaît sous 900 px plutôt que de comprimer le reste ou de passer à la ligne. Une barre qui se réorganise pour loger une baseline a inversé ses priorités. */ /* ⚠ CENTRÉE SUR LA BARRE, PAS ENTRE SES VOISINS. Owner 2026-08-18 : « bigger please and centered it ». Posée dans le flux après la marque, elle se centrait dans la place RESTANTE — donc jamais au milieu de l'écran, et le milieu bougeait avec la largeur de la marque et du groupe de commandes. En absolu à 50 %, elle est centrée sur la barre quoi qu'il arrive à ses voisins. ⚠ `pointer-events:none` — elle couvre le centre de la barre. Sans ça, c'est une plaque invisible posée sur tout ce qui s'y trouverait (les liens de navigation, quand on est connecté). Elle est décorative : elle ne doit intercepter aucun clic. Elle disparaît sous 900 px : il n'y a plus de milieu disponible entre la marque et les commandes. */ .gk-nav-baseline{ /* ⚠ ÉLÉMENT DE FLUX, PAS CENTRÉ EN ABSOLU. Centrée sur la BARRE, la phrase ignorait où commencent les boutons : une fois grossie et mise en gras elle s'est étendue jusque SOUS « Nous contacter » — mesuré, elle finissait à x=1014 alors que les commandes commencent à x=946, 68 px de chevauchement, illisible pour les deux. `flex:1` avec `min-width:0` lui donne exactement l'espace laissé libre entre la marque et les commandes, et pas un pixel de plus : le chevauchement devient structurellement impossible, à toute largeur. Elle est centrée dans CET espace plutôt que sur la barre — un très léger décalage, contre une collision garantie. */ flex:1 1 auto;min-width:0;margin:0 20px; pointer-events:none;text-align:center; @keyframes gkReflet{from{background-position:140% 0}to{background-position:-40% 0}} @media (prefers-reduced-motion:reduce){ .gk-nav-baseline{animation:none} } /* ⚠ C'EST LE MESSAGE CLÉ DE LA PAGE, il se peint comme tel. Owner 2026-08-18 : « please put that in bold or something. maybe lovable effect ? this is the key message ». En 15 px / 500 / `--text2` il avait le poids d'une légende, entre une marque et deux boutons — donc la phrase la plus importante du site était la moins visible de la barre. Le dégradé accent → or est celui de la marque (`.gk-gradient`), pas un ornement de plus : la promesse porte les couleurs de qui la fait. ⚠ `-webkit-text-fill-color: transparent` EXIGE que le dégradé peigne vraiment. Si `--gold` venait à manquer sur une surface, le texte deviendrait INVISIBLE plutôt que moche — c'est le piège classique de `background-clip: text`. Les deux teintes sont déclarées dans le thème de cette page ; si tu portes cette règle ailleurs, vérifie-les. */ font-size:17px;font-weight:800;letter-spacing:-.25px;white-space:nowrap; /* ⚠ LE TEXTE RESTE À `--text` ; SEUL UN REFLET PASSE. Owner 2026-08-18, capture Lovable d'une phrase pleine et très contrastée : « on lovable, please try this effect for the header sentence ». Les deux versions précédentes peignaient la phrase ENTIÈRE en couleur de marque — l'or pur d'abord (illisible en thème clair, signalé : « difficult to read »), puis un or assombri : lisible, mais toujours une phrase colorée là où le modèle montre du texte franc. Le contraste ne doit pas être la variable d'ajustement d'un effet. Ici la base est la couleur de texte du thème — donc le contraste maximal, en permanence — et l'accent ne vit que dans une bande étroite traversant la phrase toutes les six secondes. Au repos on lit du texte plein ; le reflet ne fait que ramener l'œil, et aucune position de l'animation ne descend sous la lisibilité. ⚠ `-webkit-text-fill-color:transparent` exige que le dégradé peigne vraiment : ses trois arrêts sont `--text` et `--accent`, deux jetons que tout thème Gateka déclare. Sans eux le texte serait INVISIBLE, et non simplement terne — le piège classique de `background-clip:text`. */ /* Cinq arrêts plutôt que trois, et une bande PLUS ÉTROITE sur une piste plus longue (400 %) : la première version faisait passer un large dégradé mou, qui se lisait comme un changement de couleur du texte. Un éclat se reconnaît à son bord net — d'où le cœur accent encadré de deux demi-teintes sur quatre points de pourcentage. L'accélération vient de la courbe, pas d'une durée plus courte : le reflet traverse vite puis la phrase se repose plusieurs secondes. Une brillance qui balaie sans arrêt cesse d'être un événement, et le sens de la phrase passe derrière son animation. */ background:linear-gradient(100deg, var(--text) 44%, color-mix(in srgb, var(--accent) 62%, var(--text)) 48%, var(--accent) 50%, color-mix(in srgb, var(--accent) 62%, var(--text)) 52%, var(--text) 56%); background-size:400% 100%; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:var(--text); animation:gkReflet 5.5s cubic-bezier(.75,0,.25,1) infinite; /* Un halo d'accent très bas, posé sous le texte : il donne du relief à une phrase qui, sans lui, était du gras noir sur fond crème. Il passe par `drop-shadow` et non `text-shadow` — avec un remplissage rendu transparent par `background-clip:text`, `text-shadow` peindrait l'ombre de la BOÎTE et non celle des lettres. Le filtre, lui, suit la forme réellement peinte. Assez faible pour ne rien flouter : c'est un rehaut, pas une lueur. */ filter:drop-shadow(0 1px 5px color-mix(in srgb, var(--accent) 34%, transparent)); /* ⚠ PAS DE `max-width` EN `ch` : la phrase fait ~68 signes et un plafond de 48ch la coupait à TOUTES les largeurs, 1600 px compris. Un plafond arbitraire tronque une promesse dont on ne connaît pas la longueur d'avance — elle change avec la langue et avec la copie. */ max-width:min(60vw, 780px);overflow:hidden;text-overflow:ellipsis; transition:opacity .25s var(--gk-ease, ease)} .gk-nav.is-scrolled .gk-nav-baseline{opacity:.75} /* ⚠ SEUIL À 1360 px, ET IL EST MESURÉ, PAS CHOISI. La phrase réclame 566 px ; l'espace libre entre la marque et les commandes vaut 607 px à 1366 et seulement 521 px à 1280. En dessous de ~1360 elle se coupait donc à l'ellipse — et une promesse tronquée dit moins que pas de promesse : le lecteur en retient une moitié de phrase. Le seuil à 900 px datait de la version longue, qui ne tenait de toute façon nulle part sous 1500 px ; il laissait passer précisément les largeurs où le texte est coupé. À refaire si la phrase change : c'est `besoin` qu'on mesure, jamais un nombre rond qui fait joli. */ @media (max-width: 1360px){ .gk-nav-baseline{display:none} } /* ⚠ L'APPEL À L'ACTION DE LA BARRE. Il porte la couleur pleine : c'est le seul de la page depuis que la rangée du héros a disparu, et un bouton d'action qui ressemble aux réglages autour de lui n'est plus un bouton d'action. ⚠ LE LIBELLÉ TOMBE AVANT LE BOUTON. Sous 1100 px il ne reste que l'icône — la barre garde son geste sans écraser la marque ni les commandes. Le disparaître entièrement priverait le téléphone du seul appel à l'action ; c'est le texte qui cède, jamais la cible. */ .gk-nav-cta{ display:inline-flex;align-items:center;gap:8px; padding:9px 16px;margin-right:6px;border-radius:var(--radius, 14px); background:var(--accent);color:#fff;text-decoration:none; font-size:13.5px;font-weight:600;white-space:nowrap; box-shadow:0 3px 14px var(--accent-glow); transition:transform .2s var(--gk-ease, ease),box-shadow .2s var(--gk-ease, ease),background .2s} .gk-nav-cta:hover{background:var(--accent-hover);transform:translateY(-1px); box-shadow:0 6px 20px var(--accent-glow)} .gk-nav-cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px} @media (max-width: 1100px){ .gk-nav-cta span{display:none} .gk-nav-cta{padding:9px 11px} } @media (prefers-reduced-motion:reduce){ .gk-nav-cta:hover{transform:none} } /* « Nous contacter » — le SECOND geste de la barre, donc en retrait du premier : contour plutôt que fond plein. Deux boutons pleins côte à côte ne se hiérarchisent plus, et c'est le rendez-vous qui doit gagner. */ .gk-nav-contact{ display:inline-flex;align-items:center;gap:7px; padding:8px 14px;margin-right:8px;border-radius:var(--radius, 14px); background:transparent;color:var(--text2);cursor:pointer; border:1px solid var(--border2, var(--border)); font-size:13.5px;font-weight:600;white-space:nowrap;font-family:inherit; transition:border-color .2s var(--gk-ease, ease),color .2s var(--gk-ease, ease)} .gk-nav-contact:hover{border-color:var(--accent);color:var(--accent)} .gk-nav-contact:focus-visible{outline:2px solid var(--accent);outline-offset:3px} @media (max-width: 1240px){ .gk-nav-contact span{display:none} .gk-nav-contact{padding:8px 11px} } /* ⚠ HAUTEUR IMPOSÉE, PAS DÉDUITE DU REMPLISSAGE. Owner 2026-08-18 : « can you harmonize the buttons sizes please ». Les deux boutons avaient un remplissage vertical équivalent au pixel près (9 px contre 8 px + 1 px de bordure) — et pourtant 39,6 px contre 34 px à la mesure. L'écart vient de la hauteur de ligne des glyphes : l'un porte une icône vidéo, l'autre une enveloppe, et leurs boîtes n'ont pas la même hauteur intrinsèque. Calculer la hauteur à partir du contenu, c'est la laisser dépendre de l'icône qu'on y met. Une hauteur déclarée rend les deux boutons égaux quel que soit leur contenu — et le prochain bouton ajouté ici sera juste par défaut. Les commandes en icône seule partagent un second palier, plus discret. */ .gk-nav-cta,.gk-nav-contact{height:38px;padding-top:0;padding-bottom:0; box-sizing:border-box;justify-content:center} .gk-nav-btn{height:34px;box-sizing:border-box; display:inline-flex;align-items:center;justify-content:center}