:root{
  --nuit:#0B1220; --ivoire:#FAF7F2; --bleu-profond:#1D2A44;
  --or-doux:#C7A97B; --or-hover:#B39665; --gris-doux:#798196;
  --succes:#2E7D5F; --erreur:#B85C50; --info:#5B7B9D;
  --spacing-xs:8px; --spacing-sm:16px; --spacing-md:32px; --spacing-lg:48px;
  --radius-xs:6px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --shadow-sm:0 2px 8px rgba(11,18,32,.08);
  --shadow-md:0 4px 16px rgba(11,18,32,.12);
  --shadow-lg:0 8px 24px rgba(11,18,32,.16);
  --container-max:1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body.ws-body{
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;
  background:var(--ivoire); color:var(--nuit); margin:0; line-height:1.6;
}
.ws-container{max-width:var(--container-max);margin:0 auto;padding:var(--spacing-lg) var(--spacing-sm)}

/* =========================
   HEADER + NAV (charte)
   ========================= */
/* Ligne de header : logo à gauche, nav à droite, burger à l’extrême droite */
.ws-header { --header-h: clamp(64px, 9vw, 96px); position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid #E5E1DA; }
.ws-header-inner {
  min-height: var(--header-h);
  display: flex; align-items: center; gap: 16px; padding: 8px 0;
}

/* Le nav prend tout l’espace restant, collé à droite du logo */
.ws-nav { margin-left: auto; }
.ws-nav .mod-menu, .ws-nav .mod-list { list-style: none; margin: 0; padding: 0; }
.ws-nav a { color: var(--bleu-profond); text-decoration: none; display: inline-flex; align-items: center; padding: 12px 14px; border-radius: 10px; }
.ws-nav a:hover { color: var(--nuit); box-shadow: inset 0 -3px 0 var(--or-doux); }
.ws-nav .current > a, .ws-nav .active > a, .ws-nav a.current, .ws-nav a.active { color: var(--nuit); box-shadow: inset 0 -3px 0 var(--or-doux); font-weight: 600; }

/* Desktop : menu horizontal */
/*
@media (min-width: 992px) {
  .ws-burger { display: none; }
  .ws-nav { position: static; transform: none; }
  .ws-nav > .ws-nav-inner > nav > ul { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
  .ws-nav[aria-hidden="false"] { transform: none; }
}*/
/* ===== Recentrage du menu en desktop ===== */
@media (min-width: 992px){
  /* Le nav occupe l’espace central entre logo et burger */
  .ws-header-inner{
    display: flex;
    align-items: center;
  }
  .ws-nav{
    flex: 1 1 auto;          /* prend la place disponible */
    margin-left: clamp(24px, 6vw, 120px); /* petit espace après le logo */
    margin-right: clamp(24px, 6vw, 120px);/* évite de coller le bord droit/burger */
  }
  .ws-nav > .ws-nav-inner > nav > ul{
    display: flex;
    justify-content: center;  /* centre les liens dans la zone nav */
    gap: 12px;
    align-items: center;
  }
  /* Le burger reste à l’extrême droite */
  .ws-burger{ margin-left: 0; }
}


/* Mobile : off-canvas à droite + burger */
.ws-burger { display: inline-block; width: 44px; height: 44px; border: none; background: transparent; border-radius: 10px; cursor: pointer; }
.ws-burger-bar { display: block; height: 2px; width: 24px; margin: 6px auto; background: var(--bleu-profond); border-radius: 2px; transition: transform .25s, opacity .25s; }
.ws-burger.is-open .ws-burger-bar:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.ws-burger.is-open .ws-burger-bar:nth-child(2){ opacity: 0; }
.ws-burger.is-open .ws-burger-bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 991.98px) {
  #ws-nav {
    position: fixed; top: 0; right: 0; height: 100dvh; width: 320px; z-index: 70;
    background: #fff; border-left: 1px solid #E5E1DA; box-shadow: -16px 0 40px rgba(11,18,32,.18);
    transform: translateX(100%); transition: transform .28s ease;
  }
  #ws-nav[aria-hidden="false"] { transform: translateX(0); }
  #ws-nav .ws-nav-inner { padding: 20px; overflow: auto; height: 100%; }
  #ws-nav .mod-menu > li { margin-bottom: 6px; }
  #ws-nav .mod-menu > li > a { display: block; font-size: 18px; padding: 12px 14px; }
  #ws-nav ul ul { position: static; border: none; box-shadow: none; padding: 4px 0 4px 8px; opacity: 1; transform: none; pointer-events: auto; }
  #ws-nav .parent > a::after { content: "▸"; margin-left: 8px; color: var(--gris-doux); }
  #ws-nav .parent.open > a::after { content: "▾"; }
  #ws-nav .parent > ul { display: none; }
  #ws-nav .parent.open > ul { display: block; }

  .ws-nav-overlay { position: fixed; inset: 0; background: rgba(11,18,32,.36); z-index: 60; }
  body.ws-lock { overflow: hidden; }
}

