/* ========================================================================== COYSEVOX — Design v2 (relift visuel inspiré joya.fr) Feuille de présentation uniquement — chargée après agency.css. Aucune logique/PHP/JS n'est modifiée par ce fichier. ========================================================================== */ :root { --navy: #121327; --navy-text: #14142B; --cream: #FCFAF8; --white: #FFFFFF; --text-body: #333333; --accent: #C9974C; /* placeholder en attendant la charte de marque */ } /* Scroll fluide natif pour les ancres internes (ex: navbar → #nos-metiers). Le lien "Nos métiers" n'a volontairement plus la classe .page-scroll : son gestionnaire de clic (agency.min.js, partagé par tout le site) applique un décalage fixe de -50px pensé pour d'autres usages et empêcherait ce scroll-margin-top de s'appliquer. */ html { scroll-behavior: smooth; } #nos-metiers { scroll-margin-top: 90px; /* hauteur de la navbar fixe (72px) + marge de respiration */ } /* ========================================================================== SCROLLYTELLING — utilitaires d'animation au scroll Présentation uniquement. Piloté par js/scrollytelling.js (IntersectionObserver). Sans JS (ou script.js.classList non ajoutée), le contenu reste visible : la classe js-scroll-reveal est posée en inline au tout début de . ========================================================================== */ html.js-scroll-reveal .reveal-on-scroll { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16, .8, .24, 1), transform .7s cubic-bezier(.16, .8, .24, 1); } html.js-scroll-reveal .reveal-on-scroll.reveal-left { transform: translateX(-48px); } html.js-scroll-reveal .reveal-on-scroll.reveal-right { transform: translateX(48px); } html.js-scroll-reveal .reveal-on-scroll.is-visible { opacity: 1; transform: translate(0, 0); } .reveal-delay-1 { transition-delay: .1s; } .reveal-delay-2 { transition-delay: .2s; } .reveal-delay-3 { transition-delay: .3s; } .reveal-delay-4 { transition-delay: .4s; } .reveal-delay-5 { transition-delay: .5s; } @media (max-width: 767px) { /* Amplitude réduite sur mobile : on garde le fondu, on adoucit la translation */ html.js-scroll-reveal .reveal-on-scroll, html.js-scroll-reveal .reveal-on-scroll.reveal-left, html.js-scroll-reveal .reveal-on-scroll.reveal-right { transform: translateY(14px); } html.js-scroll-reveal .reveal-on-scroll.is-visible { transform: translate(0, 0); } } @media (prefers-reduced-motion: reduce) { html.js-scroll-reveal .reveal-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---------- Typo globale ---------- */ /* Système typographique : Cormorant Garamond (500/600) pour les titres, Work Sans (400/500) pour la navigation et le texte courant — chargées dans haut.php. */ body.index { font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif; color: var(--text-body); } body.index h1, body.index h2.section-heading, body.index .hero-title, body.index .zigzag-title, body.index .footer-wordmark { font-family: 'Cormorant Garamond', 'HelveticaNeueLT Std Cn', Georgia, serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; line-height: 0.95; color: var(--navy-text); } body.index section h2.section-heading { font-size: clamp(40px, 6vw, 80px); margin-bottom: 20px; } body.index section h2.section-heading.decal { margin-bottom: 40px; } /* ---------- Boutons pilule ---------- */ .btn-pill { display: inline-flex; align-items: center; gap: 10px; border-radius: 50px; padding: 12px 32px; font-family: 'Work Sans', Arial, sans-serif; font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0.2px; transition: all .25s ease; border: 1px solid transparent; text-decoration: none !important; cursor: pointer; } .btn-pill::before { content: "\2192"; /* flèche → */ display: inline-block; transition: transform .25s ease; } .btn-pill:hover::before { transform: translateX(3px); } .btn-pill-fill { background-color: var(--navy); border-color: var(--navy); color: var(--white) !important; } .btn-pill-fill:hover, .btn-pill-fill:focus { background-color: #23244a; border-color: #23244a; color: var(--white) !important; transform: translateY(-2px); } .btn-pill-outline { background-color: transparent; border-color: var(--navy); color: var(--navy) !important; } .btn-pill-outline:hover, .btn-pill-outline:focus { background-color: var(--navy); color: var(--white) !important; transform: translateY(-2px); } .btn-pill-outline-light { background-color: transparent; border-color: rgba(255,255,255,.6); color: var(--white) !important; } .btn-pill-outline-light:hover, .btn-pill-outline-light:focus { background-color: var(--white); color: var(--navy) !important; transform: translateY(-2px); } /* ========================================================================== HEADER — logo centré, 2 pilules de chaque côté (desktop) / burger classique (mobile) ========================================================================== */ body.index .navbar-custom, body.index .navbar-custom.affix { background-color: var(--white) !important; border: none; box-shadow: 0 2px 16px rgba(18, 19, 39, 0.06); padding: 0; min-height: 72px; } /* Double fil fin au-dessus de la navbar, même esprit que le double liseré du hero : le trait principal (1px, pleine opacité) en border-top, le filet plus fin (0.6px, ~55%) juste en dessous. */ body.index .navbar-custom { border-top: 1px solid #8a7a5c; } body.index .navbar-custom::before { content: ""; position: absolute; top: 1.6px; left: 0; right: 0; height: 0.6px; background-color: rgba(138, 122, 92, 0.55); pointer-events: none; } body.index .navbar-custom .container.nav-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 72px; } body.index .navbar-header { display: flex; align-items: center; margin: 0; /* neutralise la marge négative -15px de Bootstrap, pensée pour un header en float, incompatible avec ce header en flex */ } /* Icône hamburger simple (3 lignes fines), sans pilule ni texte */ body.index .navbar-toggle { background-color: transparent !important; border: none !important; border-radius: 0; padding: 8px 2px; margin: 0; } body.index .navbar-toggle .fa-bars { color: var(--navy); font-size: 20px; } /* Logo : uniquement la version sombre (fond de navbar toujours blanc) */ body.index .navbar-brand.page-scroll { display: inline-flex; align-items: center; padding: 0; margin: 0; } body.index .navbar-brand-logo { display: block; height: 24px; width: auto; } body.index .navbar-brand-logo--light { display: none; } /* Pilules : styles communs aux 2 groupes de liens */ body.index .nav-grid-left, body.index .nav-grid-right { display: flex; align-items: center; gap: 22px; margin: 0; } body.index .nav-grid-left > li, body.index .nav-grid-right > li { float: none; } /* Texte simple en majuscules espacées — plus de pilule/bouton */ body.index .nav-grid-left > li > a.link, body.index .nav-grid-right > li > a.link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 1px; font-family: 'Work Sans', Arial, sans-serif; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.8px; white-space: nowrap; color: var(--navy-text) !important; background-color: transparent; border: none; border-radius: 0; transition: color .25s ease; position: relative; /* ancre le fin soulignement ci-dessous */ } /* Fin soulignement or/beige sur lien survolé ou actif (classe .active déjà posée par le scrollspy Bootstrap existant — lecture seule, rien de touché côté logique) — décalé sous le texte, pas collé dessus. Même traitement pour tous les liens, y compris "Estimer votre bien" (seule sa couleur teal le distingue désormais). */ body.index .nav-grid-left > li > a.link::after, body.index .nav-grid-right > li > a.link::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: -6px; height: 1px; background-color: #8a7a5c; opacity: 0; transform: translateY(-2px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; } body.index .nav-grid-left > li > a.link:hover::after, body.index .nav-grid-right > li > a.link:hover::after, body.index .nav-grid-left > li.active > a.link::after, body.index .nav-grid-right > li.active > a.link::after { opacity: 1; transform: translateY(0); } /* "Estimer votre bien" : plus aucune distinction — même couleur, même style que tous les autres liens de la navbar. */ body.index .nav-grid-right > li > a.link.link--fill-accent { background-color: transparent !important; border-color: transparent !important; color: var(--navy-text) !important; } @media (min-width: 768px) { /* Grille à 3 colonnes : le logo reste centré quelle que soit la largeur relative des 2 groupes de liens, sans dupliquer le HTML mobile/desktop */ body.index .navbar-custom .container.nav-grid { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr; align-items: center; column-gap: 64px; } body.index .navbar-toggle { display: none; } body.index .navbar-header { display: contents; } body.index .navbar-brand.page-scroll { grid-row: 1; grid-column: 2; justify-self: center; } body.index .navbar-collapse.collapse { display: contents !important; } body.index .nav-grid-left { grid-row: 1; grid-column: 1; justify-self: end; } body.index .nav-grid-right { grid-row: 1; grid-column: 3; justify-self: start; } } @media (max-width: 767px) { /* Neutralise explicitement la marge négative -15px de Bootstrap sur .navbar-header à CETTE largeur (là où le bug se produit réellement) — variantes de sélecteur en plus pour ne dépendre d'aucune spécificité parente particulière. */ body.index .navbar-header { display: flex; align-items: center; width: 100%; justify-content: space-between; margin-left: 0; margin-right: 0; } body.index .container > .navbar-header, body.index .container-fluid > .navbar-header { margin-left: 0; margin-right: 0; } body.index .navbar-collapse { flex: 1 0 100%; } /* Menu mobile ouvert : fond plein, liens empilés (pas de pilules) */ body.index .navbar-custom .navbar-collapse.in, body.index .navbar-custom .navbar-collapse.collapsing { background-color: var(--white); margin: 0 -15px; padding: 6px 15px 14px; } body.index .nav-grid-left, body.index .nav-grid-right { flex-direction: column; align-items: stretch; gap: 0; } body.index .nav-grid-left > li > a.link, body.index .nav-grid-right > li > a.link { display: block; border-radius: 0; border: none; border-bottom: 1px solid rgba(18, 19, 39, .08); padding: 14px 4px; background-color: transparent !important; color: var(--navy-text) !important; } /* Le fin soulignement (survol/actif) fait double emploi avec le border-bottom déjà présent entre les liens empilés sur mobile */ body.index .nav-grid-left > li > a.link::after, body.index .nav-grid-right > li > a.link::after { display: none; } } /* ========================================================================== HERO — photo découpée encadrée d'une marge blanche, aucun texte dessus. .hero-viewport tient exactement dans 100vh (navbar fixe en overlay, compensée par padding-top ; box-sizing:border-box pour que ce padding-top ne s'ajoute pas par-dessus les 100vh). Un bandeau à hauteur 100% fixe en dur ne peut pas coller pile à window.innerHeight puisque cette hauteur varie d'un écran/navigateur à l'autre (constaté : déborde de 27px à innerHeight=945, correct seulement à 1080). La photo est donc la SEULE valeur "flexible" (--hero-photo-h, en vh) ; tout le reste (navbar, gaps, bandeau) en découle par calc() à un seul niveau — pas de chaîne de plusieurs variables dérivées les unes des autres. Ça garantit par construction, à N'IMPORTE QUELLE hauteur d'écran : 72 (navbar) + gap-haut + --hero-photo-h + gap-bas + bandeau(reliquat) = 100vh .hero-shell et .signature-band restent flex:none (jamais flex:1 à deviner) ; overflow:hidden en garde-fou. ========================================================================== */ body.index .hero-viewport { display: flex; flex-direction: column; height: 100vh; overflow: hidden; padding-top: 72px; box-sizing: border-box; /* Marge gauche/droite autour de la photo flottante — 40px sur les petits écrans, jusqu'à 60px sur desktop large. */ --hero-margin: clamp(40px, 4vw, 60px); /* Espace blanc au-dessus et en dessous de la photo — volontairement fin (surtout en haut, pour que la photo remonte près de la navbar) et asymétrique (un peu plus de respiration avant le bandeau texte qu'entre la navbar et la photo). Valeurs fixes. */ --hero-gap-top: 16px; --hero-gap-bottom: 28px; /* Hauteur de la photo : seule valeur non fixe du bloc. .signature-band (plus bas) calcule son propre reliquat à partir de CETTE même variable, donc les deux ne peuvent pas partir en désaccord comme la fois d'avant. */ --hero-photo-h: 71vh; } body.index .hero-shell { flex: none; padding: var(--hero-gap-top) var(--hero-margin) var(--hero-gap-bottom); background-color: var(--white); } body.index .hero-photo { position: relative; height: var(--hero-photo-h); min-height: 380px; } body.index .hero-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 65%; /* Découpe la photo sur le contour exact du liseré (voir dans le HTML) : mêmes coordonnées normalisées que les du cadre, donc la découpe coïncide au pixel près avec le tracé, quelle que soit la taille réelle du conteneur à l'écran. */ clip-path: url(#hero-photo-clip); } /* Cadre en overlay : viewBox + preserveAspectRatio="none" (posé en HTML) font que le tracé s'étire exactement aux dimensions du conteneur, quel que soit son ratio réel à l'écran (mobile, tablette, desktop large). Le conteneur .hero-photo n'a pas changé de boîte (juste sa photo est découpée dedans), donc ce même overlay reste aligné sur le contour de la découpe sans réglage supplémentaire. */ body.index .hero-frame-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; } body.index .hero-frame-path { fill: none; opacity: 0; /* stroke-dashoffset et opacity sont pilotés en inline par hero-frame.js (durée calculée dynamiquement là-bas), pas ici. */ } /* ========================================================================== LIGNE DE MARQUE — sous le hero, fond blanc, seul endroit où la marque parle ========================================================================== */ body.index .signature-band { background-color: var(--white); position: relative; padding: 0; /* écrase le "section { padding: 150px 0 }" générique d'agency.css, qui plafonnait la hauteur rendue à 300px */ /* Comble exactement ce qu'il reste de 100vh une fois navbar + gaps + photo soustraits — donc le bas de ce bandeau tombe pile sur window.innerHeight, à n'importe quelle hauteur d'écran, jamais en dur. */ height: calc(100vh - 72px - var(--hero-gap-top) - var(--hero-photo-h) - var(--hero-gap-bottom)); flex: none; } body.index .signature-text-block { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; padding: 0 24px; box-sizing: border-box; } body.index .signature-band h2 { font-family: "Cormorant Garamond", "HelveticaNeueLT Std Cn", Georgia, serif; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; font-size: 42px; line-height: 1; color: var(--navy-text); margin: 0 0 10px 0; } body.index .signature-band p { font-family: "Work Sans", "HelveticaNeueLT Std Cn", Arial, sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 4px; font-size: 14px; line-height: 1; color: var(--navy-text); margin: 0; } body.index .signature-band .teal { color: #3AAFA0; } @media (prefers-reduced-motion: reduce) { body.index .hero-frame-path { transition: none !important; opacity: 1 !important; } } /* ========================================================================== 3 PANNEAUX — section de navigation vers les sites du groupe (plus un hero) ========================================================================== */ body.index .hero-panels { display: flex; align-items: stretch; height: 58vh; min-height: 420px; /* Transition cohérente avec le reste de la page plutôt qu'un couperet net entre le hero (fond blanc) et cette section — même liseré or que celui du haut de la navbar. */ border-top: 1px solid #8a7a5c; } body.index .hero-panel { position: relative; flex: 1 1 0; min-width: 0; display: block; overflow: hidden; text-decoration: none; transition: flex-grow .4s cubic-bezier(.16, .8, .24, 1); } /* Calque photo isolé : le filtre colorimétrique unifié (identique sur les 3 photos, pour qu'elles se lisent comme un ensemble cohérent) reste actif en permanence ; le flou/assombrissement de survol s'AJOUTE à ce filtre plutôt que de le remplacer, pour ne pas perdre cette cohérence en interaction. */ body.index .hero-panel-media { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; filter: saturate(0.85) contrast(1.06); transition: filter .4s ease; } /* Voile sombre : invisible au repos, apparaît en fondu au survol/état actif (posé séparément du calque photo pour ne pas interférer avec son filtre). */ body.index .hero-panel::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(10, 15, 15, 0.35); opacity: 0; transition: opacity .4s ease; pointer-events: none; } body.index .hero-panel-content { position: absolute; inset: 0; z-index: 2; padding: 44px 32px 0; display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; } /* Voile localisé derrière le logo (pas toute la photo) : contraste constant même sur une photo claire (façade du panneau Accessia notamment), sans assombrir le reste de l'image. Dégradé radial (pas un rectangle net) — appliqué uniformément aux 3 panneaux pour rester cohérent. */ body.index .hero-panel-logo-zone { display: inline-flex; align-items: center; justify-content: center; padding: 20px 40px; background: radial-gradient(ellipse at center, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 75%); } /* Logo seul, visible au repos (rien d'autre sur la photo). Boîte de dimensions FIXES (largeur ET hauteur) + object-fit:contain : les 3 fichiers logo n'ont pas le même ratio interne (le mark "Local Commercial" est nettement plus carré que les wordmarks "Murs Commerciaux"/"Coysevox", très allongés) — à largeur CSS identique seule, leur hauteur rendue variait du simple au double. Cette boîte égalise leur encombrement visuel réel. */ body.index .hero-panel-logo { display: block; width: 148px; height: 56px; object-fit: contain; object-position: center; /* Ombre portée légère et permanente (indépendante du flou/assombrissement de la photo derrière) : le logo garde sa pleine opacité au survol comme au repos, cette ombre suffit à le détacher du calque sombre en dessous. */ filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); } /* Texte de survol : invisible et légèrement décalé au repos, centré sur tout le panneau — apparaît en fondu + remontée douce au survol/état actif. */ body.index .hero-panel-bottom { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; } body.index .hero-panel-tagline { font-family: 'Work Sans', Arial, sans-serif; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .92); max-width: 320px; margin: 0 0 12px 0; } body.index .hero-panel-cta { font-family: 'Work Sans', Arial, sans-serif; font-size: 13px; font-weight: 500; color: #8a7a5c; letter-spacing: .3px; display: inline-flex; align-items: center; } /* Effet de survol : réservé au desktop avec pointeur précis */ @media (hover: hover) and (pointer: fine) and (min-width: 768px) { body.index .hero-panel:hover { flex-grow: 1.6; } body.index .hero-panels:has(.hero-panel:hover) .hero-panel:not(:hover) { flex-grow: .7; } body.index .hero-panel:hover .hero-panel-media { filter: saturate(0.85) contrast(1.06) blur(4px) brightness(0.75); } body.index .hero-panel:hover::before { opacity: 1; } body.index .hero-panel:hover .hero-panel-bottom { opacity: 1; transform: translateY(0); } } /* Pas de vrai survol possible (tactile — mobile ET tablette, quelle que soit la largeur d'écran) : l'état "actif" reste affiché en permanence, sinon la description et le CTA seraient invisibles pour ces visiteurs. */ @media (hover: none) { body.index .hero-panel-media { filter: saturate(0.85) contrast(1.06) blur(4px) brightness(0.75); } body.index .hero-panel::before { opacity: 1; } body.index .hero-panel-bottom { opacity: 1; transform: translateY(0); } } @media (max-width: 767px) { /* Le système "budget 100vh" (.hero-viewport figé à 100vh, .hero-photo en vh, .signature-band en reliquat calc()) est pensé pour un écran large et bas — sur un écran mobile étroit et haut, il forçait .hero-photo dans une boîte proche du carré (largeur écran étroite × hauteur en vh), alors que le cadre SVG (viewBox 2048×853, preserveAspectRatio="none") s'étire pour REMPLIR cette boîte : plus elle s'écarte du ratio paysage 2048/853 du viewBox, plus le tracé (et la photo découpée dedans) apparaissent déformés. On repasse donc en flux normal sur mobile : .hero-photo garde le ratio paysage du viewBox via aspect-ratio (donc toujours la même forme de moulure, juste mise à l'échelle), et .signature-band redevient une hauteur "au contenu" au lieu d'un reliquat de viewport — plus de section plein écran forcée. */ body.index .hero-viewport { height: auto; overflow: visible; /* Marge latérale quasi bord à bord sur mobile (au lieu du clamp desktop 40-60px) : la photo doit occuper presque toute la largeur de l'écran. */ --hero-margin: 10px; } body.index .hero-photo { height: auto; aspect-ratio: 2048 / 853; min-height: 0; } body.index .signature-band { height: auto; padding: 36px 20px; } body.index .signature-text-block { position: static; top: auto; left: auto; transform: none; padding: 0; } body.index .signature-band h2 { font-size: 32px; } body.index .signature-band p { font-size: 13px; letter-spacing: 2.5px; } body.index .hero-panels { flex-direction: column; height: auto; min-height: 0; } body.index .hero-panel { flex: none; height: 250px; } body.index .hero-panel-content { padding: 24px 20px 0; } body.index .hero-panel-logo { width: 118px; height: 44px; } body.index .hero-panel-bottom { padding: 16px 20px; } body.index .hero-panel-tagline { font-size: 13px; } /* Réordonnancement visuel uniquement (DOM inchangé) : "L'esprit conciergerie" doit apparaître AVANT les hero-panels (Murs Commerciaux / Local Commercial / Accessia / Syndic) sur mobile. body.index devient un conteneur flex column ; TOUS ses enfants directs reçoivent un ordre explicite (sauf #mainNav, en position:fixed donc hors flux flex) pour qu'aucun d'eux ne se retrouve, par défaut order:0, intercalé au mauvais endroit. Seuls .hero-panels (3) et .expertise-section (2) échangent leur position par rapport à l'ordre naturel du DOM. */ body.index { display: flex; flex-direction: column; } body.index .hero-viewport { order: 1; } body.index section#about.expertise-section { order: 2; } body.index .hero-panels { order: 3; } body.index .services-zigzag { order: 4; } body.index section#portfolio.bg-light-gray { order: 5; } body.index section#contact { order: 6; } body.index aside.clients { order: 7; } body.index footer { order: 8; } } /* ========================================================================== SECTIONS "SERVICES" — 4 blocs zigzag sous le hero (sous-marques du groupe) ========================================================================== */ body.index .services-zigzag { background-color: var(--white); } body.index .services-zigzag section.service-block { padding: 90px 0; } body.index .services-zigzag section.service-block:nth-child(even) { background-color: var(--cream); } body.index .service-row { display: flex; align-items: stretch; gap: 60px; flex-wrap: wrap; } body.index .service-row.service-row--reverse { flex-direction: row-reverse; } body.index .service-media { flex: 1 1 46%; min-width: 320px; border-radius: 4px; overflow: hidden; } body.index .service-media img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; } /* Placeholder visuel en attendant les vraies photos (à remplacer) */ body.index .service-placeholder { width: 100%; height: 100%; min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: repeating-linear-gradient( 45deg, rgba(18,19,39,.05), rgba(18,19,39,.05) 12px, rgba(18,19,39,.02) 12px, rgba(18,19,39,.02) 24px ); border: 1px dashed rgba(18,19,39,.25); border-radius: 4px; text-align: center; padding: 20px; } body.index .service-placeholder i { font-size: 42px; color: rgba(18,19,39,.3); } body.index .service-placeholder span { font-family: 'Work Sans', Arial, sans-serif; font-size: 13px; color: rgba(18,19,39,.45); text-transform: uppercase; letter-spacing: .5px; } body.index .service-content { flex: 1 1 46%; min-width: 320px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } body.index .service-content .service-eyebrow { font-family: 'Work Sans', Arial, sans-serif; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: var(--navy); opacity: .6; margin-bottom: 14px; } body.index .service-content h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; text-transform: uppercase; font-size: clamp(30px, 4vw, 44px); line-height: 1.05; color: var(--navy-text); margin: 0 0 20px 0; } body.index .service-content p { font-family: 'Work Sans', Arial, sans-serif; font-size: 16px; line-height: 1.7; color: var(--text-body); margin-bottom: 28px; } @media (max-width: 767px) { body.index .services-zigzag section.service-block { padding: 50px 0; } body.index .service-row, body.index .service-row.service-row--reverse { flex-direction: column; } body.index .service-media img, body.index .service-placeholder { min-height: 260px; } } /* ========================================================================== SECTION "PRÉSENTATION / EXPERTISE" (ex "Qui sommes nous") ========================================================================== */ body.index section#about.expertise-section { background-color: var(--cream); padding: 140px 0 100px 0 !important; } /* --- Titre, déclaration principale (lead) et 2 paragraphes de soutien — 3 phrases réelles distinctes, chacune dans son propre bloc, aucune ponctuation de liaison ajoutée entre elles. Plus de liste de métiers en grille ici — ce rôle est déjà tenu par les 4 blocs zigzag plus bas. --- */ body.index .expertise-intro { max-width: 800px; margin: 0 auto; text-align: center; } body.index .expertise-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; text-transform: uppercase; font-size: clamp(40px, 5vw, 56px); line-height: 1.05; color: var(--navy-text); text-align: center; margin: 0; } /* Motif sous le titre : fichier dev/img/moulures-titres.svg (deux spirales + pointes latérales), largeur fixe et ratio naturel du SVG conservé. Centré sous le titre via margin auto. */ body.index .expertise-ornament { display: block; width: 420px; height: auto; margin: 4px auto 28px auto; } body.index .expertise-statement { font-family: 'Work Sans', Arial, sans-serif; font-weight: 500; font-size: clamp(20px, 2.2vw, 24px); line-height: 1.5; color: #20323f; margin: 0 0 28px 0; } body.index .expertise-support p { font-family: 'Work Sans', Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--text-body); margin: 0 0 16px 0; } body.index .expertise-support p:last-child { margin-bottom: 0; } body.index .expertise-support p b { color: var(--navy-text); /* 600/700 ne sont pas chargés pour Work Sans (seulement 400/500) : le navigateur les simule en gras synthétique, plus épais que prévu (même correctif que .gestion-mission-col p b). */ font-weight: 500; } @media (max-width: 767px) { body.index section#about.expertise-section { padding: 60px 0 80px 0 !important; } /* .expertise-ornament (dev/img/moulures-titres.svg) est en largeur fixe (420px) sur desktop — plus large que le viewport disponible sur mobile (~345px une fois les marges de .container déduites), ce qui provoquait un débordement horizontal sur TOUTES les pages qui réutilisent ce titre (accueil, gestion.php, qui_sommes_nous.php, mentions.php, honoraires.php). */ body.index .expertise-ornament { width: 220px; max-width: 70%; margin: 4px auto 20px auto; } } /* ========================================================================== PAGE "FAIRE GÉRER" (gestion.php) — même système typographique que la homepage (.expertise-title/.expertise-ornament/.expertise-statement/ .expertise-support, réutilisés tels quels). Fonds alternés cream/blanc, comme sur la homepage (intro cream, missions blanc). ========================================================================== */ body.index .gestion-intro { background-color: var(--cream); /* 72px de navbar fixe + marge de respiration : cette section est le tout premier élément de la page (pas de hero au-dessus pour absorber le décalage de la navbar fixe, contrairement à la homepage). */ padding: 150px 0 100px 0; } body.index .gestion-missions { background-color: var(--white); padding: 100px 0; } body.index .gestion-missions-lead { font-family: 'Work Sans', Arial, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--text-body); max-width: 700px; margin: 0 auto 50px auto; } body.index .gestion-mission-col { text-align: left; margin-bottom: 52px; } body.index .gestion-mission-col:last-child { margin-bottom: 0; } /* Icône + titre alignés horizontalement sur une même ligne (pas empilés, pas de cercle de fond) */ body.index .gestion-mission-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } /* Icône fine en contour, dessinée en SVG (stroke, fill:none) — currentColor hérite de la couleur teal posée ici, cohérente avec la palette du site */ body.index .gestion-mission-icon { flex: none; display: inline-flex; width: 26px; height: 26px; color: #3AAFA0; } body.index .gestion-mission-icon svg { width: 100%; height: 100%; } body.index .gestion-mission-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; text-transform: uppercase; font-size: 22px; color: #3AAFA0; margin: 0; } body.index .gestion-mission-col p { font-family: 'Work Sans', Arial, sans-serif; font-size: 14.5px; line-height: 1.65; color: #555; text-align: left; margin: 0 0 14px 0; } body.index .gestion-mission-col p:last-child { margin-bottom: 0; } body.index .gestion-mission-col p b { color: var(--navy-text); /* 600 n'est pas chargé pour Work Sans (seulement 400/500) : le navigateur le simulait en gras synthétique, plus épais que prévu. */ font-weight: 500; } @media (max-width: 767px) { body.index .gestion-intro { padding: 100px 0 60px 0; } body.index .gestion-missions { padding: 60px 0; } } /* ========================================================================== PAGE "QUI SOMMES-NOUS" (qui_sommes_nous.php) — même traitement que .gestion-intro (fond cream, même compensation de la navbar fixe puisque cette section est aussi le tout premier élément de sa page). ========================================================================== */ body.index .about-intro { background-color: var(--cream); padding: 150px 0 100px 0; } @media (max-width: 767px) { body.index .about-intro { padding: 100px 0 60px 0; } } /* ========================================================================== SECTION "NOS AGENCES" — 3 cartes (ex "Nos Services", grille de 6 agences) ========================================================================== */ body.index section#portfolio.bg-light-gray { background-color: var(--cream) !important; padding: 110px 0 !important; } /* Titre de section + ornement : réutilisent .expertise-title/.expertise-ornament (section "L'esprit conciergerie") à l'identique — même police, taille, couleur, motif et espacement, aucune règle propre nécessaire ici. */ /* Plus de style "carte" (fond blanc/bordure/ombre/coins arrondis) : juste un trait vertical fin entre les colonnes, sur desktop uniquement — sur mobile les colonnes s'empilent, le trait devient horizontal (voir media query). */ body.index section#portfolio .agencies-row { display: flex; flex-wrap: wrap; } body.index section#portfolio .agency-col { padding: 0 28px; } body.index section#portfolio .agency-col + .agency-col { border-left: 1px solid #e4dfd4; } body.index section#portfolio .agency-photo { border-radius: 4px; overflow: hidden; margin-bottom: 22px; } body.index section#portfolio .agency-photo img { width: 100%; height: 240px; object-fit: cover; display: block; transition: transform .5s ease; } body.index section#portfolio .agency-photo:hover img { transform: scale(1.06); } /* Sous-titre de colonne : même traitement que .expertise-title, à l'échelle d'un sous-titre (Cormorant Garamond, majuscules, même couleur). */ body.index section#portfolio .agency-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; text-transform: uppercase; font-size: clamp(21px, 2vw, 25px); line-height: 1.15; color: var(--navy-text); margin: 0 0 14px 0; } /* Adresse : discrète, en retrait derrière les numéros. La ville est sur sa propre ligne (systématique, pas seulement au débordement) et légèrement plus grasse que la rue/code postal. */ body.index section#portfolio .agency-address { display: flex; align-items: flex-start; gap: 8px; font-family: 'Work Sans', Arial, sans-serif; font-size: 14px; color: rgba(51, 51, 51, .62); margin-bottom: 16px; } body.index section#portfolio .agency-address i { color: rgba(51, 51, 51, .45); width: 14px; margin-top: 2px; } body.index section#portfolio .agency-address-text { display: block; } body.index section#portfolio .agency-address-street { display: block; font-weight: 400; } body.index section#portfolio .agency-address-city { display: block; font-weight: 600; } /* Téléphones : élément accentué (couleur teal + poids medium), avec un intitulé de service discret au-dessus quand la colonne en regroupe plusieurs (colonnes 69/65 Maine) — omis quand il n'y en a qu'un. */ body.index section#portfolio .agency-phones { list-style: none; margin: 0; padding: 0; } body.index section#portfolio .agency-phones li + li { margin-top: 12px; } body.index section#portfolio .agency-phone-label { display: block; font-family: 'Work Sans', Arial, sans-serif; font-size: 12.5px; color: rgba(51, 51, 51, .55); margin-bottom: 3px; } body.index section#portfolio .agency-phone-number { display: inline-flex; align-items: center; gap: 8px; font-family: 'Work Sans', Arial, sans-serif; font-size: 14px; font-weight: 400; color: #4a8f86; text-decoration: none !important; } body.index section#portfolio .agency-phone-number:hover { color: #3a7169; } body.index section#portfolio .agency-phone-number i { font-size: 14px; } @media (max-width: 991px) { body.index section#portfolio .agency-col { flex: 0 0 100%; max-width: 100%; padding: 32px 8px; } body.index section#portfolio .agency-col + .agency-col { border-left: none; border-top: 1px solid #e4dfd4; } } /* ========================================================================== SECTION CONTACT — fond anthracite (voile neutre sur photo) ========================================================================== */ body.index section#contact { background-color: #202124 !important; background-image: linear-gradient(rgba(32,33,36,.88), rgba(32,33,36,.88)), url('../img/map-image.png') !important; background-position: center !important; background-size: cover !important; padding: 110px 0 !important; } body.index section#contact h2.section-heading { color: var(--white) !important; } body.index section#contact h3 { font-family: 'Work Sans', Arial, sans-serif; font-weight: 400; color: rgba(255,255,255,.8); font-size: 18px; text-transform: none; } body.index section#contact .form-control { border-radius: 8px; border: none; padding: 16px 18px; height: auto; background-color: rgba(255,255,255,.95); font-family: 'Work Sans', Arial, sans-serif; } body.index section#contact textarea.form-control { height: 100%; min-height: 150px; } body.index section#contact button[type="submit"] { border-radius: 50px; background-color: var(--white); border-color: var(--white); color: var(--navy) !important; font-family: 'Work Sans', Arial, sans-serif; font-size: 14px; font-weight: 500; text-transform: none; padding: 14px 40px !important; transition: all .25s ease; } body.index section#contact button[type="submit"]:hover { background-color: var(--cream); transform: translateY(-2px); } /* ========================================================================== FOOTER ========================================================================== */ body.index aside.clients { background-color: var(--white); padding: 40px 0; } /* Fond : photo du hero + voile anthracite neutre (même recette que la section "Nous contacter"), plutôt qu'un aplat sombre uni. */ body.index footer { background-color: #202124 !important; background-image: linear-gradient(rgba(32,33,36,.88), rgba(32,33,36,.88)), url('../img/hero.webp') !important; background-position: center !important; background-size: cover !important; padding: 80px 0 30px !important; text-align: left; } /* --- Colonne 1 : logo + description + coordonnées + badges --- */ body.index footer .footer-logo { height: 32px; width: auto; display: block; margin-bottom: 18px; } body.index footer .footer-description { font-family: 'Work Sans', Arial, sans-serif; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.7); max-width: 340px; margin: 0 0 22px 0; } body.index footer .footer-coords { margin: 0 0 22px 0; } body.index footer .footer-coords li { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } body.index footer .footer-coords i { width: 16px; color: #3AAFA0; font-size: 14px; } body.index footer .footer-coords a, body.index footer .footer-coords span { font-family: 'Work Sans', Arial, sans-serif; font-size: 14px; color: rgba(255,255,255,.75); } body.index footer .footer-coords a:hover { color: var(--white); } body.index footer .footer-badges { display: flex; flex-wrap: wrap; gap: 10px; } body.index footer .footer-badge { font-family: 'Work Sans', Arial, sans-serif; font-size: 11.5px; letter-spacing: .3px; color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.25); border-radius: 20px; padding: 6px 14px; } /* --- Colonnes de liens --- */ body.index footer h4 { font-family: 'Cormorant Garamond', Georgia, serif; text-transform: uppercase; font-weight: 600; color: var(--white); letter-spacing: .5px; font-size: 18px; margin-bottom: 18px; } body.index footer ul { list-style: none; padding-left: 0; } body.index footer ul li { margin-bottom: 10px; } body.index footer ul li a { font-family: 'Work Sans', Arial, sans-serif; color: rgba(255,255,255,.65); text-transform: none; font-size: 14px; transition: color .2s ease; } body.index footer ul li a:hover { color: var(--white); } body.index footer span.copyright { font-family: 'Work Sans', Arial, sans-serif; color: rgba(255,255,255,.45); font-size: 13px; text-transform: none; display: block; margin-top: 30px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.1); } @media (max-width: 767px) { body.index .zigzag-row { gap: 30px; } body.index .zigzag-media img { min-height: 260px; } body.index footer .footer-about { margin-bottom: 40px; } body.index footer [class*="col-md-"] { margin-bottom: 32px; } body.index footer [class*="col-md-"]:last-child { margin-bottom: 0; } } /* ========================================================================== PAGE "ESTIMER VOTRE BIEN" (estimer.php) — bandeau photo + voile, puis formulaire large et horizontal (2 colonnes) posé à plat sur le fond de page cream, sans effet de carte. Sélecteurs en classes dédiées (pas d'id="estimation", ni de classes .section-heading/.section-subheading) pour ne jamais entrer en conflit avec les règles historiques d'agency.css (#estimation, section h2/h3, .radio-inline positionné en absolute...). ========================================================================== */ body.index .estimer-hero { background-color: #282828; background-image: linear-gradient(rgba(40,40,40,.55), rgba(40,40,40,.55)), url('../img/hero.webp'); background-position: center; background-size: cover; background-repeat: no-repeat; padding: 150px 0 90px 0; } body.index .estimer-hero-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: clamp(34px, 4.5vw, 48px); line-height: 1.15; color: var(--white); text-align: center; margin: 0 0 14px 0; } body.index .estimer-hero-subtitle { font-family: 'Work Sans', Arial, sans-serif; font-weight: 400; font-style: italic; font-size: 17px; color: rgba(255,255,255,.85); text-align: center; margin: 0; } /* --- Formulaire à plat sur le fond cream, plus de carte --- */ body.index .estimer-form-section { background-color: #faf8f4; padding: 70px 0 90px 0; } body.index .estimer-form-container { max-width: 1100px !important; } body.index .estimer-columns { display: flex; flex-wrap: wrap; } body.index .estimer-column + .estimer-column { border-left: 1px solid rgba(20,20,43,.08); } body.index .estimer-group-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 20px; color: var(--navy-text); text-align: center; text-transform: none; letter-spacing: normal; margin: 0 0 26px 0; } body.index .estimer-column .form-group { margin-bottom: 16px; } body.index .estimer-column label.col-form-label { font-family: 'Work Sans', Arial, sans-serif; font-size: 14px; color: #444; } body.index .estimer-column .form-control { font-family: 'Work Sans', Arial, sans-serif; font-size: 14.5px; color: var(--text-body); border: 1px solid #ddd; border-radius: 8px; height: 44px; padding: 8px 14px; background-color: var(--white); box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease; } body.index .estimer-column textarea.form-control { height: auto; min-height: 90px; padding: 12px 14px; resize: vertical; } body.index .estimer-column select.form-control { cursor: pointer; } body.index .estimer-column .form-control:focus { border-color: #3AAFA0; box-shadow: 0 0 0 3px rgba(58,175,160,.15); outline: none; } body.index .estimer-column ::placeholder { color: #888; opacity: 1; } /* --- Civilité : radios natifs teintés en teal. Bootstrap positionne .radio-inline input[type=radio] en absolute avec margin-left:-20px (pensé pour son padding-left:20px) — ça sortait le radio du flux et le faisait chevaucher le texte du label suivant. On repasse tout en flow normal et on gère l'espacement uniquement via gap. --- */ body.index .estimer-civilite { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; } body.index .estimer-civilite > label:first-child { font-family: 'Work Sans', Arial, sans-serif; font-size: 14px; color: #444; margin: 0; } body.index .estimer-civilite .radio-inline { position: static; display: inline-flex; align-items: center; gap: 8px; padding-left: 0; padding-top: 0; margin: 0; font-family: 'Work Sans', Arial, sans-serif; font-weight: 400; font-size: 14px; color: #444; cursor: pointer; } body.index .estimer-civilite .radio-inline + .radio-inline { margin-left: 0; } body.index .estimer-civilite .radio-inline input[type="radio"] { position: static; accent-color: #3AAFA0; width: 16px; height: 16px; margin: 0; cursor: pointer; } /* --- Bouton "Faire Estimer" : pleine largeur, sous les 2 colonnes --- */ body.index .estimer-submit-wrap { margin-top: 28px; } body.index .estimer-submit { display: block; width: 100%; background-color: #3AAFA0; border-color: #3AAFA0; color: var(--white) !important; font-family: 'Work Sans', Arial, sans-serif; font-size: 15px; font-weight: 500; text-transform: none; border-radius: 8px; padding: 14px !important; box-shadow: none; transition: background-color .2s ease; } body.index .estimer-submit:hover, body.index .estimer-submit:focus { background-color: #2f9385; border-color: #2f9385; color: var(--white) !important; } @media (max-width: 991px) { body.index .estimer-column + .estimer-column { border-left: none; border-top: 1px solid rgba(20,20,43,.08); padding-top: 30px; margin-top: 8px; } } @media (max-width: 767px) { body.index .estimer-hero { padding: 130px 0 70px 0; } body.index .estimer-form-section { padding: 50px 0 60px 0; } body.index .estimer-type-row .col-md-4 { margin-bottom: 10px; } /* .estimer-columns force display:flex sur la .row pour le 2-colonnes desktop — mais Bootstrap ne fixe la largeur de .col-md-6 qu'à partir de 768px ; en dessous, sans cette règle, les 2 colonnes restaient en flex sans largeur définie et se comprimaient/débordaient au lieu de s'empiler. On force donc explicitement l'empilement pleine largeur ici. */ body.index .estimer-column { flex: 0 0 100%; max-width: 100%; } } /* ========================================================================== PAGES "MENTIONS LÉGALES" (mentions.php) ET "BARÊME DES HONORAIRES" (honoraires.php) — même traitement que .about-intro/.gestion-intro : pas de photo hero, fond cream, titre .expertise-title/.expertise-ornament réutilisés tels quels, corps de texte en Work Sans. ========================================================================== */ body.index .mentions-intro, body.index .honoraires-intro { background-color: var(--cream); padding: 150px 0 100px 0; } @media (max-width: 767px) { body.index .mentions-intro, body.index .honoraires-intro { padding: 100px 0 60px 0; } } body.index .legal-content, body.index .honoraires-content { max-width: 900px; margin: 40px auto 0 auto; font-family: 'Work Sans', Arial, sans-serif; font-size: 15px; line-height: 1.7; color: var(--text-body); } body.index .legal-lead { font-size: 16px; color: var(--navy-text); margin-bottom: 30px; } body.index .legal-content h3, body.index .honoraires-content h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: var(--navy-text); font-size: 19px; margin: 34px 0 10px 0; } body.index .legal-content h4 { font-family: 'Work Sans', Arial, sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .3px; color: #3AAFA0; font-size: 14px; margin: 0 0 10px 0; } body.index .legal-content p { margin: 0 0 16px 0; } body.index .legal-content a { color: #3AAFA0; } body.index .legal-columns { margin: 30px 0 10px 0; } /* --- Honoraires : titres h4 de sous-section + tableaux restylés --- */ body.index .honoraires-content h3 { text-align: center; } body.index .honoraires-content h4 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; color: var(--navy-text); font-size: 17px; margin: 30px 0 10px 0; } body.index .honoraires-h4-spaced { margin-top: 40px; } body.index .honoraires-content p { margin: 0 0 16px 0; } body.index .honoraires-note { text-align: center; margin: 6px 0 30px 0; } body.index .honoraires-vat { margin-top: 20px; color: #777; font-size: 13px; } body.index .honoraires-columns { margin: 10px 0 20px 0; } body.index .honoraires-table { width: 100%; max-width: 700px; margin: 18px auto 24px auto; border-collapse: collapse; font-family: 'Work Sans', Arial, sans-serif; font-size: 14px; } body.index .honoraires-table--wide { max-width: 100%; } body.index .honoraires-table th, body.index .honoraires-table td { border: 1px solid #e4dfd4; padding: 10px 14px; text-align: left; } body.index .honoraires-table thead th { background-color: #f1ede4; font-weight: 500; text-transform: uppercase; letter-spacing: .3px; font-size: 12.5px; color: var(--navy-text); text-align: center; } body.index .honoraires-table tbody tr:nth-child(odd) { background-color: var(--white); } body.index .honoraires-table tbody tr:nth-child(even) { background-color: #faf8f4; } body.index .honoraires-table--prestations tbody td:nth-child(2) { text-align: center; } @media (max-width: 767px) { body.index .legal-content, body.index .honoraires-content { margin-top: 26px; } body.index .legal-columns [class*="col-md-"] { margin-bottom: 24px; } body.index .honoraires-columns [class*="col-md-"] { margin-bottom: 20px; } body.index .honoraires-table th, body.index .honoraires-table td { padding: 8px 10px; font-size: 13px; } }