/* ===============================
   Sensei Consult — UI refresh 2025
   "Modern AI startup" look
   =============================== */

/* 1) Fonts (Inter) — fallback system si bloqué */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* 2) Design tokens */
:root{
  /* Colors */
  --bg: #ffffff;
  --surface: #f8fafc;             /* fond carte doux */
  --text: #0f172a;                 /* slate-900 */
  --muted: #475569;                /* slate-600 */
  --border: #e2e8f0;               /* slate-200 */
  --primary: #3b82f6;              /* blue-500 */
  --primary-600: #2563eb;          /* hover */
  --primary-contrast:#ffffff;

  /* Accent (dégradé subtil pour CTA et focus ring) */
  --acc-start:#6d28d9;             /* violet-700 */
  --acc-end:#06b6d4;               /* cyan-500 */

  /* Radii & shadows */
  --radius: 16px;
  --shadow-sm: 0 1px 2px rgba(2,6,23,.06);
  --shadow-md: 0 10px 20px rgba(2,6,23,.07), 0 2px 6px rgba(2,6,23,.05);
  --shadow-lg: 0 18px 40px rgba(2,6,23,.10);

  /* Layout */
  --wrap: 1180px;
}

/* 3) Base */
*{ box-sizing: border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  font-feature-settings: "rlig" 1, "calt" 1;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }

/* 4) Layout helpers */
.wrap{ max-width:var(--wrap); margin:auto; padding:2.25rem 1.25rem; }
.grid{
  display:grid; gap:1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* 5) Typography */
h1,h2,h3{ line-height:1.2; margin:0 0 .7rem; letter-spacing:-0.01em; }
/* h1{ font-weight:700; font-size: clamp(2rem, 3.2vw, 2.6rem); } */
    h1{
      font-size:clamp(2rem, 3.2vw, 2.6rem);
      line-height:1.15;
      margin:0 0 14px;
      font-weight:800;
      color:#233c68;
      animation:fadeInUp 1s ease;
    }
h2{ font-weight:650; font-size: clamp(1.5rem, 2.5vw, 2rem); color:#4677ba;}
h3{ font-weight:650; font-size: clamp(1.25rem, 2vw, 1.5rem); color:#233c68;}

p{ margin:.3rem 0 1.05rem; }
ul{ margin:.25rem 0 1.1rem 1.15rem; }
li{ margin:.25rem 0; }
.muted{ color:var(--muted); font-size:.96rem; }

/* 6) Links & buttons */
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }

.btn, .button{
  --bg: var(--primary);
  display:inline-block;
  padding:.70rem 1rem;
  border-radius:12px;
  border:1px solid transparent;
  background: linear-gradient(135deg, var(--acc-start), var(--acc-end));
  color:var(--primary-contrast);
  font-weight:600;
  text-decoration:none;
  box-shadow: var(--shadow-sm);
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover, .button:hover{
  text-decoration:none;
  box-shadow: var(--shadow-md);
}
.btn:active, .button:active{ transform: translateY(1px); }
.btn--ghost{
  background:transparent; color:var(--text);
  border:1px solid var(--border);
}
.btn--ghost:hover{ background:var(--surface); }

/* Focus visible accessible */
a:focus-visible, button:focus-visible, .btn:focus-visible, .button:focus-visible{
  outline: 3px solid transparent;
  box-shadow: 0 0 0 3px rgba(255,255,255,.9),
             0 0 0 6px color-mix(in srgb, var(--acc-end) 60%, transparent);
  border-radius:12px;
}

/* 7) Cards */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); }
.card figure{ margin:0 auto; }

/* Listes dans les cartes : puces à l'extérieur + indent réduit */
.card ul{
  list-style: disc outside;
  margin-left: 0;
  padding-left: 1.1rem;  /* ajuste (1.0–1.4rem selon ton goût) */
}
.card ul li{ margin: .35rem 0; }

