/* ==========================================================================
   PACOR Constructions — feuille de style principale
   Reprend le système du site d'origine (thème Astra + Elementor) :
   Poppins pour les titres, Roboto pour le corps, accent #0170B9.
   ========================================================================== */

:root{
  /* Couleurs globales (équivalent --ast-global-color-*) */
  --global-0:#0170B9;
  --global-0-hover:#303030;
  --texte:#303030;
  --texte-doux:#5f5f5f;
  --gris-clair:#F5F5F5;
  --gris-bord:#E5E5E5;
  --blanc:#FFFFFF;
  --noir:#000000;
  --noir-2:#1c1c1c;
  --jaune:#F5B301;
  --jaune-clair:#FFC933;

  --titre:'Poppins',sans-serif;
  --corps:'Roboto',sans-serif;

  --conteneur:1200px;
  --entete-h:70px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:93.75%;scroll-behavior:smooth}
@media (max-width:921px){html{font-size:85.5%}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  font-family:var(--corps);
  font-size:1rem;
  line-height:1.65em;
  color:var(--texte);
  background:var(--blanc);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--global-0);text-decoration:none}
a:hover{color:var(--global-0-hover)}

h1,h2,h3,h4{font-family:var(--titre);font-weight:400;color:var(--texte);margin:0}
h1{font-size:2.6666rem;line-height:1.4em}
h2{font-size:2.1333rem;line-height:1.3em}
h3{font-size:1.7333rem;line-height:1.3em}
h4{font-size:1.6rem;line-height:1.2em}
@media (max-width:921px){h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}}
p{margin:0 0 1.5em}

.conteneur{max-width:var(--conteneur);margin-inline:auto;padding-inline:20px;width:100%}
.section{padding-block:70px}
@media (max-width:921px){.section{padding-block:50px}}
.section--gris{background:var(--gris-clair)}
.section--noir{background:var(--noir);color:var(--blanc)}
.section--noir h2,.section--noir h3{color:var(--blanc)}

