/* =========================================================
   CHANTIERAMA — styles.css (GLOBAL UNIQUEMENT)
   Règle : ce qui est spécifique à une page va dans /css/pages/...
========================================================= */

/* =========================================================
   VARIABLES & COULEURS (logo CHANTIERAMA)
========================================================= */
:root{
  --c-jaune: #F4C300;
  --c-jaune-hover: #E2B500;
  --c-noir:  #1C1C1C;
  --c-fond:  #F6F7FB;
  --c-gris:  #6B7280;
}

/* =========================================================
   RESET LÉGER
========================================================= */
html, body{
  margin: 0;
  padding: 0;
  background: transparent;
}

body{
  font-family: "Inter", "DIN Next", Arial, sans-serif;
  color: var(--c-noir);
}

/* =========================================================
   FOND GLOBAL CHANTIERAMA (robuste)
   - pas de z-index négatif
   - n'intercepte jamais les clics
========================================================= */
body.fond-standard{
  position: relative;
}

body.fond-standard::before{
  content:"";
  position: fixed;
  inset: 0;
 /*z-index: 0;*/
  pointer-events: none;
  background-image: url('/img/image_fond.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5;
}

body.fond-standard main,
body.fond-standard .visitor-background,
body.fond-standard .page-wrap,
body.fond-standard .footer-site{
  position: relative;
  z-index: 1;
}

/* =========================================================
   SIGNATURE VISUELLE
   (arrondis partout sauf bas-droite)
========================================================= */
.signature{
  border-radius: 12px;
  border-bottom-right-radius: 0;
}

/* Appliquer la signature aux composants Bootstrap */
.btn.signature,
.card.signature,
.form-control.signature,
.form-select.signature,
.modal-content.signature{
  border-bottom-right-radius: 0;
}

/* =========================================================
   BOUTONS CHANTIERAMA
========================================================= */
.btn-chantierama{
  background-color: var(--c-jaune) !important;
  color: var(--c-noir) !important;
  font-weight: 700;
  border: 2px solid var(--c-noir) !important;
  box-shadow: none !important;
}

.btn-chantierama:hover{
  background-color: var(--c-jaune-hover) !important;
  color: var(--c-noir) !important;
}

.btn-chantierama:focus,
.btn-chantierama:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(244,195,0,0.35) !important;
}

.btn-outline-chantierama{
  background: transparent !important;
  color: var(--c-noir) !important;
  font-weight: 700;
  border: 2px solid var(--c-noir) !important;
}

.btn-outline-chantierama:hover{
  background: var(--c-noir) !important;
  color: #fff !important;
}

/* =========================================================
   HEADER (GLOBAL)
========================================================= */
.header-site{
  background: rgba(255, 255, 255, 0.30);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(0,0,0,0.08);

  height: 72px;
  display: flex;
  align-items: center;

  position: sticky;
  top: 0;
  z-index: 1100; /* au-dessus des backdrops */
}

.logo-site{
  width: auto;
  display: block;
}

.user-chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;

  border-radius: 14px;
  border-bottom-right-radius: 0;

  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  color:#1c1c1c;
  font-size:13px;

  cursor: pointer;
}

.user-dot{
  width:8px; height:8px; border-radius:50%;
  background:#1DAA61;
}

/* Dropdown utilisateur */
.dropdown-menu.signature{
  border-radius: 14px;
  border-bottom-right-radius: 0;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.dropdown-item.signature{
  border-radius: 10px;
  border-bottom-right-radius: 0;
  padding: 8px 12px;
}

.dropdown-item.signature:hover{
  background: rgba(0,0,0,.05);
}

/* Offcanvas mobile : on stylise l’intérieur (pas la structure Bootstrap) */
.offcanvas .menu-section-title{
  font-size:12px;
  color:#666;
  text-transform: uppercase;
  letter-spacing:.04em;
  margin-top:10px;
  margin-bottom:6px;
}

.menu-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;

  border-radius: 14px;
  border-bottom-right-radius: 0;

  text-decoration:none;
  color:#1c1c1c;
  border:1px solid rgba(0,0,0,.06);
  background:#fff;
}

.menu-item:hover{ background: rgba(0,0,0,.03); }

/* CTA sticky bas mobile (composant global) — bouton posé sur l'écran */
.mobile-cta-create{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 14px; /* marge depuis le bas */

  z-index: 1050;

  /* plus de bandeau */
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;

  /* centre le bouton */
  display: flex;
  justify-content: center;

  /* le conteneur ne doit pas capter les clics */
  pointer-events: none;
}

/* le bouton reste cliquable (et garde son style) */
.mobile-cta-create .btn{
  width: auto;              /* plus plein écran */
  padding: 14px 16px;
  font-size: 16px;
  pointer-events: auto;
}

/* espace en bas pour ne pas masquer le contenu */
body.has-mobile-cta{ padding-bottom: 78px; }