/* 8) Forms */
form{ display:grid; gap:1rem; max-width:680px; }
input, textarea, select{
  font:inherit;
  padding:.70rem .8rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  outline:none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, textarea:focus, select:focus{
  border-color: color-mix(in srgb, var(--acc-end) 45%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc-end) 18%, transparent);
}
button{ cursor:pointer; border:none; }
button.btn{ background: linear-gradient(135deg, var(--acc-start), var(--acc-end)); color:#fff; }

/* 9) Footer */
footer{
  border-top:1px solid var(--border);
  padding:2rem 1rem;
  text-align:center;
  font-size:.95rem;
  color:var(--muted);
}
footer a{ color:inherit; }

/* 10) Navbar (classes de menu.html) */
.sc-nav{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.85);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom:1px solid var(--border);
}
.sc-nav__inner{
  max-width:var(--wrap);
  margin:auto;
  display:flex; align-items:center; gap:1rem;
  padding:.75rem 1rem;
}
.sc-nav__brand img{ display:block; height:36px; width:auto; }
.sc-nav__toggle{
  background:#eef2f7; color:#111827;
  border:1px solid var(--border);
  width:44px; height:40px; border-radius:12px;
  display:none; align-items:center; justify-content:center;
  font-size:1.35rem; line-height:1;
}
.sc-nav__list{
  list-style:none; margin:0 0 0 auto; padding:0;
  display:flex; gap:1.15rem 1.25rem; align-items:center; flex-wrap:wrap;
}
.sc-nav__list a{
  display:block; padding:.5rem .6rem;
  color:var(--text);
  border-radius:10px;
}

.sc-nav__list a{
  display:block;
  padding:.70rem 1rem;     /* + hauteur & + largeur */
  font-size:1.05rem;       /* +5% de taille de police */
  font-weight:600;         /* semi-bold pour un look plus “bouton” */
  text-decoration:none;
  color:#222;
  border-radius:.65rem;    /* coins un peu plus arrondis */
}