/* Dropdown desktop (niveau 2) */
.ws-nav li { position: relative; }
.ws-nav .parent > a::after { content: "▾"; font-size: .85em; margin-left: 6px; opacity: .7; }
.ws-nav ul ul {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px;
  background: #fff; border: 1px solid #E5E1DA; border-radius: 12px; box-shadow: var(--shadow-md);
  padding: 8px; opacity: 0; transform: translateY(6px); pointer-events: none; transition: .18s ease;
}
.ws-nav li:hover > ul { opacity: 1; transform: translateY(0); pointer-events: auto; z-index: 60; }
.ws-nav ul ul a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--bleu-profond); }
.ws-nav ul ul a:hover { background: rgba(199,169,123,.12); color: var(--nuit); }


/* =========================
   MAIN LAYOUT
   ========================= */
.ws-main{ display:grid; grid-template-columns:280px 1fr; gap:var(--spacing-md); align-items:start }
@media(max-width:992px){ .ws-main{ grid-template-columns:1fr } }
.ws-sidebar .module{ background:#fff; border-radius:12px; box-shadow:var(--shadow-sm); padding:var(--spacing-sm); margin-bottom:var(--spacing-sm) }

/* =========================
   HERO
   ========================= */
.hero{
  background:
    radial-gradient(1200px 500px at 20% 0%, rgba(199,169,123,.15) 0%, rgba(199,169,123,0) 50%),
    linear-gradient(135deg, #0B1220 0%, #1D2A44 100%);
  color:var(--ivoire);
  padding: calc(var(--header-h) + 12px) var(--spacing-sm) var(--spacing-lg);
  min-height:640px; display:flex; align-items:center; position:relative; overflow:hidden;
}
.hero-content{ max-width:var(--container-max); margin:0 auto; position:relative; z-index:1 }
.hero-grid{ display:grid; grid-template-columns:1fr; gap:var(--spacing-lg); align-items:center }
@media(min-width:768px){ .hero-grid{ grid-template-columns:1fr 1fr } }
.hero-text h1{ font-family:'Inter Tight',sans-serif; font-size:clamp(40px,6.2vw,60px); font-weight:700; letter-spacing:-.01em; line-height:1.1; margin:0 0 var(--spacing-sm) }
.hero-text p{ font-size:19px; opacity:.95; margin:0 0 var(--spacing-md); max-width:560px }
.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--spacing-sm); align-items:center }
.hero-stats{ display:flex; gap:var(--spacing-md); margin-top:var(--spacing-md); padding-top:var(--spacing-md); border-top:1px solid rgba(250,247,242,.2) }
.hero-stat strong{ display:block; font-size:28px; color:var(--or-doux) }

.hero-visual{ position:relative }
.hero-card-stack{ position:relative; height:420px }
.hero-card{
  position:absolute; background:#fff; border-radius:16px; padding:var(--spacing-md);
  box-shadow:0 10px 30px rgba(0,0,0,.14); color:var(--nuit); width:280px; transition:transform .3s ease; border:1px solid #EEE7DC;
}
.hero-card:nth-child(1){ top:0; left:0; transform:translateX(20px) }
.hero-card:nth-child(2){ top:70px; left:60px; transform:translateX(20px) }
.hero-card:nth-child(3){ top:140px; left:120px; transform:translateX(20px) }
.success-badge{ background:rgba(46,125,95,.1); color:var(--succes); padding:6px 10px; border-radius:6px; font-size:13px }

