/* ==========================================================================
   structurys.com — feuille de style unique.
   Ecrite a la main, aucune compilation. Les valeurs (largeurs, marges,
   tailles) ont ete relevees au pixel sur le site WordPress du 22/08/2026.
   ========================================================================== */

/* --- Polices, servies depuis le site (aucun appel exterieur) ------------- */
@font-face{font-family:Inter;font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/inter-latin-ext.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:Inter;font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/inter-latin.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:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/plus-jakarta-sans-latin-ext.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:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/plus-jakarta-sans-latin.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}

/* --- Couleurs et mesures ------------------------------------------------- */
:root{
  --teal:#107290;        /* titres, menu mobile, bouton haut de page */
  --ink:#1e293b;         /* texte du bouton */
  --text:#67768e;        /* texte courant */
  --link:#060097;        /* liens dans le texte */
  --accent:#ffcd57;      /* bouton Contactez-nous */
  --footer-bg:#eeeeee;
  --footer-text:#333333;
  --header-h:118px;
  --titre:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --texte:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font:400 18px/1.65 var(--texte);
  color:var(--text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
main{flex:1 0 auto}

h1,h2,h3{font-family:var(--titre);font-weight:600;color:var(--teal);margin:0}
h1{font-size:64px;line-height:1.4}
h2{font-size:48px;line-height:1.3}
h3{font-size:24px;line-height:1.3}
p{margin:0}
img{max-width:100%;height:auto}

a{color:var(--link)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* Lien d'evitement, comme « Aller au contenu » aujourd'hui */
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:var(--link);padding:12px 20px;z-index:200}
.skip-link:focus{left:0}

.container{max-width:1240px;margin:0 auto;padding:0 20px}

/* --- En-tete ------------------------------------------------------------- */
.site-header{
  height:var(--header-h);display:flex;align-items:center;
  background:linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 78%);
}
.site-header .container{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
/* Sur l'accueil l'en-tete est transparent et se superpose a la banniere */
.home .site-header{position:absolute;top:0;left:0;right:0;background:none;z-index:20}

.logo{display:block;line-height:0}
.logo img{width:250px;height:auto;display:block}
.home .logo img{width:275px}

.nav{display:flex;align-items:center;gap:40px}
.nav ul{display:flex;align-items:center;gap:40px;list-style:none;margin:0;padding:0}
.nav a{color:#fff;text-decoration:none}
.nav a:hover{opacity:.8}
.nav .linkedin{display:flex;color:#fff}
.nav .linkedin svg{width:25px;height:25px;fill:currentColor;display:block}

.menu-toggle{display:none;background:none;border:0;color:#fff;padding:8px;cursor:pointer}
.menu-toggle svg{width:26px;height:26px;fill:currentColor;display:block}

/* --- Banniere d'accueil -------------------------------------------------- */
.hero{position:relative;min-height:694px;display:flex;align-items:center;overflow:hidden}
.hero__bg,.hero__tint{position:absolute;inset:0}
.hero__bg{
  background:url(images/banniere-1920x1080.jpg) 50% 50%/cover no-repeat fixed;
  filter:grayscale(1) brightness(.5);   /* le duotone « dark-grayscale » de WordPress */
}
.hero__tint{background:linear-gradient(276deg,rgb(16,114,144) 0%,rgb(70,68,68) 100%);opacity:.5}
.hero .container{position:relative;width:100%;max-width:none;padding:0 18px;text-align:center;color:#fff}
.hero h1{color:#fff;font-size:42px;margin-bottom:24px}
.hero p{font-size:20px;font-weight:600;margin-bottom:32px}
.hero .container>*:last-child{margin-bottom:0}

/* --- Bouton -------------------------------------------------------------- */
.btn{
  display:inline-block;background:var(--accent);color:var(--ink);
  font-family:inherit;font-size:20px;font-weight:600;line-height:1;
  padding:10px 21px;border-radius:50px;text-decoration:none;
  box-shadow:0 1px 2px 0 rgba(0,0,0,.05);
}
.btn:hover,.btn:focus{background:#ffc133;color:var(--ink)}

/* --- Sections ------------------------------------------------------------ */
.section{padding:144px 0}
.section--pourquoi{padding-bottom:168px}
.section--materiaux{padding:36px 0 0}
.section--prestations{padding:144px 0 0}
.section--experiences{padding:143px 0 144px}
.section--contact{
  padding:104px 0;
  background:linear-gradient(35deg,rgb(16,115,145) 0%,rgb(254,254,254) 32%,rgb(255,255,255) 100%);
}

.cols{display:flex}
.cols--4{gap:40px}
.cols--3{gap:24px}
.cols--4-large{gap:80px}
.cols>*{flex:1 1 0;min-width:0}

h2+.cols{margin-top:50px}
.section--pourquoi h2+.cols{margin-top:60px}

.carte h3{margin-top:16px}
.carte p{margin-top:20px}
.carte--pourquoi h3{font-size:20px;margin-top:24px}
.carte--pourquoi p{margin-top:24px}

/* Icones : hauteur relevee sur le site actuel */
.icone-100{height:100px;width:auto;display:block}
.icone-100--centre{margin:0 auto}
.icone-200{width:200px;height:auto;display:block}

/* Le bloc « Details » repliable, sans JavaScript */
details{margin-top:29px}
details summary{cursor:pointer;color:var(--text)}
details p{margin-top:24px}
details p+p{margin-top:29px}

.texte p+p{margin-top:29px}

/* --- Carrousel des experiences ------------------------------------------ */
.carrousel{position:relative;margin-top:20px}
.carrousel__fenetre{overflow:hidden}
.carrousel__piste{display:flex;gap:10px;transition:transform .6s linear;will-change:transform}
.carrousel__piste>li{list-style:none;flex:0 0 calc((100% - 10px)/2)}
.carrousel__piste img{width:100%;aspect-ratio:1200/621;object-fit:cover;display:block}
.carrousel__fleche{
  position:absolute;top:calc(50% - 20px);width:40px;height:40px;border-radius:50%;
  background:#fff;border:1px solid #e2e2e2;color:#333;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.carrousel__fleche svg{width:16px;height:16px;fill:currentColor}
.carrousel__fleche--prec{left:-50px}
.carrousel__fleche--suiv{right:-50px}
.carrousel__points{display:flex;justify-content:center;gap:10px;margin:67px 0 16px;padding:0;list-style:none}
.carrousel__points button{
  width:20px;height:20px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:#016fb9;opacity:.5;
}
.carrousel__points button[aria-current="true"]{background:#07383c;opacity:1}

/* --- Contact ------------------------------------------------------------- */
/* La colonne du bloc Contact fait 520 px sur le site actuel, pas 1200. */
.contact__inner{max-width:520px;margin:0 auto}
.contact__inner p{margin-top:24px;font-size:20px;font-weight:600}
.contact__inner ul{margin:33px 0 49px;padding-left:20px;font-size:20px}
.contact__cta{margin-top:50px;text-align:center}
.contact__logo{display:block;width:420px;max-width:100%;height:auto;margin:24px auto 0}

/* --- Pages interieures --------------------------------------------------- */
.page{padding:0 0 60px}
/* Le titre des pages interieures : un h1 (les pages n'en avaient pas),
   a la taille exacte du h2 d'aujourd'hui — rien ne bouge a l'ecran. */
.page h1{font-size:36px;line-height:1.3;margin-bottom:21px}
.page p+p{margin-top:29px}
.page__pdf{width:100%;height:600px;border:0;display:block;margin-bottom:15px}
.page__fichier{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* --- Pied de page -------------------------------------------------------- */
.site-footer{
  flex-shrink:0;background:var(--footer-bg);color:var(--footer-text);
  text-align:center;padding:20px 0 70px;
}
.site-footer a{color:var(--footer-text);text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* --- Retour en haut ------------------------------------------------------ */
.haut{
  position:fixed;right:20px;bottom:30px;width:31.5px;height:31.5px;
  background:var(--teal);color:#fff;border:0;border-radius:2px;cursor:pointer;
  display:none;align-items:center;justify-content:center;padding:0;z-index:99;
}
.haut.visible{display:flex}
.haut svg{width:15px;height:15px;fill:currentColor}

/* ==========================================================================
   Tablette et telephone — memes bascules que le site actuel (921 / 781 px)
   ========================================================================== */
@media (max-width:1339px){
  .carrousel{padding:0 50px}
  .carrousel__fleche--prec{left:0}
  .carrousel__fleche--suiv{right:0}
}

@media (max-width:921px){
  /* Astra reduit la base a 102,6 % ; les tailles « preset » de WordPress
     (banniere, bloc contact, « pourquoi nous ») ne bougent pas, elles. */
  body{font-size:16.4px}
  h2{font-size:25px}
  h3{font-size:20px}
  .container{padding:0 33px}

  .home .logo img,.logo img{width:120px}
  .nav .linkedin{display:none}          /* masque dans la barre, comme aujourd'hui */

  .nav ul{
    display:none;position:absolute;left:0;right:0;top:var(--header-h);
    flex-direction:column;align-items:stretch;gap:0;background:var(--teal);
    padding:0;z-index:30;
  }
  .nav ul.ouvert{display:flex}
  .nav ul li{border-top:1px solid rgba(255,255,255,.15)}
  .nav ul a{display:block;padding:14px 33px}
  .menu-toggle{display:block}
}

@media (max-width:781px){
  /* WordPress empile les colonnes sous 782 px : on fait pareil. */
  .cols{flex-wrap:wrap}
  .cols>*{flex:1 1 100%}
  .cols--4,.cols--3,.cols--4-large{gap:64px}
  .carrousel__piste>li{flex:0 0 100%}
  .carrousel__piste{gap:0}
  .carrousel__fleche{display:none}   /* comme aujourd'hui : masquees sur telephone */
  .carrousel{padding:0}
  .hero__bg{background-attachment:scroll}  /* le « fixed » ne marche pas sur iOS */
  .page__pdf{height:70vh}
}