/* AgenceFood. — EN-TÊTE DE SITE, DÉFINITION UNIQUE ═══════════════════════════ Ce fichier est la seule feuille qui décrit le header : ossature, wordmark, navigation, téléphone, bouton d'action, burger, prévisualisation au survol et menu mobile. Aucune page ne redéfinit .nav, .nav-preview ou .mob dans sa feuille locale ; toute retouche se fait ici et se propage partout. Le balisage correspondant vit dans _src/header.html et est injecté dans les pages par _src/build-chrome.mjs. ══════════════════════════════════════════════════════════════════════════ */ :root{ --nav-h:80px; /* hauteur du header, identique sur toutes les pages */ --nav-pad:40px; /* marge latérale du header */ --nav-gap:32px; /* écart entre deux entrées de navigation */ } /* ── Ossature ──────────────────────────────────────────────────────────────── Trois colonnes : minmax(0,1fr) auto minmax(0,1fr). Les deux colonnes latérales sont bornées à minmax(0,1fr) et non à 1fr : un simple 1fr vaut minmax(auto,1fr) et laisse la colonne grossir au-delà de sa part quand son contenu est large, ce qui décalerait à nouveau la navigation. Bornées à zéro, les deux latérales font strictement la même largeur quel que soit leur contenu — le wordmark à gauche, le numéro et le bouton à droite. La navigation occupe la colonne centrale : elle est donc centrée sur la page, jamais sur l'espace laissé libre par ses voisines. Elle tombe au même pixel horizontal sur les six pages principales, les articles et les pages légales. */ .nav{ position:fixed;top:0;left:0;right:0;z-index:60; height:var(--nav-h);padding:0 var(--nav-pad); display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center;column-gap:var(--nav-gap); color:var(--gris-texte);background:var(--creme); border-bottom:1px solid transparent; transition:background .3s ease,color .3s,border-color .3s; } .nav__side{display:flex;align-items:center;min-width:0} .nav__side--end{justify-content:flex-end;gap:22px} /* Remises à zéro portées par le header lui-même : les pages légales et les articles n'embarquent pas la feuille des pages principales et laisseraient sinon apparaître le soulignement des liens et le cadre natif des boutons. */ .nav a,.mob a,.nav__logo,.nav__tel,.nav__cta{text-decoration:none} .nav__burger,.mob__close{font:inherit;color:inherit;background:none;border:0;padding:0} /* Le header est fixe : il ne pousse rien. Les pages dont le contenu démarre juste dessous (articles, pages légales, 404) portent ce cale-hauteur, les pages à hero pleine hauteur non. */ .nav-spacer{height:var(--nav-h)} /* ── Surimpression ──────────────────────────────────────────────────────────── Le header flotte au-dessus du hero, sans fond propre. Le texte suit ce qu'il y a derrière, d'où deux variantes : la géométrie est identique, seule la couleur change. .nav--overlay hero sombre → texte crème (accueil, offres, portfolio, à propos, blog) .nav--overlay-clair hero clair → texte foncé (contact) Sans la seconde, le header de Contact était crème sur crème : invisible. */ .nav--overlay{background:transparent;color:var(--creme);--accent:var(--creme);--on-accent:var(--noir)} .nav--overlay-clair{background:transparent;color:var(--gris-texte); --accent:var(--bordeaux);--on-accent:var(--creme)} .nav--overlay-clair .nav__logo{color:var(--noir)} .nav--overlay-clair .nav__burger span{background:var(--noir)} /* Au scroll, le header reprend son fond crème : la couleur d'action redevient le bordeaux, sinon le point du wordmark resterait crème sur crème. */ .nav.scrolled{background:var(--creme)!important;color:var(--gris-texte)!important; border-bottom-color:rgba(10,10,10,.08);--accent:var(--bordeaux);--on-accent:var(--creme)} /* ── Wordmark ─────────────────────────────────────────────────────────────── */ /* Les hauteurs de ligne sont fixées explicitement : sans cela, le header hériterait du line-height du , différent d'une famille de pages à l'autre (1 sur les pages principales, 1.6 sur les articles et les pages légales), et les éléments ne se centreraient plus au même pixel vertical. */ .nav__logo{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;line-height:1; font-family:var(--font-display);font-size:24px;letter-spacing:-.01em;color:inherit} .nav__logo .dot{color:var(--accent)} .nav__mark{width:34px;height:34px;display:block;flex:none} /* ── Navigation ───────────────────────────────────────────────────────────── */ .nav__links{display:flex;align-items:center;gap:var(--nav-gap);line-height:1.2; font-family:var(--font-body);font-weight:500;font-size:13px; text-transform:uppercase;letter-spacing:.12em} .nav__links a{color:inherit;position:relative;padding:6px 0;opacity:.92;line-height:1.2; display:inline-block;white-space:nowrap} .nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px; background:var(--bordeaux);transform:scaleX(0);transform-origin:left center; transition:transform .3s ease} .nav__links a:hover::after{transform:scaleX(1)} .nav__links a.active::after{transform:scaleX(1);background:var(--bordeaux);height:2px} /* ── Téléphone ──────────────────────────────────────────────────────────────── Le téléphone est du texte courant, pas une action : le bouton reste seul en traitement d'action. */ .nav__tel{font-family:var(--font-mono);font-weight:500;font-size:13px;letter-spacing:.12em; line-height:1.2;color:inherit;white-space:nowrap} .nav__tel:hover{opacity:.7} /* ── Bouton « Être rappelé » ────────────────────────────────────────────────── Présent dans le header de toutes les pages, accueil comprise, avec le même libellé, le même traitement et la même cible. */ .nav__cta{display:inline-block;font-family:var(--font-body);font-weight:500;font-size:12px; text-transform:uppercase;letter-spacing:.12em;white-space:nowrap;line-height:1.2; padding:13px 22px;background:var(--noir);color:var(--creme); transition:background .2s,color .2s} .nav__cta:hover{background:var(--bordeaux);color:var(--creme)} .nav--overlay .nav__cta{background:var(--creme);color:var(--noir)} .nav--overlay .nav__cta:hover{background:var(--bordeaux);color:var(--creme)} /* ── Burger ───────────────────────────────────────────────────────────────── */ .nav__burger{display:none;width:28px;height:18px;position:relative;flex:none} .nav__burger span{position:absolute;left:0;right:0;height:1.5px;background:currentColor; transition:transform .3s,top .3s,opacity .3s} .nav__burger span:nth-child(1){top:0} .nav__burger span:nth-child(2){top:8px} .nav__burger span:nth-child(3){top:16px} /* ── Prévisualisation au survol ───────────────────────────────────────────── */ .nav-preview{position:fixed;width:180px;height:180px;pointer-events:none;z-index:65; opacity:0;transform:scale(.95);transform-origin:top center;transition:opacity .25s,transform .25s; background:#1a1a1a;background-size:cover;background-position:center; box-shadow:0 14px 40px rgba(0,0,0,.3)} .nav-preview.show{opacity:1;transform:scale(1)} .nav-preview::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.6))} .nav-preview__label{position:absolute;left:10px;bottom:8px;z-index:1; font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase; color:var(--creme);opacity:.9} @media (max-width:900px),(prefers-reduced-motion:reduce){.nav-preview{display:none}} /* ── Menu mobile ──────────────────────────────────────────────────────────── */ .mob{position:fixed;inset:0;background:var(--bordeaux);color:var(--creme);z-index:80; --accent:var(--creme);--on-accent:var(--bordeaux); transform:translateY(-100%);transition:transform .55s cubic-bezier(.7,0,.2,1),visibility 0s linear .55s; display:flex;flex-direction:column; padding:84px 24px calc(24px + env(safe-area-inset-bottom)); overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain; visibility:hidden;pointer-events:none} .mob.open{transform:translateY(0);visibility:visible;pointer-events:auto; transition:transform .55s cubic-bezier(.7,0,.2,1),visibility 0s} .mob__close{position:absolute;top:16px;right:16px;font-family:var(--font-mono);font-size:12px; letter-spacing:.18em;text-transform:uppercase;cursor:pointer; min-height:48px;min-width:48px;padding:0 12px;display:inline-flex;align-items:center;justify-content:flex-end} /* Le corps est calibré pour que les six entrées, le bouton, le numéro et les réseaux tiennent sans défilement sur un écran de 667 px de haut — un iPhone SE. L'ancienne valeur (56 px minimum) n'en laissait voir que quatre. */ .mob__links{display:flex;flex-direction:column;gap:2px;font-family:var(--font-display); font-size:clamp(30px,8.2vw,44px);line-height:1.18;margin-top:auto;margin-bottom:auto} .mob__links a{display:flex;align-items:center;min-height:44px;opacity:0;transform:translateY(20px); transition:opacity .4s ease,transform .5s ease} .mob.open .mob__links a{opacity:1;transform:translateY(0)} .mob.open .mob__links a:nth-child(1){transition-delay:.18s} .mob.open .mob__links a:nth-child(2){transition-delay:.24s} .mob.open .mob__links a:nth-child(3){transition-delay:.30s} .mob.open .mob__links a:nth-child(4){transition-delay:.36s} .mob.open .mob__links a:nth-child(5){transition-delay:.42s} .mob.open .mob__links a:nth-child(6){transition-delay:.48s} .mob__links a .dot{color:var(--accent)} /* Pied du menu mobile : le bouton d'action et le numéro, absents du header sous 1081 px, sont ici, en bas d'écran, à portée de pouce. `margin-bottom:auto` sur la liste pousse ce bloc contre le bas. */ .mob__foot{display:flex;flex-direction:column;gap:14px;flex:none; padding-top:24px;border-top:1px solid rgba(244,238,223,.22)} .mob__cta{display:flex;align-items:center;justify-content:center;gap:.5rem; min-height:56px;padding:16px 24px;background:var(--creme);color:var(--bordeaux); font-family:var(--font-body);font-weight:600;font-size:13px; letter-spacing:.12em;text-transform:uppercase} .mob__tel{display:flex;align-items:center;justify-content:center;min-height:48px; font-family:var(--font-mono);font-weight:500;font-size:15px;letter-spacing:.12em; color:inherit} .mob__social{display:flex;justify-content:center;gap:24px;font-family:var(--font-mono);font-size:12px; letter-spacing:.14em;text-transform:uppercase;opacity:.85} .mob__social a{min-height:44px;display:inline-flex;align-items:center} /* ── Bandes de largeur ─────────────────────────────────────────────────────── Conséquence directe des colonnes latérales strictement égales : c'est la plus large des deux — celle du numéro et du bouton — qui fixe la largeur des deux. Sous 1300 px elle ne tient plus sans mordre sur la navigation. Le numéro sort alors du header ; il reste servi par le pied de page et par la barre d'appel mobile. Sous 1081 px c'est la navigation elle-même qui ne tient plus : on passe au burger. */ @media (min-width:1081px) and (max-width:1299px){ .nav{--nav-pad:28px;--nav-gap:24px} .nav__tel{display:none} } /* Sous 1081 px la navigation centrale est repliée dans le menu mobile : il n'y a plus rien à centrer, la grille à trois colonnes n'a plus d'objet. Le header repasse en flex — wordmark à gauche, numéro et burger à droite — pour que le wordmark ne soit pas contraint par une colonne de largeur imposée. */ @media (max-width:1080px){ .nav{display:flex;justify-content:space-between;--nav-pad:24px} .nav__side--end{gap:8px} .nav__links,.nav__cta{display:none} /* Cibles tactiles. Les trois barres du burger ne faisaient que 28 × 18 px et le numéro 14 px de haut : sous le seuil de 44 px, on tape à côté. La zone sensible est portée à 44 px sans rien déplacer à l'écran — les barres restent au même endroit, les marges négatives compensent l'élargissement pour que le bord droit du header ne bouge pas. */ .nav__burger{display:block;cursor:pointer;width:44px;height:44px;margin-right:-8px} .nav__burger span{left:8px;right:8px} .nav__burger span:nth-child(1){top:13px} .nav__burger span:nth-child(2){top:21px} .nav__burger span:nth-child(3){top:29px} .nav__tel{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin-right:-6px} .nav__logo{min-height:44px} } /* Entre 901 et 1080 px le header prend un fond crème explicite : dans cette bande le contenu démarre sous lui, il n'y a rien derrière pour porter le contraste d'une surimpression. */ @media (min-width:901px) and (max-width:1080px){ .nav{background:var(--creme);border-bottom-color:rgba(10,10,10,.08); color:var(--gris-texte);--accent:var(--bordeaux);--on-accent:var(--creme)} .nav--overlay,.nav--overlay:not(.scrolled), .nav--overlay-clair,.nav--overlay-clair:not(.scrolled){background:var(--creme);color:var(--gris-texte)} .nav__logo,.nav--overlay:not(.scrolled) .nav__logo{color:var(--noir)} .nav--overlay-clair .nav__cta{background:var(--noir);color:var(--creme)} .nav__burger span,.nav--overlay:not(.scrolled) .nav__burger span{background:var(--noir)} } @media (max-width:900px){ .nav{--nav-pad:22px} .nav__tel{font-size:12px;letter-spacing:.06em} }