/* Transition douce vers la section ivoire */
.hero + .ws-sep{ height:40px; background:linear-gradient(to bottom, rgba(10,16,28,0) 0%, rgba(250,247,242,1) 90%) }
@media (max-width:768px){ .hero + .ws-sep{ height:24px } }

/* =========================
   CARTES / BOUTONS
   ========================= */
.assistants-section{ max-width:var(--container-max); margin:0 auto; padding:var(--spacing-lg) var(--spacing-sm) }
.cards-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--spacing-md) }
.assistant-card{ background:#fff; border-radius:12px; padding:var(--spacing-md); box-shadow:var(--shadow-sm); transition:all .3s ease; border:2px solid transparent }
.assistant-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--or-doux) }
.card-cta{ display:flex; align-items:center; justify-content:space-between; padding-top:var(--spacing-sm); border-top:1px solid #E5E1DA }

.btn{ padding:14px 28px; border:none; border-radius:10px; font-weight:500; display:inline-flex; align-items:center; gap:8px; text-decoration:none; box-shadow:0 6px 16px rgba(0,0,0,.12) }
.btn-primary{ background:var(--or-doux); color:var(--nuit) }
.btn-primary:hover{ background:var(--or-hover); transform:translateY(-1px) }
.btn-secondary{ background:transparent; color:var(--ivoire); border:2px solid rgba(250,247,242,.36) }
.btn-secondary:hover{ border-color:rgba(250,247,242,.85) }




/* === Accueil : masquer le "Home" et resserrer l'espace === */

/* Masque les headings du composant contenu sur la home,
   sans toucher au H1 du hero (.hero-text h1) */
.is-home main .page-header,
.is-home main .page-title,
.is-home main h1.page-title,
.is-home main .blog-featured .page-header,
.is-home main .blog-featured .page-title { display: none !important; }

/* Si le composant "Articles mis en avant" est vide, on supprime son espace */
.is-home main .blog-featured { margin: 0 !important; padding: 0 !important; }

/* Resserre le padding du bloc contenu juste sous le hero sur la home */
.is-home .ws-main.ws-container { padding-top: var(--spacing-sm) !important; }



/* ====== PATCH RESPONSIVE WORLDSUITE ====== */

/* ≤ 992px : tablette et mobile large */
@media (max-width: 991.98px){
  .ws-container{ padding: 24px 16px; }

  /* Header compact */
  .ws-header{ --header-h: 72px; }
  .ws-header-inner{ padding: 6px 0; }
  .ws-logo-img{ height: clamp(28px, 6vw, 40px); }

  /* Hero compact et 1 colonne */
  .hero{ padding: calc(var(--header-h) + 6px) 16px 28px; min-height: 0; }
  .hero-grid{ grid-template-columns: 1fr; gap: 20px; }
  .hero-text h1{ font-size: clamp(26px, 8vw, 34px); line-height: 1.15; }
  .hero-text p{ font-size: 16px; max-width: 100%; opacity: .95; }

  /* CTA lisibles au doigt */
  .hero-cta{ gap: 10px; }
  .btn{ padding: 12px 18px; border-radius: 10px; }
  .btn-primary, .btn-secondary{ width: 100%; justify-content: center; }

  /* Stats en 3 colonnes compactes */
  .hero-stats{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin-top: 16px; padding-top: 16px;
  }
  .hero-stat strong{ font-size: 20px; }
  .hero-stat span{ font-size: 12px; opacity: .85; }

  /* Visuel: cartes plus petites et sans débordement */
  .hero-card-stack{ height: 280px; }
  .hero-card{ width: 75vw; max-width: 320px; padding: 14px; border-radius: 14px; }
  .hero-card:nth-child(1){ top:0; left:0; transform:none; }
  .hero-card:nth-child(2){ top:40px; left:20px; }
  .hero-card:nth-child(3){ top:90px; left:40px; }
  /* Évite que le stack passe par-dessus le header */
  .hero-visual{ margin-top: 4px; }

  /* Transition hero → ivoire plus courte */
  .hero + .ws-sep{ height: 20px; }
}

/* ≤ 768px : mobile classique */
@media (max-width: 767.98px){

  /* Menu off-canvas: listes lisibles */
  #ws-nav .mod-menu > li > a{ font-size: 17px; padding: 12px 10px; }
  #ws-nav ul ul a{ padding: 8px 10px; font-size: 16px; }

  /* Grille cartes: 1 colonne, marges confortables */
  .assistants-section{ padding: 28px 16px 36px; }
  .cards-grid{ grid-template-columns: 1fr; gap: 16px; }
  .assistant-card{ padding: 16px; border-radius: 12px; }

  /* Typo carte plus courte pour éviter les pavés */
  .assistant-card .card-description{ font-size: 15px; line-height: 1.5; }
  .assistant-card h3{ font-size: 18px; margin: 6px 0 4px; }
  .card-features{ display: flex; flex-wrap: wrap; gap: 6px; }
  .feature-tag{ font-size: 12px; padding: 6px 8px; border-radius: 8px; background: #F6F2EC; }

  /* CTA carte plein largeur */
  .card-cta{ gap: 8px; }
  .card-cta .card-arrow{ transform: translateX(0); }
}

/* ≤ 380px : petits écrans étroits */
@media (max-width: 379.98px){
  .ws-logo-img{ height: 26px; }
  .hero-text h1{ font-size: 24px; }
  .hero-card{ width: 86vw; }
  .hero-card:nth-child(2){ left:12px; }
  .hero-card:nth-child(3){ left:24px; }
}


/* ===== HARD FIX MOBILE (≤ 768px) ===== */
@media (max-width: 767.98px){

  /* Conteneur plus étroit et lisible */
  .ws-container,
  .assistants-section{ padding: 24px 16px !important; }

  /* Grille: une seule colonne, quoi qu'il arrive */
  .cards-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Cartes: taille, interlignage et césure propres */
  .assistant-card{
    padding: 16px !important;
    border-radius: 12px !important;
  }
  .assistant-card h3{
    font-size: 18px !important;
    line-height: 1.25 !important;
    margin: 6px 0 8px !important;
  }
  .assistant-card .card-description,
  .assistant-card p{
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin: 8px 0 10px !important;
    overflow-wrap: anywhere;     /* évite les blocs trop longs */
    word-break: normal;
    hyphens: auto;
  }

  /* Tags: retour à la ligne naturel, plus compacts */
  .card-features{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 6px 0 8px !important;
  }
  .feature-tag{
    font-size: 12px !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    background: #F6F2EC !important;
  }

  /* CTA de carte: lisible et stable */
  .card-cta{
    gap: 8px !important;
    padding-top: 10px !important;
  }
  .card-cta span{ font-size: 15px !important; }

  /* Hero: titres et cartes plus petits, pas de débordement */
  .hero{ padding: calc(var(--header-h) + 6px) 16px 26px !important; min-height: 0 !important; }
  .hero-grid{ grid-template-columns: 1fr !important; gap: 20px !important; }
  .hero-text h1{ font-size: clamp(26px, 8vw, 34px) !important; line-height: 1.15 !important; }
  .hero-text p{ font-size: 16px !important; max-width: 100% !important; }
  .hero-card-stack{ height: 280px !important; }
  .hero-card{ width: 86vw !important; max-width: 340px !important; padding: 14px !important; }
  .hero-card:nth-child(1){ top:0; left:0; transform:none; }
  .hero-card:nth-child(2){ top:42px; left:14px; }
  .hero-card:nth-child(3){ top:94px; left:28px; }
  .hero + .ws-sep{ height: 20px !important; }
}

/* ===== PETITS ÉCRANS (≤ 360px) ===== */
@media (max-width: 359.98px){
  .ws-logo-img{ height: 24px !important; }
  .assistant-card h3{ font-size: 17px !important; }
  .assistant-card .card-description{ font-size: 14px !important; }
}


/* =========================
   FOOTER
   ========================= */
.ws-footer{ border-top:2px solid #E5E1DA; background:#fff }
.ws-footer-inner{ display:flex; align-items:center; justify-content:space-between }