/* AM HUB — page d'accueil. Point 7 : état 0 et surfaces de navigation. * Portée strictement limitée à `.am-home .hero` : rien ici ne peut déborder sur le reste * du site. Aucune règle ne redéfinit une taille de police hors des tokens validés. */ /* ── Micro-actions : 3ᵉ niveau de hiérarchie, en pills discrètes (07.08.2026) ── * * Hiérarchie voulue, du plus fort au plus faible : * 1. « Demander un dépannage » — plein blanc, 16/700, 300×50, radius 13 * 2. « Découvrir la boutique » — contour net, 16/700, 300×50, radius 13 * 3. ces trois micro-actions — pill translucide, 13.5/400, 35px, radius plein * * Le rayon PLEIN (999px) est délibérément différent du rayon 13px des deux CTA : c'est ce * qui empêche une pill d'être lue comme « un troisième gros bouton ». Elle appartient * visiblement à une autre famille de contrôle — la même que les puces du panneau HUB. * * ⚠️ Aucun chevron. Un chevron qui n'apparaît qu'au survol change la largeur de la pill et * décale ses voisines à chaque passage de souris. La forme en pill porte déjà l'affordance ; * on ne paie pas un reflow pour un ornement. */ .am-home .hero .am-hub-entries{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; margin:56px 0 0;padding:0;list-style:none; /* respiration CTA → micro-actions */ } .am-home .hero .am-hub-entries li{display:flex;align-items:center} /* Pictogramme : même couleur que le libellé, à peine estompé. Taille fixe pour que le texte * reste le repère principal — l'icône accompagne, elle n'annonce pas. */ .am-home .hero .am-hub-entry__ic{ display:inline-flex;width:14px;height:14px;flex:0 0 14px;opacity:.68; } .am-home .hero .am-hub-entry__ic svg{width:100%;height:100%;display:block} .am-home .hero .am-hub-entry:hover .am-hub-entry__ic{opacity:1} .am-home .hero .am-hub-entry{ display:inline-flex;align-items:center;justify-content:center;gap:8px; height:35px;padding:0 16px;border-radius:999px; border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04); font:400 13.5px/1 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; color:#d2d2d9;text-decoration:none;cursor:pointer;white-space:nowrap; transition:background-color .16s ease,border-color .16s ease,color .16s ease; } /* Survol volontairement ténu : on éclaircit, on n'agrandit pas et on ne déplace rien. */ .am-home .hero .am-hub-entry:hover{ background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.34);color:#fff; } .am-home .hero .am-hub-entry:focus-visible{outline:2px solid #fff;outline-offset:3px} /* ── Panneau du HUB : occupe la place du bloc d'accueil, dans la MÊME enveloppe ── * * ENVELOPPE 1320px. Ce n'est pas une valeur inventée : `.am-home .wrap` fait 1368px de large * avec 24px de gouttière, soit exactement 1320px de contenu utile. Le HUB s'aligne donc sur la * grille du site, il n'en crée pas une seconde. Le `max-width` est explicite pour que l'intention * survive à un éventuel élargissement du .wrap. * * ⚠️ 1320px est une ENVELOPPE, pas une consigne d'étirement. Les champs sont plafonnés * individuellement plus bas (`--am-hub-champ`) : c'est la COMPOSITION qui respire, pas chaque * composant qui s'allonge. */ .am-home .hero .am-hub{--am-hub-champ:420px;width:100%;max-width:1320px} /* ── Enveloppe FIGÉE : le HERO ne doit sauter NI à l'ouverture, NI entre les étapes ── * * Le HERO vaut `max(560px, hauteur du .wrap)`, et le .wrap vaut `panneau + 78px + 78px`. * Deux sauts distincts en découlaient : * · entre étapes — le panneau variait de 249 à 426px (amplitude 177px desktop) ; * · à l'ouverture — 430 + 156 = 586px contre 560px fermé, soit +26px. * * On traite les deux : on réserve la hauteur du plus haut écran (dépannage / coordonnées), * ET on réduit le padding vertical du .wrap PENDANT que le panneau est ouvert, pour que * `panneau + 2 × padding` retombe exactement sur les 560px du HERO fermé. * desktop : 453 + 2 × 53 = 559 → saut nul * tablette: 447 + 2 × 53 = 553 → sous les 560px, donc saut nul aussi * * ⚠️ UNE EXCEPTION ASSUMÉE : le VERDICT de l'aide au diagnostic. Sa hauteur dépend de la * longueur de la réponse du moteur, que nous ne maîtrisons pas (mesuré : 439px desktop, * 497 tablette, 821 mobile pour un même cas). Le plancher desktop est calé dessus ; sur les * paliers plus étroits, un verdict long fait grandir le HERO à l'arrivée du résultat. * C'est délibéré : tronquer une explication technique serait pire qu'un HERO plus haut, et * il s'agit d'une ARRIVÉE sur un résultat, pas d'un saut entre deux étapes de formulaire. * * Le panneau n'ayant NI fond NI bordure, la hauteur réservée en trop est de l'espace * transparent sur la photo : invisible, et non une boîte vide. * * ⚠️ Ces `min-height` ne concernent QUE l'état ouvert : le panneau est `hidden` quand le HUB * est fermé, donc il ne pousse jamais rien sur la page d'accueil au repos. */ .am-home .hero .am-hub{min-height:453px} .am-home .hero.is-hub .wrap{padding-top:53px;padding-bottom:53px} .am-home .hero .am-hub__bar{ display:flex;align-items:center;gap:14px; margin:0 0 16px;padding-bottom:11px;border-bottom:1px solid rgba(255,255,255,.14); } .am-home .hero .am-hub__nav{ display:inline-flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer; font:400 13.5px/1.2 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; color:#9a9aa4;padding:3px 0;transition:color .16s ease; } .am-home .hero .am-hub__nav::before{ content:"";width:6px;height:6px;flex:0 0 6px; border-top:1.5px solid #6f6f79;border-right:1.5px solid #6f6f79; transform:rotate(-135deg); /* Retour : le chevron suit le sens du geste */ transition:transform .16s ease,border-color .16s ease; } .am-home .hero .am-hub__nav:hover{color:#e6e6ea} .am-home .hero .am-hub__nav:hover::before{transform:translateX(-3px) rotate(-135deg);border-color:#b6b6bd} .am-home .hero .am-hub__nav--fin{margin-left:0} .am-home .hero .am-hub__nav--fin::before{transform:rotate(45deg)} .am-home .hero .am-hub__nav--fin:hover::before{transform:translateX(3px) rotate(45deg)} .am-home .hero .am-hub__nav:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:2px} /* Sur une barre large, le repère d'étape se CENTRE entre « Retour » et « Fermer » plutôt que * de se coller à droite : il devient le point d'ancrage du parcours. */ .am-home .hero .am-hub__step{ flex:1;text-align:center; font:400 11px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:1.3px;text-transform:uppercase;color:#8f8f98; } .am-home .hero .am-hub__titre{ font:800 26px/1.15 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; letter-spacing:-.4px;color:#fff;margin:0 0 6px; } /* ⚠️ Pas de contour sur le titre. Il porte `tabindex="-1"` : il n'est PAS atteignable au * clavier, il reçoit seulement le focus par programme à chaque étape pour que les lecteurs * d'écran annoncent le nouvel écran. Chrome dessinait quand même un cadre blanc autour du * titre — un artefact, pas une aide : personne ne peut « tabuler » jusque-là. */ .am-home .hero .am-hub__titre:focus, .am-home .hero .am-hub__titre:focus-visible{outline:none} /* Le texte d'accroche ne suit PAS l'enveloppe : au-delà d'une soixantaine de caractères par * ligne, l'œil perd le début de la ligne suivante. L'espace gagné va à la composition, pas à * l'allongement des phrases. */ .am-home .hero .am-hub__lead{ font:400 13.5px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; color:#a9a9b2;margin:0;max-width:62ch; } /* ══════════════ MORPHING HERO ⇄ HUB ══════════════ * * Le HERO ne se remplace pas, il se TRANSFORME. L'image de fond ne bouge pas : seuls les deux * contenus se croisent — l'état 0 s'efface vers le haut, le panneau monte depuis le bas. * * ⚠️ COUCHE DE PRÉSENTATION UNIQUEMENT. Rien ici ne pilote la navigation : la machine change * d'état au clic, immédiatement, et ces règles ne font que suivre la classe `is-hub` et * l'attribut `hidden` qu'elle produit. Aucun `setTimeout`, donc aucune désynchronisation * possible entre ce qu'on voit et ce que la machine croit. * * ⚠️ POURQUOI `position:absolute` ET NON `display:none` : un `display:none` ne s'anime pas. * Le contenu qui SORT passe hors flux le temps du fondu — c'est ce qui garde la hauteur * extérieure stable et évite tout décalage de la page. */ /* ⚠️ UN SEUL MOUVEMENT, CONTINU. * * Deux essais avant celui-ci, et les deux étaient perceptibles : * · fondu CROISÉ à la même position → on lisait deux jeux de boutons superposés ; * · fondu ENCHAÎNÉ (sortie puis entrée) → un creux au milieu, lu comme une saccade. * * La solution n'est ni l'un ni l'autre : les deux couches se croisent EN MÊME TEMPS, mais à des * hauteurs différentes. À mi-parcours elles sont séparées d'une cinquantaine de pixels — donc * aucune superposition de boutons — et il n'y a jamais de trou, donc aucune saccade. * C'est l'écartement, pas le décalage temporel, qui règle le problème. */ .am-home .hero{ --am-hub-sortie:430ms; --am-hub-entree:430ms; --am-hub-duree:430ms; --am-hub-ease:cubic-bezier(.22,.61,.36,1); } /* La couche VISIBLE apparaît tout de suite ; la couche qui s'efface ne quitte l'arbre * d'accessibilité qu'À LA FIN du fondu — d'où le délai sur `visibility`. Sans cela, le * `display:block` que nous imposons à `[hidden]` remettrait le panneau dans le champ des * lecteurs d'écran alors qu'il est invisible à l'œil. */ /* Promotion en calque UNIQUEMENT pendant la transition : au repos, le texte doit être rendu * normalement (un calque promu en permanence l'adoucit et brouille les petites tailles). */ .am-home .hero.am-hub-anime .am-hub-etat0, .am-home .hero.am-hub-anime .am-hub{will-change:opacity,transform} /* Couche ENTRANTE : elle attend que l'autre soit partie. */ .am-home .hero .am-hub-etat0, .am-home .hero.is-sel .am-hub-sel, .am-home .hero.is-hub:not(.is-sel) .am-hub{ visibility:visible;position:static;opacity:1;transform:none;pointer-events:auto; transition:opacity var(--am-hub-entree) var(--am-hub-ease) 0s, transform var(--am-hub-entree) var(--am-hub-ease) 0s, visibility 0s linear 0s; } /* ── État 0 visible (HUB fermé) : le panneau attend hors flux, sous le contenu ── * * ⚠️ LA VISIBILITÉ EST PILOTÉE PAR `.is-hub`, PAS PAR `[hidden]`. * Mesuré : la première image de la transition coûtait 41 ms (dépannage) à 72 ms (boutique, * 30 cartes) parce que le contenu était construit ET mis en page dans l'image même où * l'animation démarrait — l'animation perdait ses premières images, d'où la saccade. * En dissociant les deux, le contenu peut être bâti pendant que le panneau est encore * invisible, et l'animation ne commence qu'à l'image suivante, sur un terrain déjà calculé. * `[hidden]` reste posé (sémantique, lecteurs d'écran) mais ne décide plus de l'apparence. */ .am-home .hero .am-hub{ display:block;position:absolute;top:0;left:0;right:0; opacity:0;transform:translateY(26px);pointer-events:none; visibility:hidden; transition:opacity var(--am-hub-sortie) var(--am-hub-ease) 0s, transform var(--am-hub-sortie) var(--am-hub-ease) 0s, visibility 0s linear var(--am-hub-sortie); } /* ── HUB ouvert : l'état 0 s'efface vers le haut, hors flux ── */ .am-home .hero.is-hub .am-hub-etat0{ position:absolute;top:0;left:0;right:0; opacity:0;transform:translateY(-30px);pointer-events:none; visibility:hidden; transition:opacity var(--am-hub-sortie) var(--am-hub-ease) 0s, transform var(--am-hub-sortie) var(--am-hub-ease) 0s, visibility 0s linear var(--am-hub-sortie); } /* Le titre du HERO reste masqué en dur : voir le `!important` subi plus bas. */ /* ── Mouvement réduit : plus de translation, un fondu très court ── */ @media (prefers-reduced-motion:reduce){ .am-home .hero{--am-hub-sortie:60ms;--am-hub-entree:60ms;--am-hub-duree:120ms} .am-home .hero .am-hub[hidden], .am-home .hero.is-hub .am-hub-etat0{transform:none} } /* ── Voile renforcé PENDANT un parcours ── * * Le voile du HERO est un dégradé horizontal calculé pour un contenu cantonné à GAUCHE : * il tombe à 0 % d'opacité dès 92 % de la largeur. Tant que le panneau faisait 660px, personne * n'atteignait cette zone. Avec l'enveloppe 1320px, « Fermer » et les dernières puces se * retrouvent sur la photo nue — mesuré à 2,5:1, très en dessous du seuil AA de 4,5:1. * * On relève donc le PLANCHER du voile sans en changer la nature : le dégradé garde sa * progression gauche→droite (la profondeur du HERO est conservée), mais ne descend plus sous * 74 %. La photo reste visible à travers ; elle n'est ni remplacée, ni masquée. * Uniquement dans `.is-hub` : le HERO public n'est pas touché. */ /* ── Renforcement du voile : un CALQUE dont on anime l'OPACITÉ ── * * ⚠️ On n'interpole PLUS le dégradé du voile d'origine. Animer une propriété `background` * impose au navigateur de repeindre toute la surface du HERO à chaque image — sur un écran * Retina, c'est exactement ce qui produit une saccade. Une opacité, elle, est traitée par le * compositeur : aucun repaint. * * Le calque s'intercale entre l'image (z-index 0) et le contenu (z-index 2). Il ne fait * qu'AJOUTER de l'ombre à droite, là où le voile d'origine tombe à zéro. */ .am-home .hero::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0; background:linear-gradient(90deg,rgba(10,10,10,0) 0%,rgba(10,10,10,.30) 42%,rgba(10,10,10,.62) 72%,rgba(10,10,10,.74) 100%); transition:opacity var(--am-hub-duree) var(--am-hub-ease); } .am-home .hero.is-hub::after{opacity:1} /* ⚠️ SEUL `!important` de ce fichier, et il est subi, pas choisi. * `am-home.css` pose `.am-home .hero h1.am-h2-title{display:block!important}` — une règle * défensive destinée à empêcher Divi de masquer le H1. Aucune spécificité ne peut battre un * `!important` : il faut en opposer un. Portée au strict minimum (uniquement `.is-hub`, donc * uniquement quand le panneau est ouvert) ; la page publique n'est jamais concernée. * Sans cela, le grand titre du HERO reste affiché AU-DESSUS du panneau et entre en concurrence * avec le titre de l'étape en cours. */ .am-home .hero.is-hub h1.am-h2-title{display:none!important} /* ── Paliers responsive : les TROIS points de rupture officiels, pas un de plus ── */ @media (max-width:980px){ .am-home .hero .am-hub{min-height:447px} /* plus haut écran de formulaire en tablette */ /* Le HERO fermé mesure 567px sur ce palier (56px de respiration sous les CTA) : 447 + 2 × 60 = 567 → l'ouverture ne décale rien. */ .am-home .hero.is-hub .wrap{padding-top:60px;padding-bottom:60px} .am-home .hero .am-hub__titre{font:800 23px/1.18 Inter,system-ui,sans-serif;letter-spacing:-.3px} } @media (max-width:600px){ /* Quatre pills sur une ligne seraient illisibles sur un téléphone, et une colonne de quatre leur donnerait l'allure de quatre boutons — exactement ce qu'on évite. Grille 2 × 2 : la rangée reste secondaire et chaque cible garde une largeur confortable. Hauteur portée à 40px : confort du pouce, sans toucher à la taille du texte. */ /* Mobile : l'écran le plus haut (dépannage, 13 puces d'appareil) mesure 630px et ne peut pas tenir dans les 614px du HERO fermé — le contenu est ce qu'il est. On fait donc les deux choses possibles : figer TOUS les écrans à la même hauteur pour supprimer les sauts entre étapes, et resserrer le padding pendant l'ouverture pour réduire l'écart restant. */ .am-home .hero .am-hub{min-height:630px} /* ══════════════ GARANTIE de la hauteur figée, et non simple souhait ══════════════ * ⚠️ MESURÉ le 08.08.2026 : une réponse de diagnostic de 958 caractères portait le panneau à * 818px et le HERO de 678 à 866px — la hauteur figée sautait, et le bas du panneau débordait * sous la photo. Le cadrage serveur raccourcit désormais la réponse, mais un cadrage ne se * VÉRIFIE pas : `max-height` égal au `min-height` rend la hauteur arithmétiquement constante, * quel que soit le contenu. Ce qui dépasse défile DANS le corps, la barre Retour/Fermer restant * toujours atteignable. `overscroll-behavior` empêche le geste de se propager à la page. */ .am-home .hero .am-hub{max-height:630px;display:flex;flex-direction:column} .am-home .hero .am-hub__corps{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain} .am-home .hero.is-hub .wrap{padding-top:24px;padding-bottom:24px} /* « DÉPANNAGE · ÉTAPE 1 SUR 3 » passait sur deux lignes et venait toucher Retour/Fermer. On retire le NOM DU PARCOURS, redondant avec le titre affiché juste en dessous ; il reste « ÉTAPE 1 SUR 3 ». Ni la taille (11px) ni l'interlettrage du MASTER ne sont touchés. */ .am-home .hero .am-hub__step-nom{display:none} .am-home .hero .am-hub-entries{ display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:34px; } .am-home .hero .am-hub-entries li{display:block} .am-home .hero .am-hub-entry{ height:40px;padding:0 12px;width:100%;justify-content:flex-start; white-space:nowrap;overflow:hidden; } .am-home .hero .am-hub__titre{font:800 22px/1.2 Inter,system-ui,sans-serif;letter-spacing:-.2px} } /* ── Mouvement réduit : on supprime le DÉPLACEMENT, jamais la rotation. * Sans elle, les chevrons redeviendraient de simples carrés. ── */ @media (prefers-reduced-motion:reduce){ /* Les pills n'ont aucun déplacement à supprimer : on coupe seulement le fondu de couleur. Les chevrons de navigation, eux, gardent leur ROTATION — sans elle ils redeviendraient de simples carrés ; seul le DÉPLACEMENT est retiré. */ .am-home .hero .am-hub-entry, .am-home .hero .am-hub__nav, .am-home .hero .am-hub__nav::before{transition:none} .am-home .hero .am-hub__nav:hover::before{transform:rotate(-135deg)} .am-home .hero .am-hub__nav--fin:hover::before{transform:rotate(45deg)} } /* ══════════════ Écrans du HUB — points 8 à 12 ══════════════ * Toutes les tailles proviennent de la table Typography Master. Aucune valeur locale. */ /* La grille occupe TOUTE l'enveloppe : c'est elle qui donne l'air. Les champs, eux, sont * plafonnés (voir `.am-hub__saisie`) — une colonne large ne fait pas un champ large. */ .am-home .hero .am-hub__grille{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 24px;margin-top:15px} .am-home .hero .am-hub__champ{min-width:0} .am-home .hero .am-hub__grille > .am-hub__champ:first-child{grid-column:1/-1} /* les puces occupent la ligne */ /* ⚠️ Portée à la GRILLE DES CHAMPS uniquement. Écrite sans le `>` , cette règle s'appliquait * aussi au premier bloc du VERDICT : l'interprétation s'étalait sur les 1320px, soit près de * 160 caractères par ligne — la largeur était utilisée, mais le texte devenait illisible. */ .am-home .hero .am-hub__lab{ font:400 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:1.2px;text-transform:uppercase;color:#8a8a94;margin:0 0 7px; } /* ⚠️ PLAFOND DE CHAMP — le garde-fou de l'enveloppe 1320px. Un champ « Téléphone » de 430px * de large serait absurde : la largeur d'un champ doit évoquer la longueur de ce qu'on y écrit. */ .am-home .hero .am-hub__saisie{ width:100%;max-width:var(--am-hub-champ);height:44px;padding:0 13px;border-radius:10px; border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.03);color:#fff; font:400 15px/1.35 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; } .am-home .hero .am-hub__saisie::placeholder{color:#7d7d87} .am-home .hero .am-hub__saisie:focus-visible{outline:2px solid #fff;outline-offset:2px} .am-home .hero select.am-hub__saisie{appearance:none;padding-right:34px; background-image:linear-gradient(45deg,transparent 50%,#8a8a94 50%),linear-gradient(135deg,#8a8a94 50%,transparent 50%); background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px; background-size:5px 5px,5px 5px;background-repeat:no-repeat; /* ⚠️ WINDOWS — le menu déroulant n'est PAS dessiné par la page, mais par le système, et il * hérite de la couleur du `select` sans en hériter le fond : `color:#fff` posé au-dessus du * fond blanc de Windows rendait la liste ILLISIBLE sur Edge et Chrome (constaté en clientèle). * `color-scheme` prévient le navigateur que cette commande est sombre : il peint alors la * liste native en sombre, y compris sa barre de défilement. macOS ignore la propriété — sa * liste reste dessinée par le système, donc lisible de toute façon. */ color-scheme:dark} /* Ceinture ET bretelles : si `color-scheme` n'est pas honoré, la paire fond+texte l'est. * Les deux sont posées ensemble — n'en poser qu'une reproduirait exactement le défaut. */ .am-home .hero select.am-hub__saisie option{background-color:#17171c;color:#f2f2f5} .am-home .hero .am-hub__puces{display:flex;flex-wrap:wrap;gap:7px} .am-home .hero .am-hub__puce{ border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:7px 14px; background:none;color:#e2e2e7;cursor:pointer;white-space:nowrap; font:400 13.5px/1.2 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; } /* Sélection signalée par le REMPLISSAGE **et** la GRAISSE — jamais par la couleur seule. */ .am-home .hero .am-hub__puce[aria-pressed="true"]{background:#fff;color:#17171c;border-color:#fff;font-weight:600} .am-home .hero .am-hub__puce:focus-visible{outline:2px solid #fff;outline-offset:2px} .am-home .hero .am-hub__recap{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 22px;margin:14px 0 0} .am-home .hero .am-hub__recap div{border-top:1px solid rgba(255,255,255,.14);padding-top:8px} .am-home .hero .am-hub__recap dt{ font:400 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:1.2px;text-transform:uppercase;color:#8a8a94; } .am-home .hero .am-hub__recap dd{ margin:5px 0 0;color:#fff; font:600 15px/1.35 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; } .am-home .hero .am-hub__ref{ display:inline-block;margin:6px 0 0;padding:12px 16px;border-radius:9px; border:1px solid rgba(255,255,255,.24);color:#fff; font:700 22px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em; } .am-home .hero .am-hub__pied{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px} /* CTA MASTER — token unique : 16/700, 260 × 48. Aucune variante selon le libellé. */ .am-home .hero .am-hub__cta{ /* 260px devient un PLANCHER, pas un carcan : « Demander un dépannage » remplissait la largeur et la flèche venait se coller au texte. Le token garde sa dimension validée comme minimum et s'étend pour les libellés longs — plutôt qu'une variante locale. */ min-width:260px;max-width:100%;min-height:48px;display:inline-flex;align-items:center; justify-content:space-between;gap:20px; padding:13px 24px;border-radius:13px;border:1.5px solid #fff;background:#fff;color:#1a1a1a; font:700 16px/1.1 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; cursor:pointer;white-space:nowrap;text-decoration:none; } .am-home .hero .am-hub__cta--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)} .am-home .hero .am-hub__cta[disabled]{opacity:.42;cursor:not-allowed} .am-home .hero .am-hub__cta:focus-visible{outline:2px solid #fff;outline-offset:3px} /* Action secondaire — même langage que les entrées : chevron fin, aucun soulignement. */ .am-home .hero .am-hub__second{ display:inline-flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer; color:#9a9aa4;text-decoration:none;padding:3px 0; font:400 13.5px/1.2 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; transition:color .16s ease; } .am-home .hero .am-hub__second::before{ content:"";width:6px;height:6px;flex:0 0 6px; border-top:1.5px solid #6f6f79;border-right:1.5px solid #6f6f79;transform:rotate(-135deg); transition:transform .16s ease,border-color .16s ease; } .am-home .hero .am-hub__second:hover{color:#e6e6ea} .am-home .hero .am-hub__second:hover::before{transform:translateX(-3px) rotate(-135deg);border-color:#b6b6bd} /* Lien qui fait AVANCER : le chevron doit suivre le geste, pas l'inverser. */ .am-home .hero .am-hub__second--suite::before{transform:rotate(45deg)} .am-home .hero .am-hub__second--suite:hover::before{transform:translateX(3px) rotate(45deg)} .am-home .hero .am-hub__second:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:2px} /* ── Écrans SANS grille (boutique, aide au diagnostic) ── * Ces écrans empilent leurs blocs directement : sans ce rythme, les intitulés venaient se * coller à l'élément précédent — visible sur la boutique, où « MARQUE (FACULTATIF) » touchait * les puces. Les blocs de la grille ne sont pas concernés : ils ont déjà leur `gap`. */ .am-home .hero .am-hub__champs > .am-hub__champ{margin-top:16px} .am-home .hero .am-hub__champs > .am-hub__champ:first-child{margin-top:15px} /* ── Téléphone : l'indicatif fait partie du champ ── * Une seule boîte, une seule bordure, un seul contour de focus : visuellement c'est UN champ. * Le `+41` est un repère fixe, non éditable — il ne peut donc être ni effacé, ni doublé. */ .am-home .hero .am-hub__tel{ display:flex;align-items:stretch;width:100%;max-width:var(--am-hub-champ);height:44px; border:1px solid rgba(255,255,255,.22);border-radius:10px;background:rgba(255,255,255,.03); overflow:hidden; } .am-home .hero .am-hub__tel__ind{ display:flex;align-items:center;flex:0 0 auto;padding:0 12px; border-right:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04);color:#a9a9b2; font:400 15px/1 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; } .am-home .hero .am-hub__saisie--tel{ flex:1;min-width:0;max-width:none;height:100%;border:0;border-radius:0;background:none; } .am-home .hero .am-hub__tel:focus-within{outline:2px solid #fff;outline-offset:2px} .am-home .hero .am-hub__saisie--tel:focus-visible{outline:none} /* ══════════════ Rail de familles — vocabulaire de la boutique ══════════════ * * Reprise du rail `.catrow > a.ccard` du shop : même logique de cartes, même icônes (extraites * telles quelles), même flèche ronde, même dégradé de fin. Version COMPACTE pour le HERO : * carte 132px au lieu de 168, icône 30px au lieu de 40, et AUCUN compteur de modèles. * Le rail occupe toute l'enveloppe 1320px — il est l'élément de qualification de cet écran. */ .am-home .hero .am-hub__rail-wrap{position:relative;margin-top:8px} .am-home .hero .am-hub__rail{ display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth; padding:3px 2px 6px;scrollbar-width:none;-ms-overflow-style:none; } .am-home .hero .am-hub__rail::-webkit-scrollbar{display:none} /* Hauteur FIXE : toutes les cartes s'alignent, qu'un libellé tienne sur une ou deux lignes. Sans cela le rail devenait irrégulier dès qu'un nom passait à la ligne. */ .am-home .hero .am-hub__cart{ flex:0 0 150px;height:96px;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:8px; padding:11px 9px;border-radius:14px;cursor:pointer; border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#e2e2e7; transition:background-color .16s ease,border-color .16s ease,color .16s ease; } .am-home .hero .am-hub__cart__ic{display:flex;align-items:center;justify-content:center;height:30px;flex:0 0 30px} .am-home .hero .am-hub__cart__ic svg{width:28px;height:28px;stroke-width:1.35} /* DEUX LIGNES MAXIMUM. Les libellés qui en demandaient trois ont été raccourcis à la source (voir `am_home_hub_familles()`) ; ce plafond n'est qu'un filet, pas la solution. */ .am-home .hero .am-hub__cart__nom{ font:600 13px/1.22 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;text-align:center; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; hyphens:auto;overflow-wrap:break-word; } .am-home .hero .am-hub__cart:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.30)} /* État actif : remplissage clair, icône et texte sombres — aucune couleur d'accent inventée, c'est le même principe que les puces du HUB. */ .am-home .hero .am-hub__cart[aria-pressed="true"]{ background:#fff;border-color:#fff;color:#17171c; } .am-home .hero .am-hub__cart:focus-visible{outline:2px solid #fff;outline-offset:3px} /* Flèche et dégradé de fin : masqués tant que le rail ne déborde pas. */ .am-home .hero .am-hub__rail-arr{ position:absolute;right:4px;top:calc(50% - 6px);transform:translateY(-50%);z-index:6; width:36px;height:36px;border-radius:50%;display:none;align-items:center;justify-content:center; border:1px solid rgba(255,255,255,.28);background:rgba(20,20,24,.72);color:#fff;cursor:pointer; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } .am-home .hero .am-hub__rail-arr svg{width:17px;height:17px} /* Chaque flèche n'apparaît que du côté où il RESTE quelque chose à voir. */ .am-home .hero .am-hub__rail-wrap.a-suite .am-hub__rail-arr--suite{display:flex} .am-home .hero .am-hub__rail-wrap.a-avant .am-hub__rail-arr--avant{display:flex} .am-home .hero .am-hub__rail-arr--avant{right:auto;left:4px} .am-home .hero .am-hub__rail-arr--avant svg{transform:scaleX(-1)} .am-home .hero .am-hub__rail-wrap.a-suite::after{ content:"";position:absolute;top:0;bottom:6px;right:0;width:64px;pointer-events:none;z-index:5; background:linear-gradient(90deg,transparent,rgba(10,10,10,.78)); } .am-home .hero .am-hub__rail-wrap.a-avant::before{ content:"";position:absolute;top:0;bottom:6px;left:0;width:64px;pointer-events:none;z-index:5; background:linear-gradient(270deg,transparent,rgba(10,10,10,.78)); } .am-home .hero .am-hub__rail-arr:focus-visible{outline:2px solid #fff;outline-offset:2px} /* ── Localité : champ classique + suggestions ── * Pas de liste native géante : un champ texte, et au maximum huit propositions sous lui. */ .am-home .hero .am-hub__auto{position:relative} .am-home .hero .am-hub__sugg{ position:absolute;z-index:5;left:0;top:calc(100% + 4px); width:100%;max-width:var(--am-hub-champ);margin:0;padding:5px;list-style:none; background:#15151a;border:1px solid rgba(255,255,255,.22);border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,.5);max-height:232px;overflow-y:auto; } .am-home .hero .am-hub__sugg__item{ padding:8px 10px;border-radius:7px;cursor:pointer;color:#d7d7de; font:400 13.5px/1.3 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; } .am-home .hero .am-hub__sugg__item.est-actif, .am-home .hero .am-hub__sugg__item:hover{background:rgba(255,255,255,.10);color:#fff} /* Le champ de l'assistant respire davantage : on y écrit une phrase, pas un mot. */ .am-home .hero .am-hub__champ--large .am-hub__saisie{max-width:660px} /* ── Attente d'analyse ── * ⚠️ INDICATEUR INDÉTERMINÉ. L'analyse dure une quinzaine de secondes et nous ne savons pas * où elle en est : pas de pourcentage, pas d'étapes inventées. Le segment glisse, c'est tout. * Animé en `transform` uniquement — animer `width` ou `left` provoquerait un recalcul de mise * en page à chaque image. */ .am-home .hero .am-hub__attente-bloc{ display:flex;align-items:center;gap:12px;margin-top:26px; } /* Spinner monochrome, trait fin : un arc plus clair sur un anneau discret. Rotation en `transform` seul — aucune propriété de mise en page n'est animée. */ .am-home .hero .am-hub__spin{ width:18px;height:18px;flex:0 0 18px;border-radius:50%; border:1.5px solid rgba(255,255,255,.18);border-top-color:rgba(255,255,255,.9); animation:am-hub-tourne .8s linear infinite; } .am-home .hero .am-hub__attente-txt{ font:400 13.5px/1.4 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#a9a9b2; } /* Spinner posé DANS le titre, à la place des points de suspension. Aligné sur la ligne de base du texte : il doit se lire comme une ponctuation vivante, pas comme un composant ajouté. */ .am-home .hero .am-hub__spin--titre{ display:inline-block;width:17px;height:17px;margin-left:12px;vertical-align:baseline; position:relative;top:1px;border-width:2px; } @keyframes am-hub-tourne{ to{transform:rotate(360deg)} } /* ── Verdict : trois colonnes plutôt qu'une colonne étroite ── * Empilés, l'interprétation, les causes et les vérifications produisaient une colonne de * 500px au milieu d'une enveloppe de 1320px — et un panneau très haut. Côte à côte, chaque * bloc garde une longueur de ligne lisible et la largeur disponible sert enfin à quelque chose. */ .am-home .hero .am-hub__verdict{ display:grid;grid-template-columns:repeat(3,1fr);gap:14px 32px;align-items:start;margin-top:15px; } /* Verdict sans listes (cas « je ne peux pas conclure ») : une seule colonne lisible, on n'étire pas un paragraphe seul sur 1320px. */ /* État sobre : deux colonnes — l'explication, puis la suite à donner. On n'étire pas un paragraphe sur 1320px et on ne fabrique pas de carte vide pour occuper la place. */ .am-home .hero .am-hub__verdict--sobre{grid-template-columns:minmax(0,64ch) minmax(0,42ch)} .am-home .hero .am-hub__texte{ margin:6px 0 0;color:#d7d7de; font:400 13.5px/1.6 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; } /* Réponse longue de l'assistant : deux colonnes plutôt qu'une colonne interminable. * * ⚠️ `:has()` PORTE UNE SPÉCIFICITÉ ÉLEVÉE. Sans les neutralisations explicites ci-dessous, cette * règle survivait aux media queries : sur mobile la grille restait à deux colonnes, celle du * texte tombait à quelques pixels de large et la réponse mesurait 2829px de haut — un seul mot * par ligne. Toute règle en `:has()` doit être annulée palier par palier. */ .am-home .hero .am-hub__verdict--sobre:has(.am-hub__texte--large){grid-template-columns:minmax(0,1fr) minmax(0,38ch)} .am-home .hero .am-hub__texte--large{columns:2;column-gap:34px} @media (max-width:980px){ .am-home .hero .am-hub__verdict--sobre:has(.am-hub__texte--large){grid-template-columns:repeat(2,1fr)} .am-home .hero .am-hub__texte--large{columns:1} } @media (max-width:600px){ .am-home .hero .am-hub__verdict--sobre:has(.am-hub__texte--large){grid-template-columns:1fr} } .am-home .hero .am-hub__liste{margin:6px 0 0;padding:0 0 0 17px;color:#c9c9d1} .am-home .hero .am-hub__liste li{ font:400 13.5px/1.55 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;margin:0 0 3px; } .am-home .hero .am-hub__note{ margin:14px 0 0;max-width:62ch;color:#8f8f98; font:400 12px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; } /* Trois cartes de portail étirées sur 1320px deviendraient des bandeaux. On les plafonne et on * les cale à gauche : la composition respire, les cartes gardent leur proportion. */ .am-home .hero .am-hub__portails{ display:grid;grid-template-columns:repeat(3,minmax(0,340px));justify-content:start; gap:12px;margin-top:14px; } .am-home .hero .am-hub__portail{ display:block;padding:13px 14px;border-radius:11px; border:1px solid rgba(255,255,255,.2);text-decoration:none; } .am-home .hero .am-hub__portail b{ display:block;color:#fff;margin-bottom:3px; font:600 15px/1.3 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; } .am-home .hero .am-hub__portail span{ display:block;color:#9a9aa4; font:400 12px/1.35 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; } .am-home .hero .am-hub__portail:hover{border-color:rgba(255,255,255,.4)} .am-home .hero .am-hub__portail:focus-visible{outline:2px solid #fff;outline-offset:3px} /* Annonce vocale — utile aux lecteurs d'écran, invisible à l'œil. */ .am-home .hero .am-hub__annonce{ position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0; } @media (max-width:980px){ .am-home .hero .am-hub__grille, .am-home .hero .am-hub__recap, .am-home .hero .am-hub__verdict{grid-template-columns:repeat(2,1fr)} .am-home .hero .am-hub__verdict--sobre{grid-template-columns:1fr} /* Deux portails de front plutôt qu'un seul étiré sur toute la tablette. */ .am-home .hero .am-hub__portails{grid-template-columns:repeat(2,minmax(0,340px))} } @media (max-width:600px){ .am-home .hero .am-hub__grille, .am-home .hero .am-hub__recap, .am-home .hero .am-hub__verdict{grid-template-columns:1fr} .am-home .hero .am-hub__portails{grid-template-columns:1fr} /* Rail au doigt : on ne comprime pas les cartes, on laisse défiler. */ .am-home .hero .am-hub__cart{flex:0 0 132px;height:92px;padding:10px 8px} .am-home .hero .am-hub__rail{gap:8px} .am-home .hero .am-hub{--am-hub-champ:100%} /* plus rien à plafonner sur une colonne */ .am-home .hero .am-hub__pied{flex-direction:column;align-items:stretch;gap:10px} .am-home .hero .am-hub__cta{width:100%;font-size:15px} /* palier mobile du token CTA */ .am-home .hero .am-hub__second{justify-content:flex-start} } @media (prefers-reduced-motion:reduce){ .am-home .hero .am-hub__second, .am-home .hero .am-hub__second::before{transition:none} .am-home .hero .am-hub__second:hover::before{transform:rotate(-135deg)} .am-home .hero .am-hub__second--suite:hover::before{transform:rotate(45deg)} /* On coupe le glissement, on ne fait pas disparaître l'indicateur : sans lui, l'écran d'analyse n'aurait plus aucun signe d'activité. */ /* Sans rotation, l'anneau reste visible : on ne supprime pas le signe d'activité. */ .am-home .hero .am-hub__spin{animation:none;border-top-color:rgba(255,255,255,.55)} .am-home .hero .am-hub__rail{scroll-behavior:auto} } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ * SÉLECTEUR DE SERVICES — la porte d'entrée du HUB * * Un grand bloc horizontal, posé DANS le HERO et non par-dessus : le fond reste translucide pour * que la photographie continue d'exister derrière. C'est ce qui distingue une transformation du * HERO d'une fenêtre modale collée devant lui. * * ⚠️ MÊME ENVELOPPE QUE LE PANNEAU (1320px, cf. plus haut) : le sélecteur et les parcours doivent * occuper exactement la même largeur, sinon passer de l'un à l'autre décale visiblement le bloc. * ═══════════════════════════════════════════════════════════════════════════════════════════════ */ /* ══════════════ ENVELOPPE FIGÉE — la même que le panneau, et pour la même raison ══════════════ * Le HERO vaut `max(hauteur fermée, contenu + padding)`. Un sélecteur plus haut que le panneau * ferait donc grandir le HERO à son ouverture — précisément le saut corrigé le 08.08.2026 (mesuré * ici : +170px en tablette, +220px à 320px avant correction). * On lui impose donc le MÊME plafond que le `min-height` du panneau : le HERO garde alors la même * hauteur quelle que soit la couche affichée. Ce qui dépasse défile DANS la grille — la barre et sa * croix, elles, restent toujours atteignables. */ .am-home .hero .am-hub-sel{ width:100%;max-width:1320px; max-height:453px;display:flex;flex-direction:column; background:rgba(10,10,12,.58); border:1px solid rgba(255,255,255,.13); border-radius:18px; padding:20px 22px 22px; /* Le flou ne s'applique qu'AU FOND du bloc : le texte reste net, la photo derrière s'apaise juste assez pour que le contraste passe AA sans masquer l'image. */ -webkit-backdrop-filter:blur(9px) saturate(105%); backdrop-filter:blur(9px) saturate(105%); } .am-home .hero .am-hub-sel[hidden]{display:none} .am-home .hero .am-hub-sel__bar{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.10); } .am-home .hero .am-hub-sel__lab{ margin:0;color:#b9b9c2; font:600 11px/1.2 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; letter-spacing:.14em;text-transform:uppercase; } /* ⚠️ CROIX DE FERMETURE — 44×44px de zone tactile, la recommandation d'accessibilité, alors que le * dessin n'en occupe que 18. Une croix « à la taille du glyphe » se rate au doigt une fois sur trois. */ .am-home .hero .am-hub-sel__x{ width:44px;height:44px;margin:-11px -11px -11px 0;flex:0 0 44px; display:inline-flex;align-items:center;justify-content:center; background:none;border:0;border-radius:10px;cursor:pointer;color:#9a9aa4; transition:color .16s ease,background-color .16s ease; } .am-home .hero .am-hub-sel__x svg{width:18px;height:18px;display:block} .am-home .hero .am-hub-sel__x:hover{color:#fff;background:rgba(255,255,255,.07)} .am-home .hero .am-hub-sel__x:focus-visible{outline:2px solid #fff;outline-offset:2px;color:#fff} /* ── Grille des SEPT cartes ── * ⚠️ FLEX ET NON GRID, délibérément. 7 est premier : aucune grille régulière ne se remplit. En flex * avec une base fixe, toutes les cartes gardent la MÊME largeur et la dernière rangée se centre * d'elle-même — 4 puis 3 en desktop. Une grille aurait soit étiré les 3 de la seconde rangée, soit * laissé un trou à droite. Aucune huitième carte n'est fabriquée pour « faire propre ». */ .am-home .hero .am-hub-sel__grille{ list-style:none;margin:0;padding:0; display:flex;flex-wrap:wrap;justify-content:center;gap:12px; /* `min-height:0` est indispensable : sans lui, un enfant flex refuse de rétrécir sous son contenu et le `overflow` ne s'active jamais. */ flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; } /* ⚠️ SIX cartes, donc SIX colonnes : une seule rangée, parfaitement homogène, qui emploie toute * l'enveloppe de 1320px. C'est ce que « grand bloc horizontal » veut dire. Avec sept services il * fallait 4 + 3 et une rangée incomplète ; le service « Suivi » ayant été retiré le 08.08.2026, * la composition se ferme d'elle-même. */ .am-home .hero .am-hub-sel__grille > li{flex:0 1 calc(16.666% - 10px);display:flex;min-width:0} .am-home .hero .am-hub-carte{ position:relative;display:flex;flex-direction:column;width:100%; padding:16px 17px 15px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.11); border-radius:14px; text-decoration:none;color:#f2f2f5; transition:background-color .18s ease,border-color .18s ease; } .am-home .hero .am-hub-carte__ic{display:block;color:#b9b9c2;margin-bottom:11px;transition:color .18s ease} .am-home .hero .am-hub-carte__ic svg{width:21px;height:21px;display:block} .am-home .hero .am-hub-carte__cat{ font:600 9.5px/1.2 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; letter-spacing:.13em;text-transform:uppercase;color:#8a8a94;margin-bottom:5px; transition:color .18s ease; } /* ⚠️ HAUTEUR DE TEXTE RÉSERVÉE (2 lignes). « Suivre ma demande » tient sur une ligne, « Faire * dépanner un appareil » sur deux : sans cette réserve, les cartes d'une même rangée n'avaient pas * la même hauteur et la grille ondulait. On réserve donc la place des deux lignes partout. */ .am-home .hero .am-hub-carte__txt{ font:500 14px/1.35 Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; color:#f2f2f5;min-height:calc(2 * 1.35em); } /* Flèche : présente au repos, discrète ; elle avance de 3px au survol. Aucune animation permanente. */ .am-home .hero .am-hub-carte__fl{ position:absolute;right:15px;bottom:14px;color:#6f6f79;line-height:0; opacity:0;transform:translateX(-3px); transition:opacity .18s ease,transform .18s ease,color .18s ease; } .am-home .hero .am-hub-carte__fl svg{width:15px;height:15px;display:block} .am-home .hero .am-hub-carte:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.24)} .am-home .hero .am-hub-carte:hover .am-hub-carte__ic, .am-home .hero .am-hub-carte:hover .am-hub-carte__cat{color:#d7d7de} .am-home .hero .am-hub-carte:hover .am-hub-carte__fl{opacity:1;transform:none;color:#c9c9d2} .am-home .hero .am-hub-carte:focus-visible{outline:2px solid #fff;outline-offset:2px;background:rgba(255,255,255,.07)} .am-home .hero .am-hub-carte:focus-visible .am-hub-carte__fl{opacity:1;transform:none} /* ── Tablette : trois de front. La dernière rangée, seule, reste centrée. ── */ /* Trois de front dès qu'une colonne de six devient trop étroite : 3 + 3, deux rangées pleines. */ @media (max-width:1199px){ .am-home .hero .am-hub-sel__grille > li{flex:0 1 calc(33.333% - 8px)} } @media (max-width:980px){ .am-home .hero .am-hub-sel{max-height:447px} /* même palier que le panneau en tablette */ } /* ⚠️ TROIS colonnes jusqu'à 620px, et non deux. Mesuré : à deux colonnes, 768px produisait quatre * rangées et portait le HERO de 560 à 730px. En dessous de 620px, deux colonnes donnent 2 + 2 + 2 : * trois rangées pleines, et des cibles confortables au doigt. */ @media (max-width:619px){ .am-home .hero .am-hub-sel__grille > li{flex:0 1 calc(50% - 6px)} } /* ── Mobile : DEUX colonnes, pas une ── * Sept cartes en une colonne donnaient un panneau de plus de 700px, donc du défilement à chaque * ouverture. Deux colonnes tiennent, et chaque carte conserve une cible confortable. */ @media (max-width:600px){ .am-home .hero .am-hub-sel{padding:15px 14px 16px;border-radius:15px;max-height:630px} .am-home .hero .am-hub-sel__bar{padding-bottom:11px;margin-bottom:12px} .am-home .hero .am-hub-sel__grille{gap:9px} .am-home .hero .am-hub-sel__grille > li{flex:0 1 calc(50% - 4.5px)} .am-home .hero .am-hub-carte{padding:12px 12px 11px;min-height:96px} .am-home .hero .am-hub-carte__ic{margin-bottom:8px} .am-home .hero .am-hub-carte__ic svg{width:19px;height:19px} .am-home .hero .am-hub-carte__txt{font-size:13px;min-height:calc(2 * 1.32em);line-height:1.32} /* La flèche coûte de la place sur un écran étroit et n'apporte rien au doigt : on la retire. */ .am-home .hero .am-hub-carte__fl{display:none} } /* Très petits écrans (320px) : une colonne devient plus lisible que deux colonnes écrasées. */ /* ⚠️ 320px : une colonne devient plus lisible que deux colonnes écrasées, mais sept cartes empilées * mesurent 736px. Le plafond descend donc à la hauteur réellement disponible sur cet écran, et la * grille défile — le HERO, lui, ne bouge pas. */ @media (max-width:359px){ .am-home .hero .am-hub-sel{max-height:516px} .am-home .hero .am-hub-sel__grille > li{flex:0 1 100%} .am-home .hero .am-hub-carte{min-height:0} .am-home .hero .am-hub-carte__txt{min-height:0} } /* ── Mouvement réduit : les transitions de confort disparaissent, les états restent lisibles ── */ @media (prefers-reduced-motion:reduce){ .am-home .hero .am-hub-carte, .am-home .hero .am-hub-carte__ic, .am-home .hero .am-hub-carte__cat, .am-home .hero .am-hub-carte__fl, .am-home .hero .am-hub-sel__x{transition:none} /* La flèche ne se déplace plus, mais elle apparaît toujours : l'information ne doit jamais dépendre du seul mouvement. */ .am-home .hero .am-hub-carte:hover .am-hub-carte__fl{transform:none} } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ * LE SÉLECTEUR DANS LE MORPHING — troisième couche, même mécanique * * Trois couches partagent désormais la même place : l'accueil, le sélecteur, un parcours. Elles se * croisent avec le fondu déjà réglé plus haut, et `.is-sel` désigne celle qui est active. * * ⚠️ MÊME MÉCANIQUE, PAS UNE SECONDE. Les variables (`--am-hub-sortie/entree/ease`) et l'écartement * vertical sont ceux du morphing existant : un second système d'animation aurait redonné le double * fondu corrigé le 08.08.2026. * ═══════════════════════════════════════════════════════════════════════════════════════════════ */ .am-home .hero .am-hub-sel{ position:absolute;top:0;left:0;right:0; opacity:0;transform:translateY(22px);pointer-events:none;visibility:hidden; transition:opacity var(--am-hub-sortie) var(--am-hub-ease) 0s, transform var(--am-hub-sortie) var(--am-hub-ease) 0s, visibility 0s linear var(--am-hub-sortie); } .am-home .hero.am-hub-anime .am-hub-sel{will-change:opacity,transform} /* Quand le sélecteur cède la place à un parcours, il part vers le HAUT — le même sens que l'accueil * quand il cède la place au HUB. Le geste raconte donc toujours « on avance ». */ .am-home .hero.is-hub:not(.is-sel) .am-hub-sel{transform:translateY(-22px)} /* ═══════════════ MICRO-ANIMATION DU CTA « COMMENT VOUS AIDER ? » ═══════════════ * * Objectif : inviter, sans faire de la publicité. Toutes les 7 secondes, un reflet traverse le * bouton et la flèche avance de 3px puis revient — 700ms au total, soit 10% du cycle : neuf fois sur * dix, le bouton est parfaitement immobile. * * ⚠️ NI PULSATION, NI CHANGEMENT DE TAILLE, NI REBOND. Le gabarit du bouton est intouché : on * n'anime que la POSITION de la flèche (transform, hors flux) et l'opacité d'un calque de reflet. * Rien ici ne peut décaler la mise en page ni provoquer un recalcul. * * ⚠️ CSS SEUL, aucun minuteur JavaScript : un `setInterval` de 7 s aurait tourné pendant toute la * visite, y compris onglet caché. Une animation CSS est suspendue par le navigateur quand la page * ne s'affiche pas. * * ⚠️ Le reflet est SOMBRE, pas clair : le bouton est blanc plein, un reflet blanc y serait invisible. * Une bande d'ombre très diluée qui glisse lit comme un reflet sur une surface laquée. */ @keyframes am-hub-reflet{ 0%,86% {opacity:0;transform:translateX(-120%)} 88% {opacity:1} 96% {opacity:1;transform:translateX(120%)} 97%,100% {opacity:0;transform:translateX(120%)} } @keyframes am-hub-flechette{ 0%,86% {translate:0 0} 91% {translate:3px 0} 96%,100% {translate:0 0} } .am-home .hero .btn--primary[data-hub-ouvrir="services"]{ position:relative;overflow:hidden; } .am-home .hero .btn--primary[data-hub-ouvrir="services"]::after{ content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; background:linear-gradient(105deg,transparent 38%,rgba(0,0,0,.055) 50%,transparent 62%); opacity:0; animation:am-hub-reflet 7s var(--am-hub-ease,ease) 2.5s infinite; } .am-home .hero .btn--primary[data-hub-ouvrir="services"] .arw{ display:inline-block; /* transform inopérant sur un inline */ /* ⚠️ L'ANIMATION DE REPOS PILOTE `translate`, LE SURVOL PILOTE `transform`. Ce sont deux propriétés * DISTINCTES qui se composent — c'est ce qui permet aux deux de coexister. * Mesuré : quand les deux visaient `transform`, le survol posait `animation:none` et la flèche * SAUTAIT de 5px en une seule image (aucune interpolation possible depuis une valeur animée). */ animation:am-hub-flechette 7s var(--am-hub-ease,ease) 2.5s infinite; transition:transform .18s ease; } /* Survol : la flèche avance plus franchement. L'animation de repos n'est PAS coupée — elle vise une * autre propriété, donc elle n'entre plus en conflit, et il n'y a plus de saut. */ .am-home .hero .btn--primary[data-hub-ouvrir="services"]:hover .arw, .am-home .hero .btn--primary[data-hub-ouvrir="services"]:focus-visible .arw{ transform:translateX(5px); } /* ⚠️ LE TEXTE NE DOIT PAS BOUGER. Le thème lève le bouton d'1px au survol * (`.am-home .hero .btn--primary:hover{transform:translateY(-1px)}`) : tout le libellé glisse alors * verticalement, ce qui se voit sur un bouton que l'on invite déjà à survoler. On neutralise ce * soulèvement POUR CE BOUTON SEUL — l'éclaircissement du fond et l'ombre du thème restent, la flèche * porte le mouvement. Les autres boutons du site gardent leur soulèvement. */ .am-home .hero .btn--primary[data-hub-ouvrir="services"]:hover{transform:none} .am-home .hero .btn--primary[data-hub-ouvrir="services"]:hover::after{animation:none;opacity:0} /* ⚠️ L'invitation n'a plus de sens quand le HUB est OUVERT : le bouton est alors hors champ, et une * animation invisible consomme des images pour rien. */ .am-home .hero.is-hub .btn--primary[data-hub-ouvrir="services"]::after, .am-home .hero.is-hub .btn--primary[data-hub-ouvrir="services"] .arw{animation:none} @media (prefers-reduced-motion:reduce){ /* Le reflet et le va-et-vient sont du pur confort : ils disparaissent entièrement. Le déplacement au survol reste, réduit — il répond à une intention de l'utilisateur, il ne la sollicite pas. */ .am-home .hero .btn--primary[data-hub-ouvrir="services"]::after, .am-home .hero .btn--primary[data-hub-ouvrir="services"] .arw{animation:none} .am-home .hero .btn--primary[data-hub-ouvrir="services"] .arw{transition:none} .am-home .hero .am-hub-sel{transition:opacity var(--am-hub-sortie) linear 0s,visibility 0s linear var(--am-hub-sortie);transform:none} .am-home .hero.is-hub:not(.is-sel) .am-hub-sel{transform:none} } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ * LA DERNIÈRE SACCADE — une seule image perdue, à l'ouverture depuis le HERO * * ⚠️ MESURÉ (processeur bridé ×4, 08.08.2026) : les transitions À L'INTÉRIEUR du HUB sont régulières * (17 ms d'un bout à l'autre), mais HERO → sélecteur perdait UNE image, toujours la première : * HERO → sélecteur 31.2 · 14.8 · 15.7 · 17.8 … ← une image à 31 ms * sélecteur → parcours 7.5 · 9.0 · 15.9 · 17.0 … ← aucune * Deux causes CUMULÉES, isolées en les neutralisant une à une : * 1. l'état 0 passait de `static` à `absolute` DANS l'image où l'animation démarre — la mise en * page de tout le sous-arbre du HERO était donc refaite au moment le plus coûteux ; * 2. le voile `.hero::after` couvre 1440×560 px et son opacité était repeinte, faute de calque. * Neutraliser l'une OU l'autre ne suffisait pas (27–28 ms) ; les deux ensemble : plus aucune image * longue. D'où les deux règles ci-dessous. * * ⚠️ ET LE PIÈGE À NE PAS RÉINTRODUIRE : sortir l'état 0 du flux fait s'effondrer le `.wrap`, que le * HERO recentre alors — mesuré, le CTA descendait de 66 px (y 454 → 520). La hauteur naturelle de * l'état 0 est donc MESURÉE une fois par le script et verrouillée dans `--am-hub-h0` : le contenu ne * bouge plus d'un pixel, et il n'y a plus rien à recalculer pendant l'animation. * ═══════════════════════════════════════════════════════════════════════════════════════════════ */ /* 1. L'état 0 est hors flux DÈS LE DÉPART, jamais au moment d'animer. * La classe est posée par le script APRÈS la mesure : sans elle, rien ne change — une page dont * le JavaScript ne s'exécute pas garde exactement la mise en page d'avant. */ /* ⚠️ LA GOUTTIÈRE, ET LE PIÈGE QUI L'A FAIT DISPARAÎTRE (corrigé le 08.08.2026). * Un élément en position absolue se cale sur la BOÎTE DE PADDING de son conteneur, pas sur sa boîte * de contenu : `left:0;right:0` court-circuite donc la gouttière du `.wrap`. Mesuré après coup : * sur mobile le titre partait à x=0 au lieu de 44, et le descripteur était rogné des deux côtés ; * en desktop il passait de 53 à 29. Le défaut était invisible sur les captures desktop parce que le * panneau, lui, est plafonné à 1320px — son `max-width` masquait le problème. * `padding:inherit` reprend la valeur CALCULÉE du `.wrap` : la gouttière suit donc automatiquement * les paliers responsives du thème, sans qu'aucune valeur ne soit recopiée ici. */ .am-home .hero.am-hub-pose .am-hub-etat0{ position:absolute;top:0;left:0;right:0; padding-left:inherit;padding-right:inherit; } .am-home .hero.am-hub-pose .wrap{min-height:var(--am-hub-h0,auto)} /* 2. Le voile obtient son propre calque le temps de la transition. `will-change` en permanence * coûterait de la mémoire vidéo pour rien : il est posé avec `am-hub-anime` et retiré avec elle. */ .am-home .hero.am-hub-anime::after{will-change:opacity}