:focus-visible{outline:2px dotted currentColor;outline-offset:3px}
.lien-evitement{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--jaune);color:#000;padding:12px 20px;
}
.lien-evitement:focus{left:8px;top:8px}
.visuellement-cache{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.bouton{
  display:inline-block;
  font-family:inherit;font-size:1rem;line-height:1em;
  padding:14px 28px;border:0;border-radius:3px;
  background:var(--global-0);color:var(--blanc)!important;
  cursor:pointer;text-align:center;
  transition:background-color .2s ease;
}
.bouton:hover{background:var(--global-0-hover)}
.bouton--lg{padding:16px 34px;font-size:1.0666rem}
.bouton--sm{padding:10px 20px;font-size:.9333rem}
.bouton--tel{background:var(--jaune);color:var(--texte)!important;font-weight:500}
.bouton--tel:hover{background:var(--jaune-clair)}
.bouton--vide{background:transparent;border:2px solid var(--blanc);color:var(--blanc)!important}
.bouton--vide:hover{background:var(--blanc);color:var(--texte)!important}

/* Séparateur (équivalent widget Divider) */
.separateur{width:70px;height:4px;background:var(--global-0);margin:18px 0 26px}
.separateur--centre{margin-inline:auto}
.section--noir .separateur,.pied .separateur{background:var(--jaune)}

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.entete{
  position:sticky;top:0;z-index:100;
  background:var(--noir);min-height:var(--entete-h);
  display:flex;align-items:center;
}
.entete__inner{display:flex;align-items:center;gap:24px}
.entete__logo{margin-right:auto;display:block}
.entete__logo img{width:190px}

.menu{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.menu a{
  display:block;color:var(--blanc);
  font-size:.9333rem;padding:12px 16px;line-height:70px;
}
.menu a:hover,.menu a[aria-current="page"]{color:var(--jaune)}

.entete__tel{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--jaune);color:var(--texte)!important;
  font-family:var(--titre);font-weight:500;
  padding:11px 18px;border-radius:3px;white-space:nowrap;
}
.entete__tel:hover{background:var(--jaune-clair)}
.entete__tel svg{width:15px;height:15px;fill:currentColor}

.bascule{display:none;background:none;border:0;color:var(--blanc);padding:8px;cursor:pointer}
.bascule svg{width:26px;height:26px;fill:currentColor}

@media (max-width:1024px){
  .menu{
    position:fixed;top:var(--entete-h);left:0;right:0;
    flex-direction:column;align-items:stretch;
    background:var(--noir);padding:0 20px 16px;
    border-top:1px solid #262626;display:none;
  }
  .menu[data-ouvert="true"]{display:flex}
  .menu a{line-height:1.6;padding:14px 0;border-bottom:1px solid #1e1e1e;text-align:center}
  .bascule{display:block;order:3}
  .entete__tel span{display:none}
  .entete__tel{padding:11px 13px}
  .entete__logo img{width:150px}
}

/* --------------------------------------------------------------------------
   Héro (accueil)
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  background:#0b0b0b url('../img/villa-brique-facade-pacor.webp') center/cover no-repeat;
  color:var(--blanc);text-align:center;padding-block:130px;
}
.hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.62)}
.hero__inner{position:relative;z-index:1;max-width:900px;margin-inline:auto}
.hero__surtitre{
  font-family:var(--titre);font-weight:300;
  font-size:1.6rem;color:var(--blanc);margin:0 0 10px;
}
.hero__titre{
  font-family:var(--titre);font-weight:600;
  font-size:clamp(2.4rem,6vw,3.6rem);line-height:1.15;
  text-transform:uppercase;color:var(--blanc);margin:0 0 22px;
}
.hero p{font-size:1.1333rem;color:#e6e6e6;max-width:640px;margin-inline:auto}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:8px}
@media (max-width:921px){.hero{padding-block:80px}}

/* Bandeau de titre (pages intérieures) */
.banniere{
  position:relative;background:#0b0b0b center/cover no-repeat;
  color:var(--blanc);padding-block:90px 80px;text-align:center;
}
.banniere::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.68)}
.banniere__inner{position:relative;z-index:1}
.banniere h1{color:var(--blanc);margin-bottom:10px}
.banniere p{color:#dcdcdc;max-width:640px;margin-inline:auto}
.fil{font-size:.8666rem;color:#bdbdbd;margin-bottom:14px}
.fil a{color:#bdbdbd}
.fil a:hover{color:var(--jaune)}

/* --------------------------------------------------------------------------
   Boîtes-images (icône à gauche)
   -------------------------------------------------------------------------- */
.boites{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
@media (max-width:1024px){.boites{grid-template-columns:1fr;gap:30px;max-width:620px;margin-inline:auto}}
.boite{display:flex;gap:20px;align-items:flex-start}
.boite__icone{
  flex:none;width:48px;height:48px;
  display:grid;place-items:center;
  background:var(--global-0);border-radius:3px;
}
.boite__icone svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.7}
.boite h3{font-size:1.2rem;font-weight:500;margin-bottom:10px;line-height:1.35}
.boite p{font-size:.9733rem;color:var(--texte-doux);margin:0}

/* --------------------------------------------------------------------------
   Blocs texte + collage d'images
   -------------------------------------------------------------------------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media (max-width:1024px){.duo{grid-template-columns:1fr;gap:40px}}
.duo__texte h3{font-size:1.2rem;color:var(--global-0);margin-bottom:8px}
.duo__texte p{color:var(--texte-doux)}
.duo__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px}

/* Collage : cadre jaune + photo + trame de points, en CSS pur
   (remplace yellow-border.png et dot-pattern.png du site d'origine) */
.collage{position:relative;padding:34px 40px}
.collage__photo{position:relative;z-index:1;width:100%}
.collage::before{               /* cadre jaune */
  content:"";position:absolute;z-index:2;
  top:0;left:8px;width:150px;height:200px;
  border:6px solid var(--jaune);
}
.collage::after{                /* trame de points */
  content:"";position:absolute;z-index:0;
  bottom:0;right:8px;width:170px;height:225px;
  background-image:radial-gradient(var(--global-0) 1.6px, transparent 1.7px);
  background-size:14px 14px;opacity:.55;
}
.collage--inverse::before{left:auto;right:8px}
.collage--inverse::after{right:auto;left:8px}
@media (max-width:520px){
  .collage{padding:20px}
  .collage::before{width:100px;height:130px}
  .collage::after{width:110px;height:140px}
}

/* --------------------------------------------------------------------------
   Galerie de projets
   -------------------------------------------------------------------------- */
.projets__entete{text-align:center;max-width:760px;margin:0 auto 45px}
.projets__entete p{color:var(--texte-doux)}
.galerie{columns:4;column-gap:30px}
@media (max-width:1024px){.galerie{columns:2;column-gap:12px}}
@media (max-width:767px){.galerie{columns:1}}
.galerie__item{
  display:block;width:100%;padding:0;border:0;background:none;
  margin:0 0 30px;position:relative;overflow:hidden;cursor:zoom-in;
  break-inside:avoid;
}
@media (max-width:1024px){.galerie__item{margin-bottom:12px}}
.galerie__item img{width:100%;transition:transform .35s ease}
.galerie__item::after{
  content:"";position:absolute;inset:0;
  background:rgba(1,112,185,.55);opacity:0;transition:opacity .3s ease;
}
.galerie__item:hover img{transform:scale(1.08)}
.galerie__item:hover::after,.galerie__item:focus-visible::after{opacity:1}

.visionneuse{
  position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.92);
  display:none;place-items:center;padding:24px;
}
.visionneuse[data-ouvert="true"]{display:grid}
.visionneuse img{max-width:min(1100px,92vw);max-height:86vh;object-fit:contain}
.visionneuse__fermer{
  position:absolute;top:18px;right:18px;width:46px;height:46px;
  background:var(--jaune);border:0;color:#000;font-size:1.6rem;
  line-height:1;cursor:pointer;border-radius:3px;
}

/* --------------------------------------------------------------------------
   Réseaux sociaux
   -------------------------------------------------------------------------- */
.social{display:flex;gap:12px;justify-content:center;margin-top:22px}
.social a{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:var(--global-0);color:var(--blanc);
}
.social a:hover{background:var(--texte)}
.social svg{width:18px;height:18px;fill:currentColor}

/* --------------------------------------------------------------------------
   Flip-box de contact
   -------------------------------------------------------------------------- */
.flips{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-top:40px;max-width:820px}
@media (max-width:767px){.flips{grid-template-columns:1fr}}
.flip{perspective:1000px;height:260px}
.flip__inner{
  position:relative;width:100%;height:100%;
  transition:transform .55s ease;transform-style:preserve-3d;
}
.flip:hover .flip__inner,.flip:focus-within .flip__inner{transform:rotateX(180deg)}
.flip__face{
  position:absolute;inset:0;backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:28px;border-radius:3px;
}
.flip__avant{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22)}
.flip__arriere{background:var(--global-0);transform:rotateX(180deg)}
.flip__icone{width:34px;height:34px;fill:var(--jaune);margin-bottom:16px}
.flip__arriere .flip__icone{fill:#fff}
.flip h3{font-size:1.3333rem;font-weight:500;color:var(--blanc);margin-bottom:10px}
.flip p{font-size:.9733rem;color:#eaeaea;margin:0 0 16px}
.flip__valeur{font-family:var(--titre);font-size:1.4rem;font-weight:600;color:var(--jaune)}
.flip__valeur--petit{font-size:1.1rem}

/* Section sombre avec image de fond */
.bloc-sombre{
  position:relative;color:var(--blanc);
  background:#0b0b0b url('../img/structure-colonnes-beton-pacor.webp') center/cover no-repeat;
  padding-block:90px;
}
.bloc-sombre::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.72)}
.bloc-sombre .conteneur{position:relative;z-index:1}
.bloc-sombre p{color:#e0e0e0;max-width:620px}

/* --------------------------------------------------------------------------
   Formulaire
   -------------------------------------------------------------------------- */
.formulaire{display:grid;gap:18px}
.champ{display:grid;gap:6px}
.champ label{font-size:.9333rem;font-weight:500}
.champ .obligatoire{color:#c0392b}
.champ input,.champ select,.champ textarea{
  font-family:inherit;font-size:1rem;color:var(--texte);
  padding:12px 14px;border:1px solid var(--gris-bord);
  border-radius:3px;background:var(--blanc);width:100%;
}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--global-0);
}
.champ textarea{min-height:150px;resize:vertical}
.champ--erreur input,.champ--erreur textarea{border-color:#c0392b}
.message-erreur{font-size:.8666rem;color:#c0392b;display:none}
.champ--erreur .message-erreur{display:block}
.deux-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.deux-colonnes{grid-template-columns:1fr}}
.pot-de-miel{position:absolute;left:-9999px}  /* piège à pourriels */
.note-formulaire{font-size:.8666rem;color:var(--texte-doux)}

/* Coordonnées en colonne */
.coordonnees{display:grid;gap:22px}
.coordonnee{display:flex;gap:16px;align-items:flex-start}
.coordonnee svg{width:22px;height:22px;fill:var(--global-0);flex:none;margin-top:4px}
.coordonnee__etiquette{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--texte-doux)}
.coordonnee__valeur{font-family:var(--titre);font-size:1.3rem;font-weight:500}

/* --------------------------------------------------------------------------
   Contenu légal
   -------------------------------------------------------------------------- */
.contenu-legal{max-width:820px}
.contenu-legal h2{font-size:1.6rem;margin:36px 0 14px}
.contenu-legal h3{font-size:1.25rem;margin:26px 0 10px}
.contenu-legal ul{padding-left:1.2em}
.contenu-legal li{margin-bottom:8px}
.avis{
  background:var(--gris-clair);border-left:4px solid var(--jaune);
  padding:18px 22px;margin-bottom:30px;font-size:.9333rem;
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.pied{background:var(--noir-2);color:#b5b5b5;padding-top:60px;font-size:.9733rem}
.pied a{color:#b5b5b5}
.pied a:hover{color:var(--jaune)}
.pied__grille{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
@media (max-width:921px){.pied__grille{grid-template-columns:1fr;gap:36px}}
.pied__logo{width:200px;margin-bottom:22px}
.pied h2{font-size:1.4rem;font-weight:500;color:var(--blanc);margin:0}
.pied .separateur{margin-block:14px 20px}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pied__liste a{display:flex;align-items:center;gap:12px}
.pied__liste svg{width:16px;height:16px;fill:var(--jaune);flex:none}
.pied__apchq{width:150px;margin-top:26px;opacity:.9}
.pied__social{justify-content:flex-start;margin-top:22px}
.pied__social a{background:transparent;border:1px solid #3a3a3a}
.pied__social a:hover{background:var(--jaune);border-color:var(--jaune);color:#000}
.pied__tel{font-family:var(--titre);font-size:1.6rem;color:#fff!important;display:inline-block;margin-bottom:10px}

.pied__bas{
  margin-top:50px;border-top:1px solid #2a2a2a;padding-block:22px;
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  font-size:.9333rem;color:#8f8f8f;
}
.pied__bas .bouton{font-size:.8666rem;padding:8px 16px}

/* Barre d'appel mobile */
.appel-mobile{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  background:var(--jaune);color:#000!important;
  font-family:var(--titre);font-weight:500;
  align-items:center;justify-content:center;gap:10px;padding:15px;
}
.appel-mobile svg{width:16px;height:16px;fill:currentColor}
@media (max-width:767px){.appel-mobile{display:flex}body{padding-bottom:54px}}

/* --------------------------------------------------------------------------
   Animations d'apparition
   -------------------------------------------------------------------------- */
.anim{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.anim--droite{transform:translateX(30px)}
.anim--gauche{transform:translateX(-30px)}
.anim.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.anim{opacity:1;transform:none}}