/** * menu.css — menu Synoptic (refonte 2026). * Destination : wp-content/themes/proges-plus-child/assets/css/menu.css * Chargée APRÈS `app.clean.min.css` du thème parent (dépendance `app` à l'enqueue). * * Pourquoi une feuille à part plutôt qu'une modification du SCSS parent : la chaîne de build * du parent est gulp 4 + node-sass sur Node 8.5 (assets/.nvmrc, 2018), non réinstallable. * On ne recompile jamais app.css. Voir `claude refonte menu/CLAUDE.md`. * * Préfixe `syn-nav` : l'ancien `child-header` garde son CSS dans le parent, qu'on ne touche * pas. Aucun sélecteur commun, donc aucune guerre de spécificité. * * Repères du thème : * html { font-size: 62.5% } → 1rem = 10px * .row { max-width: 114rem } * Le thème impose des styles globaux agressifs sur h1-h6, p et ol li::before : le markup * n'utilise que des et des listes en `no-bullet`, et redéclare ses tailles sur la * balise elle-même plutôt que de compter sur l'héritage (docs/theme.md, pièges 1 et 3). */ .syn-nav { /* Miroir des tokens `syno-*` de proges-plus/assets/src/scss/_helpers/_variables.scss. Le bouton CTA, lui, n'utilise pas ces variables : il porte les classes `button button--1` du thème, qui tirent la couleur de marque de la classe `synoptic-erp` sur le . */ --syn-1: #4164E6; --syn-1-light: #F1F3FB; --syn-2: #182750; --syn-3: #F2F6FF; --syn-ink: #354067; --syn-ink-soft: #6B7593; --syn-line: #E3E7F1; --syn-white: #FFF; --syn-h: 8rem; --syn-radius: 8px; /* Décalage sous lequel la carte se colle. Une seule variable, parce que le panneau mobile doit s'ouvrir juste sous la carte : il la calcule à partir d'ici plutôt que de dupliquer les valeurs d'offset (barre Proges, barre d'admin). */ --syn-top: 35px; position: -webkit-sticky; position: sticky; top: var(--syn-top); transform: translateY(-35px); z-index: 1003; max-width: 100%; height: var(--syn-h); } /* Offsets repris tels quels de l'ancien menu : la carte occupe la même place. Validé avec la barre d'admin le 2026-09-21. */ body.admin-bar .syn-nav { --syn-top: 67px; } .syn-nav > .row, .syn-nav > .row > .column-12 { height: 100%; } .syn-nav__inner { position: relative; z-index: 2; display: flex; flex-flow: row nowrap; align-items: center; height: 100%; margin: 0; padding: 0 3rem; border-radius: var(--syn-radius); background-color: var(--syn-white); box-shadow: 0 20px 40px 0 rgba(65, 100, 230, .06); transition: box-shadow .25s ease; } /* Seul effet au défilement : l'ombre se renforce. Ni élargissement, ni tassement — décision du 2026-09-21. La classe est posée par menu.js. */ .syn-nav.is-stuck .syn-nav__inner { box-shadow: 0 20px 44px 0 rgba(24, 39, 80, .14); } /* ───────────────────────────── Logo ───────────────────────────── */ .syn-nav__logo { display: block; flex: 0 0 auto; margin-right: 2.4rem; } .syn-nav__logo svg { display: block; width: 12rem; height: auto; } /* ───────────────────────────── Panneau ────────────────────────── */ .syn-nav__panel { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: 2rem; height: 100%; min-width: 0; } .syn-nav__items { display: flex; flex-flow: row nowrap; align-items: center; gap: .2rem; height: 100%; margin: 0; padding: 0; list-style: none; } .syn-nav__items > li::before { content: none; } .syn-nav__item { position: relative; display: flex; align-items: center; height: 100%; } .syn-nav__link { display: inline-flex; align-items: center; gap: .6rem; padding: .9rem 1.3rem; border: 0; border-radius: 6px; background: none; color: var(--syn-ink); font-size: 1.5rem; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: color .15s, background-color .15s; } .syn-nav__link:hover, .syn-nav__link:focus-visible, .syn-nav__item.is-open > .syn-nav__link { color: var(--syn-2); background-color: var(--syn-1-light); } .syn-nav__chevron { width: 1.2rem; height: 1.2rem; flex: 0 0 auto; transition: transform .2s ease; } .syn-nav__item.is-open .syn-nav__chevron { transform: rotate(180deg); } /* ───────────────────────────── Méga-menu ──────────────────────── */ .syn-nav__mega { position: absolute; top: calc(100% + .6rem); left: 0; z-index: 5; padding: 2.4rem; border: 1px solid var(--syn-line); border-radius: 14px; background-color: var(--syn-white); box-shadow: 0 24px 60px -20px rgba(24, 39, 80, .22), 0 8px 20px -8px rgba(24, 39, 80, .08); opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; } .syn-nav__item.is-open .syn-nav__mega { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s; } /* Quand le panneau déborderait à droite, menu.js pose un `left: auto` et un `right` calculé en pixels, pour aligner son bord droit sur celui de la CARTE. Rien à déclarer ici : ces styles sont en ligne. En mobile le panneau passe en `position: static`, qui ignore `left`/`right` — les styles en ligne y sont donc sans effet, sans avoir à les nettoyer. */ .syn-nav__mega-cols { display: grid; gap: 2.8rem; } /* La règle de mise en page : le nombre de colonnes est un nombre de GROUPES NOMMÉS. 1 groupe → ses liens s'étalent en grille de 3 par ligne. 2 groupes → deux listes verticales côte à côte. */ .syn-nav__mega--cols-1 { width: 74rem; } .syn-nav__mega--cols-1 .syn-nav__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: .2rem 1.2rem; } .syn-nav__mega--cols-2 { width: 68rem; } .syn-nav__mega--cols-2 .syn-nav__mega-cols { grid-template-columns: 1fr 1fr; } .syn-nav__col-title { display: block; margin-bottom: 1.2rem; color: var(--syn-1); font-size: 1.1rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .syn-nav__links { margin: 0; padding: 0; list-style: none; } .syn-nav__links > li::before { content: none; } .syn-nav__links-item { margin: 0; } .syn-nav__mlink { display: flex; align-items: center; gap: 1.2rem; padding: .8rem 1rem; border-radius: 8px; color: var(--syn-ink); transition: background-color .15s, color .15s; } .syn-nav__mlink:hover, .syn-nav__mlink:focus-visible { background-color: var(--syn-1-light); } .syn-nav__mlink-icon { display: grid; place-items: center; flex: 0 0 auto; width: 3.6rem; height: 3.6rem; border-radius: 9px; background-color: var(--syn-3); color: var(--syn-2); transition: background-color .15s, color .15s; } .syn-nav__mlink-icon svg { display: block; width: 2rem; height: 2rem; } .syn-nav__mlink:hover .syn-nav__mlink-icon { background-color: var(--syn-1); color: var(--syn-white); } .syn-nav__mlink-text { display: block; min-width: 0; } .syn-nav__mlink-label { display: block; color: var(--syn-2); font-size: 1.4rem; font-weight: 600; line-height: 1.25; } .syn-nav__mlink-desc { display: block; margin-top: .2rem; color: var(--syn-ink-soft); font-size: 1.25rem; font-weight: 300; line-height: 1.35; } .syn-nav__mega-foot { display: flex; align-items: center; justify-content: space-between; gap: 2.4rem; margin-top: 2rem; padding-top: 1.8rem; border-top: 1px solid var(--syn-line); } .syn-nav__mega-foot-text { color: var(--syn-ink-soft); font-size: 1.3rem; line-height: 1.4; } .syn-nav__mega-foot-link { display: inline-flex; align-items: center; gap: .6rem; flex: 0 0 auto; font-size: 1.35rem; font-weight: 500; } .syn-nav__arrow { width: 1.4rem; height: 1.4rem; transition: transform .18s ease; } .syn-nav__mega-foot-link:hover .syn-nav__arrow { transform: translateX(3px); } /* ───────────────────────────── Zone droite ────────────────────── */ .syn-nav__right { display: flex; align-items: center; gap: 1.6rem; flex: 0 0 auto; margin-left: auto; } .syn-nav__contact { padding: .6rem .2rem; border-bottom: 2px solid transparent; color: var(--syn-ink); font-size: 1.5rem; font-weight: 500; transition: color .15s, border-color .15s; } .syn-nav__contact:hover { color: var(--syn-2); border-bottom-color: var(--syn-2); } .syn-nav__lang { display: flex; align-items: center; gap: .4rem; margin: 0; padding: 0; list-style: none; } .syn-nav__lang > li::before { content: none; } .syn-nav__lang-item { margin: 0; } .syn-nav__lang-item + .syn-nav__lang-item { border-left: 1px solid var(--syn-line); padding-left: .4rem; } .syn-nav__lang-link { display: inline-block; padding: .3rem .5rem; border-radius: 4px; color: var(--syn-ink-soft); font-size: 1.2rem; font-weight: 600; letter-spacing: .04em; transition: color .15s, background-color .15s; } .syn-nav__lang-link:hover { color: var(--syn-2); background-color: var(--syn-1-light); } .syn-nav__lang-link.is-active { color: var(--syn-2); } /* Le CTA porte `button button--1` : forme, couleur et animation viennent du thème. On ne corrige ici que ce qui gêne dans une barre de navigation. */ .syn-nav__cta { flex: 0 0 auto; padding: 1rem 2.4rem !important; font-size: 1.4rem !important; white-space: nowrap; } /* Le sélecteur de langue de la barre Proges fait doublon avec le FR/EN de la barre Synoptic. Masqué en CSS depuis l'enfant : le template qui le produit est dans le thème PARENT (`site-header.php` → `do_action('wpml_add_language_selector')`), auquel on ne touche pas. En mobile la barre Proges est déjà masquée entièrement, cette règle n'y change rien. */ .site__header-quick-access__languages { display: none; } /* ─────────────────── Barre mobile (langues · démo · burger) ────── */ /* Tout ce bloc n'existe qu'en mobile. En desktop il ne doit laisser aucune trace. */ .syn-nav__mobile-bar { display: none; } .syn-nav__burger { flex: 0 0 auto; padding: 1rem; border: 0; border-radius: 6px; background: none; cursor: pointer; } .syn-nav__burger-bar { display: block; width: 2.2rem; height: 2px; border-radius: 2px; background-color: var(--syn-2); transition: transform .2s ease, opacity .2s ease; } .syn-nav__burger-bar + .syn-nav__burger-bar { margin-top: .5rem; } .syn-nav.is-open .syn-nav__burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .syn-nav.is-open .syn-nav__burger-bar:nth-child(2) { opacity: 0; } .syn-nav.is-open .syn-nav__burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ═══════════════════════════════ M O B I L E ═══════════════════════════════ * * En mobile, la barre bleue Proges disparaît et la carte Synoptic devient la seule * navigation : logo à gauche, langues / bouton démo / burger à droite. Le burger ouvre * un panneau plein écran en accordéons, avec une barre d'actions fixée en bas. * * Tout est piloté d'ici : le markup est unique. Un rendu conditionné au terminal côté * serveur serait pris en défaut par le cache de page WP Engine, qui sert le même HTML * à tout le monde. */ @media (max-width: 991px) { /* ── La barre Proges et son burger sortent de l'écran ────────────────────── Les deux vivent dans le thème parent et sont en `position: fixed` : sans ça, ils resteraient superposés à la carte Synoptic. `!important` parce que leurs règles d'origine sont elles-mêmes déclarées dans des média-queries du CSS compilé. */ .site__header, .site__header-sidebar-toggle { display: none !important; } /* ⚠️ Le menu est rendu APRÈS le hero dans le header.php du thème : #site-header → hero → syn-nav → #site-content. En desktop ça passe inaperçu, la barre Proges (position: fixed) tenant le haut de l'écran et la carte venant s'y coller au défilement. Barre Proges masquée, un simple `sticky` laisserait la carte à sa place réelle dans le flux, c'est-à-dire SOUS le hero. La carte reprend donc ici le rôle de la barre Proges : fixée en haut de l'écran. `transform: none` est indispensable et pas cosmétique : un ancêtre transformé devient le bloc conteneur de ses descendants en `position: fixed`, et le panneau plein écran se positionnerait par rapport à la carte au lieu de l'écran. */ .syn-nav { --syn-top: 0px; position: fixed; top: var(--syn-top); right: 0; left: 0; transform: none; } body.admin-bar .syn-nav { --syn-top: 32px; } /* Pleine largeur : en mobile la carte n'est plus une carte, c'est une barre. On neutralise le gabarit du thème (`.row` centré, coins arrondis) plutôt que de chercher d'où vient chaque pixel — le fond bleu du hero ne doit dépasser nulle part. */ .syn-nav > .row { max-width: none; width: 100%; margin: 0; padding: 0; } .syn-nav > .row > .column-12 { margin: 0; padding: 0; } .syn-nav__inner { padding: 0 1.6rem; border-radius: 0; box-shadow: 0 2px 12px -4px rgba(24, 39, 80, .12); } .syn-nav.is-stuck .syn-nav__inner { box-shadow: 0 4px 16px -4px rgba(24, 39, 80, .18); } .syn-nav__mobile-bar { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; margin-left: auto; } /* Menu ouvert, le burger devient une croix : garder « Démo » à côté ferait deux actions concurrentes dans la même barre, alors que le bouton est déjà en bas du panneau. */ .syn-nav.is-open .syn-nav__cta--compact { display: none; } .syn-nav__lang--mobile { gap: .2rem; } .syn-nav__cta--compact { padding: .8rem 1.8rem !important; font-size: 1.3rem !important; } /* ── Panneau plein écran ─────────────────────────────────────────────────── Il s'ouvre SOUS la carte, qui reste visible : c'est ce qui garde les langues et le bouton démo accessibles menu ouvert. D'où le calcul à partir de --syn-top. Colonne flex : la liste défile, la barre d'actions reste collée en bas — elle ne bouge donc pas quand un accordéon se déplie. */ .syn-nav__panel { position: fixed; top: calc(var(--syn-top) + var(--syn-h)); right: 0; bottom: 0; left: 0; /* ⚠️ `position: fixed` se cale sur le viewport de MISE EN PAGE, qui correspond à l'écran barre d'adresse masquée. Barre affichée, `bottom: 0` tombe donc sous la zone visible et la barre d'actions passe hors écran ; chaque défilement qui montre ou masque la barre d'adresse redimensionne tout. `dvh` suit le viewport RÉEL, barre comprise. `bottom: 0` est conservé comme repli : un navigateur qui ignore `dvh` jette la ligne `height` et retombe dessus. Quand les trois sont posés, c'est `bottom` qui cède. */ height: calc(100dvh - var(--syn-top) - var(--syn-h)); z-index: 1002; display: flex; flex-direction: column; /* ⚠️ La règle desktop pose `align-items: center` et `justify-content: space-between`. En colonne, un `align-items: center` hérité dimensionne les enfants à leur CONTENU au lieu de les étirer : la barre d'actions devenait plus étroite que le panneau, sa bordure s'arrêtant au milieu, et les deux boutons prenaient leur largeur naturelle. Les deux propriétés doivent être réinitialisées explicitement. */ align-items: stretch; justify-content: flex-start; gap: 0; height: auto; padding: 0; background-color: var(--syn-white); opacity: 0; visibility: hidden; transform: translateY(-1rem); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; } .syn-nav.is-open .syn-nav__panel { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s; } /* La liste prend la hauteur restante et défile seule. */ .syn-nav__items { display: block; flex: 1 1 auto; height: auto; padding: .8rem 2rem 2rem; overflow-y: auto; overscroll-behavior: contain; } .syn-nav__item { display: block; height: auto; border-bottom: 1px solid var(--syn-line); } .syn-nav__link { display: flex; justify-content: space-between; width: 100%; padding: 1.6rem .4rem; border-radius: 0; font-size: 1.7rem; text-align: left; white-space: normal; } .syn-nav__link:hover, .syn-nav__item.is-open > .syn-nav__link { background-color: transparent; } /* ── Accordéon ───────────────────────────────────────────────────────────── Une seule rubrique ouverte à la fois : c'est menu.js qui s'en charge (`fermerTout` à chaque ouverture), pas le CSS. */ .syn-nav__mega { position: static; width: auto !important; max-height: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; overflow: hidden; transform: none; pointer-events: auto; transition: max-height .28s ease, padding .28s ease; } .syn-nav__item.is-open .syn-nav__mega { max-height: 200rem; padding: .4rem 0 2rem; transform: none; } .syn-nav__mega-cols, .syn-nav__mega--cols-2 .syn-nav__mega-cols { display: block; } .syn-nav__mega--cols-1 .syn-nav__links { display: block; } .syn-nav__col + .syn-nav__col { margin-top: 2.4rem; } .syn-nav__mega-foot { flex-direction: column; align-items: flex-start; gap: 1rem; } /* ── Barre d'actions, collée en bas du panneau ──────────────────────────── `flex: 0 0 auto` dans la colonne : elle ne défile pas avec la liste, et n'a pas besoin d'être en `position: fixed`. */ .syn-nav__right { flex: 0 0 auto; display: flex; align-items: stretch; /* les deux boutons ont la même hauteur, quelle que soit leur casse */ gap: 1.2rem; width: 100%; margin: 0; padding: 1.6rem 2rem; border-top: 1px solid var(--syn-line); background-color: var(--syn-white); box-shadow: 0 -8px 24px -18px rgba(24, 39, 80, .35); /* ⚠️ NE PAS remettre `env(safe-area-inset-bottom)` ici. Chrome Android y renseigne la hauteur de la barre d'adresse escamotable : la barre d'actions grandissait donc dès que cette barre réapparaissait, et naissait déjà trop haute quand elle était visible à l'ouverture. C'était un double comptage — la hauteur du panneau vient de `visualViewport`, qui exclut déjà la chrome du navigateur. Et l'inset ne vaut de toute façon quelque chose pour l'encoche iOS qu'avec un `viewport-fit=cover`, que ce thème ne déclare pas. Mesuré le 2026-09-23. */ } /* Le sélecteur de langue de la zone droite fait doublon : c'est celui de la barre du haut qui sert en mobile. */ .syn-nav__lang--desktop { display: none; } /* `flex: 1 1 0` sur les deux → base nulle et croissance égale, donc 50/50 exact, quelle que soit la longueur des libellés. `min-width: 0` lève le refus par défaut d'un élément flex de rétrécir sous la largeur de son contenu. */ .syn-nav__contact { display: flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; padding: 1.2rem .8rem; border: 1.5px solid var(--syn-line); border-radius: 24px; color: var(--syn-2); font-size: 1.4rem; line-height: 1.2; text-align: center; } .syn-nav__contact:hover { border-color: var(--syn-2); } /* `.syn-nav__cta` est en `white-space: nowrap` pour la barre desktop. Ici le bouton est contraint à la moitié de l'écran : sans retour à la ligne, « Demander une démo » déborde de la pilule, qui est en `overflow: hidden` — le texte se retrouvait coupé net. `min-width: 0` est nécessaire aussi : un élément flex refuse par défaut de rétrécir sous la largeur de son contenu. */ .syn-nav__right .syn-nav__cta { display: flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; padding: 1.1rem .8rem !important; font-size: 1.35rem !important; line-height: 1.2; white-space: normal; text-align: center; } } /* Sous 782 px, WordPress rend sa barre d'admin NON fixe : elle défile avec la page. Garder un décalage laisserait un trou blanc dès le premier défilement. */ @media (max-width: 782px) { body.admin-bar .syn-nav { --syn-top: 0px; } } @media (max-width: 480px) { .syn-nav__inner { padding: 0 1.6rem; } .syn-nav__logo svg { width: 10rem; } .syn-nav__mlink { gap: 1rem; padding: .8rem .4rem; } .syn-nav__mobile-bar { gap: .6rem; } .syn-nav__cta--compact { padding: .8rem 1.4rem !important; } .syn-nav__right { gap: .8rem; padding-left: 1.6rem; padding-right: 1.6rem; } } /* ═══════════════════════ H E R O D E L A P A G E D ' A C C U E I L ═══════════════ * * Cette section ne concerne pas le menu, mais elle en découle : la barre mobile est passée en * `position: fixed`, elle recouvre donc le haut du hero. Elle vit ici plutôt que dans une * feuille à part pour ne pas ajouter une requête et une seconde ligne d'enqueue. * * Portée : `.hero--frontpage-child` UNIQUEMENT. Vérifié le 2026-09-23 — c'est la seule page du * site dont le hero porte une animation (`.hero__svg`) ; fonctionnalités, métiers et contact * n'en ont pas. Aucun autre hero n'est touché. */ @media (max-width: 640px) { /* Titre PUIS animation, au lieu d'animation puis titre. Rien à déplacer dans le DOM : le SVG est un enfant en `position: absolute` de `.hero__content`, qui est `position: relative` et `overflow: hidden`. Il suffit donc d'inverser les deux ancrages verticaux — le texte passe en haut, l'animation en bas. Le fond bleu, porté par `.hero__content`, reste sous les deux. Au-dessus de 640 px le thème repasse en disposition côte à côte (texte à gauche, animation à droite en 45 % de large) : il n'y a plus d'ordre vertical à inverser, d'où ce seuil. */ /* ⚠️ HAUTEUR AUTOMATIQUE — c'est la clé de tout ce bloc. Le thème fixe `height: calc(100vh - 4.5rem)`. Avec le texte ancré en haut et l'illustration en bas, TOUT l'espace restant tombait entre les deux : l'écart grandissait avec la hauteur de l'écran, d'où un rendu correct sur un téléphone et très aéré sur un autre. Aucune valeur fixe ne peut corriger ça — il faut que le bloc épouse son contenu. Conséquence assumée : en mobile le hero n'occupe plus tout l'écran. */ .hero--frontpage-child .hero__content { height: auto; /* Le thème pose `flex-end` ici, ce qui collait le texte en bas. */ align-items: flex-start; /* 8rem de barre fixe + 3rem de respiration. Le bandeau blanc occupe le bas, d'où le 0. */ padding: 11rem 0 0; } body.admin-bar .hero--frontpage-child { height: auto; } /* Le thème pose `margin-bottom: 8rem` sur le titre (6rem sous 480 px) — conçu pour l'ancienne disposition où l'illustration flottait au-dessus. Additionnée à la marge de l'illustration, elle produisait un écart de 90 px réparti sur deux règles. On l'annule ici pour que l'écart soit piloté à un seul endroit : la `margin-top` de `.hero__svg`. */ .hero--frontpage-child .hero__content-title { margin-bottom: 0; } /* Blanc entre le bas de l'illustration et le premier texte de la page. Il ne vient pas du hero mais du `margin-top: 50px` que le thème pose sur `.site-content__inner`. ⚠️ Ce conteneur enveloppe le contenu de TOUTES les pages : la règle est donc limitée à l'accueil (`body.home`) et au mobile. La toucher plus largement décalerait le haut de chaque page du site. */ body.home .site-content__inner { margin-top: 2rem; } /* Bandeau de la couleur du bloc suivant, posé en pied de hero. Le hero est en `overflow: hidden` : l'illustration ne peut donc pas en sortir réellement. Ce bandeau passe AU-DESSUS du fond bleu (z-index 1) mais SOUS l'illustration (z-index 3) et sous le texte (2) — l'illustration paraît donc chevaucher la section suivante. Blanc parce que le bloc qui suit le hero ne déclare aucun fond. Vérifié le 2026-09-23 : si un jour cette section reçoit une couleur, c'est ici qu'il faudra la répercuter. */ .hero--frontpage-child .hero__content::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; height: 7rem; background-color: #fff; } /* Illustration remise DANS LE FLUX, juste après le texte. En absolu, sa distance au titre dépendait de la hauteur de l'écran ; en flux, c'est une marge constante partout. `.hero__content` est en `flex-flow: row wrap` et le bloc de texte fait 100 % de large : l'illustration passe donc naturellement à la ligne suivante. ⚠️ `position: relative` et non `static` : sans position, le `z-index` serait ignoré et le bandeau blanc — lui, positionné — passerait PAR-DESSUS l'illustration. ⚠️ Pas de `transform` ici : le thème s'en sert pour animer l'apparition (translateX(50px) → 0). Le centrage vient de `width: 100%`, pas d'une translation. */ .hero--frontpage-child .hero__svg { position: relative; z-index: 3; top: auto; right: auto; bottom: auto; left: auto; width: 100%; /* Seul réglage de l'écart titre ↔ illustration. Constant sur tous les écrans. */ margin-top: 4rem; } }