@media (min-width: 768px){
  .mobile-cta-create{ display:none !important; }
  body.has-mobile-cta{ padding-bottom: 0; }
}

/* =========================================================
   LOGO RESPONSIVE (global)
========================================================= */
.logo-full{
  height: 42px;
  width: auto;
  display: block;
}

.logo-compact{
  height: 38px;
  width: auto;
  display: none;
}

@media (max-width: 360px){
  .logo-full{ display: none; }
  .logo-compact{ display: block; }
}

.header-site .nav-link{
  color: var(--c-noir);
  font-weight: 600;
  text-decoration: none;
}

.header-site .nav-link:hover{
  text-decoration: underline;
}

/* =========================================================
   GLASS (composant global)
========================================================= */
.glass{
  background-color: rgba(255,255,255,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
}

/* =========================================================
   LAYOUT GLOBAL
========================================================= */
.page-wrap{
  max-width: 1100px;
  margin: 0 auto;
}

.section-pad{
  padding: 2.25rem 0;
}

@media (min-width: 992px){
  .section-pad{ padding: 4rem 0; }
}

/* =========================================================
   BADGES (composant global)
========================================================= */
.badge-soft{
  background: rgba(244,195,0,0.14);
  border: 1px solid rgba(244,195,0,0.35);
  color: var(--c-noir);
  font-weight: 600;
}

.badges-row .badge{
  font-weight: 600;
  padding: .5rem .65rem;
}

/* =========================================================
   CARTES / BLOCS (composants globaux)
========================================================= */
.card.signature{
  border: 0;
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
}

.visu-preview{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 35px rgba(0,0,0,0.06);
}

.visu-preview .mini-block{ padding: .8rem; }

@media (min-width: 992px){
  .visu-preview .mini-block{ padding: 1rem; }
}

.feature-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 1rem;
}

@media (min-width: 992px){
  .feature-card{ padding: 1.25rem; }
}

/* =========================================================
   FOOTER (global)
========================================================= */
.footer-site{
  background: #1c1c1c;
  color: #ffffff;
  padding: 12px 0;
}

.footer-row{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: flex-end;
}

.footer-left{
  align-self: center;
  justify-self: start;
}

.footer-logo{
  height: 24px;
  width: auto;
  display: block;
}

.footer-center{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 24px;
  font-size: 0.85rem;
  color: rgba(255,255,255,.7);
  white-space: nowrap;
  text-align: center;
  justify-self: center;
}

.footer-right{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 0;
  justify-self: end;
}

.footer-link{
  display: inline-flex;
  align-items: center;
  height: 24px;
  line-height: 12px;
  font-size: 0.9rem;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.15);
  white-space: nowrap;
}

.footer-link:hover{
  color: #ffffff;
  border-bottom-color: rgba(255,255,255,.4);
}

@media (max-width: 768px){
  .footer-center{ display: none; }
}

/* =========================================================
   WHATSAPP IA (composant global)
========================================================= */
.wa-wrap{
  position: relative;
  border-radius: 10px;
  padding: 12px;
  background-color: #e5ddd5;
  background-image: none;
}

.wa-scroll{
  max-height: 520px;
  overflow: auto;
  padding: 10px 6px;
}

.wa-day{
  display:flex;
  justify-content:center;
  margin:12px 0;
}

.wa-day span{
  font-size:12px;
  color:#555;
  background:#e9e9e9;
  padding:4px 10px;
  border-radius:999px;
}

.wa-row{
  display:flex;
  gap:10px;
  margin:8px 0;
  align-items:flex-end;
}

.wa-row.left{ justify-content:flex-start; }
.wa-row.right{ justify-content:flex-end; }

.wa-bubble{
  max-width: min(680px, 78%);
  border-radius:14px;
  padding:10px 12px;
  border:1px solid #ddd;
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
  white-space:normal;
}

.wa-row.left .wa-bubble{
  background:#ffffff;
  border-top-left-radius:6px;
}

.wa-row.right .wa-bubble{
  background:#dcf8c6;
  border-top-right-radius:6px;
}

.wa-meta{
  font-size:11px;
  color:#666;
  margin-bottom:6px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.wa-name{
  font-weight:700;
  color:#333;
}

.wa-to{
  color:#444;
}

.wa-text{
  font-size:14px;
  color:#1f1f1f;
  line-height:1.35;
  overflow-wrap:break-word;
  position:relative;
}

.wa-text a{
  color:#0b57d0;
  text-decoration:underline;
}

.wa-time{
  float:right;
  font-size:11px;
  color:#999;
  margin-left:8px;
  white-space:nowrap;
  line-height:1;
  padding-top:4px;
}

/* =========================================================
   MODALES (global) — garde-fou de z-index
========================================================= */
.modal{ z-index: 2000; }
.modal-backdrop{ z-index: 1990; }