/* ==================================================
   FONTS
   ================================================== */

/* Open Sans — corps */
@font-face{
  font-family:"Open Sans";
  src:url("/fonts/OpenSans-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Open Sans";
  src:url("/fonts/OpenSans-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* Chillax — titres */
@font-face{
  font-family:"Chillax";
  src:url("/fonts/Chillax-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Chillax";
  src:url("/fonts/Chillax-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* ==================================================
   MATERIAL SYMBOLS — local
   fichiers :
   /fonts/MaterialSymbolsOutlined.woff2
   /fonts/MaterialSymbolsOutlined.woff
   ================================================== */
@font-face{
  font-family:"Material Symbols Outlined";
  font-style:normal;
  font-weight:100 700;
  src:
    url("/fonts/MaterialSymbolsOutlined.woff2") format("woff2"),
    url("/fonts/MaterialSymbolsOutlined.woff") format("woff");
  font-display:swap;
}
.material-symbols-outlined{
  font-family:"Material Symbols Outlined";
  font-variation-settings:
    "FILL" 0,
    "wght" 200,
    "GRAD" -25,
    "opsz" 24;
  display:inline-block;
  line-height:1;
}

/* ==================================================
   VARIABLES
   ================================================== */
:root{
  --navy:#08345B;
  --navy-dark:#061A2C;
  --blue:#5088FF;
  --turq:#00CEB9;
  --yellow:#FAB928;

  --bg:#f7fafd;
  --ink:#0b2239;
  --muted:#4b6075;

  --radius:8px;
}

/* ==================================================
   RESET / BASE
   ================================================== */
*,
*::before,
*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:400;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

/* ==================================================
   TYPO — titres globaux (H2/H3 partout pareil)
   ================================================== */
h2, h3{
  margin:0;
  font-family:"Chillax","Open Sans",system-ui,sans-serif;
  font-weight:700;
  color:var(--ink);
}

h2{
  font-size:40px;
  line-height:1.1;
  letter-spacing:-0.4px;
}

h3{
  font-size:24px;
  line-height:1.15;
  letter-spacing:-0.2px;
}

@media (max-width: 640px){
  h2{ font-size:32px; }
  h3{ font-size:20px; }
}

/* ==================================================
   LAYOUT
   ================================================== */
.container{
  width:min(1100px,calc(100% - 48px));
  margin:0 auto;
}

.section{
  padding:72px 0;
}

@media (max-width: 640px){
  .section{ padding:56px 0; }
}

/* ==================================================
   HERO
   ================================================== */
.hero{
  position:relative;
  min-height:100vh;
  width:100%;
  display:grid;
  place-items:center;
  text-align:center;
  color:#fff;
  overflow:hidden;
  background:var(--navy-dark);
}

@media (min-width:1600px) and (min-height:900px){
  .hero{
    min-height:88vh;
    max-height:900px;
  }
}

.hero__bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(0deg,rgba(8,52,91,.78),rgba(8,52,91,.78)),
    url("/images/groupe-travail-eam-synidia.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.02);
  filter:saturate(1.03);
}

.hero__inner{
  position:relative;
  z-index:1;
  width:min(1000px,calc(100% - 48px));
  padding:72px 0;
  display:grid;
  gap:22px;
  justify-items:center;
}

.hero__brand{
  margin-bottom:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.hero__logo{
  height:56px;
  width:auto;
}

@media (max-width: 640px){
  .hero__inner{ padding:100px 0; }
  .hero__logo{ height:48px; }
}

.hero__title{
  margin:0;
  font-family:"Chillax","Open Sans",system-ui,sans-serif;
  font-size:clamp(34px,4vw,56px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.4px;
}

.hero__subtitle{
  margin:0;
  max-width:70ch;
  font-size:16px;
  line-height:1.65;
  color:rgba(255,255,255,.88);
}

.hero__actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
}

/* ==================================================
   BUTTONS
   ================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 22px;
  border-radius:var(--radius);
  font-family:"Open Sans",system-ui,sans-serif;
  font-size:14px;
  font-weight:700;
  border:0;
  cursor:pointer;
  transition:background .15s ease,transform .15s ease;
  white-space:nowrap;
}

.btn--primary{
  background:var(--blue);
  color:#fff;
}
.btn--primary:hover{ background:#3f76f0; }
.btn--primary:active{ transform:translateY(1px); }

.btn--ghost{
  background:rgba(255,255,255,.14);
  color:#fff;
}
.btn--ghost:hover{ background:rgba(255,255,255,.22); }
.btn--ghost:active{ transform:translateY(1px); }

/* ==================================================
   DOTS — animation signature
   ================================================== */
.dots{
  display:inline-flex;
  margin-left:8px;
  gap:2px;
}

.d{
  font-size:1.2em;
  line-height:1;
  opacity:.25;
  display:inline-block;
  transform: translateY(0);
  animation:dotsBounce 1.35s ease-in-out infinite;
}

.d1{ color:var(--yellow); animation-delay:0s; }
.d2{ color:var(--blue);   animation-delay:.16s; }
.d3{ color:var(--turq);   animation-delay:.32s; }

@keyframes dotsBounce{
  0%, 70%, 100% { opacity:.25; transform:translateY(0); }
  30% { opacity:1; transform:translateY(-2px); }
}

/* ==================================================
   SECTION HEAD (points au-dessus du titre, titre centré)
   ================================================== */
.section-head{
  text-align:center;
  margin-bottom:34px;
}

.section-dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin-bottom:14px;
}

.dot{
  width:14px;
  height:14px;
  border-radius:999px;
  display:inline-block;
}
.dot--yellow{ background:var(--yellow); }
.dot--blue{ background:var(--blue); }
.dot--turq{ background:var(--turq); }

/* On garde la classe pour le centrage / layout (la typo est gérée par h2) */
.section-title-center{
  text-align:center;
}

/* ==================================================
   SECTIONS — thèmes
   ================================================== */
.section--white{
  background:#fff;
  color:var(--ink);
}
.section--navy{
  background:var(--navy);
  color:#fff;
}
.section--offers{
  background:#F4F6F8;
  color:var(--ink);
}
.section--cta{
  background:var(--navy);
  color:#fff;
}

/* Titres sur fond sombre */
.section--navy h2,
.section--navy h3,
.section--cta h2,
.section--cta h3{
  color:#fff;
}

/* ==================================================
   CARDS — base
   ================================================== */
.card{
  border-radius:14px;
  overflow:hidden;
}

.card__text{
  margin:0;
  line-height:1.65;
  font-size:15px;
  color:var(--ink);
}

/* ==================================================
   ORIGINE — split (image + texte)
   ================================================== */
.card--split{
  background:#F4F6F8;
  display:grid;
  grid-template-columns:1.05fr 1.2fr;
  min-height:210px;
  color:var(--ink);
}

.card__media{ height:100%; }

.card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.card__body{
  padding:22px 26px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
}

@media (max-width: 900px){
  .card--split{
    grid-template-columns:1fr;
    min-height:unset;
  }
  .card__media{ height:auto; }
  .card__media img{ height:auto; }
}

/* ==================================================
   GRIDS
   ================================================== */
.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:22px;
}
@media (max-width: 900px){
  .grid-2{ grid-template-columns:1fr; }
}

/* Spécifique section "origine" */
.grid-2--origin{
  align-items:stretch;
  margin-top:22px;
}
@media (max-width: 900px){
  .grid-2--origin{ margin-top:18px; }
}

/* Fix : le bloc split doit toujours span toute la grille dans #origine */
#origine .grid-2.grid-2--origin > .card.card--split{
  grid-column:1 / -1 !important;
}

/* Ajustement : espace interne entre image et texte sur le split Origine */
#origine .card--split{
  column-gap:22px;
}
@media (min-width: 901px){
  #origine .card--split{
    grid-template-columns:1fr 1fr;
  }
}

/* ==================================================
   ORIGINE — cartes soft (Héritage / Centre)
   ================================================== */
.card--soft{
  background:#F4F6F8;
  padding:22px 22px 24px;
  color:var(--ink);
}

/* Version icône à gauche + grande + centrée verticalement */
#origine .card--soft.card--icon-left{
  display:flex;
  gap:20px;
  align-items:center;
}

#origine .card--soft.card--icon-left .icon-wrap{
  flex:0 0 92px;
  width:92px;
  height:92px;
  border-radius:18px;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:0;
}

