/* ============================================================
   DR RH — Site marketing
   Charte : coral (#EF7E63) + navy (#2E3A4F) sur fond blanc
   ============================================================ */

:root{
  --coral:        #EF7E63;
  --coral-light:  #F6A48E;
  --coral-dark:   #E5694C;
  --coral-soft:   #FCEAE3;
  --coral-bg:     #FAE3DA;
  --navy:         #2E3A4F;
  --navy-deep:    #263141;
  --navy-soft:    #5A6679;
  --ink:          #2E3A4F;
  --muted:        #7A8597;
  --line:         #EDEFF3;
  --white:        #ffffff;
  --bg-soft:      #FAFBFC;
  --green:        #3DBE7B;
  --radius:       18px;
  --radius-lg:    26px;
  --shadow:       0 18px 50px -20px rgba(46,58,79,.28);
  --shadow-sm:    0 8px 24px -12px rgba(46,58,79,.20);
  --maxw:         1180px;
  --gradient:     linear-gradient(135deg, var(--coral-light), var(--coral-dark));
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:clip; }
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:'Poppins',sans-serif; line-height:1.14; color:var(--navy); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative; z-index:1; }
.accent{ color:var(--coral); }

/* Billes décoratives (rappel du logo) */
.bille{
  position:absolute; border-radius:50%; background:var(--coral); pointer-events:none; z-index:0;
  animation:billeFloat 8s ease-in-out infinite;
}
.bille.soft{ background:var(--coral-light); }
.bille.pale{ background:var(--coral-bg); }
.bille.ring{ background:transparent; border:3px solid var(--coral); }
/* durées/phases variées pour un mouvement désynchronisé */
.bille:nth-of-type(2n){ animation-duration:10.5s; animation-delay:-2.5s; }
.bille:nth-of-type(3n){ animation-duration:7s;    animation-delay:-5s; }
.bille:nth-of-type(4n){ animation-duration:9s;    animation-delay:-3.5s; }
@keyframes billeFloat{
  0%   { transform:translate(0,0); }
  33%  { transform:translate(4px,-12px); }
  66%  { transform:translate(-4px,-5px); }
  100% { transform:translate(0,0); }
}
@media (prefers-reduced-motion: reduce){ .bille{ animation:none; } }
.features,.audience,.indicators,.dashboards,.benefits,.testimonials,.pricing,.cta{ position:relative; overflow:hidden; }
.pricing{ overflow:visible; } /* garde le badge "Le plus populaire" visible */
@media (max-width:680px){ .bille{ display:none; } }
section[id]{ scroll-margin-top:110px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:.92rem;
  padding:.72em 1.4em; border-radius:999px; cursor:pointer; border:0;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--gradient); color:#fff; box-shadow:0 10px 24px -10px var(--coral-dark); }
.btn-ghost{ background:transparent; color:var(--navy); border:1.5px solid var(--line); }
.btn-ghost:hover{ border-color:var(--coral); color:var(--coral-dark); }
.btn-outline{ background:transparent; color:var(--coral-dark); border:1.5px solid var(--coral); }
.btn-outline:hover{ background:var(--coral-soft); }
.btn-lg{ padding:.9em 1.7em; font-size:1rem; }

