:root{
  /* Brand */
  --color-primary: #476582;
  --color-accent: #C0442A;
  --color-text: #476582;
  --color-muted: #5a5e6b;
  --color-bg: #F7F8FA;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.06);
  --shadow-md: 0 8px 30px rgba(0,0,0,.08);
  --transition: .25s ease;
  --container: 1200px;

  /* Fluid type scale */
  --fs-300: clamp(.92rem, .86rem + .3vw, 1rem);
  --fs-400: clamp(1rem, .9rem + .6vw, 1.125rem);
  --fs-500: clamp(1.125rem, 1rem + .8vw, 1.25rem);
  --fs-600: clamp(1.35rem, 1.1rem + 1.4vw, 1.75rem);
  --fs-700: clamp(1.7rem, 1.2rem + 2.4vw, 2.25rem);
  --fs-800: clamp(2rem, 1.4rem + 3.2vw, 3rem);
}

*,
*::before,
*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin:0;
  color:var(--color-text);
  background:
    radial-gradient(1200px 600px at 25% -10%, rgba(71,101,130,.06), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(192,68,42,.05), transparent 60%),
    var(--color-bg);
  line-height:1.65;
  font-size:var(--fs-400);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block}

a{
  color:var(--color-primary);
  text-decoration:none;
  text-underline-offset: .2em;
  transition:color var(--transition);
}
a:hover{color:var(--color-accent)}

.container{max-width:var(--container);margin-inline:auto;padding-inline: clamp(1rem, 4vw, 2rem)}

/* Header */
#services,
#plateformes,
#cas-usage,
#form-contact {
  scroll-margin-top: 250px; /* Adaptez cette valeur à la hauteur de votre header */
}
header{position:sticky; top:0; z-index:50; background:#fff; box-shadow: var(--shadow-sm)}
.header-flex{display:flex;justify-content:space-between;align-items:center;padding: .9rem 0}
.site-branding{display:flex;align-items:center;gap:.75rem}
.logo{max-width:400px}
.header-right{display:flex;align-items:center;gap:.5rem}
.contact-tel a{display:flex;align-items:center;gap:.2rem;font-weight:500;color:var(--color-muted)}
.icon-phone{height:42px}
.tel-text{color:#476582}

.nav-main{display:flex;gap:1.25rem;justify-content:center;padding:.6rem 0;border-top:1px solid rgba(31,41,55,.08);background:#fff}
.nav-main a{font-weight:600;position:relative}
.nav-main a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--color-primary);transition:width var(--transition)}
.nav-main a:hover::after{width:100%;background:var(--color-accent)}

/* Intro */
.section-intro{padding: clamp(2rem, 4vw, 3rem) 0; text-align:center}
h1{font-size:var(--fs-800); margin:.2rem 0 .6rem 0; font-weight:700; letter-spacing:-.02em}
h2{font-size:var(--fs-600); margin:0 0 .5rem 0; color:var(--color-accent); font-weight:700}
h3{font-size:var(--fs-500); margin:0 0 .5rem 0; color:var(--color-accent); font-weight:600}

/* Banners */
.banner img {
  border-radius: var(--radius-lg);
}
.banner{margin: clamp(2rem, 6vw, 3.5rem) 0 1rem; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-sm)}

/* Cards and grids */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap: clamp(1rem, 2.5vw, 1.5rem); margin-top: 1.25rem}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap: clamp(1rem, 3vw, 2rem); margin-top: 1.25rem}

.card,.case{
  background:#fff;border-radius:var(--radius-lg);padding: clamp(1rem, 3vw, 1.5rem);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover,.case:hover{transform:translateY(-3px); box-shadow: var(--shadow-md)}
.card p,.case p{color:var(--color-muted)}

/* Buttons */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.75rem 1.1rem; border-radius:999px;
  background:linear-gradient(180deg, var(--color-primary), #3c546a);
  color:#fff; border:0; cursor:pointer; font-weight:600;
  box-shadow: 0 6px 16px rgba(71,101,130,.25);
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(71,101,130,.28); filter:saturate(1.05)}

/* Footer */
.footer{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 0;font-size:var(--fs-300);border-top:1px solid rgba(31,41,55,.1)}

/* Mobile nav */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.5rem}
.hamburger,.hamburger::before,.hamburger::after{
  content:"";display:block;width:24px;height:3px;background:var(--color-text);border-radius:2px;transition:var(--transition);position:relative
}
.hamburger::before{top:-7px;position:relative}
.hamburger::after{top:4px;position:relative}
.nav-main.nav-open{display:flex;flex-direction:column;align-items:center;gap:1rem}

/* Contact section + Google Forms iframe */
#form-contact{scroll-margin-top:80px}
.form-intro{color:var(--color-muted)}
.iframe-wrap{
  width:100%;
  max-width: 920px;
  margin-inline:auto;
  background:#fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow:hidden;
}
.iframe-wrap iframe{
  display:block;
  width:100%;
  border:0;
  /* Reasonable heights. 100svh on small screens, else intrinsic height or min 900px */
  height: min(1251px, 100svh);
  min-height: 900px;
}
.iframe-caption{
  font-size: var(--fs-300);
  color: var(--color-muted);
  text-align:center;
  padding: .75rem 1rem 1rem;
}

/* Utilities */
.hidden{display:none !important}

/* Responsive */
@media (max-width: 900px){
  .logo{max-width:200px}
  .nav-main{display:none}
  .nav-toggle{display:block}
  .iframe-wrap iframe{min-height: 80svh}
}
@media (max-width: 480px){
  h1{letter-spacing:-.015em}
  .header-flex{flex-direction:column;gap:.5rem;text-align:center}
  .tel-text{display:none}
}