#origine .card--soft.card--icon-left .material-symbols-outlined{
  color:var(--turq);
  font-size:70px;
}

#origine .card--soft.card--icon-left .card__content{
  display:flex;
  flex-direction:column;
  gap:6px;
}

@media (max-width: 520px){
  #origine .card--soft.card--icon-left{
    flex-direction:column;
    align-items:flex-start;
  }
  #origine .card--soft.card--icon-left .icon-wrap{
    width:84px;
    height:84px;
    flex-basis:84px;
  }
  #origine .card--soft.card--icon-left .material-symbols-outlined{
    font-size:62px;
  }
}

/* ==================================================
   VIDÉO — Origine (YouTube responsive + pleine largeur)
   ================================================== */

/* Le bloc vidéo occupe toute la largeur de la grille (comme le bloc Apave) */
#origine .grid-2--origin > .card--video{
  grid-column: 1 / -1;
}

/* Wrapper responsive 16:9 */
#origine .video-wrapper{
  position:relative;
  width:100%;
  padding-top:56.25%; /* 16:9 */
  overflow:hidden;
  border-radius:12px;
}

/* Iframe plein cadre */
#origine .video-wrapper iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* Optionnel : padding plus clean pour la card vidéo */
#origine .card--video{
  padding:18px;
}
@media (max-width: 640px){
  #origine .card--video{
    padding:14px;
  }
}

