/* ========================================================= Feuille de style unique — design sobre et moderne Palette neutre, facile à personnaliser (voir variables ci-dessous) ========================================================= */ :root { --couleur-fond: #ffffff; --couleur-surface: #ffffff; --couleur-encre: #171814; /* quasi-noir : texte + fond du header */ --couleur-encre-claire:#f4f2ec; /* texte clair sur fond sombre */ --couleur-texte: var(--couleur-encre); --couleur-texte-doux: #5c5f57; --couleur-bordure: #e4e1d8; --couleur-accent: #b0442b; /* rouge brique */ --couleur-accent-fonce:#8a3520; --couleur-danger: #c62828; --couleur-succes: #2f6a44; --couleur-succes-fond: #eaf3ec; --couleur-erreur-fond: #fbeceb; --couleur-attention: #d9a520; /* jaune ambré — badge « réservé » */ --couleur-kaki: #6b6f47; /* vert kaki — touche seconde guerre, utilisée avec parcimonie */ --couleur-kaki-fonce: #52553a; --couleur-kaki-fond: #e3e1cb; /* fond teinté kaki/militaire (plus soutenu qu'un vert pastel) */ --couleur-kaki-fond-vif:rgba(107, 111, 71, 0.12); --couleur-gris-fonce: #34342f; /* gris foncé chaud (remplace le kaki du fond "Coup de cœur" le 13/07/2026) */ --rayon: 10px; --ombre: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); /* Typographie unifiée (27/07/2026, demande Enzo — Option 3 "famille unique, cohérente" validée sur l'aperçu de la page annonce) : une seule famille de caractères (Barlow) déclinée en deux graisses/ largeurs pour les titres et le texte courant, à la place de l'ancien mélange Oswald (titres) + IBM Plex Sans (texte) + Bebas Neue (accroches en gros caractères, désormais retirée partout — voir .page-hero .intro-page h1, .fiche-detail__prix et .site-footer__logo-texte plus bas). */ --police: 'Barlow', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --police-titres: 'Barlow Semi Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } /* ⚠️ 29/07/2026 (bande blanche signalée par Enzo en haut de l'accueil, visible en descendant puis remontant rapidement dans la page) : le header (.header-b__principal) est en `position: sticky; top: 0`, tout premier élément du — rien ne couvre donc l'espace au-dessus de lui. Quand le défilement dépasse le haut du document (rebond élastique du trackpad/souris à molette lors d'un retour rapide vers le haut — "overscroll"/"rubber-band"), le navigateur découvre brièvement cette zone hors document et affiche le fond de la page à la place — blanc par défaut, d'où la bande blanche au-dessus du header (dont le propre fond, lui, reste correct). Corrigé par deux moyens complémentaires : (1) `overscroll-behavior-y: none` empêche ce rebond d'aller au-delà du haut réel du document (Chrome/Edge/Firefox — geste simplement absorbé, aucun impact sur le défilement normal) ; (2) en filet de sécurité pour les navigateurs qui autorisent quand même un léger rebond visuel (Safari notamment), le fond de est aligné sur `--couleur-encre` (la couleur du header) plutôt que blanc — un éventuel reste de rebond redevient donc invisible au lieu de former une bande blanche contrastée. */ html { background-color: var(--couleur-encre); overscroll-behavior-y: none; /* 31/07/2026 : renfort de la propriété raccourcie (couvre x et y) en plus de -y ci-dessus, pour les navigateurs qui la préfèrent. */ overscroll-behavior: none; } body { margin: 0; font-family: var(--police); background: var(--couleur-fond); color: var(--couleur-texte); line-height: 1.5; overscroll-behavior-y: none; /* ⚠️ 25/07/2026 : filet de sécurité pour les blocs qui débordent volontairement jusqu'aux bords de la fenêtre via `width:100vw` + marges négatives (.page-hero, .accueil-layout, .bloc-accueil, .fiche-detail__similaires...). `100vw` inclut la largeur d'une éventuelle scrollbar verticale "classique" (non-overlay), alors que le reste du document se cale sur la largeur visible réelle (hors scrollbar) — sur un appareil avec scrollbar classique (tablette avec trackpad/souris type Surface, Chromebook...), ces blocs devenaient très légèrement plus larges que l'écran, ce qui pouvait provoquer un débordement horizontal. N'affecte pas les défilements horizontaux volontaires internes (glissière, galerie photo, vignettes), qui utilisent leur propre overflow-x:auto imbriqué. */ overflow-x: hidden; } h1, h2, h3, .carte-annonce__titre, .carte-annonce__categorie, .bouton-principal, .bouton-secondaire, .bouton-danger, .barre-filtres button, .tableau-admin th { font-family: var(--police-titres); } a { color: var(--couleur-accent-fonce); text-decoration: none; } a:hover { text-decoration: underline; } /* --- Icônes SVG maison (touches de décor sobres) ----------------------- */ .icone { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; flex-shrink: 0; } .conteneur { max-width: 1100px; margin: 0 auto; padding: 0 20px; } /* Conteneur élargi pour les pages de listing (accueil, à vendre, vendu) : permet des cartes annonces un peu plus grandes et une grille à 4 colonnes confortable. */ main.page-principale--large { max-width: 1400px; } /* --- Espace admin : header ---------------------------------------------- Remplace le bandeau texte "Administration — War Machines" (28/07/2026, demande Enzo — maquette validée) : vrai logo, navigation à icônes avec état actif, pastille de suivi ("annonces en attente"), identité/déconnexion à droite. Nettoyage au passage : les anciennes classes .site-header / .site-nav / .site-logo / .bouton-plaque (ancien header public, retiré le 13/07/2026, conservées jusqu'ici uniquement pour l'espace admin) ne sont plus référencées par aucune page — supprimées plutôt que laissées mortes dans la feuille de style (vérifié par recherche globale avant suppression). */ .admin-header { background: var(--couleur-encre); } .admin-header__interieur { max-width: 1320px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 28px; height: 68px; } .admin-header__marque { display: flex; align-items: center; gap: 12px; text-decoration: none; padding-right: 22px; border-right: 1px solid rgba(244, 242, 236, 0.18); } .admin-header__marque:hover { text-decoration: none; } .admin-header__marque-logo { height: 30px; width: auto; display: block; } .admin-header__marque-textes { display: flex; flex-direction: column; line-height: 1.15; } .admin-header__marque-nom { font-family: var(--police-titres); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.02em; color: #fff; } .admin-header__marque-tag { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(244, 242, 236, 0.55); } .admin-header__nav { display: flex; align-items: center; gap: 4px; flex: 1; } .admin-header__nav a { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-family: var(--police-titres); font-weight: 600; font-size: 0.88rem; letter-spacing: 0.03em; text-transform: uppercase; color: rgba(244, 242, 236, 0.75); text-decoration: none; transition: background 0.2s ease, color 0.2s ease; } .admin-header__nav a .icone { opacity: 0.8; } .admin-header__nav a:hover { background: rgba(244, 242, 236, 0.08); color: #fff; text-decoration: none; } .admin-header__nav a.actif { background: var(--couleur-accent); color: #fff; } .admin-header__nav a.actif .icone { opacity: 1; } .admin-header__pastille { background: var(--couleur-accent); color: #fff; font-family: var(--police); font-size: 0.72rem; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .admin-header__nav a.actif .admin-header__pastille { background: rgba(255, 255, 255, 0.28); } .admin-header__compte { display: flex; align-items: center; gap: 14px; } .admin-header__compte-nom { font-size: 0.85rem; color: rgba(244, 242, 236, 0.65); white-space: nowrap; } .admin-header__compte-nom strong { color: #fff; font-weight: 600; } .admin-header__deconnexion { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--rayon); border: 1px solid rgba(244, 242, 236, 0.25); color: rgba(244, 242, 236, 0.85); font-size: 0.82rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background 0.2s ease, border-color 0.2s ease; } .admin-header__deconnexion:hover { background: rgba(244, 242, 236, 0.08); border-color: rgba(244, 242, 236, 0.4); text-decoration: none; } @media (max-width: 900px) { .admin-header__interieur { flex-wrap: wrap; height: auto; padding: 14px 20px; gap: 14px; } .admin-header__marque { border-right: none; padding-right: 0; } .admin-header__nav { order: 3; width: 100%; flex-wrap: wrap; } .admin-header__compte { margin-left: auto; } } /* ===================================================================== Header public "Classique & institutionnel" (validé avec Enzo le 13/07/2026, après comparaison de 2 maquettes ; bandeau utilitaire défilant retiré le 20/07/2026, cf. maj-47) : logo centré en médaillon flanqué de la navigation de part et d'autre, bouton d'action à coins abattus façon plaque d'identification militaire. Remplace l'ancien header (.site-header / .site-nav / .site-logo), gardé un temps pour l'espace admin seul avant d'être lui aussi remplacé le 28/07/2026 (voir .admin-header plus bas) — plus aucune page ne référence ces anciennes classes, supprimées. ===================================================== */ /* Sentinelle invisible placée juste avant le header sur les pages avec hero (.page-hero) : haute comme le header lui-même (--hauteur-header), positionnée hors flux tout en haut du document. Observée en JS (IntersectionObserver) pour faire basculer .header--colle dès qu'elle sort du haut de la fenêtre, càd dès que le bas du header atteint le haut de la page. */ .sentinelle-header { position: absolute; top: 0; left: 0; width: 1px; height: var(--hauteur-header, 88px); visibility: hidden; pointer-events: none; } /* Barre principale (logo + nav) : reste collée en haut de l'écran au défilement, comme l'ancien .site-header. */ .header-b__principal { /* Transparent par défaut (flotte au-dessus du bandeau hero, photo ou dégradé) — bascule en gris très foncé dès le premier scroll, via la classe .header--colle (ajoutée par assets/js/dynamique.js dès que le bas du header atteint le haut de page, ou directement par includes/header.php sur les pages sans hero). */ background: rgba(24, 24, 21, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); position: sticky; top: 0; z-index: 10; transition: background-color 0.45s ease, box-shadow 0.45s ease, backdrop-filter 0.45s ease; /* ⚠️ 31/07/2026 (bande blanche signalée à nouveau par Enzo dans le bandeau du header, en descendant puis remontant rapidement — Chrome, Mac ou Windows) : un header en `position: sticky` combiné à `backdrop-filter` (flouté dès qu'il devient .header--colle) est un cas connu de bug de rendu Chromium — lors d'un défilement rapide, le moteur peut repeindre la zone du header en retard/de façon incomplète (tearing), le temps qu'une frame se stabilise, ce qui se voit comme un aplat clair anormal. `transform: translateZ(0)` force ce header dans sa propre couche de composition GPU stable (recalculée une seule fois, indépendamment du reste de la page), ce qui évite ce repeint tardif dans la plupart des cas documentés pour ce bug. Aucun effet visuel sur le rendu normal (élément déjà en `position: sticky`, donc déjà hors du flux normal de peinture). */ transform: translateZ(0); will-change: background-color; } .header-b__principal.header--colle { /* Fond blanc + ombre noire en bas à la place du gris foncé + filet clair d'origine (demande Enzo du 22/07/2026) : le header collé se distingue désormais du contenu par un simple ombrage porté, sans bordure ni couleur d'accent. Le texte/logo/nav basculent en couleurs sombres juste en dessous (peu lisibles en clair sur fond blanc). */ background: rgba(255, 255, 255, 0.98); /* Ombre renforcée (demande Enzo du 22/07/2026) : opacité et étalement augmentés pour un ombrage plus marqué que celui posé le 20/07/2026. */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Header collé : hauteur réduite au scroll (demande Enzo du 22/07/2026, revient sur l'agrandissement du même jour) — padding vertical abaissé sous le niveau de l'état transparent (22px) pour un header nettement plus compact une fois qu'on a commencé à défiler, et qui laisse plus de place au contenu. Comme le header est en position: sticky, son rendu s'ajuste tout seul à ce padding réduit (aucun script JS à modifier) ; --hauteur-header (mesurée par assets/js/dynamique.js pour positionner .page-hero/.sentinelle-header) reste basée sur la hauteur de l'état transparent au chargement, ce qui est correct puisque le bandeau hero est déjà rendu à ce moment-là — la réduction ultérieure au scroll n'a pas besoin d'être suivie par ce calcul. */ .header-b__principal.header--colle .header-b__interieur { padding-top: 12px; padding-bottom: 12px; } .header-b__principal::before { /* filet fin — effet "document officiel", visible uniquement une fois le header collé/opaque, sur les pages qui restent dans le thème sombre (aucune actuellement : conservé par prudence/rétrocompat, neutralisé ci-dessous sur le fond blanc — voir demande "ombre au lieu d'une bordure" du 22/07/2026). */ content: ''; position: absolute; left: 10px; right: 10px; top: 4px; bottom: 4px; border-top: 1px solid rgba(244,242,236,0); border-bottom: 1px solid rgba(244,242,236,0); pointer-events: none; transition: border-color 0.45s ease; } .header-b__principal.header--colle::before { border-top-color: transparent; border-bottom-color: transparent; } /* --- Textes/nav/logo du header en couleurs sombres une fois collé (fond blanc) — remplace le traitement clair pensé pour un header transparent sur photo (demande Enzo du 22/07/2026). ------------------------------ */ .header-b__principal.header--colle .header-b__nav a { color: var(--couleur-encre); text-shadow: none; border-right-color: rgba(23, 24, 20, 0.12); } .header-b__principal.header--colle .header-b__nav a:hover, .header-b__principal.header--colle .header-b__nav a.actif { color: var(--couleur-encre); } .header-b__principal.header--colle .header-b__nav a:not(.header-b__cta):hover { background: var(--couleur-kaki-fond); } /* Logo "War Machines" en deux versions (demande Enzo du 22/07/2026, remplace le halo clair posé sur la version couleur) : le fichier fourni par Enzo a un wordmark noir fixe, illisible tel quel par-dessus la photo du bandeau hero à l'état transparent — un détourage tout en blanc du même logo (assets/img/logo-war-machines-blanc.png) est affiché dans cet état à la place, et la version couleur d'origine reprend le dessus dès que le header devient blanc (état collé). Voir .header-b__logo-image--* plus bas pour la bascule. */ .header-b__principal.header--colle .selecteur-langue__bouton { background: rgba(23, 24, 20, 0.05); border-color: rgba(23, 24, 20, 0.18); color: var(--couleur-encre); } .header-b__principal.header--colle .selecteur-langue__bouton:hover { background: rgba(23, 24, 20, 0.09); } .header-b__interieur { /* Élargi le 23/07/2026 (1320px → 1400px) : le bouton CTA agrandi + le sélecteur de langue plus espacé (retouches du même jour, demandées par Enzo) ne tenaient plus dans les 1320px précédents à 1440px de large — le sélecteur de langue se retrouvait poussé hors de l'écran (pas seulement le léger débordement invisible déjà connu et documenté, un vrai élément inaccessible). */ max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; /* Espace entre le logo et les menus augmenté le 22/07/2026 (demande Enzo, ils étaient trop collés de part et d'autre du logo) : 24px → 56px. */ gap: 56px; /* Hauteur légèrement augmentée le 20/07/2026 (demande Enzo) : padding vertical 18px → 22px. */ padding: 22px 32px; position: relative; /* Bug signalé par Enzo le 22/07/2026 : au moment précis de la transition transparent → collé, le fond/l'ombre du header (.header-b__principal) s'estompaient en douceur (0.45s) mais le padding (donc la hauteur du header et la position du logo/menu/ bouton) basculait instantanément — un "saut" brut de mise en page en plein milieu du fondu de couleur, très visible si la souris est en train de survoler un lien à ce moment précis (le lien se décale d'un coup sous le curseur). Corrigé en animant le padding avec la même durée/allure que le fondu de couleur, pour que la hauteur du header change en douceur en même temps que sa couleur. */ transition: padding 0.45s ease; } .header-b__nav { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; } .header-b__nav--gauche { justify-content: flex-end; } .header-b__nav--droite { justify-content: flex-start; } .header-b__nav a { display: flex; align-items: center; gap: 6px; font-family: var(--police-titres); font-weight: 600; /* Taille agrandie le 22/07/2026 (demande Enzo), 0.78rem → 0.9rem. */ font-size: 0.9rem; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(244,242,236,0.88); text-decoration: none; padding: 6px 18px; border-right: 1px solid rgba(244,242,236,0.2); transition: color 0.2s ease; white-space: nowrap; /* Légère ombre portée : garde les liens lisibles quand le header est transparent par-dessus une photo claire (voir .header--colle). */ text-shadow: 0 1px 4px rgba(0,0,0,0.35); } .header-b__nav--droite a:last-child { border-right: none; } .header-b__nav a .icone { width: 14px; height: 14px; opacity: 0.75; } .header-b__nav a:hover, .header-b__nav a.actif { color: #fff; } /* Fond blanc au survol (demandé par Enzo le 20/07/2026), sur les liens de navigation simples uniquement — exclut le bouton "Déposer une annonce" (.header-b__cta), qui garde son propre traitement rouge au survol un peu plus bas (.header-b__cta:hover), et n'affecte pas non plus le sélecteur de langue (déjà surclassé par une règle plus spécifique, voir .selecteur-langue__panneau .selecteur-langue__item:hover). */ .header-b__nav a:not(.header-b__cta):hover { background: #f4f2ec; color: var(--couleur-encre); text-shadow: none; border-radius: 3px; } .header-b__logo { display: flex; align-items: center; justify-content: center; text-decoration: none; padding: 6px 4px; } /* Logo image "War Machines" fourni par Enzo (remplace le traitement texte du 19/07/2026, maj-44) — recadré serré sur son propre contenu et fond rendu transparent avant intégration (le fichier reçu avait un fond blanc plein). Hauteur agrandie le 22/07/2026 (demande Enzo), 40px → 54px ; largeur automatique (ratio d'origine ~3.94:1 préservé). */ .header-b__logo-image { height: 54px; width: auto; display: block; } /* Bascule entre les deux versions du logo selon l'état du header (demande Enzo du 22/07/2026, remplace le halo clair de la version précédente) : - version blanche visible par défaut (état transparent, photo en fond) ; - version couleur (noir + kaki) visible une fois le header collé (fond blanc), où la version blanche se fondrait dans le fond. Les deux images sont superposées dans le même bloc .header-b__logo (voir includes/header.php) ; une seule des deux est affichée à la fois. */ .header-b__logo-image--couleur { display: none; } .header-b__logo-image--blanc { display: block; } .header-b__principal.header--colle .header-b__logo-image--couleur { display: block; } .header-b__principal.header--colle .header-b__logo-image--blanc { display: none; } .header-b__nav a.header-b__cta { display: inline-flex; align-items: center; gap: 8px; /* Couleurs alignées sur le nouveau logo "War Machines" (demande Enzo du 22/07/2026) : le vert kaki du logo (#6a6c49) s'est avéré quasiment identique à --couleur-kaki (#6b6f47) déjà utilisée ailleurs sur le site — réutilisée ici plutôt que d'introduire une couleur en plus. Remplace le rouge brique (--couleur-accent) utilisé jusque-là pour ce bouton précis ; --couleur-accent reste inchangée partout ailleurs (liens, bouton sidebar, badges...). */ background: var(--couleur-kaki); border: 1.5px solid var(--couleur-kaki); color: #f2efe4 !important; font-family: var(--police-titres); font-weight: 600; /* Agrandi à la demande d'Enzo (0.72rem → 0.78rem le 23/07/2026, puis 0.78rem → 0.92rem le 27/07/2026, padding et icône élargis en proportion à chaque fois). */ font-size: 0.92rem; letter-spacing: 0.07em; text-transform: uppercase; padding: 12px 22px 12px 20px; /* ⚠️ 27/07/2026 (retour Enzo) : "Pièces" et ce bouton se touchaient — .header-b__nav a garde `border-right` comme séparateur entre liens simples (Accueil/Véhicules/Pièces), mais rien ne les espaçait davantage du bouton lui-même (`.header-b__nav` a `gap: 0`, les liens ne comptent que sur ce filet vertical). Une marge à gauche, propre au bouton, crée un vrai espace visuel avant lui sans toucher à l'espacement des liens simples entre eux. */ margin-left: 14px; /* ⚠️ 27/07/2026 (2e retour Enzo, capture à l'appui) : ce bouton et le sélecteur de langue se touchaient aussi, de l'autre côté. Le sélecteur de langue garde son `margin-left: auto` (le pousse tout à droite du header, voir plus bas), mais cet auto ne vaut que pour l'espace EN TROP dans la nav — s'il n'y en a pas (nav qui remplit tout juste la largeur disponible), l'auto ne produit aucun espace du tout, d'où le collage observé. Un `margin-right` fixe ici garantit un espace minimum quoi qu'il arrive, en plus de l'auto s'il y a de la place (les deux s'additionnent, les marges ne fusionnent pas entre éléments flex voisins). */ margin-right: 14px; /* ⚠️ 23/07/2026 (2e retour) : le margin-left:auto qui poussait ce bouton (et tout ce qui suivait) tout à droite a été déplacé sur .selecteur-langue lui-même — Enzo souhaite désormais que ce soit spécifiquement le sélecteur de langue qui aille "tout à droite du header", pas ce bouton. Le bouton reste donc en flux normal, juste après Véhicules/Pièces. */ text-decoration: none; text-shadow: none; box-shadow: 0 2px 0 rgba(0,0,0,0.25); /* Coins abattus façon plaque d'identification militaire (même principe que .bouton-plaque plus haut, repris ici à une échelle plus petite adaptée à la barre de nav). */ clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } .header-b__cta:hover { background: var(--couleur-kaki-fonce); border-color: var(--couleur-kaki-fonce); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.35); } .header-b__cta:active { transform: translateY(0); box-shadow: 0 1px 0 rgba(0,0,0,0.25); } .header-b__cta .icone { width: 18px; height: 18px; } /* Sélecteur de langue FR/EN — bouton dropdown avec drapeaux, posé dans la nav de droite. ⚠️ 23/07/2026 (2e retour d'Enzo) : "met le tout à droite du header" — le margin-left:auto est donc déplacé ici (retiré de .header-b__cta ci-dessus) pour que ce soit précisément le sélecteur de langue qui aille se coller au bord droit du header, quelle que soit la largeur du bouton "Déposer une annonce" juste avant. */ .selecteur-langue { position: relative; margin-left: auto; } .selecteur-langue__bouton { display: inline-flex; align-items: center; gap: 8px; background: rgba(244,242,236,0.08); border: none; color: var(--couleur-encre-claire); font-family: var(--police); font-weight: 500; font-size: 0.8rem; padding: 8px 12px; border-radius: 6px; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .selecteur-langue__bouton:hover { background: rgba(244,242,236,0.16); transform: translateY(-1px); } /* Drapeaux : blocs de couleur façon "plaque militaire" (coins coupés), même motif que .plaque-drapeau sur l'annuaire des professionnels (assets/css/style.css plus bas), réutilisé tel quel ici via les classes .plaque-drapeau--fr/--gb posées dans includes/header.php — remplace les émoji drapeaux (retour Enzo du 23/07/2026 : "c'est des emoji c'est pas terrible"). Bordure entièrement retirée ci-dessous (autre demande du même jour, "enlève toute bordure") : les aplats de couleur suffisent à distinguer chaque drapeau, plus besoin du cadre ajouté au tour précédent. Sélecteur ".selecteur-langue .plaque-drapeau" (0,2,0) plutôt que ".plaque-drapeau" seul (0,1,0) pour l'emporter sur la règle de base du motif (définie plus bas dans le fichier) quel que soit l'ordre des règles dans la feuille — cf. le bug de cascade déjà rencontré sur .sous-titre-bloc. */ .selecteur-langue .plaque-drapeau { width: 22px; height: 15px; border: none; box-shadow: none; flex-shrink: 0; } .selecteur-langue__chevron { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.25s ease; margin-top: -3px; } .selecteur-langue--ouvert .selecteur-langue__chevron { transform: rotate(-135deg); margin-top: 3px; } .selecteur-langue__panneau { position: absolute; top: calc(100% + 10px); right: 0; background: #fff; border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,0.18); padding: 6px; /* 29/07/2026 : élargi de 168px à 190px et plafonné en hauteur (avec défilement) suite au passage de 2 à 7 langues (demande Enzo) — évite qu'un nom de langue plus long ("Nederlands", "Čeština"...) ne provoque un retour à la ligne, et qu'un panneau à 7 lignes ne déborde sur un très petit écran en hauteur. */ min-width: 190px; max-height: min(70vh, 340px); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.96); transform-origin: top right; transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s; z-index: 20; } .selecteur-langue--ouvert .selecteur-langue__panneau { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } /* Spécificité : ".header-b__nav a" (0,1,1) est plus spécifique qu'une simple classe ".selecteur-langue__item" (0,1,0) et l'emporterait sinon (texte clair/transparent, majuscules... illisible sur le panneau blanc). On qualifie donc avec ".selecteur-langue__panneau" pour repasser devant. */ .selecteur-langue__panneau .selecteur-langue__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 7px; color: var(--couleur-encre); font-family: var(--police); font-size: 0.88rem; font-weight: 500; text-decoration: none; border-right: none; text-transform: none; letter-spacing: normal; white-space: nowrap; transition: background 0.15s ease; } .selecteur-langue__panneau .selecteur-langue__item:hover, .selecteur-langue__panneau .selecteur-langue__item.actif { background: #f4f2ec; color: var(--couleur-encre); } .selecteur-langue__panneau .selecteur-langue__item--actif { font-weight: 600; } .selecteur-langue__panneau .selecteur-langue__item--actif::after { content: '✓'; margin-left: auto; color: var(--couleur-accent); font-weight: 700; } /* ===================================================================== Header mobile/tablette : menu burger plein écran (29/07/2026, refonte responsive demandée par Enzo — "la version PC est super, n'y touche pas"). En dessous de 1360px (seuil relevé le 29/07/2026 — voir correctif juste en dessous, il était à 1180px depuis le 09/07/2026), l'ancien comportement empilait nav gauche / logo / nav droite verticalement et centrés — lisible sur tablette large mais franchement à l'étroit sur téléphone (beaucoup de liens qui s'enroulent sur plusieurs lignes). Remplacé par un bouton burger qui ouvre un panneau plein écran (voir .menu-mobile plus bas). Au-dessus de 1360px, RIEN dans cette feuille de style ne change : le bouton burger et le panneau restent display:none, la nav desktop garde exactement son rendu d'origine. ⚠️ 29/07/2026 (bug tablette signalé par Enzo, capture à l'appui) : seuil remonté de 1180px à 1360px. Le 23/07/2026, le bouton CTA "Déposer une annonce" avait été agrandi et le sélecteur de langue plus espacé (voir .header-b__interieur plus bas, max-width 1320px → 1400px) sans revérifier ce seuil de bascule — la nav desktop (logo + liens + gros bouton CTA + sélecteur de langue, tout sur une seule ligne, jamais autorisée à passer à la ligne) a besoin d'environ 1324px pour tenir sans déborder. Entre 1180px et 1324px, elle restait donc affichée (seuil pas encore atteint) mais débordait hors de l'écran de 50px de trop — d'où le décalage/la marge en trop constatée sur tablette (confirmé en mesurant précisément la largeur de page nécessaire à plusieurs largeurs d'écran avant de choisir cette nouvelle valeur, avec une marge de sécurité). ===================================================== */ /* Bouton burger : 3 barres pures CSS (pas de SVG), qui s'animent en croix à l'ouverture. Couleur alignée sur celle des liens de nav desktop selon l'état du header (blanc sur bandeau hero transparent, encre une fois .header--colle) — mêmes règles de bascule que .header-b__nav a. ⚠️ Cette déclaration de base (display:none) DOIT rester avant la media query ci-dessous dans le fichier : à spécificité égale (simple classe), c'est l'ordre d'apparition dans la feuille de style qui tranche, pas la media query elle-même — si cette règle passait après, elle écraserait systématiquement le display:flex du dessous, y compris en dessous de 1360px (bug rencontré et corrigé pendant la vérification de ce lot). */ .header-b__burger { display: none; position: relative; width: 30px; height: 20px; padding: 0; background: none; border: none; cursor: pointer; flex-shrink: 0; } .header-b__burger-barre { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); transition: transform 0.3s ease, opacity 0.2s ease, background-color 0.2s ease; } .header-b__burger-barre:nth-child(1) { top: 0; } .header-b__burger-barre:nth-child(2) { top: 9px; } .header-b__burger-barre:nth-child(3) { top: 18px; } .header-b__principal.header--colle .header-b__burger-barre { background: var(--couleur-encre); box-shadow: none; } /* Croix à l'ouverture (classe posée par assets/js/dynamique.js). */ .header-b__burger--ouvert .header-b__burger-barre:nth-child(1) { top: 9px; transform: rotate(45deg); } .header-b__burger--ouvert .header-b__burger-barre:nth-child(2) { opacity: 0; } .header-b__burger--ouvert .header-b__burger-barre:nth-child(3) { top: 9px; transform: rotate(-45deg); } /* Le burger reste blanc une fois le panneau ouvert (panneau sombre plein écran par-dessus le header, quel que soit l'état collé/transparent en dessous) — sinon la croix deviendrait illisible sur pages sans hero. */ .header-b__burger--ouvert .header-b__burger-barre { background: #fff; box-shadow: none; } /* ⚠️ 29/07/2026 (retour Enzo) : le menu burger s'affichait aussi sur tablette (jusqu'à 1360px), ne laissant que l'icône burger visible, sans aucun lien — Enzo veut la nav complète visible sur tablette, pas masquée derrière le burger. Mesure faite avant ce correctif : la nav desktop pleine taille a besoin d'environ 1468px pour tenir sans déborder (mesuré en largeur naturelle, logo + les 2 colonnes de liens + gaps/padding du header) — bien plus que la largeur d'une tablette (768-1024px). Donc sur la plage tablette (768-1360px), tous les liens restent visibles (pas de burger) mais dans une version compacte (police/espacements/bouton/sélecteur de langue resserrés) qui tient dans cette largeur — vérifié sans débordement ni retour à la ligne de 768px à 1360px. En dessous de 768px (vrais téléphones), le menu burger reste utilisé comme avant (la nav compacte elle-même ne rentrerait plus à ces largeurs). */ /* ⚠️ 29/07/2026 (2e retour Enzo, capture à l'appui) : la nav tablette ci-dessus/dessous était restée à une seule taille "compacte", calibrée pour tenir à 768px (le cas le plus étroit) — bien trop petite et peu lisible sur une tablette plus large (ex. 1280-1360px de large), où pourtant beaucoup de place restait inutilisée de part et d'autre. Remplacé par 4 paliers qui grandissent progressivement avec la largeur (768-899 / 900-1023 / 1024-1179 / 1180-1360), chacun vérifié individuellement (Playwright, largeurs testées : 768, 850, 899, 900, 950, 1000, 1023, 1024, 1100, 1179, 1180, 1250, 1300, 1360) pour ne jamais déborder ni revenir à la ligne — le palier 900-1023 avait d'abord débordé de ~65px à 900px pile avec des valeurs trop proches de celles du palier suivant, d'où des paliers plus rapprochés (4 plutôt que 2) pour garder une marge de sécurité à chaque frontière. */ @media (min-width: 768px) and (max-width: 899px) { .header-b__interieur { gap: 10px; padding: 16px 14px; } .header-b__nav a { font-size: 0.64rem; letter-spacing: 0.01em; padding: 5px 6px; gap: 3px; } .header-b__nav a .icone { width: 11px; height: 11px; } .header-b__logo-image { height: 30px; } .header-b__nav a.header-b__cta { font-size: 0.64rem; padding: 7px 9px 7px 8px; margin-left: 5px; margin-right: 5px; letter-spacing: 0.01em; } .header-b__cta .icone { width: 12px; height: 12px; } .selecteur-langue__bouton { padding: 5px 5px; gap: 3px; } .selecteur-langue__code { display: none; } .selecteur-langue .plaque-drapeau { width: 17px; height: 12px; } .selecteur-langue__chevron { width: 6px; height: 6px; } .header-b__burger { display: none !important; } } @media (min-width: 900px) and (max-width: 1023px) { .header-b__interieur { gap: 14px; padding: 17px 16px; } .header-b__nav a { font-size: 0.69rem; letter-spacing: 0.012em; padding: 5px 7px; gap: 3px; } .header-b__nav a .icone { width: 12px; height: 12px; } .header-b__logo-image { height: 34px; } .header-b__nav a.header-b__cta { font-size: 0.69rem; padding: 8px 11px 8px 10px; margin-left: 6px; margin-right: 6px; letter-spacing: 0.012em; } .header-b__cta .icone { width: 13px; height: 13px; } .selecteur-langue__bouton { padding: 5px 6px; gap: 4px; } .selecteur-langue__code { display: none; } .selecteur-langue .plaque-drapeau { width: 18px; height: 12px; } .selecteur-langue__chevron { width: 6px; height: 6px; } .header-b__burger { display: none !important; } } @media (min-width: 1024px) and (max-width: 1179px) { .header-b__interieur { gap: 22px; padding: 18px 20px; } .header-b__nav a { font-size: 0.76rem; letter-spacing: 0.018em; padding: 6px 9px; gap: 4px; } .header-b__nav a .icone { width: 13px; height: 13px; } .header-b__logo-image { height: 39px; } .header-b__nav a.header-b__cta { font-size: 0.76rem; padding: 9px 14px 9px 12px; margin-left: 8px; margin-right: 8px; letter-spacing: 0.018em; } .header-b__cta .icone { width: 14px; height: 14px; } .selecteur-langue__bouton { padding: 6px 8px; gap: 5px; } .selecteur-langue__code { display: none; } .selecteur-langue .plaque-drapeau { width: 19px; height: 13px; } .selecteur-langue__chevron { width: 7px; height: 7px; } .header-b__burger { display: none !important; } } @media (min-width: 1180px) and (max-width: 1360px) { .header-b__interieur { gap: 34px; padding: 20px 26px; } .header-b__nav a { font-size: 0.82rem; letter-spacing: 0.03em; padding: 6px 11px; gap: 5px; } .header-b__nav a .icone { width: 13px; height: 13px; } .header-b__logo-image { height: 45px; } .header-b__nav a.header-b__cta { font-size: 0.82rem; padding: 10px 18px 10px 16px; margin-left: 11px; margin-right: 11px; letter-spacing: 0.03em; } .header-b__cta .icone { width: 16px; height: 16px; } .selecteur-langue__bouton { padding: 7px 10px; gap: 7px; } .selecteur-langue__code { display: inline; } .selecteur-langue .plaque-drapeau { width: 21px; height: 14px; } .selecteur-langue__chevron { width: 7px; height: 7px; } .header-b__burger { display: none !important; } } @media (max-width: 767px) { /* La grille à 3 colonnes du header (1fr auto 1fr) est conservée telle quelle : c'est justement elle qui garantit que le logo reste parfaitement centré, colonne du milieu en "auto", flanquée de deux colonnes de largeur strictement égale (1fr) — même mécanique qu'en desktop, pas de nouveau calcul de centrage à maintenir. On vide juste ces deux colonnes de leur contenu desktop pour n'y laisser rien (colonne de gauche, qui équilibre visuellement l'autre côté) et le bouton burger (colonne de droite — déplacé de la gauche vers la droite le 29/07/2026, demande Enzo). ⚠️ Bug rencontré et corrigé pendant la vérification de ce lot : passer `.header-b__nav--gauche` entière en `display: none` la retire complètement de la grille (elle n'est alors plus un "item" de grille du tout) — avec seulement 2 items restants (logo, nav-droite) pour 3 colonnes définies, le placement automatique de CSS Grid réattribue le logo à la 1ère colonne (1fr, prévue pour nav-gauche) et nav-droite à la 2e (auto, prévue pour le logo), cassant tout le centrage. On masque donc seulement les liens (`a`) à l'intérieur de nav-gauche, jamais le `