/* ===== Barre de navigation de la suite ===== */
.suite-topbar{ background:#fff; border-bottom:1px solid #ececf0; position:relative; z-index:60; }
.suite-topbar__inner{ max-width:1180px; margin:0 auto; padding:0 24px 0 14px; min-height:44px; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.suite-topbar a{ font-family:'Poppins',sans-serif; font-size:.84rem; font-weight:500; color:#8a8a92; padding:6px 14px; border-radius:999px; text-decoration:none; transition:color .2s, background .2s; }
.suite-topbar a:hover{ color:#15151a; background:#f4f4f6; }
.suite-topbar a.is-active{ color:#15151a; font-weight:700; }

/* ===== Pastilles latérales (bandes logos) ===== */
.suite-switch{position:fixed;top:62px;z-index:400;height:56px;display:inline-flex;align-items:center;
  padding:0 18px;background:#fff;text-decoration:none;
  box-shadow:0 14px 34px rgba(0,0,0,.15);transition:padding .2s ease, box-shadow .2s ease;}
.suite-switch:hover{box-shadow:0 18px 42px rgba(0,0,0,.24);}
.suite-switch img{height:30px;width:auto;display:block;}
.suite-switch--left{left:0;border-radius:0 16px 16px 0;padding-left:16px;}
.suite-switch--left:hover{padding-left:26px;}
.suite-switch--right{right:0;border-radius:16px 0 0 16px;padding-right:16px;}
.suite-switch--right:hover{padding-right:26px;}
@media(max-width:1240px){.suite-switch{display:none;}}

/* ===== Bloc certification Qualiopi (footer) ===== */
.footer-certif{ text-align:left; padding-top:6px; padding-bottom:4px; }
.qualiopi-certif{ display:inline-block; width:100%; max-width:300px; border-radius:10px; overflow:hidden; transition:opacity .2s ease; }
.qualiopi-certif img{ width:100%; height:auto; display:block; border-radius:10px; }
.qualiopi-certif:hover{ opacity:.9; }
.qualiopi-text{ font-size:.78rem; line-height:1.45; margin-top:10px; max-width:300px; color:rgba(255,255,255,.72); }
.qualiopi-text strong{ display:inline-block; margin-top:3px; font-weight:700; color:var(--coral); }

/* ============ HEADER (pastille flottante) ============ */
.site-header{
  position:sticky; top:0; z-index:50;
  padding:18px 0;
}
.header-inner{
  display:flex; align-items:center; gap:24px;
  background:#fff; border-radius:999px;
  padding:16px 16px 16px 28px;
  box-shadow:0 14px 40px -18px rgba(46,58,79,.30);
  border:1px solid rgba(237,239,243,.9);
}
.brand{ display:flex; align-items:center; }
.brand-logo{ height:42px; width:auto; }
.main-nav{ margin-left:auto; }
/* Menu centré (desktop) */
@media (min-width:761px){ .main-nav{ flex:1; display:flex; justify-content:center; margin:0; } }
.main-nav a.active{ color:var(--coral-dark); font-weight:700; }
.main-nav ul{ display:flex; align-items:center; gap:4px; list-style:none; }
.main-nav a{
  display:inline-flex; align-items:center; gap:4px;
  font-size:.9rem; font-weight:500; color:var(--navy-soft);
  padding:.5em .8em; border-radius:999px; transition:.2s;
}
.main-nav > ul > li > a:hover{ color:var(--navy); background:var(--coral-soft); }
.caret{ font-size:.7em; opacity:.7; }
.has-sub{ position:relative; }
.submenu{
  position:absolute; top:100%; left:0; min-width:240px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:8px; display:none; flex-direction:column; gap:2px;
}
.submenu a{ color:var(--navy-soft); }
.submenu a:hover{ background:var(--coral-soft); color:var(--navy); }
.has-sub:hover .submenu{ display:flex; }
.header-actions{ display:flex; align-items:center; gap:10px; }
.nav-mobile-cta{ display:none; }

.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.burger span{ width:24px; height:2.5px; background:var(--navy); border-radius:2px; transition:.3s; }
.burger.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ============ HERO ============ */
.hero{ position:relative; padding:30px 0 90px; overflow:hidden; }
.hero-blob{
  position:absolute; top:-120px; right:-100px; width:680px; height:680px;
  background:radial-gradient(circle at 40% 40%, var(--coral-bg), rgba(246,164,142,.55) 72%, transparent 78%);
  border-radius:48% 52% 56% 44% / 52% 46% 54% 48%;
  z-index:0;
}
.hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr minmax(0, 1.05fr); gap:40px; align-items:center;
}
.eyebrow{
  display:inline-block; font-family:'Poppins'; font-weight:600; font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--coral-dark); margin-bottom:18px;
}
.hero h1{ font-size:clamp(1.8rem,2.9vw,2.35rem); font-weight:800; letter-spacing:-.02em; line-height:1.14; }
.hero h1 .nowrap{ white-space:nowrap; }
.hero h1 .esms{ color:#F2711C; }   /* ESMS en orange franc (pas jaune) */
.hero-sub{ margin:22px 0 30px; color:var(--navy-soft); font-size:1.06rem; max-width:480px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero-meta{ margin-top:24px; color:var(--coral-dark); font-size:.9rem; font-weight:600; display:flex; align-items:center; gap:8px; }
.hero-meta .sep{ color:var(--muted); }
.dot-ok{ width:9px; height:9px; border-radius:50%; background:var(--green); display:inline-block; box-shadow:0 0 0 4px rgba(61,190,123,.18); }

/* Dashboard iMac + cartes flottantes */
.hero-visual{ position:relative; z-index:2; }
.hero-imac{ position:relative; z-index:2; width:100%; height:auto; display:block; filter:drop-shadow(0 30px 50px rgba(46,58,79,.18)); }

.dc-label{ font-size:.6rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.up{ color:var(--green); }
.down{ color:var(--coral-dark); }

.float-card{
  position:absolute; top:50%; left:50%; margin:0;
  background:#fff; border-radius:16px; box-shadow:var(--shadow);
  border:1px solid var(--line); padding:11px 15px; display:flex; flex-direction:column; gap:3px;
  z-index:3; will-change:transform, opacity;
}
.float-card strong{ font-family:'Poppins'; font-size:1.4rem; color:var(--navy); }
.float-card strong small{ font-size:.78rem; color:var(--muted); font-weight:500; }
.float-card em{ font-style:normal; font-size:.7rem; font-weight:600; }
.fc-pyr{ align-items:center; text-align:center; }
.fc-index-row{ display:flex; align-items:center; gap:10px; }
.ring{ width:40px; height:40px; transform:rotate(-90deg); }
.ring-bg{ fill:none; stroke:var(--coral-soft); stroke-width:4; }
.ring-fg{ fill:none; stroke:var(--coral); stroke-width:4; stroke-linecap:round; stroke-dasharray:82 100; pathLength:100; }
/* animation anneau (compteur) */
.ring-animate{ stroke-dasharray:0 100; transition:stroke-dasharray 1.4s cubic-bezier(.2,.7,.2,1); }
.ring-animate.run{ stroke-dasharray:82 100; }
.chart-pyramid{ width:96px; height:auto; }
.chart-pyramid.mini{ width:76px; margin-top:2px; }

/* ============ SECTION TITLES ============ */
.section-title{ text-align:center; font-size:clamp(1.7rem,3vw,2.25rem); font-weight:700; }
.section-lead{ text-align:center; color:var(--navy-soft); max-width:660px; margin:14px auto 0; }

/* ============ FEATURES ============ */
.features{ padding:80px 0; }
.feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:46px; }
.feature-card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:24px;
  padding:26px 24px 28px; box-shadow:var(--shadow-sm);
  transition:transform .2s, box-shadow .2s; z-index:1;
}
.feature-card::before{
  content:""; position:absolute; left:-9px; top:16px; bottom:16px; width:26px;
  background:var(--gradient); border-radius:14px; z-index:-1;
}
.feature-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.fc-top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.fc-ico{ width:42px; height:42px; flex:none; display:grid; place-items:center; }
.fc-ico img{ width:100%; height:100%; object-fit:contain; }
.fc-ico.small{
  width:42px; height:42px; border-radius:50%; border:2px solid var(--coral-soft);
  margin:0; background:#fff; color:var(--coral);
}
.fc-ico.small svg{ width:21px; height:21px; }
.feature-card h3{ font-size:1.18rem; }
.feature-card p{ color:var(--navy-soft); font-size:.92rem; }

/* ============ AUDIENCE / DIAGRAM ============ */
.audience{ padding:80px 0; background:var(--bg-soft); }
.audience-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px; justify-items:center; text-align:center; }
.audience-copy{ max-width:680px; }
.audience-copy h2{ font-size:clamp(1.7rem,3vw,2.25rem); font-weight:700; }
.audience-copy p{ color:var(--navy-soft); margin:18px auto 26px; max-width:560px; }
.audience-diagram{ width:100%; max-width:980px; }

/* ---- Schéma circulaire reconstruit (fond cercle + personas) ---- */
.schema{ position:relative; width:100%; aspect-ratio:980/620; margin:18px auto 0; }
.schema-bg{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:43%; height:auto; pointer-events:none;
}
.schema-logo{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:19.5%; aspect-ratio:1; display:grid; place-items:center;
  background:#fff; border-radius:50%; box-shadow:0 12px 30px rgba(46,58,79,.12);
  animation:schemaPulse 5s ease-in-out infinite;
}
.schema-logo img{ width:74%; height:auto; }

.schema-node{ position:absolute; width:11.2%; transform:translate(-50%,-50%); }
/* pas de border-radius : les pictos (badges) débordent du rond et seraient rognés */
.schema-node .av{ display:block; width:100%; height:auto;
  filter:drop-shadow(0 10px 22px rgba(46,58,79,.16)); }

/* ---- Mouvement : flottement des personas + pulsation du logo ---- */
@keyframes schemaFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@keyframes schemaPulse{ 0%,100%{ transform:translate(-50%,-50%) scale(1); } 50%{ transform:translate(-50%,-50%) scale(1.045); } }
.n-drh  .av{ animation:schemaFloat 4.6s ease-in-out infinite; }
.n-etab .av{ animation:schemaFloat 5.2s ease-in-out .4s infinite; }
.n-raf  .av{ animation:schemaFloat 4.9s ease-in-out .8s infinite; }
.n-gest .av{ animation:schemaFloat 5.4s ease-in-out .2s infinite; }
.n-dg   .av{ animation:schemaFloat 4.4s ease-in-out .6s infinite; }
@media (prefers-reduced-motion: reduce){
  .schema-logo, .schema-node .av{ animation:none; }
}
.schema-node .tx{ position:absolute; width:210px; top:50%; transform:translateY(-50%); }
.schema-node .tx h4{ font-family:'Poppins'; font-weight:700; color:var(--navy);
  font-size:1.06rem; line-height:1.2; margin:0 0 3px; }
.schema-node .tx p{ color:var(--navy-soft); font-size:.9rem; line-height:1.35; margin:0; }

/* positions des nœuds autour du cercle */
.n-drh { left:50%;   top:21%; }
.n-etab{ left:68.5%; top:41%; }
.n-raf { left:61%;   top:74%; }
.n-gest{ left:39%;   top:74%; }
.n-dg  { left:31.5%; top:41%; }

/* placement des libellés (droite / gauche / dessous) */
.n-drh .tx, .n-etab .tx, .n-raf .tx{ left:118%; text-align:left; }
.n-dg  .tx{ right:118%; text-align:right; }
.n-gest .tx{ top:118%; left:50%; transform:translateX(-50%); width:240px; text-align:center; }

/* Sur petit écran : on garde le schéma circulaire, en version compacte
   (libellés courts sous chaque persona, descriptions masquées) */
@media (max-width:780px){
  .schema{ aspect-ratio:1/1.04; max-width:380px; }
  .schema-bg{ width:54%; }
  .schema-logo{ width:26%; }
  .schema-node{ width:18%; }

  /* pentagone régulier centré */
  .n-drh { left:50%; top:13%; }
  .n-etab{ left:81%; top:38%; }
  .n-raf { left:69%; top:77%; }
  .n-gest{ left:31%; top:77%; }
  .n-dg  { left:19%; top:38%; }

  /* libellé : titre court centré sous l'avatar, description masquée */
  .schema-node .tx,
  .n-drh .tx, .n-etab .tx, .n-raf .tx, .n-dg .tx, .n-gest .tx{
    position:absolute; left:50%; right:auto; top:104%;
    width:96px; transform:translateX(-50%); text-align:center;
  }
  .schema-node .tx h4{ font-size:.62rem; line-height:1.15; margin:0; }
  .schema-node .tx p{ display:none; }
}

/* très petits écrans : on resserre un peu */
@media (max-width:380px){
  .schema-node .tx{ width:84px; }
  .schema-node .tx h4{ font-size:.56rem; }
}

/* avatars (réutilisés dans les témoignages) */
.avatar{
  flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-size:.95rem; font-family:'Poppins'; font-weight:700; color:#fff;
}
.a1{ background:#7C6BEF; } .a2{ background:#3DA5EF; } .a3{ background:#C45EE0; }
.a4{ background:#3DBE7B; } .a5{ background:var(--coral); }

/* ============ INDICATEURS ============ */
.indicators{ padding:80px 0; }
/* Carrousel des indicateurs : piste horizontale + flèches */
.indic-carousel{ position:relative; margin-top:46px; padding:0 60px; }
.indic-grid{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding:8px 2px 12px; scroll-padding-left:2px;
}
.indic-grid::-webkit-scrollbar{ display:none; }
.indic-card{ flex:0 0 320px; scroll-snap-align:start; }
/* flèches sur les côtés, dans des gouttières dédiées (elles ne mordent pas sur les cartes) */
.ic-arrow{
  position:absolute; top:50%; margin-top:-2px; transform:translateY(-50%);
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-sm);
  color:var(--coral-dark); padding:0; cursor:pointer; z-index:6;
  transition:background .2s, border-color .2s, opacity .2s;
}
.ic-arrow svg{ width:20px; height:20px; }
.ic-arrow:hover:not([disabled]){ background:var(--coral-soft); border-color:var(--coral); }
.ic-arrow[disabled]{ opacity:.3; cursor:default; box-shadow:none; }
.ic-prev{ left:0; }
.ic-next{ right:0; }
/* sur petit écran : une carte centrée, les voisines dépassent légèrement */
@media (max-width:700px){
  .indic-carousel{ padding:0; }
  .indic-grid{ scroll-padding-left:0; }
  .indic-grid::before,
  .indic-grid::after{ content:""; flex:0 0 8%; }
  .indic-card{ flex:0 0 80%; scroll-snap-align:center; }
  .ic-arrow{ width:38px; height:38px; }
  .ic-arrow svg{ width:17px; height:17px; }
  .ic-prev{ left:0; }
  .ic-next{ right:0; }
}
.indic-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s;
}
.indic-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.indic-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; min-height:60px; }
.spark{ width:130px; max-width:56%; height:54px; }
.chart-bdese{ width:104px; max-width:56%; height:54px; }
.chart-anap{ width:96px; max-width:56%; height:54px; }
.ring.big{ width:60px; height:60px; }
.ring.big .ring-bg{ stroke:#EEE7FB; }
.ring.big .ring-fg{ stroke:#9B6BE0; }
.ring-wrap{ position:relative; display:grid; place-items:center; }
.ring-val{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  font-family:'Poppins'; font-weight:700; font-size:.82rem; color:var(--navy); line-height:1;
}
.ring-val .count{ line-height:1; }
.ring-val small{ font-size:.52rem; color:var(--muted); font-weight:500; line-height:1; }
.indic-card h3{ font-size:1.15rem; margin-bottom:6px; }
.indic-card p{ color:var(--navy-soft); font-size:.92rem; }

/* ============ DASHBOARDS ============ */
.dashboards{ padding:80px 0; background:var(--bg-soft); }
.dash-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:50px; align-items:center; }
.dash-shot img{ border-radius:14px; box-shadow:var(--shadow); border:1px solid var(--line); }
.dash-copy h2{ font-size:clamp(1.7rem,3vw,2.25rem); font-weight:700; }
.dash-copy > p{ color:var(--navy-soft); margin:18px 0 28px; }
.dash-stats{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px 18px; }
.ds{ display:flex; flex-direction:column; gap:2px; padding-left:14px; border-left:3px solid var(--coral); }
.ds-ico{ color:var(--coral); margin-bottom:6px; display:block; }
.ds-ico svg{ width:24px; height:24px; }
.ds strong{ font-family:'Poppins'; font-size:1.25rem; color:var(--navy); }
.ds span:last-child{ font-size:.82rem; color:var(--navy-soft); }

/* ============ BENEFITS ============ */
.benefits{ padding:80px 0; }
.benefit-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:46px; }
.benefit{ text-align:left; }
.b-ico{
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:2px solid var(--coral-soft); margin-bottom:16px; color:var(--coral);
}
.b-ico svg{ width:26px; height:26px; }
.benefit h3{ font-size:1.08rem; margin-bottom:8px; }
.benefit p{ color:var(--navy-soft); font-size:.9rem; }

/* ============ TESTIMONIALS ============ */
.testimonials{ padding:80px 0; background:var(--bg-soft); }
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:46px; }
.testi-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 26px; box-shadow:var(--shadow-sm); position:relative; display:flex; flex-direction:column; gap:16px;
}
.quote-mark{ font-family:'Poppins'; font-size:3rem; line-height:.6; color:var(--coral-soft); }
.testi-card .org{ font-family:'Poppins'; font-weight:600; font-size:.95rem; color:var(--navy); }
.testi-card .org small{ font-weight:400; color:var(--muted); font-size:.78rem; }
.testi-card blockquote{ color:var(--navy-soft); font-size:.95rem; font-style:italic; flex:1; }
.testi-card figcaption{ display:flex; align-items:center; gap:12px; border-top:1px solid var(--line); padding-top:16px; }
.testi-card figcaption b{ font-family:'Poppins'; font-size:.9rem; color:var(--navy); display:block; }
.testi-card figcaption small{ color:var(--muted); font-size:.78rem; }
.testi-card .avatar{ width:42px; height:42px; font-size:.85rem; }

