/*
Theme Name:   Breizh Web Studio BaseTheme
Theme URI:    https://www.breizhwebstudio.fr 
Author:       Breizh Web Studio
Author URI:   https://www.breizhwebstudio.fr
Description:  Thème de base de l'agence Breizh Web Studio
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  breizhwebstudio-base
*/


/* ==========================================================================
Variables
========================================================================== */

:root {
    --color-background: #ffffff;
    --color-font: #333333;
}

/* ==========================================================================
Polices d'écritures
========================================================================== */
@font-face {
    font-family: 'bradley_hand_itcregular';
    src:    url('fonts/bradhitc-webfont.woff2') format('woff2'),
            url('fonts/bradhitc-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'eras_light_itcregular';
    src:    url('fonts/eraslght-webfont.woff2') format('woff2'),
            url('fonts/eraslght-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'impactregular';
    src:    url('fonts/impact-webfont.woff2') format('woff2'),
            url('fonts/impact-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'arialblack';
    src:    url('fonts/ariblk-webfont.woff2') format('woff2'),
            url('fonts/ariblk-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'eras_bold_itcregular';
    src:    url('fonts/erasbd-webfont.woff2') format('woff2'),
            url('fonts/erasbd-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'amatic_scregular';
    src:    url('fonts/amatic-sc.regular-webfont.woff2') format('woff2'),
            url('fonts/amatic-sc.regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ==========================================================================
Theme Styles - communs
========================================================================== */

body {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: stretch;
    margin: 0;
    padding: 0;
    background-color: var(--color-background);
    color: var(--color-font);
    font-family: sans-serif;
    font-size:18px;
    overflow-x: hidden;
    box-sizing: border-box;
}

a, a:link, a:visited { color: var(--color-font); text-decoration:none; }
a:hover { color: var(--color-font); }

#content { overflow: clip; }
h2.sstitre { font-size: clamp(1.6rem, 1.130rem + 1.761vw, 2.5rem); width:78%; margin:40px 7% 40px 15%; color:#825221; font-style:italic; font-weight:bold; font-family:'eras_light_itcregular'; border-bottom:1px solid #825221; position:relative; }
.bloctextecontainer { display:flex; width:92%; margin:20px auto 50px auto; }
.bloctextecontainer .bloctextetxt { box-sizing:border-box; font-size: clamp(1rem, 0.896rem + 0.391vw, 1.2rem); text-align:justify; width:75%; padding-left:40px; }
.bloctextecontainer.inverse .bloctextetxt { padding-right:40px; }
.bloctextecontainer .bloctexteimg { width:25%; height:auto; text-align:right; min-width:370px; }
.bloctextecontainer.inverse .bloctexteimg { text-align:left; }
.bloctextecontainer .bloctexteimg img { width:auto; height:auto; max-height:400px; }
.parallax { position: relative; width: 100%; min-height: clamp(45vh, 55vh, 70vh); overflow: hidden; margin-bottom:120px; }
.parallax__img { position: absolute; inset:0; top: 50%; left: 50%; width: 100%; height: 250%; object-fit: cover; transform: translate(-50%, -50%) translateY(var(--parallax-y, 0px)); will-change: transform; }
.parallax__content { position: relative; z-index: 1; }
.embedded-post p:first-child { margin-top:0; }

/* Accessibilité : si l’utilisateur préfère moins d’animations */
@media (prefers-reduced-motion: reduce) {
    .parallax__img { transform: translate(-50%, -50%) translateY(0) !important; }
}

/* ==========================================================================
Theme Styles - Header
========================================================================== */

#masthead,
.site-header-inner { width:100%; height:88px; display:flex; }
.site-branding { padding-left:50px; margin-top:10px; }
.site-branding img { position:relative; z-index:50; }
#site-navigation { width:calc(100% - 193px); text-align:right; padding-right:10px; box-sizing: border-box; }
#site-navigation ul { list-style: none; height:100%; display: flex; justify-content: flex-end; align-content: center; }
#site-navigation ul li { padding:2px 5px; margin-right:40px; max-height:30px; line-height:30px; font-family: 'eras_light_itcregular'; font-size: clamp(0.8rem, 0.449rem + 0.616vw, 1.1rem); text-transform:uppercase; margin-top: 11px; }
#site-navigation ul li a span{ position: relative; padding-bottom: .4rem; }
#site-navigation ul li a span:after { content: ''; position: absolute; left: 0; bottom: 0; transform: translateX(-50%) scaleX(0); width: 100%; height: 2px; background-color: #FF6600; transition: transform 250ms; }
#site-navigation ul li a:hover span:after { transform: translateX(0%) scaleX(1); }
#mobile-menu-toggle { display:none; }
#mobile-menu-toggle { background:none; border:none; font-size:36px; margin-left: 25px; cursor: pointer; }
.mobile-menu { position: fixed; top: 0; left: 0; height: 100dvh; width: min(86vw, 420px); overflow: auto; background: #fff; padding: 1rem; transform: translate3d(-100%,0,0); transition: transform .28s var(--ease-smooth); will-change: transform; pointer-events: none; z-index: 1590; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.mobile-menu.open { transform: translate3d(0,0,0); pointer-events: auto; }
#mobile-menu-close { font-size: 2rem; line-height: 1; background: none; border: 0; }
nav#mobile-menu { display:block !important; }
nav#mobile-menu.mobile-menu { transform: translate3d(-100%,0,0) !important; transition: transform .28s var(--ease-smooth) !important; }
nav#mobile-menu.mobile-menu.open { transform: translate3d(0,0,0) !important; }
.mobile-menu[hidden]{ display:none !important; }
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:fixed; left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:#000; color:#fff; z-index:1100; border-radius:.5rem; }
.titre-mobile { display:none; }

/* ==========================================================================
Theme Styles - Section Hero
========================================================================== */

#hero { height:100vh; width:100%; position:relative; display: block; }
.img-accueil { margin-top:-130px; width:100%; height:91%; max-height:91%; overflow:hidden; vertical-align:bottom; display: flex; align-items: flex-end; background-image: url(../../uploads/2025/09/img-accueil.jpg); background-repeat: no-repeat; background-position: bottom; background-size: cover; }
.txt-presentation-before { position:absolute; bottom: 8%; left:calc(50% - 250px); color:#fff; font-size: clamp(1.4rem, 0.878rem + 1.957vw, 2.4rem); display:flex; font-family: 'eras_bold_itcregular'; align-items: flex-end; text-transform:uppercase; }
.txt-presentation-after { position:absolute; top:91%; left:calc(50% - 100px); color:#000; font-size: clamp(1.4rem, 0.878rem + 1.957vw, 2.4rem); display:flex; font-family: 'eras_bold_itcregular'; align-items: flex-start; text-transform:uppercase; }
.big-txt-presentation { font-size: clamp(2rem, 0.174rem + 6.848vw, 5.5rem); }
.txt-presentation-before-align { display:flex; align-items: flex-end; padding-bottom: 14px; margin-left: 10px; }
.txt-presentation-after .big-txt-presentation { margin:-12px 0 0 10px; }
.zone-txt-accueil { position:absolute; top: 215px; left:40px; padding:20px; background-color:rgba(255,255,255,0.4); }
.zone-txt-accueil .txt-accueil { font-family: 'arialblack'; font-size: clamp(1rem, 0.687rem + 1.174vw, 1.6rem); line-height:2.2rem; }
.zone-txt-accueil .txt-accueil span { font-size: clamp(1.4rem, 1.035rem + 1.370vw, 2.1rem);  }
#hero h2.sstitre { margin:120px 7% 40px 15%; }
.cta-a-propos { width:60%; margin:100px auto; display:flex; justify-content: space-evenly; }
.btncta-a-propos { width:20%; height:105px; position:relative; text-align:center; background-color: #825221; box-sizing:border-box; padding:5px; scale:1 ; transition:scale .35s ease, background-color .5s ease; will-change: transform; }
.txtbtncta { position:absolute; width:105px; text-align:center; font-size:0.7rem; text-transform:uppercase; height:20px; transform:rotate(-90deg); top:42px; left:-59px; }
.btncta-a-propos:hover { background-color: #ab6c2c; scale:1.1; cursor: pointer; }

/* ==========================================================================
Theme Styles - Section Terrassement
========================================================================== */

#titreterrassement:before { content:""; width:103px; height:82px; position:absolute; left:-110px; top:-30px; background-image: url(../../uploads/2025/09/icone-terrassement-marron.png); background-repeat: no-repeat; }

/* ==========================================================================
Theme Styles - Section Enrochement
========================================================================== */

#titreenrochement:before { content:""; width:85px; height:83px; position:absolute; left:-95px; top:-30px; background-image: url(../../uploads/2025/09/icone-enrochement-marron.png); background-repeat: no-repeat; }

/* ==========================================================================
Theme Styles - Section Assainissement
========================================================================== */

#titreassainissement:before { content:""; width:84px; height:80px; position:absolute; left:-94px; top:-27px; background-image: url(../../uploads/2025/09/icone-assainissement-marron.png); background-repeat: no-repeat; }

/* ==========================================================================
Theme Styles - Section Galerie d'images
========================================================================== */

#titrerealisations:before { content:""; width:94px; height:78px; position:absolute; left:-104px; top:-25px; background-image: url(../../uploads/2025/09/icone-realisations-marron.png); background-repeat: no-repeat; }
.galerie-realisations { width:94%; margin:0 auto; }
.site-gallery{ display:flex; flex-wrap:wrap; gap:16px }
.site-gallery__item{ --row-h: 190px; --ratio-clamped: clamp(0.6, var(--ratio, 1), 2.2); height: var(--row-h); width: calc(var(--ratio-clamped) * var(--row-h)); overflow:hidden; border-radius:6px; background:#eee; display:block; }
.site-gallery__thumb{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.glightbox-clean .gdesc-inner .lb-caption { font-weight:600; margin-bottom:.35rem; }
.glightbox-clean .gdesc-inner .lb-description p { margin:.35rem 0; }
.site-gallery__item:hover .site-gallery__thumb{ transform:scale(1.04) }
@media (max-width:900px){ .site-gallery__item{ height:160px } }
@media (max-width:600px){ .site-gallery__item{ height:140px } }

/* ==========================================================================
Theme Styles - Section Contact
========================================================================== */

#contact { padding-top: 1px; width:100%; min-height:calc(100vh + 600px); background: linear-gradient(to bottom, #d9995b 0%,#fbecdd 100%); position:relative; margin-top:350px; }
.beforesectioncontact { position:absolute; width:100%; height:200px; top:-200px; left:0px; background-image: url(../../uploads/2025/09/fond-pelle-transition2.jpg), url(../../uploads/2025/09/fond-pelle-transition3.jpg); background-position: left bottom, right bottom; background-repeat: no-repeat, no-repeat; }
.bloctxtcontact { width:80%; margin:50px 15% 50px 5%; color:#fff; }
.bloctxtcontact a, .bloctxtcontact a:link, .bloctxtcontact a:visited { color:#fff; font-weight:bold; transition:color 0.3s ease; }
.bloctxtcontact a:hover { text-decoration:underline; color:#825221; }
#titrecontact { margin-top:50px; border-color:#fff; color:#fff; }
#titrecontact:before { content:""; width:103px; height:79px; position:absolute; left:-102px; top:-8px; background-image: url(../../uploads/2025/09/icone-contact.png); background-repeat: no-repeat; }
.formcontact { width:70%; background-color: #000; height:auto; padding:20px; margin:0 auto; box-sizing:border-box; color:#fff;}
.gs-contact{width:100%}
.gs-grid{display:flex; gap:16px; flex-direction: column; }
.gs-field label{display:block;margin-bottom:6px;}
.gs-field input,.gs-field select,.gs-field textarea{ width:100%;padding:10px;border:1px solid #999;border-radius:6px;background:transparent;color:#fff;box-sizing: border-box; }
.gs-submit{padding:12px 20px;border-radius:8px;border:0;cursor:pointer}
.gs-alert{margin-top:8px;font-weight:600}
.gs-alert.success{color:#36c06a}
.gs-alert.error{color:#ff6b6b}
.formrow { display:flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; align-items: flex-start; }
.taillegrid100 { width:100%; }
.taillegrid50 { width:49%; min-width:320px; }
.taillegrid33 { width:32%; min-width:150px; }
.taillegrid25 { width:24%; min-width:150px; }
.gs-consent input, .gs-consent span { display:inline-block; }
.gs-consent input { width:25px; }

/* ==========================================================================
Theme Styles - Section Footer
========================================================================== */

#colophon { position:relative; height:500px; max-height:500px; width:100%; margin-top:-500px; background-color: transparent; background-image:url(../../uploads/2025/09/corsica.png); background-position: 63% 5%; background-repeat: no-repeat; }
.footernav { position:absolute; height:350px; width:55%; top:150px; left:45%; background-color:#e3bc78; clip-path: polygon(100% 0, 0% 100%, 100% 100%); z-index:15; }
.footerinfos { position:absolute; height:500px; width:75%; top:0; left:0; background-color:#d69554; clip-path: polygon(0 0, 0% 100%, 100% 100%); z-index:10; }
.site-info { position:relative; min-height:35px; width:100%; line-height:35px; background-color: rgba(0,0,0,0.7); color:#fff; text-align:center; margin-top: 465px; z-index:50; }
#colophon a, #colophon a:link, #colophon a:visited { color:#fff; transition:color 0.3s ease; }
#colophon a:hover { color:#fbd39b; }
.footerinfos .infos { width:35%; height:350px; margin:80px 0 0 30px; }
.footerinfos .infos .img-logo-footer { width:100%; height:auto; }
.footerinfos .infos .img-logo-footer img { width:100%; height:auto; max-width:400px; }
.infos-tel { width:100%; height:40px; line-height:40px; color:#fff; padding-left:10px; box-sizing:border-box; margin:10px 0 10px 80px; position:relative; font-size:2rem; }
.infos-mail { width:100%; height:30px; line-height:30px; color:#fff; padding-left:10px; box-sizing:border-box; margin:10px 0 10px 80px; position:relative; }
.infos-adresse { width:100%; height:30px; line-height:30px; color:#fff; padding-left:10px; box-sizing:border-box; margin:10px 0 10px 80px; position:relative; }
.infos-siret { width:100%; height:30px; line-height:30px; color:#fff; padding-left:10px; box-sizing:border-box; margin:10px 0 10px 80px; position:relative; }
.infos-tel:before { content:""; width:47px; height:50px; position:absolute; left:-57px; top:-10px; background-image: url(../../uploads/2025/09/footer-tel.jpg); background-repeat: no-repeat; }
.infos-mail:before { content:""; width:47px; height:49px; position:absolute; left:-57px; top:-10px; background-image: url(../../uploads/2025/09/footer-mail.jpg); background-repeat: no-repeat; }
.infos-adresse:before { content:""; width:47px; height:49px; position:absolute; left:-57px; top:-10px; background-image: url(../../uploads/2025/09/footer-adresse.jpg); background-repeat: no-repeat; }
.infos-siret:before { content:""; width:47px; height:49px; position:absolute; left:-57px; top:-10px; background-image: url(../../uploads/2025/09/footer-siret.jpg); background-repeat: no-repeat; }
.logobws { width:35px; height:35px; transform:scale(1); transition:transform .5s ease; margin-bottom: -12px; }
.logobws:hover { transform:scale(1.4); }
.footernav ul { width:98%; margin:30px 2% 0 0; text-align:right; list-style:none; }
.footernav ul li { margin-bottom:5px; }
#colophon .footernav ul li a, #colophon .footernav ul li a:link, #colophon .footernav ul li a:visited { color:#333; transition:color 0.3s ease; }
#colophon .footernav ul li a:hover { color:#6c430a; }


.page-id-146 #content,
.page-id-3 #content { width:90%; margin:80px auto 350px auto; max-width:1200px; }