/* ==================================================
   KPI
   ================================================== */
.kpi-hero{
  border-radius:18px;
  overflow:hidden;
  background:#0b2e51;
}

.kpi-hero__img{
  width:100%;
  height:420px;
  object-fit:cover;
}
@media (max-width: 900px){
  .kpi-hero__img{ height:320px; }
}

.kpi-grid{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  text-align:center;
}

.kpi{
  padding:8px 6px;
}

.kpi__icon{
  width:112px;
  height:112px;
  border-radius:999px;
  background:rgba(255,255,255,.98);
  margin:0 auto 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  box-shadow: inset 0 0 0 2px rgba(0,206,185,.22);
}

.kpi__icon::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(0,206,185,.35), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(80,136,255,.25), transparent 55%);
  opacity:.65;
  filter: blur(10px);
  pointer-events:none;
}

.kpi__icon .material-symbols-outlined{
  color:var(--turq);
  font-size:56px;
  font-variation-settings:
    "FILL" 1,
    "wght" 200,
    "GRAD" -25,
    "opsz" 24;
  line-height:1;
  display:inline-block;
}

.kpi__value{
  font-family:"Chillax","Open Sans",system-ui,sans-serif;
  font-weight:700;
  font-size:30px;
  letter-spacing:-0.2px;
  color:#fff;
}

.kpi__label{
  margin-top:6px;
  font-size:13px;
  color:rgba(255,255,255,.85);
}

@media (max-width: 900px){
  .kpi-grid{
    display:flex;
    gap:14px;
    overflow-x:auto;
    padding:6px 2px 12px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .kpi{
    flex:0 0 78%;
    scroll-snap-align:center;
    scroll-snap-stop:always;
  }
}
@media (max-width: 520px){
  .kpi{ flex-basis:86%; }
}

/* Scrollbar discret */
.kpi-grid{
  scrollbar-width:thin;
  scrollbar-color: rgba(255,255,255,.25) transparent;
}
.kpi-grid::-webkit-scrollbar{ height:8px; }
.kpi-grid::-webkit-scrollbar-track{ background:transparent; }
.kpi-grid::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.22);
  border-radius:999px;
}

/* Hover (desktop) */
@media (hover:hover){
  .kpi__icon{ transition: transform .15s ease; }
  .kpi:hover .kpi__icon{ transform: translateY(-2px); }
}

/* ==================================================
   OFFRES
   ================================================== */
.offer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
@media (max-width: 900px){
  .offer-grid{ grid-template-columns:1fr; }
}

.offer-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  color:var(--ink);
}

