/* ============================================================
   WebAudit Pro — WAP.css V10 (Clean RESET)
   Desktop & Mobile | Header unique + Menu mobile
============================================================ */

/* ---------- Variables ---------- */
:root{
  --bleu:#2977A5;
  --bleu-fonce:#005bb5;
  --jaune:#ffcc00;
  --blanc:#ffffff;
  --noir:#000000;

  --wapbar-h:64px;        /* hauteur header desktop */
  --mobilebar-h:64px;     /* hauteur header mobile */
  --conteneur-largeur:1200px;
}

/* ---------- Reset / base ---------- */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  font-family:Arial, Helvetica, sans-serif;
  background:var(--bleu);
  color:var(--blanc);
}

img{ max-width:100%; height:auto; }
a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; }

/* ---------- Bouton générique ---------- */
.btn-cta-principal{
  display:inline-block;
  padding:12px 20px;
  background:var(--jaune);
  color:#000;
  border-radius:6px;
  font-weight:bold;
  border:none;
  cursor:pointer;
}

/* ============================================================
   HEADER DESKTOP (menu_WAP.php)
============================================================ */

/* Wrapper du header desktop */
.menu-wap-header{
  width:100%;
}

/* Barre desktop */
header.topbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:var(--wapbar-h);
  background:var(--bleu);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  z-index:1000;
  box-shadow:0 2px 6px rgba(0,0,0,0.25);
}

.topbar .brand img{
  height:40px;
  width:auto;
}

.topbar .main{
  display:flex;
  gap:16px;
}

.topbar .main a{
  padding:8px 14px;
  border-radius:6px;
  color:#ffffff;
  font-weight:bold;
}

.topbar .main a.active{
  background:var(--jaune);
  color:#000;
}

.topbar .menu-button{
  display:none; /* utilisé éventuellement sur mobile */
}

/* ============================================================
   HEADER MOBILE (menu_mobile.php)
============================================================ */

/* Wrapper du header mobile */
.menu-mobile-header{
  width:100%;
}

/* Barre mobile (cachée par défaut sur desktop, affichée via @media) */
.topbar-mobile{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:var(--mobilebar-h);
  background:var(--bleu);
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:1100;
  box-shadow:0 2px 6px rgba(0,0,0,0.25);
}

.topbar-mobile img{
  height:32px;
  width:auto;
}

.mobile-menu-button{
  padding:10px 18px;
  background:var(--jaune);
  color:#000;
  border-radius:999px;
  font-weight:bold;
  font-size:14px;
  border:none;
}

/* ============================================================
   STRUCTURE GÉNÉRALE DES PAGES
============================================================ */

.page-index-main,
.page-default-main,
.page-main{
  width:var(--conteneur-largeur);
  max-width:100%;
  margin:0 auto;
  padding-top:calc(var(--wapbar-h) + 20px);
  padding-bottom:40px;
  padding-left:16px;
  padding-right:16px;
}

/* Pour les pages “site complet” (avec classe page-wap) */
body.page-wap .page-index-main,
body.page-wap .page-default-main,
body.page-wap .page-main{
  padding-top:var(--wapbar-h);
}

/* ============================================================
   INDEX — DESKTOP (>= 701px)
============================================================ */

@media (min-width:701px){

  .index-hero{
    width:1300px;
    max-width:100%;
    margin:0 auto;
    padding-top:40px;
    padding-bottom:40px;
    height:650px;
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
  }

  .index-card{
    position:absolute;
    top:150px;
    left:150px;
    width:420px;
    background:#ffffff;
    color:#000000;
    padding:24px 28px;
    border-radius:10px;
    box-shadow:0 6px 18px rgba(0,0,0,0.18);
    z-index:10;
  }

  .seo-card{
    position:absolute;
    top:150px;
    left:600px;
    width:300px;
    z-index:5;
  }

  .index-man{
    position:absolute;
    bottom:0;
    right:5px;
    width:500px;
    z-index:8;
  }
}

/* ============================================================
   TEXTBOX / SCROLLBOX – CONTENU LONG
============================================================ */

/* scrollbox → bloc blanc SANS scroll interne */
.scrollbox{
  background:#ffffff;
  color:#000000;
  padding:24px 28px;
  border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
  max-width:880px;
  margin:0 auto;
  max-height:none;
  overflow:visible;
}

/* Pages de contenu avec .textbox (desktop) :
   qui-suis-je, pourquoi un audit, ce que vous recevrez, contact */
@media (min-width:701px){

  body.page-qui .textbox,
  body.page-pourquoi .textbox,
  body.page-recevrez .textbox,
  body.page-contact .textbox{
    background:#ffffff;
    color:#000000;
    border-radius:8px;
    padding:28px 32px;
    box-shadow:0 6px 18px rgba(0,0,0,0.25);
    max-width:880px;
    margin:0 auto;
    min-height:500px;
  }

  body.page-contact .page-default-main{
    padding-top:calc(var(--wapbar-h) + 30px);
  }
}

/* ============================================================
   PAGE CONTACT – FORMULAIRE
============================================================ */

body.page-contact .textbox h1{
  margin-top:0;
  margin-bottom:8px;
}

body.page-contact .textbox p{
  margin-top:0;
  margin-bottom:20px;
  font-size:15px;
  line-height:1.5;
}

.form-contact{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:8px;
}