/* ============ PRICING ============ */
.pricing{ padding:80px 0; }
.pricing-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 340px)); gap:24px; margin-top:46px; align-items:stretch; justify-content:center; }
.price-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px 28px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:16px; position:relative;
}
.price-card.featured{ border:2px solid var(--coral); box-shadow:var(--shadow); transform:translateY(-8px); }
.badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--gradient); color:#fff; font-size:.72rem; font-weight:600;
  padding:5px 14px; border-radius:999px; font-family:'Poppins';
}
.price-card h3{ font-size:1.35rem; line-height:1.2; }
.price-card h3 small{ display:block; font-size:1rem; font-weight:600; }
.plan-for{ margin-top:-10px; color:var(--coral-dark); font-family:'Poppins'; font-weight:600; font-size:.85rem; }
.price{ font-family:'Poppins'; font-weight:700; font-size:2rem; color:var(--navy); }
.price span{ display:inline; font-size:.8rem; font-weight:500; color:var(--muted); font-family:'Inter'; }
.plan-note{ margin-top:-8px; text-align:center; color:var(--muted); font-size:.8rem; }
.price-card ul{ list-style:none; display:flex; flex-direction:column; gap:10px; flex:1; }
.price-card li{ color:var(--navy-soft); font-size:.92rem; padding-left:24px; position:relative; }
.price-card li::before{ content:"✓"; position:absolute; left:0; color:var(--coral); font-weight:700; }
.price-card .btn{ width:100%; }
/* Carrousel (actif uniquement sur téléphone, voir media query) */
.pricing-carousel{ position:relative; }
.pc-arrow{ display:none; }