.offer-card__media img{
  width:100%;
  height:230px;
  object-fit:cover;
}

.offer-card__body{
  padding:22px 24px 26px;
}

.offer-card__text{
  margin:0;
  line-height:1.65;
  font-size:15px;
  color:var(--ink);
}

/* le split Mainta prend toute la largeur */
#offres .grid-2--offers-intro > .card{
  grid-column: 1 / -1;
}

/* OFFRES — split Mainta : 1/4 - 3/4 */
#offres .grid-2--offers-intro .card--split{
  grid-template-columns: 1fr 3fr;
}


@media (max-width: 768px){
  #offres .grid-2--offers-intro .card--split{
    grid-template-columns: 1fr;
  }
}

#offres .card__media--logo{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
}


/* fond blanc spécifique à Mainta */
#offres .card--white{
  background:#fff;
}

/* media spécifique logo (pas full-cover comme une image) */
#offres .card__media--logo{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}

#offres .card__media--logo img{
  max-width:220px;
  width:100%;
  height:auto;
}

/* respiration verticale avant les cartes offres */
#offres .grid-2--offers-intro{
  margin-bottom:32px;
}

@media (max-width: 640px){
  #offres .grid-2--offers-intro{
    margin-bottom:24px;
  }
}


/* ==================================================
   CTA — formulaire
   ================================================== */
.cta-title{
  margin:0 0 10px;
  font-family:"Chillax","Open Sans",system-ui,sans-serif;
  font-weight:700;
  font-size:28px;
  letter-spacing:-0.3px;
  color:#fff;
}

.cta-lead{
  margin:0 0 18px;
  color:rgba(255,255,255,.86);
  max-width:75ch;
  line-height:1.7;
}

.form--cta{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media (max-width: 820px){
  .form--cta{ grid-template-columns:1fr; }
}

.field label{
  display:block;
  font-size:13px;
  font-weight:700;
  margin-bottom:6px;
  color:rgba(255,255,255,.9);
}

.field input,
.field select{
  width:100%;
  padding:12px 14px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  color:#fff;
  outline:none;
  font-family:"Open Sans",system-ui,sans-serif;
}

.field input::placeholder{ color:rgba(255,255,255,.65); }

.field select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.75) 50%),
    linear-gradient(135deg, rgba(255,255,255,.75) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:34px;
}

.form-actions{
  grid-column:1 / -1;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:4px;
}

.section--cta .btn--primary{
  background:var(--blue);
  color:#fff;
}
.section--cta .btn--primary:hover{ background:#3f76f0; }

.section--cta .btn--ghost{
  background:rgba(255,255,255,.14);
  color:#fff;
}
.section--cta .btn--ghost:hover{ background:rgba(255,255,255,.22); }

.fineprint{
  grid-column:1 / -1;
  margin:10px 0 0;
  font-size:12px;
  line-height:1.5;
  color:rgba(255,255,255,.75);
}

/* ==================================================
   FOOTER
   ================================================== */

/* footer par défaut (fond clair) */
.footer{
  margin-top:0px;
  padding:20px 0;
  border-top:1px solid rgba(11,34,57,.12);
  font-size:13px;
  color:var(--muted);
}

.footer .links a,
.footer .social a{
  color:var(--ink);
}
.footer .links a:hover,
.footer .social a:hover{
  text-decoration:underline;
}

/* variante dark (fond navy) */
.footer--dark{
  background:var(--navy);
  border-top:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.78);
}

.footer--dark .links a,
.footer--dark .social a{
  color:rgba(255,255,255,.82);
}
.footer--dark .links a:hover,
.footer--dark .social a:hover{
  color:#fff;
  text-decoration:underline;
}

.footer__row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.footer .links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}


/* Espacement titre → texte dans les cards */
.offer-card__body h3,
.card__body h3,
.card__content h3{
  margin-bottom:8px;
}

/* Origine : espacement plus serré */
#origine .card__body h3,
#origine .card__content h3{
  margin-bottom:4px;
}

#demo select,
#demo select option,
#demo select optgroup{
  font-family: "Open Sans",system-ui,sans-serif;
}
#demo select option,
#demo select optgroup{
  color:#0b2239;
  background:#fff;
}