.sc-nav__list a:hover,
.sc-nav__list a[aria-current="page"]{ background:#eef2f7; text-decoration:none; }
.sc-nav__lang{ opacity:.95; display:flex; gap:.35rem; align-items:center; white-space:nowrap; }
.sc-nav__lang span{ opacity:.5; }
.sc-nav__cta .btn{ padding:.55rem .8rem; }

/* Burger visible uniquement en mobile */
@media (max-width: 820px){
  .sc-nav__toggle{ display:inline-flex; }
  .sc-nav__list{ display:none; flex-direction:column; align-items:flex-start; width:100%; padding:.5rem 0; }
  .sc-nav__list.show{ display:flex; }
  .sc-nav__list a{ width:100%; }
  .sc-nav__cta .btn{ width:100%; text-align:center; }
}

/* 11) Utilities */
.lead{ font-size: clamp(1.05rem, 1.4vw, 1.15rem); color:var(--muted); }
hr{ border:none; border-top:1px solid var(--border); margin:1.25rem 0; }

/* 12) Small tweaks for hero spacing */
.hero{ padding: min(5vw, 48px) 0; }

/* ===== 1) Logo plus visible et navbar pleine  ===== */
.sc-nav{ background:#fff; }                 /* plein blanc, plus de "voile" */
.sc-nav__brand img{ height:48px; }          /* logo +grand en desktop */
@media (max-width:820px){
  .sc-nav__brand img{ height:38px; }        /* mobile légèrement +grand aussi */
}

/* Aligner le logo complètement à gauche en compensant le padding du conteneur */
.sc-nav__brand{ margin-left: -1.25rem; }   /* même valeur que le padding gauche de .sc-nav__inner */
@media (max-width:820px){
  .sc-nav__brand{ margin-left: -1rem; }    /* si ton padding mobile est de 1rem */
}

/* Harmonisation formulaire : titres + espacement */
.contact-card h2{ margin-bottom:.5rem; }
.contact-card form label{ font-weight:600; }

/* Bouton aligné pleine largeur sur petits écrans */
.contact-actions .btn{ min-width:160px; }

/* Honeypot anti-spam : présent dans le DOM, invisible pour l'utilisateur */
.hp{
  position:absolute !important;
  left:-10000px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

.contact-card form .row-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;     /* ligne / colonne */
}

/* Assure une mise en colonne propre dans chaque case */
.contact-card form .row-2 > div{
  display:flex; flex-direction:column; min-width:0;
}

/* Responsive : repasse en 1 colonne sur petits écrans */
@media (max-width: 700px){
  .contact-card form .row-2{ grid-template-columns: 1fr; }
}

/* Pile de boutons identiques */
.btn-stack{
  display: grid;
  gap: .6rem;                /* espacement vertical par défaut */
  margin-top: .5rem;
}

/* Même largeur + même "gabarit" visuel */
.btn-stack .btn{
  display: flex;
  align-items: center;
  justify-content: center;   /* texte centré */
  width: 100%;               /* tous prennent la même largeur */
  min-height: 52px;          /* hauteur mini identique (1 ou 2 lignes ok) */
  text-align: center;
  white-space: normal;       /* autorise le retour à la ligne si nécessaire */
}

/* En grand écran: 3 colonnes alignées */
@media (min-width: 900px){
  .btn-stack{
    grid-template-columns: repeat(3, 1fr);  /* 3 colonnes */
    gap: .9rem;                              /* un peu plus d'air */
  }
  .btn-stack .btn{ width: 100%; }            /* s’étire dans sa colonne */
}

/* HERO : 2 colonnes en desktop, 1 colonne en mobile */
.hero-wrap{
  display: grid;
  grid-template-columns: 2fr 1.5fr; 
  gap: 2rem;
  align-items: start;
  margin-bottom: 1.25rem;
}

/* Empiler en mobile même s'il y a un style inline sur la section */
@media (max-width: 900px){
  .hero-wrap{
    display: block !important;        /* au pire, on sort du grid */
    grid-template-columns: 1fr !important;
  }
  .hero-media{ margin-top: 1rem; }    /* petit espace au-dessus de la vidéo */
  .hero-media video{ width:100%; height:auto; }
}

/* Vidéo responsive */
.hero-media video{
  max-width: 850px
  width: auto;
  height: auto;
  display: block;
  border-radius: 12px; /* optionnel : mets 0 si tu veux des angles droits */
}

/* --- HERO: corrections mobiles --- */

/* 1) Autoriser les colonnes à rétrécir (répare le comportement grid sur mobile) */
.hero-wrap > * { min-width: 0; }  /* texte + vidéo peuvent prendre 100% en empilant */

/* 2) Grille: 2 colonnes en desktop, 1 colonne en mobile */


/* Empile en dessous de 900px */
/* !important pour écraser un éventuel style inline résiduel */
@media (max-width: 900px){
  .hero-wrap{
    grid-template-columns: 1fr !important;
  }
  .hero-media{ margin-top: 1rem; }
}

/* 3) Vidéo responsive, aucune largeur “fixe” qui déborde */
.hero-media video{
  width: auto;
  height: 100%;
  max-width: 100%;
  display: block;
  object-fit: cover;     /* recadre proprement si nécessaire */
  border-radius: 12px;   /* mets 0 si tu veux des angles droits */
}

/* Empiler des sections avec un espacement régulier */
.stack {
  display: grid;
  gap: clamp(14px, 2.2vw, 22px); /* adapte l’écart selon la largeur */
}
.stack > * { margin: 0; } /* au cas où un bloc aurait un margin par défaut */


/* AJOUT DU 27-08-2025 */

/* === Variables (si pas déjà présentes) === */
:root{
  --sc-blue-logo:#2A6FB0;
  --sc-blue-cta:#2563EB;
  --sc-violet-cta:#6D28D9;
  --text:#0f172a;
  --muted:#475569;
  --card-bg:#f8fafc;
  --border:#e2e8f0;
  --radius:16px;
  --shadow:0 6px 24px rgba(2,6,23,.08), 0 2px 8px rgba(2,6,23,.06);
}

/* === Boutons CTA en dégradé === */
.btn-primary{
  color:#fff;
  background:linear-gradient(90deg,var(--sc-violet-cta),var(--sc-blue-cta));
  box-shadow:0 8px 24px rgba(37,99,235,.25);
}
.btn-primary:hover{ filter:brightness(1.03); }

/* === Cartes (encarts) — base commune === */
.card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:20px;
  padding:18px;
  box-shadow:var(--shadow);
}
.card .icon{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center; margin-bottom:10px;
  background:rgba(42,111,176,.09); color:var(--sc-blue-logo);
}

/* === Thème dynamique === */
body.theme-dynamique{
  background:linear-gradient(180deg,#ffffff 0%, #f3f8ff 100%);
}

/* Effet glass sur les cartes seulement en thème dynamique */
body.theme-dynamique .card{
  background:rgba(255,255,255,.75);
  backdrop-filter:saturate(140%) blur(4px);
}

/* Blobs décoratives (cachées par défaut en HTML via [hidden]) */
.blob{
  position:fixed; inset:auto; pointer-events:none; z-index:-1;
  filter:blur(40px); opacity:.5;
}
.blob.one{
  width:420px; height:420px; right:-120px; top:80px;
  background:radial-gradient(circle at 30% 30%, #b3cfff 0%, transparent 60%);
}
.blob.two{
  width:360px; height:360px; left:-120px; bottom:40px;
  background:radial-gradient(circle at 70% 70%, #d3c3ff 0%, transparent 65%);
}

/* Vidéo card (si tu l’utilises sur l’accueil) */
.video-card{
  border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
  background:#000; aspect-ratio:16/9; position:relative;
}
.video-card .badge{
  position:absolute; right:12px; bottom:12px;
  color:#fff; font-size:12px; opacity:.8;
}

.video-wrap{
  position:relative;
  aspect-ratio:auto;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  background:#000;
}

/* Cadre dégradé subtil */
.video-wrap::before{
  content:"";
  position:absolute; inset:0;
  border-radius:18px;
  padding:1px;
  background:linear-gradient(90deg,#6D28D9,#2563EB);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
  opacity:.55;
}

.video-wrap video{width:100%; height:100%; object-fit:cover; display:block}



.video-play{
  position:absolute; inset:0; margin:auto;
  width:84px; height:84px; border-radius:999px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.85);
  border:0; cursor:pointer;
  transition:transform .15s ease, background .2s ease;
}
.video-play:hover{ transform:scale(1.04); background:#fff; }
.video-play .triangle{
  width:0; height:0;
  border-left:22px solid #233c68;
  border-top:14px solid transparent;
  border-bottom:14px solid transparent;
  margin-left:4px;
}

.video-badge{
  position:absolute; right:12px; bottom:10px;
  font:600 12px/1.2 system-ui, sans-serif;
  color:#fff; padding:6px 8px; border-radius:10px;
  background:rgba(0,0,0,.45);
}

.video-wrap.is-playing .video-play{ opacity:0; pointer-events:none; }

.video-wrap video::-webkit-media-controls-start-playback-button{
  display:none !important;
  -webkit-appearance:none;
}

/* Bouton du bas */
.cta-below{ margin-top:2rem; }           /* ou margin:2rem 0 2.5rem; */
.cta-below .button{ display:inline-block; }

/* 1) le form ne doit pas être limité à 680px */
form{
  display: grid;
  gap: 1rem;
  max-width: 100%;          /* au lieu de 680px */
}

/* 2) faire occuper toute la largeur aux champs */
input, textarea, select{
  width: 100%;
  box-sizing: border-box;    /* pour inclure le padding dans la largeur */
}

/* (optionnel) si un parent crée une grille à 2 colonnes,
   et que tu veux t'assurer que le textarea prend toute la largeur : */
textarea#message{
  grid-column: 1 / -1;       /* span toutes les colonnes de la grille parente */
}