/* ============ CTA (bandeau navy) ============ */
.cta{ padding:0 0 60px; }
.cta-inner{
  background:var(--navy-deep); border-radius:var(--radius-lg); padding:46px 44px;
  display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; position:relative; overflow:hidden;
}
.cta-inner::after{ content:""; position:absolute; right:-60px; top:-60px; width:240px; height:240px; background:radial-gradient(circle, rgba(239,126,99,.25), transparent 70%); }
.cta-left{ display:flex; gap:18px; align-items:center; position:relative; z-index:2; }
.cta-logo{ width:64px; flex:none; }
.cta h2{ color:#fff; font-size:1.55rem; font-weight:700; }
.cta-left p{ color:rgba(255,255,255,.75); font-size:.95rem; margin-top:6px; }
.cta-right{ position:relative; z-index:2; }
.cta-form{ display:flex; gap:10px; background:#fff; padding:6px; border-radius:999px; box-shadow:var(--shadow); }
.cta-form input{ flex:1; border:0; outline:0; padding:.7em 1.2em; font-size:.95rem; border-radius:999px; min-width:0; }
.cta-note{ color:rgba(255,255,255,.6); font-size:.82rem; margin-top:12px; text-align:center; }
.cta-success{ color:#fff; font-weight:600; margin-top:12px; text-align:center; }

/* ============ FOOTER ============ */
.site-footer{ background:var(--navy-deep); color:rgba(255,255,255,.7); padding:56px 0 26px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:30px; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-brand{ max-width:280px; }
.footer-logo{ width:96px; margin-bottom:16px; filter:brightness(0) invert(1); opacity:.92; }
.footer-brand p{ font-size:.88rem; color:rgba(255,255,255,.62); margin-bottom:18px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.1); display:grid; place-items:center; color:#fff; transition:.2s; }
.footer-social a svg{ width:17px; height:17px; }
.footer-social a:hover{ background:var(--coral); color:#fff; }
.footer-col h4{ color:#fff; font-size:.95rem; margin-bottom:14px; }
.footer-col a{ display:block; font-size:.88rem; color:rgba(255,255,255,.65); padding:4px 0; transition:.2s; }
.footer-col a:hover{ color:var(--coral-light); }
.footer-badge{ grid-column:1/-1; display:flex; gap:24px; flex-wrap:wrap; padding-top:8px; }
.footer-badge span{ font-size:.82rem; color:rgba(255,255,255,.6); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-top:22px; }
.footer-bottom span{ color:rgba(255,255,255,.5); font-size:.82rem; }
.footer-legal{ display:flex; flex-wrap:wrap; gap:20px; }
.footer-legal a{ color:rgba(255,255,255,.5); font-size:.8rem; }
.footer-legal a:hover{ color:var(--coral-light); }

/* ============ PAGE CONTACT ============ */
.contact-hero{
  position:relative; background:var(--gradient); color:#fff;
  padding:150px 0 150px; text-align:center; overflow:hidden;
}
.contact-hero .container{ position:relative; z-index:2; }
.ch-blob{ position:absolute; border-radius:50%; background:rgba(255,255,255,.10); z-index:1; }
.ch-blob-1{ width:520px; height:520px; top:-220px; left:-160px; }
.ch-blob-2{ width:340px; height:340px; bottom:-160px; right:-80px; background:rgba(255,255,255,.08); }
.eyebrow.light{ color:rgba(255,255,255,.85); }
.contact-hero h1{ color:#fff; font-size:clamp(2.4rem,5vw,3.6rem); font-weight:800; margin-bottom:18px; }
.contact-hero p{ color:rgba(255,255,255,.92); max-width:620px; margin:0 auto; font-size:1.05rem; }
.contact-hero .ch-sub{ margin-top:14px; }
.contact-quick{
  display:flex; gap:10px; justify-content:center; margin:30px auto 0; max-width:520px;
  background:#fff; padding:6px; border-radius:999px; box-shadow:var(--shadow);
}
.contact-quick input{ flex:1; border:0; outline:0; padding:.75em 1.3em; font-size:.95rem; border-radius:999px; min-width:0; color:var(--ink); }
.ch-quick-ok{ margin-top:16px; font-weight:600; color:#fff; }

.contact-main{ background:var(--bg-soft); padding-bottom:80px; position:relative; }
.contact-card{
  background:#fff; max-width:760px; margin:-90px auto 0; position:relative; z-index:3;
  border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:46px 48px 40px;
}
.contact-card h2{ text-align:center; font-size:1.7rem; font-weight:700; }
.contact-card .lead{ text-align:center; color:var(--navy-soft); margin:10px auto 30px; max-width:480px; }
.field{ margin-bottom:20px; }
.field label{ display:block; font-family:'Poppins'; font-weight:600; color:var(--navy); margin-bottom:8px; font-size:.95rem; }
.field input, .field textarea{
  width:100%; border:1.5px solid var(--line); padding:.85em 1.2em;
  font-family:'Inter'; font-size:.95rem; color:var(--ink); background:#fff; outline:0;
  transition:border-color .2s, box-shadow .2s;
}
.field input{ border-radius:999px; }
.field textarea{ min-height:150px; resize:vertical; border-radius:18px; }
.field input:focus, .field textarea:focus{ border-color:var(--coral); box-shadow:0 0 0 3px var(--coral-soft); }
.contact-card form > .btn{ width:100%; margin-top:6px; }
.contact-success{ margin-top:16px; text-align:center; color:var(--green); font-weight:600; }
.contact-info{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:26px; padding-top:22px; border-top:1px solid var(--line); color:var(--navy-soft); font-size:.9rem; }
.contact-info a{ color:var(--coral-dark); font-weight:600; display:inline-flex; align-items:center; gap:6px; }
.contact-info .ci-sep{ color:var(--muted); }

/* ============ PAGE TARIFS ============ */
.pricing-hero{
  position:relative; background:var(--gradient); color:#fff;
  padding:150px 0 130px; text-align:center; overflow:hidden;
}
.pricing-hero .container{ position:relative; z-index:2; }
.pricing-hero h1{ color:#fff; font-size:clamp(2.2rem,4.6vw,3.3rem); font-weight:800; margin-bottom:16px; }
.pricing-hero p{ color:rgba(255,255,255,.92); max-width:640px; margin:0 auto; font-size:1.05rem; }
.pricing-page{ background:var(--bg-soft); padding-top:0; }
.pricing-page .pricing-grid{ margin-top:-70px; }
.pricing-page .price-card{ background:#fff; }

.compare{ padding:80px 0; }
.compare-wrap{ margin-top:40px; overflow-x:auto; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.compare-table{ width:100%; border-collapse:collapse; min-width:560px; background:#fff; }
.compare-table th, .compare-table td{ padding:15px 18px; text-align:center; font-size:.92rem; border-bottom:1px solid var(--line); }
.compare-table thead th{ font-family:'Poppins'; font-weight:600; color:var(--navy); background:var(--bg-soft); font-size:.95rem; }
.compare-table tbody td:first-child, .compare-table thead th:first-child{ text-align:left; color:var(--navy); font-weight:500; }
.compare-table .hl{ background:var(--coral-soft); color:var(--coral-dark); font-weight:600; }
.compare-table thead .hl{ color:var(--coral-dark); }
.compare-table tbody tr:last-child td{ border-bottom:0; }

.faq{ padding:80px 0; background:var(--bg-soft); }
.faq-grid{ max-width:780px; margin:40px auto 0; display:flex; flex-direction:column; gap:14px; }
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:4px 22px; box-shadow:var(--shadow-sm); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:16px 0; font-family:'Poppins'; font-weight:600;
  color:var(--navy); font-size:1rem; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; color:var(--coral); font-size:1.4rem; font-weight:400; line-height:1; transition:transform .2s; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ color:var(--navy-soft); font-size:.94rem; padding:0 0 18px; margin:0; }

/* ============ RESPONSIVE ============ */

/* ---- Tablette large : footer + grilles ---- */
@media (max-width:1100px){
  .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; }
  .footer-badge{ grid-column:1/-1; }
}

/* ---- Tablette : passage 1 colonne pour les blocs 2 colonnes ---- */
@media (max-width:980px){
  .hero{ padding:118px 0 64px; }
  .hero-grid,.audience-grid,.dash-grid{ grid-template-columns:minmax(0,1fr); }
  .hero-copy{ text-align:center; max-width:620px; margin:0 auto; }
  .hero-sub{ margin-left:auto; margin-right:auto; }
  .hero-cta,.hero-meta{ justify-content:center; }
  .hero-visual{ margin:40px auto 0; max-width:560px; }
  .feature-grid,.benefit-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .testi-grid{ grid-template-columns:minmax(0,1fr); max-width:520px; margin-inline:auto; }
  .dash-shot{ order:2; }
  .dash-copy{ text-align:center; }
  .dash-stats{ text-align:left; max-width:460px; margin-inline:auto; }
  .pricing-grid{ grid-template-columns:minmax(0,1fr); max-width:420px; margin-inline:auto; }
  .price-card.featured{ transform:none; }
  .cta-inner{ grid-template-columns:minmax(0,1fr); text-align:center; }
  .cta-left{ justify-content:center; }
  .footer-grid{ grid-template-columns:1fr 1fr 1fr; }
  .footer-brand{ grid-column:1/-1; max-width:none; }

  /* ---- Menu mobile : tiroir latéral droit (overlay qui clippe le panneau, zéro débordement) ---- */
  .header-inner{ padding:23px 16px 23px 24px; }
  .header-actions{ margin-left:auto; }   /* pousse le burger à droite */
  .site-header{ z-index:80; }
  body.menu-open{ overflow:hidden; }
  .main-nav{
    position:fixed; inset:0; left:0; width:auto; max-height:none; overflow:hidden;
    background:transparent; border:0; border-radius:0; box-shadow:none;
    padding:0; margin:0; display:block; z-index:70; pointer-events:none;
  }
  .main-nav::before{ content:""; position:absolute; inset:0; background:rgba(31,29,32,.42); opacity:0; transition:opacity .3s ease; }
  body.menu-open .main-nav{ pointer-events:auto; }
  body.menu-open .main-nav::before{ opacity:1; }
  .main-nav > ul{
    position:absolute; top:0; right:0; bottom:0; width:min(86vw,340px);
    flex-direction:column; align-items:stretch; gap:2px;
    background:#fff; box-shadow:var(--shadow); padding:84px 18px 30px; overflow-y:auto;
    transform:translateX(100%); transition:transform .35s ease;
  }
  body.menu-open .main-nav > ul{ transform:translateX(0); }
  .main-nav > ul > li > a{ font-size:1rem; padding:.8em .9em; border-radius:12px; justify-content:space-between; }
  /* sous-menus en accordéon, rabattus par défaut */
  .submenu{
    position:static; display:flex; box-shadow:none; border:0; min-width:0; padding:0;
    border-left:2px solid var(--coral-soft); border-radius:0; margin:0 0 0 12px;
    max-height:0; opacity:0; overflow:hidden;
    transition:max-height .3s ease, opacity .25s, padding .3s, margin .3s;
  }
  .has-sub.open > .submenu{ max-height:340px; opacity:1; padding:2px 0 8px 14px; margin:0 0 4px 12px; }
  .submenu a{ font-size:.9rem; padding:.5em .6em; }
  .caret{ display:inline-block; transition:transform .25s ease; }
  .has-sub.open > a .caret{ transform:rotate(180deg); }
  .nav-mobile-cta{ display:block; margin-top:16px; }
  .nav-mobile-cta .btn{ width:100%; color:#fff; }
  .nav-mobile-login{ margin-top:12px; }
  .burger{ display:flex; position:relative; z-index:82; }
  .header-actions > .btn{ display:none; }
}

/* ---- Roue de cartes : conservée mais réduite sur petit écran ---- */
@media (max-width:680px){
  .hero-visual{ max-width:460px; }
  .float-card{ padding:8px 11px; border-radius:13px; gap:2px; }
  .float-card strong{ font-size:1.05rem; }
  .float-card strong small{ font-size:.62rem; }
  .float-card .dc-label{ font-size:.5rem; }
  .float-card em{ font-size:.58rem; }
  .chart-pyramid.mini{ width:58px; }
  .fc-index-row{ gap:6px; }
  .ring{ width:30px; height:30px; }
}

/* ---- Mobile ---- */
@media (max-width:560px){
  .container{ padding:0 18px; }
  .hero{ padding:104px 0 48px; }
  .hero h1{ font-size:clamp(1.7rem,7vw,2.2rem); }
  .hero h1 br{ display:none; }              /* on laisse le texte revenir à la ligne tout seul */
  .hero h1 .nowrap{ white-space:normal; }   /* laisse « multi-établissements » revenir à la ligne */
  .hero-sub{ font-size:1rem; }
  .hero-cta{ flex-direction:column; align-items:stretch; width:100%; }
  .hero-cta .btn{ width:100%; }
  .features,.audience,.indicators,.dashboards,.benefits,.testimonials,.pricing{ padding:56px 0; }
  .feature-grid,.benefit-grid{ grid-template-columns:minmax(0,1fr); gap:18px; }
  .section-title{ font-size:clamp(1.5rem,6vw,2rem); }
  .contact-hero{ padding:112px 0 110px; }
  .contact-card{ padding:30px 20px 26px; margin-top:-70px; }
  .contact-quick{ flex-direction:column; border-radius:20px; }
  .contact-quick input{ text-align:center; }
  .cta{ padding:0 0 44px; }
  .cta-inner{ padding:38px 24px; }
  .cta-form{ flex-direction:column; border-radius:20px; }
  .cta-form input{ text-align:center; }
  .cta-left{ flex-direction:column; text-align:center; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* ---- Carrousel des offres : uniquement sur téléphone ---- */
@media (max-width:680px){
  .pricing-grid{
    display:flex; grid-template-columns:none; max-width:none; margin-inline:0;
    gap:14px; padding:34px 0 16px; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .pricing-grid::-webkit-scrollbar{ display:none; }
  /* espaceurs pour permettre le centrage des cartes extrêmes */
  .pricing-grid::before, .pricing-grid::after{ content:""; flex:0 0 9%; }
  .pricing-page .pricing-grid{ margin-top:-60px; }
  .pricing-grid .price-card{
    flex:0 0 78%; scroll-snap-align:center; transform:none;
  }
  .pricing-grid .price-card.featured{ transform:none; }

  .pc-arrow{
    display:grid; place-items:center; position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
    background:#fff; box-shadow:var(--shadow-sm); color:var(--coral-dark);
    font-size:1.7rem; line-height:1; padding-bottom:3px; cursor:pointer; z-index:6;
    transition:background .2s, color .2s;
  }
  .pc-arrow:active{ background:var(--coral-soft); }
  .pc-prev{ left:2px; }
  .pc-next{ right:2px; }
}

/* ---- Petits mobiles ---- */
@media (max-width:380px){
  .footer-grid{ grid-template-columns:1fr; }
  .dash-stats{ grid-template-columns:minmax(0,1fr); }
}
