/******************************
 * XW Conseil — Design System *
 ******************************/

/* ========== Variables globales ========== */
:root {
  /* Couleurs */
  --c-primary: #12354A;
  --c-bg: #FFFFFF;
  --c-text: #333333;
  --c-muted: #E8E4DB;

  /* Accents */
  --c-accent: #12354A;
  --c-accent-2: #5A7B8C;
  --c-accent-3: #6A2E2E;
  --c-accent-4: #B0B8BC;
  --c-accent-5: #748F6C;
  --c-accent-6: #CDA349;

  /* Typos */
  --ff-title: "Garamond", serif;
  --ff-body: "Cambria", serif;
  --ff-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Layout & effets */
  --container-w: 1100px;
  --pad-x: 24px;
  --radius: 12px;
  --shadow: 0 8px 24px rgba(18,53,74,.12);

  /* Dimensions */
  --logo-h: 100px;

  /* AJOUT : hauteur d’en-tête pour caler le panneau mobile sous le header */
  --header-height: 72px;
}

/* ========== Reset & base ========== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Sticky footer */
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-body);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; }

img { max-width: 100%; height: auto; display: block; }
.container { max-width: var(--container-w); margin: auto; padding: 0 var(--pad-x); }
h1,h2,h3,h4 { color: var(--c-primary); margin: 0 0 .6rem; }

/* Focus accessible */
:where(a, button, .btn, input, select, textarea):focus {
  outline: 2px solid #8fb7ff;
  outline-offset: 2px;
}

/* ========== Header & Navigation (blanc) ========== */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid #eef3f6;
}
.nav { display: flex; align-items: center; min-height: 72px; }
.logo { display: flex; align-items: center; text-decoration: none; min-width: 160px; }
.logo img { height: var(--logo-h); width: auto; display: block; }

.menu { display: flex; gap: 20px; align-items: center; margin: 0; padding: 0; }
.menu a {
  font-family: var(--ff-ui);
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--c-primary);
  padding: 8px 10px;
  border-radius: 8px;
}
.menu a:hover { background: var(--c-accent-4); }
.menu-center { flex: 1; justify-content: center; }

