/* ========================================================================== Constructiv'Avocats — feuille de style du site statique Refonte à la main de l'ancien thème Elementor/The7, design identique. ========================================================================== */ /* ----- Polices ------------------------------------------------------------ */ /* Jost et Manrope sont chargées via Google Fonts (voir ). Didot est auto-hébergée (même fichier que l'ancien site). */ @font-face { font-family: 'Didot'; font-style: normal; font-weight: normal; font-display: auto; src: url('/assets/fonts/didot.woff2') format('woff2'), url('/assets/fonts/didot.woff') format('woff'); } /* ----- Variables ---------------------------------------------------------- */ :root { --encre: #000064; /* texte courant, bleu encre */ --marine: #000041; /* fonds sombres, titres */ --bleu: #0000ff; /* accent, boutons, liens */ --saumon: #ffb791; /* chiffres, citations, accents chauds */ --lavande: rgba(0, 0, 153, 0.11); /* fond sections claires violacées */ --bleu-pale: rgba(3, 118, 234, 0.08); /* fond sections bleu très pâle */ --creme: rgba(255, 233, 208, 0.37); /* fond crème (recrutement) */ --header-bg: rgba(0, 0, 100, 0.8); --didot: 'Didot', 'Playfair Display', Georgia, serif; --jost: 'Jost', 'Helvetica Neue', Arial, sans-serif; --manrope: 'Manrope', Arial, sans-serif; --largeur: 1200px; } /* ----- Base --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 80px; } body { margin: 0; font-family: var(--jost); font-weight: 300; font-size: 16px; line-height: 1.7; color: var(--encre); background: #fff; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--bleu); text-decoration: none; } p { margin: 0 0 1em; } h1, h2, h3, h4, h5 { margin: 0 0 0.6em; font-weight: 400; } .container { max-width: var(--largeur); margin: 0 auto; padding: 0 20px; } /* Étiquette de section (petit titre Didot bleu) */ .etiquette { font-family: var(--didot); font-weight: 900; font-size: 25px; line-height: 1.2; color: var(--bleu); text-align: center; margin: 0 0 18px; } /* Titre de section (Jost, encre foncée) */ .titre-section { font-family: var(--jost); font-weight: 400; font-size: 30px; line-height: 1.3; letter-spacing: -0.5px; color: var(--marine); text-align: center; max-width: 620px; margin: 0 auto 30px; } /* ----- Boutons ------------------------------------------------------------ */ .btn { display: inline-block; font-family: var(--manrope); font-weight: 600; font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase; color: #fff; background: var(--bleu); border: 0; border-radius: 4px; padding: 12px 26px; cursor: pointer; transition: opacity 0.25s; } .btn:hover { opacity: 0.8; } .btn--marine { background: var(--marine); } /* ----- En-tête / navigation ----------------------------------------------- */ .site-header { background: var(--header-bg); position: fixed; top: 0; left: 0; right: 0; z-index: 999; transition: background 0.3s; } .site-header.est-scrolle { background: #000064; } .site-header .header-inner { max-width: var(--largeur); margin: 0 auto; padding: 0 20px; min-height: 80px; display: flex; align-items: center; justify-content: center; } /* Sur l'accueil, la barre de menu est opaque, dans le flux, sous le héros */ .site-header--accueil { position: static; background: #000064; } .main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; } .main-nav li { position: relative; } .main-nav a { display: block; font-family: var(--jost); font-weight: 300; font-size: 13px; letter-spacing: 0.7px; text-transform: uppercase; color: #fff; padding: 30px 12px; white-space: nowrap; } .main-nav a:hover { color: var(--saumon); } .main-nav .caret { display: inline-block; margin-left: 6px; vertical-align: 1px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; } .main-nav .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 260px; background: #000064; padding: 8px 0; flex-direction: column; gap: 0; box-shadow: 0 10px 24px rgba(0, 0, 30, 0.3); } .main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu { display: flex; } .main-nav .sub-menu a { padding: 9px 22px; text-transform: none; letter-spacing: 0.2px; font-size: 14px; } .nav-toggle { display: none; background: none; border: 0; color: #fff; padding: 26px 10px; cursor: pointer; font-family: var(--jost); font-size: 13px; letter-spacing: 0.7px; text-transform: uppercase; align-items: center; gap: 8px; } .nav-toggle svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; } /* ----- Héros de l'accueil (vidéo) ----------------------------------------- */ .hero-accueil { position: relative; height: calc(100vh - 80px); min-height: 480px; overflow: hidden; } .hero-accueil video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-accueil .hero-voile { position: absolute; inset: 0; background: rgba(102, 144, 252, 0.74) url('/assets/img/logo.png') center / 21% auto no-repeat; opacity: 0.92; } .hero-accueil h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* ----- Section À propos ---------------------------------------------------- */ .apropos { padding: 90px 0 70px; } .apropos .colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 40px; } .apropos .valeurs { margin-top: 34px; max-width: 380px; } .apropos ul.solutions { list-style: none; margin: 8px 0 30px; padding: 0; } .apropos ul.solutions li { font-family: var(--didot); font-weight: 900; font-size: 18px; line-height: 1.2; color: var(--encre); padding: 8px 0 8px 30px; position: relative; } .apropos ul.solutions li::before { content: ''; position: absolute; left: 2px; top: 12px; width: 8px; height: 8px; border-right: 2.5px solid var(--bleu); border-top: 2.5px solid var(--bleu); transform: rotate(45deg); } .apropos .boutons { display: flex; gap: 16px; } /* ----- Bandeau chiffres ---------------------------------------------------- */ .chiffres { background: var(--marine); padding: 55px 0; } .chiffres .grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; } .chiffres .nombre { font-family: var(--didot); font-size: 60px; line-height: 1.1; color: var(--saumon); } .chiffres .legende { font-family: var(--jost); font-weight: 400; font-size: 18px; text-transform: uppercase; color: #fff; margin-top: 2px; } /* ----- Expertises (icônes) -------------------------------------------------- */ .expertises { padding: 90px 0; } .expertises .grille { display: flex; flex-wrap: wrap; justify-content: center; gap: 45px 40px; margin-top: 55px; } .expertises .grille .boite { width: calc((100% - 80px) / 3); } .boite { text-align: center; color: inherit; display: block; } .boite .rond { width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 50%; background: var(--bleu); display: flex; align-items: center; justify-content: center; } .boite .rond svg { width: 26px; height: 26px; fill: #fff; } .boite h3 { font-family: var(--didot); font-weight: 700; font-size: 22px; line-height: 1.25; color: var(--encre); margin-bottom: 12px; } .boite p { font-size: 15px; line-height: 1.75; margin: 0; } .boite:hover h3 { color: var(--bleu); } /* ----- Témoignages ---------------------------------------------------------- */ .temoignages { display: grid; grid-template-columns: 1fr 1fr; background: var(--marine); } .temoignages .photo { background: url('/assets/img/temoignages.jpg') center / cover no-repeat; min-height: 540px; } .temoignages .contenu { color: #fff; padding: 70px 60px; display: flex; flex-direction: column; justify-content: center; position: relative; } .temoignages .etiquette { color: #fff; margin-bottom: 45px; } .carrousel { position: relative; text-align: center; } .carrousel .diapo { display: none; padding: 0 60px; } .carrousel .diapo.active { display: block; } .carrousel h3 { font-family: var(--jost); font-weight: 400; font-size: 20px; letter-spacing: 0.2px; text-transform: uppercase; color: var(--saumon); margin-bottom: 20px; } .carrousel blockquote { margin: 0 0 30px; font-size: 16px; line-height: 1.65; } .carrousel cite { font-style: normal; font-size: 15px; } .carrousel .fleche { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; cursor: pointer; padding: 10px; } .carrousel .fleche svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; } .carrousel .fleche--prec { left: -20px; } .carrousel .fleche--suiv { right: -20px; } .carrousel .points { display: flex; justify-content: center; gap: 9px; margin-top: 45px; } .carrousel .points button { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #fff; background: transparent; padding: 0; cursor: pointer; } .carrousel .points button.actif { background: var(--saumon); border-color: var(--saumon); } /* ----- Appel à l'action « défense » ----------------------------------------- */ .defense { display: grid; grid-template-columns: 1fr 1fr; } .defense .texte { background: var(--marine); color: #fff; padding: 90px 60px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .defense h2 { font-family: var(--didot); font-weight: 900; font-size: 45px; line-height: 1.2; color: var(--saumon); margin: 0 0 30px; } .defense h2 .blanc { color: #fff; } .defense .photo { background: url('/assets/img/poignee-de-main.jpg') center / cover no-repeat; min-height: 500px; } /* ----- Cas clients ----------------------------------------------------------- */ .cas-clients { background: var(--lavande); padding: 90px 0; } .cas-clients .grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 55px; } .carte-cas { position: relative; aspect-ratio: 1 / 1; overflow: hidden; } .carte-cas img { width: 100%; height: 100%; object-fit: cover; } .carte-cas::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 100, 0.35), rgba(0, 0, 65, 0.75)); } .carte-cas .legende { position: absolute; left: 14px; right: 14px; bottom: 26px; z-index: 1; text-align: center; color: #fff; } .carte-cas h3 { font-family: var(--jost); font-weight: 600; font-size: 16px; line-height: 1.35; text-transform: uppercase; color: #fff; margin: 0 0 2px; } .carte-cas .tag { font-family: var(--jost); font-weight: 600; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--saumon); } /* ----- Ticker (bandeau défilant) --------------------------------------------- */ .ticker { overflow: hidden; background: #fff; padding: 26px 0; white-space: nowrap; } .ticker .piste { display: inline-flex; animation: ticker-defile 28s linear infinite; } .ticker span { display: inline-block; padding-right: 80px; font-size: 16px; color: var(--encre); } @keyframes ticker-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ----- Honoraires ------------------------------------------------------------- */ .honoraires { background: var(--lavande); padding: 90px 0; } .honoraires .grand { font-size: 21px; font-weight: 300; letter-spacing: 0.2px; color: var(--marine); text-align: center; max-width: 760px; margin: 0 auto 22px; } .honoraires .petit { font-size: 16px; color: var(--marine); text-align: center; max-width: 700px; margin: 0 auto 18px; } /* ----- Nous recrutons ----------------------------------------------------------- */ .recrutement { display: grid; grid-template-columns: 1fr 1fr; } .recrutement .illustration { background: var(--saumon); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 60px; } .recrutement .illustration img { position: relative; max-width: 540px; } .recrutement .texte { background: var(--creme); padding: 90px 70px; display: flex; flex-direction: column; justify-content: center; text-align: center; } .recrutement h2 { font-family: var(--jost); font-weight: 300; font-size: 26px; line-height: 1.4; color: var(--marine); margin-bottom: 24px; } .recrutement h2 strong { font-weight: 600; } .recrutement .btn { align-self: center; margin-top: 26px; } /* ----- Section contact (formulaire) ---------------------------------------------- */ .contact-cta { background: var(--marine); color: #fff; padding: 90px 0; } .contact-cta .colonnes { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: center; } .contact-cta h2 { font-family: var(--didot); font-weight: 900; font-size: 42px; line-height: 1.5; color: var(--saumon); margin: 0; } .contact-cta h2 .blanc { color: #fff; } .formulaire .rangee { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .formulaire .champ { margin-bottom: 14px; } .formulaire label { display: block; font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase; color: #fff; margin-bottom: 5px; } .formulaire input[type="text"], .formulaire input[type="email"], .formulaire input[type="tel"], .formulaire textarea { width: 100%; border: 0; border-radius: 4px; background: #fff; color: var(--encre); font-family: var(--jost); font-size: 15px; padding: 8px 12px; min-height: 36px; } .formulaire textarea { min-height: 110px; resize: vertical; } .formulaire .consentement { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase; color: #fff; margin: 6px 0 14px; } .formulaire .consentement a { color: #fff; text-decoration: underline; } .formulaire .btn { width: 100%; } .formulaire .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .form-message { margin-top: 14px; padding: 12px 16px; border-radius: 8px; font-size: 0.95rem; line-height: 1.5; display: none; } .form-message--ok { display: block; background: #e9f7ec; color: #1c6b2e; } .form-message--erreur { display: block; background: #fdecec; color: #a12020; } /* ----- Pied de page ------------------------------------------------------------------ */ .site-footer { background: var(--marine); color: #fff; } .site-footer .haut { max-width: var(--largeur); margin: 0 auto; padding: 60px 20px 50px; display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 40px; align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.25); } .site-footer .logo-footer { width: 195px; margin-bottom: 26px; } .site-footer address { font-style: normal; font-size: 16px; line-height: 1.7; margin-bottom: 14px; } .site-footer .tel { display: block; color: #fff; margin-bottom: 24px; } .site-footer .actions { display: flex; align-items: center; gap: 24px; } .site-footer .linkedin { width: 46px; height: 46px; border-radius: 50%; background: var(--bleu); display: flex; align-items: center; justify-content: center; } .site-footer .linkedin svg { width: 20px; height: 20px; fill: #fff; } .site-footer .ecoute { max-width: 300px; margin: 0 auto; } .site-footer .liens { list-style: none; margin: 0; padding: 0; } .site-footer .liens a { color: #fff; font-size: 15px; letter-spacing: 0.2px; line-height: 1.6; display: inline-block; padding: 5px 0; } .site-footer .liens a:hover { color: var(--saumon); } .site-footer .barre { background: rgba(255, 255, 255, 0.12); } .site-footer .barre ul { list-style: none; margin: 0 auto; padding: 18px 20px; max-width: var(--largeur); display: flex; justify-content: center; gap: 44px; } .site-footer .barre a { color: #fff; font-size: 13px; letter-spacing: 0.7px; text-transform: uppercase; } .site-footer .barre a:hover { color: var(--saumon); } .site-footer .copyright { text-align: center; font-size: 14px; padding: 12px 20px 16px; color: #fff; } /* ========================================================================== Pages EXPERTISES (construction, immobilier, assurances, social, préjudice) ========================================================================== */ .hero-page { position: relative; min-height: 600px; display: flex; align-items: center; background-size: cover; background-position: center; } .hero-page::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0, 0, 100, 0.78) 0%, rgba(0, 0, 100, 0.3) 34%, rgba(0, 0, 100, 0) 58%); } .hero-page .container { position: relative; z-index: 1; width: 100%; } .hero-page h1 { font-family: var(--didot); font-weight: 800; font-size: 60px; line-height: 1.2; letter-spacing: 0.2px; color: #fff; max-width: 560px; margin: 0; } .intro-expertise { padding: 80px 0 90px; } .intro-expertise .colonnes { display: grid; grid-template-columns: 0.85fr 1.6fr; gap: 70px; } .pilules { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .pilules a { font-size: 12px; font-weight: 400; letter-spacing: 0.5px; text-transform: uppercase; color: var(--bleu); border: 1px solid var(--bleu); border-radius: 3px; padding: 10px 18px; display: inline-flex; align-items: center; gap: 12px; background: #fff; transition: background 0.2s, color 0.2s; } .pilules a::after { content: '\2192'; font-size: 14px; } .pilules a:hover { background: var(--bleu); color: #fff; } .intro-expertise h2 { font-family: var(--jost); font-weight: 300; font-size: 24px; line-height: 1.4; color: var(--encre); margin-bottom: 30px; } .intro-expertise .fort { font-weight: 500; font-size: 18px; line-height: 1.7; color: var(--encre); } .intro-expertise ul { margin: 0 0 1em; padding-left: 22px; } .intro-expertise li { margin-bottom: 4px; } .domaines { background: var(--bleu-pale); padding: 90px 0; } .domaines .titre-didot { font-family: var(--didot); font-weight: 700; font-size: 40px; line-height: 1.2; color: var(--encre); text-align: center; margin-bottom: 8px; opacity: 0.75; } .domaines .sous-titre { font-size: 20px; font-weight: 300; letter-spacing: 0.4px; color: var(--encre); text-align: center; margin-bottom: 60px; } .domaines .grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 45px; } .domaines .grille--3 { grid-template-columns: repeat(3, 1fr); max-width: 980px; margin: 0 auto; } .domaines .carte { max-width: 261px; margin: 0 auto; } .domaines .grille--3 .carte { max-width: 280px; } .domaines .carte img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .domaines .carte h3 { font-family: var(--jost); font-weight: 500; font-size: 22px; line-height: 1.2; color: #1c244b; margin: 28px 0 14px; } .domaines .carte p { font-size: 15px; line-height: 1.5; color: #324a6d; margin: 0; } .engagements { padding: 90px 0; } .engagements .titre-didot { font-family: var(--didot); font-weight: 700; font-size: 40px; line-height: 1.2; color: var(--encre); text-align: center; margin-bottom: 60px; } .engagements .grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; text-align: center; } .engagements img { max-width: 250px; margin: 0 auto 20px; } .engagements h3 { font-family: var(--didot); font-weight: 700; font-size: 22px; line-height: 1.5; color: var(--encre); margin: 0 auto; max-width: 220px; } /* ========================================================================== Page ÉQUIPE ========================================================================== */ .hero-equipe { position: relative; min-height: 100vh; display: flex; align-items: center; background: url('/assets/img/hero-equipe.jpg') center / cover no-repeat; } .hero-equipe::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(140, 40, 40, 0.55), rgba(0, 0, 100, 0.55)); } .hero-equipe h1 { position: relative; font-family: var(--didot); font-weight: 800; font-size: 110px; line-height: 1.15; color: rgba(255, 255, 255, 0.55); margin: 0; max-width: 1000px; } .equipe-intro { background: var(--bleu-pale); padding: 90px 0; text-align: center; } .equipe-intro h2 { font-family: var(--didot); font-weight: 700; font-size: 40px; color: var(--marine); margin-bottom: 26px; } .equipe-intro p { max-width: 760px; margin: 0 auto 6px; } .equipe-intro .fort { font-weight: 500; margin-top: 20px; } .membre { padding: 70px 0; border-bottom: 1px solid #e3e3e3; } .membre .colonnes { display: grid; grid-template-columns: 380px 1.1fr 0.9fr; gap: 50px; align-items: center; } .membre--inverse .colonnes { grid-template-columns: 0.9fr 1.1fr 380px; } .membre .photo figcaption { font-size: 12px; color: #666; margin-top: 6px; } .membre h2 { font-family: var(--didot); font-weight: 700; font-size: 30px; color: var(--encre); margin-bottom: 20px; } .membre .bio p { font-size: 15.5px; } .membre .linkedin { width: 46px; height: 46px; border-radius: 50%; background: var(--bleu); display: inline-flex; align-items: center; justify-content: center; margin-top: 16px; } .membre .linkedin svg { width: 20px; height: 20px; fill: #fff; } .membre .citation img { max-width: 380px; margin: 0 auto; } /* ========================================================================== Page CONTACT ========================================================================== */ .contact-page { padding: 170px 0 0; } .contact-page .colonnes { display: grid; grid-template-columns: 1fr 1.35fr; gap: 70px; align-items: start; } .contact-page h1 { font-family: var(--didot); font-weight: 700; font-size: 40px; line-height: 1.25; color: var(--encre); margin-bottom: 30px; } .contact-page ul { padding-left: 22px; } .contact-page li { margin-bottom: 4px; font-weight: 500; } .contact-page iframe { width: 100%; height: 490px; border: 0; display: block; } .coordonnees { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; text-align: center; padding: 70px 0 40px; } .coordonnees h2 { font-family: var(--didot); font-weight: 700; font-size: 26px; color: var(--encre); margin-bottom: 24px; } .coordonnees p { margin-bottom: 4px; } .coordonnees .bloc { border-bottom: 1px solid #9a9ab8; padding-bottom: 34px; } .skyline { max-width: 1030px; margin: 40px auto 0; padding: 0 20px; display: block; } /* ========================================================================== Page REJOIGNEZ-NOUS ========================================================================== */ .rejoindre { background: var(--encre); color: #fff; position: relative; overflow: hidden; } .rejoindre .filigrane-bloc { min-height: 100vh; } .rejoindre .filigrane { font-family: var(--didot); font-weight: 800; font-size: 200px; line-height: 1; color: rgba(255, 255, 255, 0.36); padding: 127px 0 0; margin: 0; } .rejoindre .colonnes { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-content: start; min-height: 100vh; } /* grande photo pleine largeur sous le contenu */ .rejoindre-photo { min-height: 1310px; background: var(--encre) url('/assets/img/rejoignez-1.jpg') center / cover no-repeat; } .rejoindre h2 { font-family: var(--didot); font-weight: 400; font-size: 35px; line-height: 1.2; color: #fff; margin-bottom: 55px; } .rejoindre h3 { font-family: var(--jost); font-weight: 500; font-size: 23px; color: #fff; margin-bottom: 24px; } .rejoindre p, .rejoindre li { color: #fff; } .rejoindre strong { font-weight: 600; } .rejoindre ul { padding-left: 22px; margin: 0 0 30px; } .rejoindre li { margin-bottom: 8px; } .rejoindre .btn { align-self: flex-start; } /* ========================================================================== Pages légales (mentions, confidentialité) ========================================================================== */ .page-legale { padding: 170px 0 90px; max-width: 900px; margin: 0 auto; } .page-legale h1 { font-weight: 600; font-size: 34px; color: var(--marine); text-transform: uppercase; margin-bottom: 24px; } .page-legale h2 { font-weight: 600; font-size: 17px; text-transform: uppercase; color: var(--marine); margin: 30px 0 14px; } .page-legale a { text-decoration: underline; } .page-legale ul { padding-left: 24px; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 990px) { .site-header .header-inner { justify-content: center; } .nav-toggle { display: flex; } .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #000064; z-index: 60; } .main-nav.ouvert { display: block; } .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; } .main-nav a { padding: 13px 24px; } .main-nav .sub-menu { position: static; display: flex; box-shadow: none; background: rgba(255, 255, 255, 0.06); } .apropos .colonnes, .contact-cta .colonnes, .contact-page .colonnes, .intro-expertise .colonnes, .rejoindre .colonnes { grid-template-columns: 1fr; gap: 40px; } .temoignages, .defense, .recrutement { grid-template-columns: 1fr; } .temoignages .photo { min-height: 320px; } .defense .photo { min-height: 320px; } .chiffres .grille { grid-template-columns: repeat(2, 1fr); gap: 40px; } .expertises .grille .boite { width: calc((100% - 40px) / 2); } .cas-clients .grille { grid-template-columns: 1fr 1fr; } .domaines .grille, .domaines .grille--3 { grid-template-columns: 1fr 1fr; } .engagements .grille { grid-template-columns: 1fr 1fr; } .coordonnees { grid-template-columns: 1fr 1fr; } .membre .colonnes, .membre--inverse .colonnes { grid-template-columns: 1fr; } .membre .photo img { max-width: 380px; } .hero-accueil .hero-voile { background-size: 280px auto; } .hero-equipe h1 { font-size: 64px; } .rejoindre .filigrane { font-size: 90px; } .rejoindre .filigrane-bloc { min-height: 0; } .rejoindre .colonnes { min-height: 0; } .rejoindre-photo { min-height: 253px; } .hero-page h1 { font-size: 44px; } .site-footer .haut { grid-template-columns: 1fr; text-align: center; } .site-footer .actions { justify-content: center; } .site-footer .barre ul { flex-wrap: wrap; gap: 14px 28px; } } @media (max-width: 600px) { .titre-section { font-size: 25px; } .defense h2 { font-size: 34px; } .contact-cta h2 { font-size: 32px; } .cas-clients .grille { grid-template-columns: 1fr; } .expertises .grille .boite { width: 100%; } .domaines .grille, .domaines .grille--3 { grid-template-columns: 1fr; } .engagements .grille { grid-template-columns: 1fr; } .coordonnees { grid-template-columns: 1fr; } .chiffres .grille { grid-template-columns: 1fr 1fr; } .chiffres .nombre { font-size: 44px; } .formulaire .rangee { grid-template-columns: 1fr; gap: 0; } .hero-accueil .hero-voile { background-size: 240px auto; } .hero-equipe h1 { font-size: 42px; } .rejoindre .filigrane { font-size: 56px; } .hero-page h1 { font-size: 34px; } .hero-page { min-height: 380px; } } /* ========================================================================== Bandeau RGPD (reprise du design Complianz de l'ancien site) ========================================================================== */ .bandeau-rgpd { position: fixed; left: 12px; bottom: 12px; z-index: 1100; width: min(525px, calc(100vw - 24px)); background: #fff; border-radius: 10px; box-shadow: 0 6px 30px rgba(0, 0, 20, 0.25); padding: 22px 22px 16px; font-family: var(--jost); color: #222; } .bandeau-rgpd__fermer { position: absolute; top: 14px; right: 14px; background: none; border: 1.5px solid #333; border-radius: 3px; width: 22px; height: 22px; line-height: 1; font-size: 12px; color: #333; cursor: pointer; padding: 0; } .bandeau-rgpd__titre { font-weight: 600; font-size: 15px; text-align: center; color: #222; margin: 0 0 14px; } .bandeau-rgpd__texte { font-size: 12.5px; line-height: 1.55; color: #444; margin: 0 0 16px; } .bandeau-rgpd__boutons { display: flex; gap: 8px; } .bandeau-rgpd__btn { flex: 1; font-family: var(--jost); font-size: 14px; padding: 10px 0; border-radius: 6px; cursor: pointer; } .bandeau-rgpd__btn--accepter { background: #3479c7; border: 1px solid #3479c7; color: #fff; } .bandeau-rgpd__btn--accepter:hover { background: #2b67ab; } .bandeau-rgpd__btn--refuser { background: #f7f7f7; border: 1px solid #d4d4d4; color: #222; } .bandeau-rgpd__btn--refuser:hover { background: #ececec; } .bandeau-rgpd__liens { text-align: center; font-size: 12px; margin: 14px 0 0; } .bandeau-rgpd__liens a { color: #3479c7; text-decoration: underline; margin: 0 6px; } /* Carte Google bloquée tant que les cookies ne sont pas acceptés */ .carte-bloquee { height: 490px; background: var(--bleu-pale); border: 1px solid #d8def0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px; } .carte-bloquee p { margin: 0; }