.form-contact label{
  font-size:14px;
  font-weight:bold;
  color:#004266;
}

.form-contact input[type="text"],
.form-contact input[type="email"],
.form-contact input[type="tel"],
.form-contact input[type="url"],
.form-contact textarea{
  display:block;
  width:100%;
  padding:10px 12px;
  border-radius:6px;
  border:1px solid #d0d8e0;
  font-size:15px;
  font-family:inherit;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.05);
  resize:vertical;
}

.form-contact input:focus,
.form-contact textarea:focus{
  outline:none;
  border-color:var(--bleu);
  box-shadow:0 0 0 2px rgba(41,119,165,0.18);
}

body.page-contact .form-contact .btn-cta-principal{
  align-self:flex-end;
  margin-top:4px;
  border:none;
  border-radius:999px;
  padding:10px 24px;
  font-weight:bold;
  cursor:pointer;
  transition:transform 0.1s ease, box-shadow 0.1s ease;
}

body.page-contact .form-contact .btn-cta-principal:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(0,0,0,0.18);
}

/* ============================================================
   PAGE AUDIT GRATUIT
============================================================ */

body.page-audit .page-default-main{
  padding:calc(var(--wapbar-h) + 40px) 16px 80px;
  display:flex;
  justify-content:center;
}

body.page-audit .content-box{
  max-width:900px;
  width:100%;
}

body.page-audit .textbox{
  background:#ffffff;
  color:#000000;
  border-radius:8px;
  padding:32px 40px 40px;
}

body.page-audit .scrollbox{
  margin:16px 0 24px;
}

/* Formulaire audit (classe contact-form) */
body.page-audit .contact-form label{
  display:block;
  margin:14px 0 6px;
  font-weight:bold;
}

body.page-audit .contact-form input,
body.page-audit .contact-form textarea{
  width:100%;
  display:block;
  padding:10px 12px;
  border-radius:6px;
  border:1px solid #d0d8e0;
  font-size:15px;
}

body.page-audit .contact-form button{
  margin-top:18px;
}

/* ============================================================
   MOBILE (<= 700px)
============================================================ */

@media (max-width:700px){

  /* ----- Switch headers (mobile) ----- */
  .menu-wap-header,
  header.topbar{
    display:none !important;      /* cacher menu_WAP */
  }

  .menu-mobile-header,
  .topbar-mobile{
    display:flex !important;      /* afficher header mobile */
  }

  /* Décaler le contenu sous la barre mobile */
  .page-index-main,
  .page-default-main,
  .page-main{
    padding-top:calc(var(--mobilebar-h) + 40px) !important;
    padding-bottom:40px;
  }

  /* Fond plus clair pour les pages de contenu */
  body.page-default,
  body.page-audit,
  body.page-recevrez,
  body.page-qui,
  body.page-pourquoi,
  body.page-contact{
    background:#ffffff;
    color:#000000;
  }

  .scrollbox,
  .textbox{
    box-shadow:none;
    border-radius:4px;
    padding:22px 18px;
    max-width:100%;
    margin:0 0 24px 0;
  }

  /* Index simplifié */
  .index-hero{
    width:100%;
    max-width:420px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:24px;
    align-items:center;
  }

  .index-card{
    width:100%;
    background:rgba(255,255,255,0.14);
    color:#ffffff;
    padding:20px;
    border-radius:12px;
    backdrop-filter:blur(4px);
  }

  .seo-card{
    width:240px;
  }

  .index-man{
    display:none;
  }

  /* Marge spécifique contenus longs */
  body.page-contact .page-default-main,
  body.page-audit   .page-default-main,
  body.page-recevrez .page-default-main,
  body.page-pourquoi .page-default-main,
  body.page-qui      .page-default-main{
    padding-top:calc(var(--mobilebar-h) + 24px) !important;
  }

  .contact-form,
  .form-contact,
  .scrollbox{
    margin-top:12px !important;
  }

  /* Audit gratuit : ajuster la textbox */
  body.page-audit .textbox{
    margin-top:12px;
    padding:22px 22px;
  }
}
/* ============================================================
   OVERRIDE FINAL HEADER — NE RIEN METTRE APRÈS CE BLOC
============================================================ */

/* TOUT CACHER PAR DÉFAUT (sécurité) */
header.topbar,
.topbar-mobile{
  display:none !important;
}

/* Desktop (>= 701px) : uniquement le header desktop */
@media (min-width:701px){
  header.topbar{
    display:flex !important;
  }
}

/* Mobile (<= 700px) : uniquement le header mobile */
@media (max-width:700px){
  .topbar-mobile{
    display:flex !important;
  }
}
/* ============================================================
   PAGE "QUI-SUIS-JE" — CONTENU FIXE (SANS SCROLL INTERNE)
   ============================================================ */

body.page-qui .scrollbox,
body.page-qui .textbox{
  max-height:none !important;      /* plus de limite de hauteur */
  overflow:visible !important;     /* plus de barre de défilement interne */
  padding:28px 32px !important;    /* un peu plus d’air */
  background:#ffffff;
  color:#000000;
  border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
}

@media (min-width:701px){
  body.page-qui .scrollbox,
  body.page-qui .textbox{
    min-height:520px !important;   /* belle hauteur sur desktop */
  }
}


/* =========================
   FIN CSS
========================= */