/* ============================================================ EGGERSMANN — feuille du mini-site de marque ------------------------------------------------------------ Portée : uniquement les pages qui portent .egg sur le . On garde la charte 2026 (typo, composants, header, pied de page) ; on n'ajuste QUE ce qui distingue cette maison allemande : des fonds blancs au lieu du crème. Relevé dans leur CSS : #fff (blanc pur) et #f6f6f6 (gris clair). Aucun crème nulle part. C'est leur signature : le vide est blanc. ============================================================ */ .egg{ --e-blanc: #ffffff; /* leur fond principal */ --e-gris: #f6f6f6; /* leur second fond */ --e-ligne: #e6e6e6; } /* Les sections claires passent du crème au blanc */ .egg .ac-sec--ivory { background: var(--e-blanc); } .egg .ac-sec--ivory-2 { background: var(--e-gris); } .egg .ac-art-page { background: var(--e-blanc); } .egg { background: var(--e-blanc); } /* les filets se règlent sur le fond plus clair */ .egg .ac-sec + .ac-sec { border-top-color: var(--e-ligne); } /* ============================================================ Menu de la marque — collant sous le menu du site Il reste visible pendant toute la visite : on comprend qu'on est dans un espace dédié, sans jamais quitter cuisine64. ============================================================ */ .egg .egg-nav{ position: sticky; top: var(--k-header-h); z-index: 60; background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--e-ligne); } .egg .egg-nav__in{ max-width: var(--k-max); margin-inline: auto; padding: .72rem var(--k-pad); display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); } /* le logotype de la marque, à gauche — vectoriel, jamais redessiné */ .egg .egg-nav__logo{ flex: none; width: clamp(96px, 9vw, 132px); height: auto; display: block; fill: var(--k-ink); } .egg .egg-nav__sep{ flex: none; width: 1px; height: 1.5rem; background: var(--e-ligne); } .egg .egg-nav__links{ display: flex; align-items: center; gap: clamp(.9rem, 2vw, 2rem); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .egg .egg-nav__links::-webkit-scrollbar{ display: none; } .egg .egg-nav__links a{ flex: none; font-size: var(--k-tick); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--k-ink-soft); text-decoration: none; padding: .3rem 0; border-bottom: 1px solid transparent; transition: color .3s var(--k-ease), border-color .3s var(--k-ease); white-space: nowrap; } .egg .egg-nav__links a:hover, .egg .egg-nav__links a:focus-visible{ color: var(--k-ink); border-bottom-color: var(--k-ink); } .egg .egg-nav__links a.is-on{ color: var(--k-ink); border-bottom-color: var(--k-ink); } /* les ancres doivent s'arrêter sous les DEUX barres */ .egg [id]{ scroll-margin-top: calc(var(--k-header-h) + 4rem); } @media (max-width: 860px){ .egg .egg-nav__in{ padding-block: .6rem; gap: .9rem; } .egg .egg-nav__logo{ width: 84px; } .egg .egg-nav__sep{ display: none; } } /* ============================================================ Section « De Nouvelle-Aquitaine » — photo de fond Le bloc était un aplat sombre nu. On y pose une photo, un voile dégradé côté texte pour garantir la lisibilité, et on descend la phrase d'accroche sous le titre plutôt qu'en vis-à-vis. ============================================================ */ .egg .egg-terr{ position: relative; overflow: hidden; background: var(--k-noir); color: var(--k-blanc); } .egg .egg-terr__bg{ position: absolute; inset: 0; z-index: 0; } .egg .egg-terr__bg img{ width: 100%; height: 100%; object-fit: cover; object-position: center; } /* voile : dense à gauche sous le texte, transparent à droite sur l'image */ .egg .egg-terr__bg::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,16,13,.94) 0%, rgba(20,16,13,.88) 34%, rgba(20,16,13,.55) 62%, rgba(20,16,13,.28) 100%), linear-gradient(180deg, rgba(20,16,13,.55) 0%, rgba(20,16,13,.12) 40%, rgba(20,16,13,.12) 62%, rgba(20,16,13,.62) 100%); } .egg .egg-terr__in{ position: relative; z-index: 1; max-width: var(--k-max); margin-inline: auto; /* rembourrage resserré : le bloc doit tenir dans un écran sans défiler */ padding: clamp(2rem, 3.6vw, 3.2rem) var(--k-pad); } .egg .egg-terr__col{ max-width:none; display:grid; column-gap:clamp(2rem,4vw,4.5rem); row-gap:clamp(1.4rem,3vw,2.4rem); grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; } /* La colonne de gauche est UN SEUL element de grille (.egg-terr__gauche). Auparavant le logo, le sur-titre, le titre et l'accroche etaient quatre elements a plat : la grille leur donnait une ligne chacun, et le corps de droite — place sur grid-row 1/-1 — etirait ces lignes a sa hauteur. Resultat vu le 2026-08-11 : sur-titre au milieu, titre en bas, corps en haut a droite. Un seul enfant par colonne supprime le probleme a la racine. */ .egg .egg-terr__gauche{ grid-column:1; display:flex; flex-direction:column; align-items:flex-start; } .egg .egg-terr__corps{ grid-column:2; } @media (min-width:901px){ .egg .egg-terr__gauche, .egg .egg-terr__corps{ grid-row:1; } } .egg .egg-terr__lede{ max-width:44ch; } @media (max-width:900px){ .egg .egg-terr__col{ grid-template-columns:minmax(0,1fr); } .egg .egg-terr__gauche, .egg .egg-terr__corps{ grid-column:1; grid-row:auto; } } .egg .egg-terr .ac-eyebrow{ color: var(--k-pierre-clr); } .egg .egg-terr__t{ font-family: var(--k-serif); font-weight: 500; font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.08; margin: .4rem 0 .9rem; color: var(--k-blanc); } /* l'accroche vient SOUS le titre, plus en colonne de droite */ .egg .egg-terr__lede{ font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.62; color: rgba(247,244,238,.9); margin: 0 0 2rem; max-width: 46ch; } .egg .egg-terr__corps p{ color: rgba(247,244,238,.82); line-height: 1.72; margin: 0 0 1rem; max-width: none; } .egg .egg-terr__corps p strong{ color: #fff; font-weight: 600; } /* ============================================================ Bloc matière — un carré de quatre : le film de la manufacture et trois vues de la matière. La vidéo seule, en grand au milieu de la page, cadrait mal et coupait la lecture. ============================================================ */ .egg .egg-quatre{ max-width: var(--k-max); margin: clamp(2rem,4vw,3.5rem) auto 0; padding-inline: var(--k-pad); display: grid; gap: clamp(.5rem,1vw,1rem); grid-template-columns: repeat(2, minmax(0,1fr)); } .egg .egg-quatre figure{ margin: 0; } .egg .egg-quatre :is(img,video){ display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; background: var(--e-gris); } .egg .egg-quatre figcaption{ margin-top: .5rem; font-size: var(--k-tick); letter-spacing: .1em; text-transform: uppercase; color: var(--k-pierre); line-height: 1.45; } @media (max-width: 640px){ .egg .egg-quatre{ grid-template-columns: minmax(0,1fr); } } /* ============================================================ Figures pleine largeur — les visuels de projet respirent. Sur ce mini-site, l'image est l'argument : on lui laisse la place. ============================================================ */ .egg .egg-figure{ margin: clamp(2rem,4vw,3.5rem) 0 0; } .egg .egg-figure img{ display: block; width: 100%; max-width: var(--k-max); margin-inline: auto; /* Une photo en portrait affichée pleine largeur dépassait deux écrans de haut. On la cadre à 78 % de la hauteur visible : l'image reste imposante, mais on voit toujours où l'on est dans la page. */ height: auto; max-height: 78svh; object-fit: cover; object-position: center; } .egg .egg-figure figcaption{ max-width: var(--k-max); margin: .9rem auto 0; padding-inline: var(--k-pad); font-size: var(--k-tick); letter-spacing: .12em; text-transform: uppercase; color: var(--k-pierre); } /* Citation d'architecte dans un bloc sombre */ .egg .egg-cite{ margin: 1.8rem 0 0; padding-left: 1.2rem; border-left: 2px solid rgba(247,244,238,.34); } .egg .egg-cite p{ font-family: var(--k-serif); font-size: clamp(1.05rem,1.5vw,1.28rem); line-height: 1.6; color: rgba(247,244,238,.94); margin: 0 0 .6rem; } .egg .egg-cite footer{ font-size: var(--k-tick); letter-spacing: .14em; text-transform: uppercase; color: var(--k-pierre-clr); } /* ============================================================ Page contact du mini-site — formulaire + colonne d'information ============================================================ */ .egg .egg-contact{ display: grid; gap: clamp(2rem,5vw,4.5rem); grid-template-columns: minmax(0,1.35fr) minmax(0,.65fr); align-items: start; } @media (max-width: 900px){ .egg .egg-contact{ grid-template-columns: minmax(0,1fr); } } .egg .egg-contact__aside{ background: var(--e-gris); padding: clamp(1.6rem,3vw,2.4rem); border: 1px solid var(--e-ligne); } .egg .egg-contact__t{ font-family: var(--k-serif); font-weight: 500; font-size: clamp(1.5rem,2.4vw,2rem); line-height: 1.12; margin: .4rem 0 1rem; color: var(--k-ink); } .egg .egg-contact__l{ font-size: .92rem; line-height: 1.7; color: var(--k-ink-soft); margin: 0 0 .9rem; } .egg .egg-contact__note{ margin: 2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--e-ligne); font-size: .84rem; line-height: 1.65; color: var(--k-pierre); } /* les quatre étapes qui suivent l'envoi */ .egg .egg-etapes{ list-style: none; margin: .8rem 0 0; padding: 0; counter-reset: e; } .egg .egg-etapes li{ display: grid; grid-template-columns: 2.1rem 1fr; gap: .5rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--e-ligne); font-size: .88rem; line-height: 1.55; color: var(--k-ink-soft); } .egg .egg-etapes li:last-child{ border-bottom: 0; } .egg .egg-etapes li span{ font-family: var(--k-serif); font-size: .95rem; color: var(--k-pierre); } /* le piège à robots ne doit jamais se voir ni s'atteindre au clavier */ .egg .ac-form__pot{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ============================================================ Formulaire sur fond clair — RATTRAPAGE INDISPENSABLE ------------------------------------------------------------ .ac-form du site est dessiné pour un fond SOMBRE : texte blanc, placeholder clair, bordure claire à 18 % d'opacité. Repris tel quel sur le fond blanc de ce dossier, le texte saisi devenait invisible (contraste mesuré : 1,10:1) et les champs n'apparaissaient qu'au focus. Tout est repris ici pour un fond clair. ============================================================ */ .egg .ac-form :is(input[type=text],input[type=email],input[type=tel],select,textarea,input[type=file]){ background: #fff; color: var(--k-ink); border: 1px solid #cfc9bd; /* visible au repos, sans être dure */ } .egg .ac-form :is(input,select,textarea):hover{ border-color: #a9a294; } .egg .ac-form :is(input,select,textarea):focus{ outline: none; border-color: var(--k-ink); box-shadow: 0 0 0 3px rgba(38,32,25,.08); /* l'anneau de focus reste perceptible */ background: #fff; } .egg .ac-form ::placeholder{ color: #8b8375; opacity: 1; } /* la flèche du menu déroulant était dessinée en clair */ .egg .ac-form select{ background-image: linear-gradient(45deg, transparent 50%, var(--k-ink) 50%), linear-gradient(135deg, var(--k-ink) 50%, transparent 50%); } .egg .ac-form select option{ background: #fff; color: var(--k-ink); } /* le bouton « Choisir un fichier » */ .egg .ac-form input[type=file]::file-selector-button{ background: var(--k-ink); color: #fff; border: 0; } .egg .ac-form input[type=file]::-webkit-file-upload-button{ background: var(--k-ink); color: #fff; border: 0; } /* libellés, aides et case à cocher */ .egg .ac-form label{ color: var(--k-ink-soft); } .egg .ac-form__aide{ color: #6f6759; } .egg .ac-form__check label{ color: var(--k-ink-soft); } .egg .ac-form input[type=checkbox]{ accent-color: var(--k-ink); } /* ============================================================ Triptyque d'ouverture — trois angles d'une même promesse. Posé juste sous le hero, avant le déroulé détaillé. ============================================================ */ .egg .egg-tri{ background: var(--e-gris); border-bottom: 1px solid var(--e-ligne); } .egg .egg-tri__in{ max-width: var(--k-max); margin-inline: auto; padding: clamp(2.6rem,5vw,4.5rem) var(--k-pad); display: grid; gap: clamp(1.8rem,3.4vw,3.4rem); grid-template-columns: repeat(3, minmax(0,1fr)); } @media (max-width: 900px){ .egg .egg-tri__in{ grid-template-columns: minmax(0,1fr); } } .egg .egg-tri__i{ border-top: 1px solid var(--k-ink); padding-top: 1.1rem; } .egg .egg-tri__t{ font-family: var(--k-serif); font-weight: 500; font-size: clamp(1.15rem,1.7vw,1.45rem); line-height: 1.18; color: var(--k-ink); margin: 0 0 .7rem; } .egg .egg-tri__d{ font-size: .92rem; line-height: 1.68; color: var(--k-ink-soft); margin: 0; max-width: 42ch; } /* ============================================================ Galerie de matières — la photo est l'argument sur ce mini-site. Grille dense, sans cadre ni ombre : les images se touchent presque, comme une planche d'échantillons. ============================================================ */ .egg .egg-gal{ max-width: var(--k-max); margin-inline: auto; padding: 0 var(--k-pad); display: grid; gap: clamp(.5rem,1vw,1rem); grid-template-columns: repeat(4, minmax(0,1fr)); } .egg .egg-gal figure{ margin: 0; } .egg .egg-gal img{ display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--e-gris); } /* deux formats mis en avant */ .egg .egg-gal .egg-gal--large{ grid-column: span 2; grid-row: span 2; } .egg .egg-gal .egg-gal--large img{ aspect-ratio: 1/1; height: 100%; } .egg .egg-gal .egg-gal--wide{ grid-column: span 2; } .egg .egg-gal .egg-gal--wide img{ aspect-ratio: 16/10; } .egg .egg-gal figcaption{ margin-top: .5rem; font-size: var(--k-tick); letter-spacing: .1em; text-transform: uppercase; color: var(--k-pierre); line-height: 1.4; } @media (max-width: 900px){ .egg .egg-gal{ grid-template-columns: repeat(2, minmax(0,1fr)); } .egg .egg-gal .egg-gal--large, .egg .egg-gal .egg-gal--wide{ grid-column: span 2; grid-row: auto; } .egg .egg-gal .egg-gal--large img{ aspect-ratio: 4/5; } } .egg .egg-gal-note{ max-width: var(--k-max); margin: 1.2rem auto 0; padding-inline: var(--k-pad); font-size: .86rem; line-height: 1.6; color: var(--k-pierre); max-width: 68ch; } /* ============================================================ DUO — texte et image côte à côte, alternés d'un chapitre à l'autre. ------------------------------------------------------------ Sans cela, `.ac-prose` (max-width 74ch, hérité des articles où un sommaire occupe la colonne de gauche) laissait 745 px de vide à droite sur un écran de 1600 : la page semblait calée à gauche comme sur mobile. Ici le texte garde sa largeur de lecture confortable, et l'image occupe l'espace resté libre. ============================================================ */ .egg .egg-duo{ max-width: var(--k-max); margin-inline: auto; padding-inline: var(--k-pad); display: grid; gap: clamp(2rem,4vw,4.5rem); grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; } /* un chapitre sur deux inverse l'ordre : le rythme naît de l'alternance */ .egg .egg-duo--inverse .egg-duo__img{ order: -1; } .egg .egg-duo__txt .ac-prose{ max-width: 60ch; } .egg .egg-duo__img{ margin: 0; } .egg .egg-duo__img :is(img,video){ display: block; width: 100%; /* ratio imposé : sans lui, une image en portrait faisait deux fois la hauteur du texte et laissait celui-ci flotter au milieu d'un grand vide. */ aspect-ratio: 4/3; height: auto; object-fit: cover; } /* le triptyque n'a pas besoin du grand padding de section en dessous */ .egg .egg-tri + .ac-sec{ padding-top: clamp(2.5rem,5vw,4.5rem); } .egg .egg-duo__img figcaption{ margin-top: .7rem; font-size: var(--k-tick); letter-spacing: .1em; text-transform: uppercase; color: var(--k-pierre); line-height: 1.45; } @media (max-width: 900px){ .egg .egg-duo{ grid-template-columns: minmax(0,1fr); gap: 1.8rem; } .egg .egg-duo--inverse .egg-duo__img{ order: 0; } } /* Bloc de texte SANS image : il ne doit plus flotter à gauche. Deux colonnes de lecture sur grand écran, une seule en dessous. */ .egg .egg-large{ max-width: var(--k-max); margin-inline: auto; padding-inline: var(--k-pad); } .egg .egg-large .ac-prose{ max-width: none; columns: 2; column-gap: clamp(2rem,4vw,4.5rem); } .egg .egg-large .ac-prose > *{ break-inside: avoid; } .egg .egg-large .ac-prose table{ columns: 1; } @media (max-width: 900px){ .egg .egg-large .ac-prose{ columns: 1; } } /* un tableau n'est jamais mis en colonnes : il prend toute la largeur */ .egg .egg-tableau{ max-width: var(--k-max); margin-inline: auto; padding-inline: var(--k-pad); } .egg .egg-tableau .ac-prose{ max-width: none; } /* le logotype du menu de marque ramène à l'accueil du dossier */ .egg .egg-nav__home{ display: block; flex: none; line-height: 0; } .egg .egg-nav__home .egg-nav__logo{ transition: opacity .25s var(--k-ease); } .egg .egg-nav__home:hover .egg-nav__logo, .egg .egg-nav__home:focus-visible .egg-nav__logo{ opacity: .62; } /* Le logo du groupe ouvre le bloc « De Nouvelle-Aquitaine », comme sur la carte de l'accueil : c'est le groupe qui porte l'exclusivité. */ .egg .egg-terr__gl-wrap{ display:block; margin:0 0 1.4rem; width:max-content; } .egg .egg-terr__gl{ display:block; width:clamp(104px,9vw,134px); height:auto; border-radius:50%; box-shadow:0 0 0 1px rgba(247,244,238,.22); } /* ── 05 · NOS ATOUTS ──────────────────────────────────────────────────────── Cinq points structures. L'ancien .egg-terr etait taille pour deux paragraphes courts : au-dela, le titre se detachait en haut, le corps partait a droite et la lecture imposait de scroller dans tous les sens. Ici : un en-tete tenu, puis une grille numerotee. Fond sombre uni — une photo derriere cinq paragraphes n'est jamais lisible. */ .egg .egg-atouts{ background: var(--k-charbon, #1a1512); padding-block: clamp(3.5rem, 7vw, 6rem); } .egg .egg-atouts__in{ width: min(var(--container-max, 1320px), 92vw); margin-inline: auto; } .egg .egg-atouts__head{ display: grid; gap: clamp(1.2rem, 3vw, 3rem); grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: end; margin-bottom: clamp(2.4rem, 5vw, 4rem); } @media (max-width: 900px){ .egg .egg-atouts__head{ grid-template-columns: minmax(0, 1fr); align-items: start; } } .egg .egg-atouts__gl{ display: block; width: 92px; height: auto; margin: 0 0 1.4rem; opacity: .9; } .egg .egg-atouts .ac-eyebrow{ color: var(--k-pierre-clr); } .egg .egg-atouts__t{ font-family: var(--k-serif); font-weight: 400; color: #fff; font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.12; letter-spacing: -.01em; margin: .5rem 0 0; } .egg .egg-atouts__lede{ color: rgba(255,255,255,.82); font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.65; max-width: 46ch; margin: 0; } .egg .egg-atouts__grid{ display: grid; gap: clamp(1.6rem, 3vw, 2.6rem) clamp(2rem, 4vw, 3.6rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); border-top: 1px solid rgba(255,255,255,.14); padding-top: clamp(2rem, 4vw, 3rem); } .egg .egg-atouts__it{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 1rem; } .egg .egg-atouts__n{ font-family: var(--k-serif); font-size: 1.05rem; line-height: 1.5; color: var(--k-pierre-clr); grid-row: 1 / 3; width: 1.9ch; /* « 01 » et « 04 » n'ont pas la meme chasse en Forum : sans largeur fixe, les titres se decalent d'un item a l'autre */ font-variant-numeric: tabular-nums; } .egg .egg-atouts__k{ color: #fff; font-weight: 600; font-size: 1.02rem; line-height: 1.4; margin: 0 0 .45rem; } .egg .egg-atouts__p{ color: rgba(255,255,255,.78); font-size: .97rem; line-height: 1.68; margin: 0; } .egg .egg-atouts__p a{ color: #fff; text-underline-offset: .22em; } /* fond sombre : la regle generique de .ac-prose colore les en encre — 1,1:1, invisible. Deja rencontre en #v60. On force le blanc. */ .egg .egg-atouts__p strong, .egg .egg-atouts__k strong{ color: #fff; font-weight: 600; } .egg .egg-atouts__pied{ margin: clamp(2rem, 4vw, 3rem) 0 0; padding-top: clamp(1.4rem, 3vw, 2rem); border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.82); font-size: 1rem; line-height: 1.65; } .egg .egg-atouts__pied strong{ color: #fff; font-weight: 600; } /* ── DENSITE DU DOSSIER ───────────────────────────────────────────────────── Mesure du 2026-08-11 : chaque section faisait 1600 a 3000 px pour un ecran de 900. Trois causes cumulees, corrigees ici : 1. padding-block de 129,6 px en haut ET en bas — 29 % d'un ecran perdu ; 2. .egg-duo en align-items:center — un texte de 266 px centre dans une piste de 486 px laissait 110 px de vide au-dessus et en dessous ; 3. trois etages empiles (en-tete + duo + grande figure) sans plafond. Tout est scope .egg : le reste du site garde son rythme. */ .egg .ac-sec{ padding-block: clamp(2.4rem, 4.6vw, 4.2rem); } .egg .ac-sec__head{ margin-bottom: clamp(1.4rem, 2.6vw, 2.4rem); } /* le texte se cale en haut de l'image, plus au milieu d'un vide */ .egg .egg-duo{ align-items: start; } .egg .egg-duo__txt{ padding-top: .2rem; } /* aucune image ne depasse les deux tiers d'un ecran : au-dela, on scrolle dans une seule photo sans savoir qu'il y a du texte apres */ .egg .ac-figure :is(img, video){ max-height: 62vh; object-fit: cover; } .egg .ac-space__ph :is(img, video){ max-height: 46vh; object-fit: cover; } .egg .egg-duo__img :is(img, video){ max-height: 56vh; } .egg .egg-gal--large :is(img, video){ max-height: 66vh; object-fit: cover; } /* le carre de quatre : en 1/1 sur deux colonnes de 700 px, chaque image faisait 657 px de haut — 1329 px pour le bloc, soit un ecran et demi rien que pour lui. Le carre doit se voir d'un coup : on plafonne chaque case a 37 vh. */ .egg .egg-quatre :is(img, video){ max-height: 37vh; } /* ── SE SITUER DANS LE DOSSIER ────────────────────────────────────────────── Retour du proprietaire (2026-08-11) : « je descends sur matieres puis sur bois, je suis perdu, je ne vois meme plus en haut que je suis sur matieres ». Le menu de marque n'avait aucun marqueur de page courante et il n'existait aucun fil d'Ariane. Deux reperes ajoutes. */ /* 1 · la page courante se voit dans le menu de marque. On reprend le mecanisme deja en place (.is-on, border-bottom) plutot que d'en inventer un second : un seul trait, une seule facon de le tracer. */ .egg .egg-nav__links a[aria-current="page"]{ color: var(--k-ink); border-bottom-color: var(--k-ink); } /* 2 · fil d'Ariane, colle sous le menu de marque */ .egg .egg-fil{ /* la barre de marque est sticky a var(--k-header-h) et mesure ~52 px : le fil doit se poser JUSTE dessous, sinon les deux se recouvrent. */ position: sticky; top: calc(var(--k-header-h) + 52px); z-index: 18; background: var(--e-ivoire, #f7f5f1); border-bottom: 1px solid rgba(26,21,18,.08); font-size: .78rem; letter-spacing: .06em; /* le fond reste pleine largeur, mais le TEXTE se cale sur la meme colonne que .egg-nav__in — donc a l'aplomb du logotype, pas au bord de l'ecran. */ padding-block: .55rem; padding-inline: max(var(--k-pad), calc((100% - var(--k-max)) / 2 + var(--k-pad))); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .egg .egg-fil a{ color: rgba(26,21,18,.62); text-decoration: none; text-underline-offset: .2em; } .egg .egg-fil a:hover{ color: var(--e-encre, #1a1512); text-decoration: underline; } .egg .egg-fil span[aria-current]{ color: var(--e-encre, #1a1512); font-weight: 600; } .egg .egg-fil span[aria-hidden]{ color: rgba(26,21,18,.32); } @media (max-width: 560px){ .egg .egg-fil{ font-size: .72rem; padding-inline: var(--k-pad); } } /* 3 · un retour explicite en bas de chaque sous-page : arrive au bout d'une page longue, le menu de marque est loin au-dessus. */ .egg .egg-retour{ padding-block: 0 clamp(2rem, 4vw, 3.4rem); text-align: center; } .egg .egg-retour__l{ display: inline-flex; align-items: center; gap: .55rem; font-size: var(--k-tick); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--k-ink-soft); text-decoration: none; padding: .55rem 0; border-bottom: 1px solid transparent; transition: color .3s var(--k-ease), border-color .3s var(--k-ease); } .egg .egg-retour__l:hover, .egg .egg-retour__l:focus-visible{ color: var(--k-ink); border-bottom-color: var(--k-ink); } /* le pied de « Nos atouts » nomme le showroom : il doit y mener — et se voir. En blanc sans soulignement sur fond sombre, le lien etait invisible. */ .egg .egg-atouts__pied a{ color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; } /* le maillon de la page redevient cliquable quand on descend dans une section : c'est le demi-tour d'un niveau reclame par le proprietaire. */ .egg .egg-fil__page{ color: rgba(26,21,18,.62); } .egg .egg-fil__page[aria-current="page"]{ color: var(--e-encre, #1a1512); font-weight: 600; } .egg .egg-fil__sec{ color: var(--e-encre, #1a1512); font-weight: 600; } /* Hero de la fiche marque, SUR TÉLÉPHONE UNIQUEMENT. L'image fait 1920×860 : sur un écran étroit, le recadrage automatique (object-position:center) montre le centre — donc la fenêtre, claire, sous le titre. À 28 %, on voit le bois et le meuble sombre : le texte blanc se lit. Sur desktop et iPad, le cadrage d'origine est conservé. */ @media (max-width:860px){ .ac .ac-hero--cadre-gauche .ac-hero__bg img{ object-position:28% center; } }