/* ===================================================================== STEFFENS EIGENBAU - FEUILLE DE STYLE DU FRONT Layout fixe (min-width 1440px). Le responsive sera gere par steffens_medium.css / steffens_small.css / steffens_tiny.css une fois le design approuve par le client. Les polices Archivo et Newsreader sont servies depuis fonts/. ORDRE DU FICHIER 1. Polices, variables, reset, balises generiques 2. .main_width 3. En-tete, navigation, boutons generiques 4. Composants partages 5. PAGE HOME (regles prefixees #home) 5b. PAGE A PROPOS (regles prefixees #a-propos) 5c. PAGE NOS PROJETS (regles prefixees #nos-projets) 5d. PAGE REALISATIONS (regles prefixees #realisations) 6. Pied de page 7. Modale de demande d'offre 8. Avertissement temporaire petits ecrans ===================================================================== */ /* --------------- 1. POLICES --------------- */ @font-face{font-family:'Archivo';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/archivo-latin-ext-300-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Archivo';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/archivo-latin-300-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/archivo-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/archivo-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/archivo-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/archivo-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/archivo-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/archivo-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin-ext-opsz-normal.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin-opsz-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin-ext-opsz-italic.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-latin-opsz-italic.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} /* --------------- 1b. VARIABLES --------------- */ :root{ --black:#0D0D0D; --orange:#F39B11; --orange-deep:#cc8411; /* meme teinte assombrie, pour le petit texte sur fond clair */ --slate:#5C5853; --mist:#9C978F; --limewash:#EBE7E0; --paper:#F7F5F1; --line:#D3CFC6; --line-soft:#E2DED5; /* plafond des blocs a fond perdu : au-dela, une photo de 1920 px serait etiree et le cadrage deviendrait une meurtriere */ --large-max:1920px; } /* --------------- 1c. RESET ET BALISES GENERIQUES --------------- */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-width:1440px} body{ background:var(--paper); color:var(--black); font-family:"Newsreader",Georgia,serif; font-weight:300; font-size:18px; line-height:1.68; } a{color:inherit;text-decoration:none} img{display:block;max-width:100%} ul{list-style:none} button{font:inherit;color:inherit;border:0;background:none} section{padding:118px 0} h1{ font-family:"Archivo",Helvetica,sans-serif;font-weight:500; font-size:76px;line-height:1.04;letter-spacing:-0.035em; } /* --------------- 2. CONTENEUR CENTRE --------------- */ .main_width{width:1240px;margin:0 auto} /* --------------- 3. EN-TETE, NAVIGATION, BOUTONS --------------- */ #en_tete{border-bottom:1px solid var(--line-soft);background:var(--paper)} .en_tete_inner{display:flex;align-items:center;justify-content:space-between;height:104px} .logo_lien{width:190px} .logo_lien img{width:100%;height:auto;display:block} .nav_principale{ display:flex;align-items:center;gap:32px; font-family:"Archivo",sans-serif;font-size:15px;font-weight:300;color:var(--slate); } .nav_liste{display:flex;align-items:center;gap:32px} .nav_liste .actif{color:var(--black);font-weight:400} .choix_langue{ display:flex;gap:9px;font-size:12.5px;letter-spacing:0.06em;color:var(--mist); border-left:1px solid var(--line-soft);padding-left:28px; } .choix_langue b{font-weight:500;color:var(--black)} .btn_principal{ font-family:"Archivo",sans-serif;font-weight:400;font-size:15px;letter-spacing:0.01em; background:var(--orange);color:var(--black);padding:17px 34px;display:inline-block;cursor:pointer; } .btn_contact{padding:12px 22px;font-size:14px} /* --------------- 4. COMPOSANTS PARTAGES --------------- */ .titre_2{ font-family:"Archivo",Helvetica,sans-serif;font-weight:500; font-size:42px;line-height:1.12;letter-spacing:-0.03em; } .titre_3{ font-family:"Archivo",Helvetica,sans-serif;font-weight:500; font-size:19px;line-height:1.32;letter-spacing:-0.015em; } .chapeau{font-size:20px;line-height:1.62;color:var(--slate);max-width:32em} .texte{font-size:18px;line-height:1.72;color:var(--slate);max-width:34em} .texte + .texte{margin-top:20px} .libelle_section{ font-family:"Archivo",sans-serif;font-weight:400; font-size:12.5px;letter-spacing:0.07em;color:var(--orange); display:flex;align-items:center;gap:12px;margin-bottom:22px; } .lien_souligne{ font-family:"Archivo",sans-serif;font-size:15px;color:var(--black); border-bottom:2px solid var(--orange);padding-bottom:3px;cursor:pointer; } /* carte d'un bien immobilier, utilisee sur la home et sur nos projets */ .liste_offres{display:grid;grid-template-columns:repeat(3,1fr);gap:44px} .offre{padding-top:22px} .offre_lien{display:block} .offre_visuel{height:250px;overflow:hidden;margin-bottom:24px} .offre_visuel img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .offre_lien:hover .offre_visuel img{transform:scale(1.04)} .offre_localite{ font-family:"Archivo",sans-serif;font-size:13px;letter-spacing:0.05em; color:var(--orange-deep);margin-bottom:9px; } .offre .titre_3{margin-bottom:18px} .offre_caracteristiques{ display:flex;gap:24px;font-family:"Archivo",sans-serif;font-weight:300; font-size:14.5px;color:var(--slate);padding-bottom:18px; } .offre_caracteristiques b{font-weight:500;color:var(--black);font-variant-numeric:tabular-nums} .offre_prix{ display:flex;justify-content:space-between;align-items:center; padding-top:18px;border-top:1px solid var(--line-soft); } /* carte sans prix affiche, sans resume et sans PEB, typiquement un terrain : le prix devient une simple mention sous le titre, sans filet ni gros corps */ .offre_compacte .titre_3{margin-bottom:0} .offre_prix_discret{ font-family:"Archivo",sans-serif;font-weight:300;font-size:14.5px; color:var(--slate);margin-top:6px; } .offre_prix_valeur{font-family:"Archivo",sans-serif;font-weight:500;font-size:24px;letter-spacing:-0.03em} /* ligne de rappel sous une liste : texte a gauche, lien a droite */ .lien_suite{ margin-top:58px;padding-top:26px;border-top:1px solid var(--line-soft); display:flex;justify-content:space-between;align-items:center; font-size:17px;color:var(--slate); } /* onglets de filtrage d'une liste, utilises sur plusieurs pages */ .liste_filtres{ display:flex;flex-wrap:wrap;gap:10px;margin-bottom:46px; padding-bottom:30px;border-bottom:1px solid var(--line-soft); } .filtre{ font-family:"Archivo",sans-serif;font-size:14px;letter-spacing:0.01em; padding:11px 22px;border:1px solid var(--line);color:var(--slate);cursor:pointer; } .filtre:hover{border-color:var(--orange);color:var(--black)} .filtre.actif{background:var(--black);border-color:var(--black);color:var(--paper)} .filtre_vide{display:none;color:var(--slate);padding-top:10px} .filtre_vide.visible{display:block} /* Owl ajoute toujours les boutons de navigation au DOM et se contente de poser .disabled sur le conteneur quand nav vaut false. Comme nous n'utilisons pas sa feuille de theme, c'est a nous de les masquer. */ .owl-nav.disabled{display:none} /* libelle reserve aux lecteurs d'ecran */ .hors_ecran{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } /* etiquette PEB, mention legale d'une publicite immobiliere en Wallonie */ .badge_peb{ font-family:"Archivo",sans-serif;font-weight:600;font-size:18px;color:#FFFFFF; width:fit-content;height:34px; display:flex;align-items:center;justify-content:center; padding: 0 20px 0 10px; clip-path:polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); } .badge_peb.peb_app{background:#007E3A} .badge_peb.peb_ap {background:#2FA34A} .badge_peb.peb_a {background:#7DB928} .badge_peb.peb_b {background:#C4D200;color:#0D0D0D} .badge_peb.peb_c {background:#FFED00;color:#0D0D0D} .badge_peb.peb_d {background:#FBBA00;color:#0D0D0D} .badge_peb.peb_e {background:#EF7D00} .badge_peb.peb_f {background:#E30613} .badge_peb.peb_g {background:#A01916} /* entete de section : libelle + titre a gauche, texte d'introduction a droite */ .entete_section{margin-bottom: 80px; text-align: center;} .entete_section .texte{max-width:25em;font-size:17px;} .entete_section_serre{margin-bottom:0} /* section d'appel de fin de page, identique sur toutes les pages */ #appel{background:var(--limewash)} .appel_inner{text-align:center} .appel_inner .libelle_section{justify-content:center;margin-bottom:20px} .appel_inner .chapeau{max-width:30em;margin:22px auto 0} .appel_inner .btn_principal{margin-top:38px} /* ===================================================================== 5. PAGE HOME ===================================================================== */ /* --------------- ACCUEIL (c1) --------------- */ #home #accueil{padding:112px 0 0} #home .accueil_grille{display:grid;grid-template-columns:1fr 380px;gap:96px;align-items:end;padding-bottom:76px} #home .accueil_accroche{font-size:19px;line-height:1.62;color:var(--slate);padding-bottom:8px} #home .accueil_zone{ display:block;margin-top:22px;font-family:"Archivo",sans-serif; font-size:12.5px;letter-spacing:0.07em;color:var(--mist); } #home .accueil_visuel{ width:100%;max-width:var(--large-max);margin:0 auto; height:660px;overflow:hidden;background:var(--limewash); } #home .accueil_visuel img{width:100%;height:100%;object-fit:cover} /* --------------- CHIFFRES (c2) --------------- */ /* le medaillon anniversaire est a cheval sur la photo et le bandeau de chiffres */ #home #chiffres{padding:0} #home .chiffres_inner{position:relative} #home .medaillon_jubile{ position:absolute;right:0;top:-196px;width:180px;height:180px;border-radius:50%; background:var(--paper);color:var(--orange);z-index:2; } #home .couronne_laurier{position:absolute;inset:9px;width:calc(100% - 18px);height:calc(100% - 18px)} #home .jubile_texte{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} #home .jubile_nombre{ font-family:"Archivo",sans-serif;font-weight:600;font-size:56px;line-height:.9; letter-spacing:-0.045em;color:var(--black);margin-top:-6px; } #home .jubile_unite{ font-family:"Archivo",sans-serif;font-weight:500;font-size:12px;letter-spacing:.26em; text-transform:uppercase;color:var(--orange-deep);margin-top:6px;padding-left:.26em; } #home .liste_chiffres{ border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft); margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr); } #home .chiffre{padding:28px 21px 30px;border-right:1px solid var(--line-soft)} #home .chiffre:last-child{border-right:0} #home .chiffre:first-child{padding-left:0} #home .chiffre_nombre{ font-family:"Archivo",sans-serif;font-weight:500;font-size:30px; letter-spacing:-0.03em;line-height:1; } #home .chiffre_libelle{font-size:16px;color:var(--slate);margin-top:10px;line-height:1.5} /* --------------- HISTOIRE (c3) --------------- */ #home .histoire_grille{display:grid;grid-template-columns:1fr 480px;gap:110px;align-items:start} #home #histoire .titre_2{margin-bottom:20px} #home .histoire_suite{margin-top:36px} #home .histoire_visuel{position:relative} #home .histoire_visuel img{width:100%;height:580px;object-fit:cover} #home .histoire_visuel::after{ content:'';position:absolute;right:15px;top:15px;width:90px;height:90px; background-image:url(images/steffens/icon-steffens.svg);background-size:contain; background-repeat:no-repeat;background-position:center; } /* --------------- RELANCE (c4) --------------- */ #home #relance{background:var(--limewash);padding:60px 0} #home .relance_inner{display:flex;align-items:center;justify-content:space-between;gap:70px} #home #relance .titre_2{font-size:31px;line-height:1.16} #home #relance .texte{margin-top:12px;max-width:34em;font-size:17px} #home #relance .btn_principal{flex:0 0 auto} /* --------------- OFFRES (c5) --------------- */ #home #offres{padding:220px 0 118px;position:relative} #home #offres:after{ content:'';position:absolute;left:50%;transform:translateX(-50%);top:60px; width:280px;height:90px;background-image:url(images/steffens/logo-steffens.svg); background-size:contain;background-repeat:no-repeat;background-position:center;opacity:0.09; } #home #offres .entete_section{ display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px; text-align: left; } /* encart terrains a batir, sous les maisons */ #home .encart_terrains{ margin-top:64px;background:var(--limewash);padding:44px 48px; display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:center; } #home .terrains_titre{ font-family:"Archivo",sans-serif;font-weight:500;font-size:28px;line-height:1.16; letter-spacing:-0.025em;margin-bottom:14px; } #home .terrains_entete .texte{font-size:17px} #home .terrains_liste{display:grid;grid-template-columns:1fr 1fr;gap:20px} #home .terrain{background:var(--paper);padding:26px 28px 28px;border-top:2px solid var(--orange)} #home .terrain_localite{ font-family:"Archivo",sans-serif;font-size:13px;letter-spacing:0.05em; color:var(--orange-deep);margin-bottom:8px; } #home .terrain_prix{font-family:"Archivo",sans-serif;font-weight:300;font-size:14.5px;color:var(--slate);margin:6px 0 22px} #home .terrain .lien_souligne{font-size:14px} /* --------------- REALISATIONS (c6) --------------- */ #home #realisations{background:var(--limewash); text-align: center;} #home #realisations .libelle_section{margin: 0 auto 22px; display: block;} #home #realisations .entete_section .texte{margin: 10px auto 0; display: block;} #home .galerie_chantiers{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:20px;margin-top:54px} #home .galerie_chantiers .galerie_cellule{overflow:hidden;height:300px} #home .galerie_chantiers .cellule_haute{grid-row:span 2;height:620px} #home .galerie_chantiers_bas{display:grid;grid-template-columns:1fr 1fr 2fr;gap:20px;margin-top:20px} #home .galerie_chantiers_bas .galerie_cellule{overflow:hidden;height:250px} #home .galerie_lien{display:block;height:100%} #home .galerie_cellule img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} #home .galerie_lien:hover img{transform:scale(1.04)} /* --------------- EQUIPE (c7) --------------- */ #home #equipe{text-align:center;padding:40px 0 118px} #home #equipe .libelle_section{justify-content:center} #home #equipe .titre_2{width:100%;max-width:unset} #home .liste_equipe{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:800px;margin:56px auto 0} #home .membre{text-align:left} #home .membre_visuel{height:260px;overflow:hidden;margin-bottom:16px;background:var(--paper)} #home .membre_visuel img{width:100%;height:100%;object-fit:cover} #home .membre_nom{font-family:"Archivo",sans-serif;font-weight:500;font-size:16px;letter-spacing:-0.015em} #home .membre_fonction{font-size:15px;color:var(--slate);margin-top:5px;line-height:1.42} /* coordonnees generales, sous l'equipe */ #home .coordonnees{ max-width:800px;margin:44px auto 0;background:var(--limewash);padding:30px 36px; display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;text-align:left; } #home .coordonnees_libelle{ font-family:"Archivo",sans-serif;font-size:12.5px;letter-spacing:0.06em; color:var(--orange-deep);margin-bottom:8px; } #home .coordonnees_valeur{ font-family:"Archivo",sans-serif;font-weight:400;font-size:15.5px; line-height:1.55;color:var(--black); } /* ===================================================================== 5b. PAGE A PROPOS ===================================================================== */ /* --------------- PRESENTATION (c1) --------------- */ /* hero en deux colonnes, photo legendee a gauche et texte a droite : volontairement different du hero de la home, dont le titre occupe toute la largeur et dont la photo est a fond perdu en dessous */ #a-propos #presentation{padding:0;} #a-propos h1{font-size:52px;line-height:1.1} #a-propos .presentation_grille{ display:grid;grid-template-columns:min(40vw, 768px) 1fr;gap:88px;align-items:center; max-width:var(--large-max);margin:0 auto; } #a-propos .presentation_cadre{height:520px;overflow:hidden;background:var(--limewash)} #a-propos .presentation_cadre img{width:100%;height:100%;object-fit:cover} #a-propos .presentation_legende{ font-family:"Archivo",sans-serif;font-size:12.5px;letter-spacing:0.03em; color:var(--mist);margin-top:13px; } #a-propos .presentation_accroche{ font-size:20px;line-height:1.62;color:var(--slate);margin-top:26px;max-width:30em; } #a-propos .presentation_zone{ margin-top:34px;padding-top:20px;border-top:1px solid var(--line); font-family:"Archivo",sans-serif;font-size:12.5px;letter-spacing:0.07em;color:var(--mist); } #a-propos .presentation_texte{ max-width: 750px; } /* --------------- HERITAGE (c2) --------------- */ #a-propos .heritage_grille{display:grid;grid-template-columns:1fr 480px;gap:110px;align-items:start} #a-propos #heritage .titre_2{margin-bottom:20px} #a-propos .heritage_archives{display:grid;gap:34px} #a-propos .archive{position: relative; top: 100px; right: 50px;} #a-propos .archive:after{ content: ''; position: absolute; right: -50px; top: -130px; width: 355px; height: 240px; background-image: url(images/steffens/apropos-camion.jpg); background-repeat: no-repeat; background-position: right top; background-size: contain; border: 8px solid var(--paper); } #a-propos .archive img{width:100%;height:auto} #a-propos .archive figcaption{ font-family:"Archivo",sans-serif;font-size:12.5px;color:var(--mist);margin-top:13px; } #a-propos .archive_haute img{height:560px;object-fit:cover;object-position:center top} #a-propos .heritage_suite{margin-top:40px} /* --------------- REPERES (c3) --------------- */ #a-propos #reperes{padding:0 0 118px} #a-propos .liste_reperes{ border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft); display:grid;grid-template-columns:repeat(4,1fr); } #a-propos .repere{padding:28px 21px 30px;border-right:1px solid var(--line-soft)} #a-propos .repere:last-child{border-right:0} #a-propos .repere:first-child{padding-left:0} #a-propos .repere_nombre{ font-family:"Archivo",sans-serif;font-weight:500;font-size:30px; letter-spacing:-0.03em;line-height:1; } #a-propos .repere_libelle{font-size:16px;color:var(--slate);margin-top:10px;line-height:1.5} /* --------------- SAVOIR FAIRE (c3) --------------- */ #a-propos #savoir_faire{background:var(--limewash)} #a-propos .savoir_faire_grille{align-items:start;margin-top:20px} #a-propos .prestations{display:grid;grid-template-columns:1fr 1fr;gap:38px 44px} #a-propos .prestation{border-top:1px solid var(--line);padding-top:20px} #a-propos .prestation .titre_3{margin-bottom:12px} #a-propos .prestation .texte{font-size:17px} #a-propos .archive_plan{background:var(--paper);padding:24px} #a-propos .savoir_faire_suite{margin-top:58px;text-align:center} /* --------------- GALERIE (c4) --------------- */ /* trois photos de meme largeur, hauteurs libres, centrees verticalement */ #a-propos .galerie_slider{width:100%;overflow:hidden} #a-propos .galerie_slider .owl-stage-outer{overflow:hidden} #a-propos .galerie_slider .owl-stage{display:flex;align-items:center} #a-propos .galerie_slider .owl-item{flex:0 0 auto} #a-propos .galerie_photo img{width:100%;height:auto} #a-propos .galerie_slider .owl-nav:not(.disabled){display:flex;gap:10px;margin-top:34px} #a-propos .galerie_slider .owl-nav button{ width:48px;height:48px;border:1px solid var(--line);background:none; font-family:"Archivo",sans-serif;font-size:24px;line-height:1; color:var(--black);cursor:pointer; } #a-propos .galerie_slider .owl-nav button:hover{border-color:var(--orange)} #a-propos .galerie_slider .owl-nav button.disabled{ color:var(--mist);border-color:var(--line-soft);cursor:default; } #a-propos .galerie_slider .owl-nav button.disabled:hover{border-color:var(--line-soft)} /* --------------- PARTENAIRES (c5) --------------- */ #a-propos #partenaires{ padding-top: 0; } #a-propos .partenaires_grille{display:grid;grid-template-columns:1fr 1fr;gap:110px;align-items:start} #a-propos #partenaires .titre_2{font-size:34px;margin-bottom:20px} /* ===================================================================== 5c. PAGE NOS PROJETS La meme page sert la liste filtrable (#projets) et la fiche d'un bien (#bien). Les cartes elles-memes sont des composants partages. ===================================================================== */ /* --------------- LISTE (c1) --------------- */ #nos-projets #projets{padding:65px 0 118px} #nos-projets .projets_entete{margin-bottom:46px} #nos-projets h1{font-size:52px;line-height:1.1} #nos-projets .projets_entete .chapeau{margin-top:22px} #nos-projets .liste_offres{row-gap:56px} /* --------------- FICHE D'UN BIEN (c1) --------------- */ #nos-projets #bien{padding:70px 0 118px} #nos-projets .bien_retour{margin-bottom:46px} #nos-projets .bien_entete{ display:flex;justify-content:space-between;align-items:flex-end;gap:60px;margin-bottom:44px; } #nos-projets .bien_statut{ font-family:"Archivo",sans-serif;font-size:13px;letter-spacing:0.06em; color:var(--black);border:1px solid var(--line);padding:10px 20px;white-space:nowrap; } #nos-projets .bien_galerie{width:100%;overflow:hidden;margin-bottom:76px} #nos-projets .bien_galerie .owl-stage-outer{overflow:hidden} #nos-projets .bien_photo img{width:100%;height:620px;object-fit:cover} #nos-projets .bien_galerie .owl-nav:not(.disabled){display:flex;gap:10px;margin-top:22px} #nos-projets .bien_galerie .owl-nav button{ width:48px;height:48px;border:1px solid var(--line);background:none; font-family:"Archivo",sans-serif;font-size:24px;line-height:1; color:var(--black);cursor:pointer; } #nos-projets .bien_galerie .owl-nav button:hover{border-color:var(--orange)} #nos-projets .bien_grille{display:grid;grid-template-columns:1fr 400px;gap:96px;align-items:start} #nos-projets .bien_description{font-size:18px;line-height:1.72;color:var(--slate);margin-bottom: 20px;} #nos-projets .bien_description p + p{margin-top:20px} #nos-projets .bien_sous_titre{font-size:26px;margin:10px 0 22px} #nos-projets .bien_caracteristiques{display:grid;grid-template-columns:1fr 1fr;gap:0 44px; margin-bottom: 20px;} #nos-projets .colonne_unique{grid-template-columns:1fr} #nos-projets .caracteristique{ display:flex;justify-content:space-between;gap:24px; padding:14px 0;border-bottom:1px solid var(--line-soft); } #nos-projets .caracteristique dt{font-size:16px;color:var(--slate)} #nos-projets .caracteristique dd{ font-family:"Archivo",sans-serif;font-weight:500;font-size:15.5px; color:var(--black);text-align:right; } #nos-projets .bien_equipements{ display:grid;grid-template-columns:1fr 1fr;gap:12px 44px;font-size:17px;color:var(--slate); } #nos-projets .bien_equipements li{padding-left:15px;position:relative} #nos-projets .bien_equipements li:before{ content:'';position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--orange); } #nos-projets .bien_video{margin-top:44px} /* colonne de droite */ #nos-projets .bien_resume{background:var(--limewash);padding:36px 36px 40px} #nos-projets .bien_prix_ligne{ display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:10px; } #nos-projets .bien_prix_libelle{ font-family:"Archivo",sans-serif;font-size:12.5px;letter-spacing:0.06em;color:var(--orange-deep); } /* un prix masque tient sur une ligne : pas de libelle a gauche, donc pas de trou au milieu de la colonne */ #nos-projets .bien_prix_demande{ font-family:"Archivo",sans-serif;font-weight:500;font-size:20px; letter-spacing:-0.02em;color:var(--black); } #nos-projets .bien_prix_secondaire{ font-family:"Archivo",sans-serif;font-weight:500;font-size:18px;letter-spacing:-0.02em; } #nos-projets .bien_prix_note{font-size:14.5px;line-height:1.55;color:var(--slate);margin-top:14px} #nos-projets .bien_chiffres{margin-top:26px} #nos-projets .bien_resume .caracteristique{border-bottom-color:var(--line)} #nos-projets .bien_peb{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)} #nos-projets .bien_peb_classe{margin-bottom:8px} #nos-projets .bien_resume .btn_principal{margin-top:34px;width:100%;text-align:center} #nos-projets .bien_reference{ font-family:"Archivo",sans-serif;font-size:12.5px;letter-spacing:0.05em; color:var(--mist);margin-top:20px;text-align:center; } /* --------------- SUGGESTIONS (c2 de la fiche) --------------- */ #nos-projets #suggestions{padding:0 0 118px} #nos-projets #suggestions .entete_section{margin-bottom:46px} #nos-projets #suggestions .lien_suite{justify-content:center} /* ===================================================================== 5d. PAGE REALISATIONS ===================================================================== */ /* --------------- INTRO (c1) --------------- */ #realisations #intro{padding:65px 0 0} #realisations h1{font-size:52px;line-height:1.1} #realisations .intro_inner .chapeau{margin-top:26px;max-width:40em} /* --------------- CHANTIERS (c2) --------------- */ #realisations #chantiers{padding:62px 0 118px} #realisations .liste_chantiers{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 36px} #realisations .chantier_lien{display:block;width:100%;padding:0;cursor:pointer;text-align:left} #realisations .chantier_visuel{display:block;height:300px;overflow:hidden;background:var(--limewash)} #realisations .chantier_visuel img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} #realisations .chantier_lien:hover .chantier_visuel img{transform:scale(1.04)} #realisations .chantier_titre{ font-family:"Archivo",sans-serif;font-weight:400;font-size:15.5px;line-height:1.45; color:var(--black);margin-top:14px; } /* --------------- POP-UP D'UNE PHOTO --------------- */ .modale_photo{ position:fixed;top:50%;left:50%;transform:translate(-50%,-50%); width:1100px;max-width:calc(100% - 80px);background:var(--paper); display:none;z-index:61;grid-template-columns:1fr 340px; } .modale_photo.ouvert{display:grid} .modale_photo_visuel{background:var(--limewash);overflow:hidden} .modale_photo_visuel img{width:100%;height:620px;object-fit:cover} .modale_photo_infos{padding:48px 44px;display:flex;flex-direction:column;justify-content:center} .modale_photo_filtre{ font-family:"Archivo",sans-serif;font-size:12.5px;letter-spacing:0.07em; color:var(--orange-deep);margin-bottom:14px; } .modale_photo_filtre:empty{display:none} .modale_photo .titre_3{font-size:24px;line-height:1.24} .modale_photo_relance{ font-size:17px;line-height:1.6;color:var(--slate);margin-top:22px; padding-top:22px;border-top:1px solid var(--line); } .modale_photo .btn_principal{margin-top:28px;text-align:center} .modale_photo .modale_fermer{ position:absolute;top:18px;right:22px;font-family:"Archivo",sans-serif; font-size:26px;color:var(--paper);cursor:pointer;line-height:1;z-index:2; } /* --------------- 6. PIED DE PAGE --------------- */ #pied_de_page{ background:var(--paper);color:var(--slate);padding:84px 0 40px;font-size:16px;line-height:1.7; border-top:1px solid var(--line-soft); } .pied_colonnes{display:grid;grid-template-columns:2fr 1fr 1fr;gap:56px} .pied_titre_col{ font-family:"Archivo",sans-serif;font-weight:500;font-size:14px; color:var(--black);margin-bottom:16px;letter-spacing:0.01em; } .pied_logo{width:170px;margin-bottom:22px} .pied_logo img{width:100%;height:auto;display:block} .pied_baseline{color:var(--slate);max-width:21em} .pied_bas{ margin-top:66px;padding-top:24px;border-top:1px solid var(--line-soft); display:flex;justify-content:space-between; font-family:"Archivo",sans-serif;font-size:12.5px;color:var(--mist); } .pied_agence img{height:14px;width:auto;opacity:0.45;margin-top:2px;filter:invert(1)} /* logo agence livre en blanc */ /* --------------- 7. MODALE DE DEMANDE D'OFFRE --------------- */ .voile_modale{position:fixed;inset:0;background:rgba(13,13,13,.66);display:none;z-index:60} .voile_modale.ouvert{display:block} .modale_demande{ position:fixed;top:50%;left:50%;transform:translate(-50%,-50%); width:620px;background:var(--paper);padding:52px 56px 48px;z-index:61;display:none; } .modale_demande.ouvert{display:block} .modale_fermer{ position:absolute;top:22px;right:26px;font-family:"Archivo",sans-serif; font-size:22px;color:var(--mist);cursor:pointer;line-height:1; } .modale_demande .titre_2{font-size:32px;margin-bottom:10px} .modale_intro{font-size:17px;color:var(--slate);margin-bottom:30px;max-width:30em} .champ{border-bottom:1px solid var(--line);padding:15px 0} .champ label{ display:block;font-family:"Archivo",sans-serif;font-size:12.5px; letter-spacing:0.05em;color:var(--mist);margin-bottom:5px; } .champ input,.champ textarea{ width:100%;border:0;background:transparent;font-family:"Newsreader",serif; font-size:17px;color:var(--black);outline:none;resize:none; } .champ_paire{display:grid;grid-template-columns:1fr 1fr;gap:32px;border-bottom:0;padding:0} .champ_demi{border-bottom:1px solid var(--line);padding:15px 0} .modale_demande .btn_principal{margin-top:28px;width:100%;text-align:center} .btn_principal[disabled]{background:var(--line);color:var(--mist);cursor:not-allowed} .mention_construction{ font-family:"Archivo",sans-serif;font-size:12.5px;letter-spacing:0.05em; color:var(--mist);text-align:center;margin-top:16px; } /* ===================================================================== 8. AVERTISSEMENT TEMPORAIRE PETITS ECRANS A SUPPRIMER une fois les feuilles medium, small et tiny produites. Seule regle de media query du master, qui reste volontairement a largeur fixe. ===================================================================== */ #bandeau_construction{display:none} @media screen and (max-width:1500px){ /* on neutralise la largeur fixe pour supprimer le defilement horizontal */ html{min-width:0} body{min-width:0;overflow:hidden} /* le site entier disparait, seul le message reste */ body > *{display:none} #bandeau_construction{ display:flex;position:fixed;top:0;right:0;bottom:0;left:0;z-index:100; align-items:center;justify-content:center; background:var(--paper);color:var(--black); font-family:"Archivo",sans-serif;font-weight:400; font-size:19px;line-height:1.5;letter-spacing:-0.01em; text-align:center;padding:40px 32px; } } /* ***** Mentions légales ***** */ #legal{ text-align:center; margin-bottom:100px; padding-bottom:30px; } #legal .main_width{ padding-top:85px; padding-bottom:30px; } #legal h1{ text-align:center; background-position:bottom center; margin-bottom:73px; } #legal h2{ background-position: 0px 7px; position: relative; bottom: 0px; margin-top: 14px; margin-bottom: 14px; font-size:28px; line-height:30px; background-position: bottom left; padding-bottom: 7px; } #legal h3{ line-height:23px!important; padding-bottom: 6px!important; } #legal p{ margin-bottom:5px; } #legal p span{ display:inline-block; vertical-align:top; width:166px; text-decoration:underline; } #legal .c0{ width:600px; text-align:left; display:inline-block; vertical-align:top; border:1px solid #c0c0c0; text-align:left; padding:1%; margin-bottom:30px; background-color:white; border-radius:13px; } #legal .c1{ display:inline-block; vertical-align:top; width:36%; margin-right:6%; padding:1%; border:1px solid #c0c0c0; text-align:left; margin-bottom:30px; min-height:262px; background-color:white; border-radius:13px; } #legal .c1.last{ margin-right:0px; } #legal .c1 p{ margin-bottom:8px; font-size:13px; line-height:22px; } #legal .c2{ width:36%; padding:1%; margin-right:4%; text-align:left; display:inline-block; vertical-align:top; border:1px solid #c0c0c0; margin-bottom:30px; height:600px; overflow:auto; padding-bottom:30px; background-color:white; border-radius:13px; } #legal .c2 h3{ } #legal .c2 h4{ } #legal .c2 p{ margin-bottom:8px; font-size:13px; line-height:22px; } #legal .c2 ul li{ margin-bottom:5px; font-size:13px; line-height:22px; padding-left:15px; list-style-type:none; } #legal .c2 ul ul li{ padding-left:30px; } #legal .c2.last{ margin-right:0px; } /* ***** 404 ***** */ #e404{ text-align:center; margin-bottom:100px; padding-bottom:30px; } #e404 .main_width{ padding-top:85px; padding-bottom:30px; } #e404 h1{ text-align:center; background-position:bottom center; margin-bottom:73px; }