.nav-cta { min-width: 160px; display: flex; justify-content: flex-end; }
.nav-cta .cta {
  font-size: 1.2rem;
  background: #fff;
  color: var(--c-primary);
  padding: .6rem 1.2rem;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid var(--c-primary);
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.nav-cta .cta:hover { background: #f7f7f7; }

/* Ligne dorée */
.header-separator {
  width: 95%;
  margin: 0 auto;
  border-bottom: 2px solid var(--c-accent-6);
}

/* ========== Hero (accueil) ========== */
.hero {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  padding: 80px 20px;
  min-height: 50vh;
  background: url('../img/joe-woods-4Zaq5xY5M_c-unsplash.jpg') center/cover no-repeat;
  color: var(--c-primary);
}
.hero::before {
  content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0.6); z-index: 1;
}
.hero .container { position: relative; z-index: 2; }
.hero h1 { font-family: var(--ff-title); font-size: 2.3rem; margin-bottom: 20px; }
.hero p { font-size: 1.2rem; margin-bottom: 30px; }

/* ========== Sections, grilles & cartes ========== */
.section { padding: 72px 0; }
.section.alt { background: var(--c-muted); }

.grid-2 {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.grid-2 > * { display: flex; flex-direction: column; }

/* Grille 3 colonnes (uniforme) */
.grid-3 {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}

/* Grille 4 colonnes */
.grid-4 {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
}

/* Cartes génériques */
.card {
  background: #fff;
  border: 1px solid #eef3f6;
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  position: relative;
}
.card > :first-child { margin-top: 0; }

/* Bouton texte “en savoir plus” si utilisé dans d’autres pages */
.card .btn.text {
  margin-top: auto;
  align-self: flex-end;
  font-size: 0.95rem;
}

/* ========== Logos (Nous travaillons avec) ========== */
.logos-grid { align-items: center; grid-auto-rows: 88px; }
.logo-card {
  display: flex; 
  justify-content: center; 
  align-items: center;
  padding: 12px 16px; 
  background: transparent; 
  border: none;
  box-shadow: none;
  transition: transform .15s ease, filter .2s ease;
}
.logo-card img { max-height: 60px; width: auto; object-fit: contain; }
.logo-card:hover { transform: translateY(-2px); }
@media (max-width: 520px) {
  .logos-grid { grid-auto-rows: 72px; }
  .logo-card img { max-height: 32px; }
}

/* ========== Boutons (version unique) ========== */
.btn {
  font-family: var(--ff-ui);
  background: #fff;
  color: var(--c-primary);
  padding: .9rem 1.2rem;
  border-radius: 10px;
  display: inline-block;
  text-decoration: none;
  border: 1px solid var(--c-primary);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.btn:hover { background: var(--c-accent-5); color: #fff; border-color: var(--c-accent-5); }
.btn.secondary { background: #fff; border: 1px solid var(--c-primary); color: var(--c-primary); }
.btn.secondary:hover { background: var(--c-accent-5); color: #fff; border-color: var(--c-accent-5); }
.btn.text { background: transparent; border: none; color: var(--c-primary); padding: 0; }
.btn.text:hover { color: var(--c-accent-5); }

/* ========== Cartes cliquables (ressources & services) ========== */
.card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.card.hoverable {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.card.hoverable:hover { transform: translateY(-4px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.card.hoverable .pad-bottom { flex-grow: 1; }
.card.hoverable .more {
  margin-top: auto;      /* colle en bas */
  align-self: flex-end;  /* à droite */
  font-size: 0.95rem;
  color: var(--c-primary);
  font-weight: 500;
}
.card-link:hover .more { color: var(--c-accent-5); }

/* ========== Listes avec coche ========== */
ul.checklist { list-style: none; padding-left: 0; margin-left: 0; }
ul.checklist li {
  position: relative;
  padding-left: 28px;
  line-height: 1.7;
}
ul.checklist li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  transform: translateY(2px);
  font-weight: 700;
  color: var(--c-accent-6); /* doré */
}

/* ========== FAQ (version claire) ========== */
.faq-grid { display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 768px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-item {
  background: #fff; border: 1px solid #eef3f6; border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow);
}
.faq-item h4 { margin-bottom: 12px; }
.faq-item p { margin: 0; }

/* ========== Footer amélioré ========== */
footer {
  background: linear-gradient(180deg, #0F2F41 0%, #12354A 100%);
  position: relative;
  color: #fff;
  padding: 56px 0 28px;
}
footer::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, #CDA349, #E7C774, #CDA349);
  opacity: 0.9;
}
.logo-footer { display: inline-flex; align-items: center; margin-bottom: 10px; }
.logo-footer img { height: 72px; filter: brightness(0) invert(1); }
.footer-desc { opacity: .85; margin-top: 12px; }

.footer-grid {
  display: grid;
  grid-template-areas: "brand nav contact social";
  grid-template-columns: 1.2fr 1fr 1fr .8fr;
  align-items: start;
  justify-items: start;
  gap: 60px;
  text-align: left;
}
.footer-grid > div:nth-child(1) { grid-area: brand;  max-width: 360px; }
.footer-grid > div:nth-child(2) { grid-area: nav; }
.footer-grid > div:nth-child(3) { grid-area: contact; }
.footer-grid > div:nth-child(4) { grid-area: social; }

footer h3 {
  font-family: var(--ff-ui);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  font-size: 1.05rem;
  margin: 6px 0 12px;
  color: #fff;
  opacity: .96;
}
.footer-grid ul, .footer-grid li { list-style: none; margin: 0; padding: 0; }
.footer-grid li { line-height: 1.7; }
footer a {
  color: #fff; text-decoration: none; opacity: 0.9;
  transition: opacity .15s ease, text-decoration-color .15s ease;
}
footer a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

.footer-socials { margin-top: 8px; }
.footer-socials a {
  display: inline-flex; justify-content: center; align-items: center;
  width: 38px; height: 38px; margin-right: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.footer-socials a:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.30);
  transform: translateY(-2px);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 36px;
  padding-top: 18px;
  text-align: center;
  font-size: .9rem;
  opacity: .85;
}

/* ========== Responsif ========== */
@media (max-width: 980px) {
  .footer-grid {
    grid-template-areas:
      "brand"
      "nav"
      "contact"
      "social";
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
@media (max-width: 880px) {
  .nav { flex-wrap: wrap; gap: 10px; }
  .menu-center { order: 3; flex: 1 1 100%; justify-content: center; }
  .nav-cta { order: 2; flex: 1; justify-content: flex-end; }
  .logo { order: 1; }
  .logo img { height: 60px; }
  .hero h1 { font-size: 2rem; }
}
@media (max-width: 520px) {
  .menu a { padding: 6px 8px; }
  .logo img { height: 40px; }
  .hero { padding: 60px 16px; min-height: 60vh; }
  .hero h1 { font-size: 1.8rem; }
  .hero p { font-size: 1rem; }
}

/* ========== Utilitaires ========== */
.hidden { display: none !important; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-24 { margin-top: 24px; }
.mb-24 { margin-bottom: 24px; }

/* --- Formulaire: styles champs & accessibilité --- */
input, select, textarea {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid #ccd2d8;
  border-radius: 8px;
  font-family: var(--ff-ui);
  margin-bottom: 14px;
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--c-accent-6);
  border-color: var(--c-accent-6);
}

/* Masquer visuellement mais garder accessible */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* --- Grille contact & uniformisation hauteurs --- */
.contact-grid { align-items: stretch; }              /* même hauteur pour les 2 colonnes */
.contact-grid .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Empêcher le redimensionnement manuel de la zone de texte */
textarea { resize: none; }

/* Calendly: hauteur contrôlée et responsive */
.calendly-card {
  padding: 0;
  overflow: hidden;
  display: flex;
}
.calendly-inline-widget {
  width: 100%;
  min-width: 320px;
  height: 720px;             /* desktop */
}
@media (max-width: 640px) {
  .calendly-inline-widget { height: 900px; }  /* mobile */
}

/* --- Tableaux simples (si utilisés) --- */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
}

/* Champ message plus grand par défaut */
.contact-form textarea {
  min-height: 220px;   /* ajuste 180–300px selon ton goût */
}

#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 50, 100, 0.95); /* bleu foncé semi-transparent */
  color: white;
  text-align: center;
  padding: 15px;
  font-size: 14px;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

#cookie-banner p {
  margin: 0;
}

#cookie-banner a {
  color: #ffd700; /* doré */
  text-decoration: underline;
}

#cookie-banner button {
  background: #28a745; /* vert */
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
}

#cookie-banner button:hover {
  background: #218838;
}

/* --- Burger: caché par défaut pour ne pas changer le rendu desktop --- */
.burger{display:none;background:transparent;border:0;width:44px;height:44px;padding:0;margin:0 0 0 auto;cursor:pointer}
.burger span{display:block;height:2px;background:currentColor;margin:7px 8px;transition:.25s ease}

/* On suppose que ton header est déjà sur fond bleu et que le texte des liens est blanc.
   Si tes liens sont blancs, le "currentColor" rendra les barres blanches aussi.
   Sinon, dé-commente la ligne suivante pour forcer le blanc :
   .burger span{background:#fff;}
*/

/* --- Mobile / tablette: on ne modifie que la disposition, pas les couleurs/typos --- */
@media (max-width:900px){
  /* AJOUT : Empêche le scroll quand le menu est ouvert */
  body.menu-open{ overflow:hidden; }

  /* Afficher le burger */
  .burger{display:block}

  /* Panneau du menu mobile (coulissant) */
  .menu.menu-center{
    position:fixed; left:0; right:0; top:var(--header-height); /* AJOUT : aligné sous le header */
    bottom:0; display:flex; flex-direction:column; align-items:flex-start;
    gap:0; padding:12px 18px;

    /* AJOUT : fond explicite + z-index pour éviter la transparence et passer au-dessus du contenu */
    background:#fff;
    z-index:1000;

    transform:translateY(-120%); transition:transform .25s ease;
  }
  .menu.menu-center a{
    display:block; width:100%; padding:14px 10px;
    border-bottom:1px solid rgba(0,0,0,.06); /* plus visible sur fond clair */
    color: var(--c-primary);
  }
  .menu.menu-center.open{ transform:translateY(0) }

  /* CTA mobile fixé en bas du panneau */
  .nav-cta{
    position:fixed; left:0; right:0; bottom:0;
    padding:12px 18px;

    /* AJOUT : fond + z-index au-dessus du panneau */
    background:#fff;
    z-index:1001;
  }
  .nav-cta .cta{ display:block; width:100%; text-align:center }

  /* Mise en page de la barre (logo + burger visibles) */
  .container.nav{ display:flex; align-items:center; gap:12px }
  .menu.menu-center{ order:3 }  /* menu en panneau */
  .nav-cta{ order:4 }           /* CTA en bas */
}

/* Animation burger (croix) */
@media (max-width:900px){
  .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(9px) rotate(45deg) }
  .burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
  .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9px) rotate(-45deg) }
}

/* --- Fin styles spécifiques formulaire --- */