:root{
    --ink:#0b1f1a;
    --ink-soft:#4b5f5a;
    --paper:#f6f9f8;
    --card:#ffffff;
    --line:#e4ece9;
    --brand:#0f9d74;
    --brand-dark:#0a6b52;
    --brand-light:#e6f5ef;
    --gold:#d9a441;
    --radius:18px;
    --shadow:0 10px 30px -12px rgba(11,31,26,0.14);
    font-family:'Segoe UI',ui-sans-serif,system-ui,-apple-system,sans-serif;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;background:var(--paper);color:var(--ink);}
  img{max-width:100%;display:block;}
  a{color:inherit;}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
  section{padding:88px 0;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--brand-dark);font-weight:700;
    background:var(--brand-light);padding:6px 14px;border-radius:999px;
    margin-bottom:16px;
  }
  h2{font-size:34px;line-height:1.15;margin:0 0 12px;letter-spacing:-0.01em;}
  .lead{color:var(--ink-soft);font-size:16px;max-width:560px;margin:0 0 44px;}
  .center{text-align:center;margin-left:auto;margin-right:auto;}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 24px;border-radius:10px;font-weight:600;font-size:14.5px;
    text-decoration:none;cursor:pointer;border:none;
  }
  .btn-primary{background:var(--brand);color:#fff;}
  .btn-ghost{background:#fff;border:1px solid var(--line);color:var(--ink);}

  /* ---------- Nav ---------- */
  header{
    position:sticky;top:0;z-index:50;background:rgba(246,249,248,0.85);
    backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  }
  nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 24px;max-width:1080px;margin:0 auto;
  }
  .brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:15.5px;}
  .brand .mark{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--gold));}
  .nav-links{display:flex;gap:28px;font-size:14px;font-weight:500;color:var(--ink-soft);list-style:none;margin:0;padding:0;}
  .nav-links a{text-decoration:none;}
  @media(max-width:800px){.nav-links{display:none;}}

  /* ---------- Menu hamburger (mobile) ---------- */
.nav-toggle{display:none;}
.nav-cta-mobile{display:none;}

@media(max-width:800px){
  /* Bouton hamburger */
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:44px;height:44px;padding:0;
    background:transparent;border:1px solid var(--line,#d9e2dd);border-radius:12px;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .nav-toggle span{
    display:block;width:20px;height:2px;border-radius:2px;
    background:var(--ink,#0b1f1a);
    transition:transform .3s ease,opacity .2s ease;
  }
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* Le bouton "Contactez-nous" du header passe dans le menu */
  nav > .btn{display:none;}

  /* Menu déroulant */
  .nav-links{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:#f6f9f8;
    border-bottom:1px solid var(--line,#d9e2dd);
    box-shadow:0 14px 24px rgba(0,0,0,.08);
    padding:0 24px;
    max-height:0;overflow:hidden;opacity:0;visibility:hidden;
    transition:max-height .35s ease,opacity .25s ease,padding .35s ease,visibility 0s linear .35s;
  }
  .nav-links.open{
    max-height:480px;opacity:1;visibility:visible;padding:8px 24px 20px;
    transition:max-height .35s ease,opacity .25s ease,padding .35s ease,visibility 0s;
  }
  .nav-links li{border-bottom:1px solid var(--line,#e3ebe7);}
  .nav-links li a{display:block;padding:15px 4px;font-size:16px;}
  .nav-links .nav-cta-mobile{display:block;border-bottom:none;padding-top:16px;}
  .nav-links .nav-cta-mobile a{text-align:center;padding:13px 18px;color:#fff;}
}

  /* ---------- 1. Hero ---------- */
  .hero{padding:80px 0 40px;position:relative;overflow:hidden;}
  .hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;}
  @media(max-width:800px){.hero-inner{grid-template-columns:1fr;}}
  .hero h1{font-size:46px;line-height:1.1;letter-spacing:-0.02em;margin:0 0 18px;}
  .hero .lead{font-size:17px;max-width:480px;}
  .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;}
  .hero-visual{
    position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);
    aspect-ratio:4/3;background:linear-gradient(135deg,var(--brand-light),#fff);
    display:flex;align-items:center;justify-content:center;
  }
  .hero-visual .mock{
    width:88%;height:78%;border-radius:14px;background:#0b1f1a;position:relative;overflow:hidden;
  }
  .hero-visual .mock::before{
    content:"";position:absolute;inset:0;
    background:repeating-linear-gradient(180deg,#12312a 0 34px,#0e2620 34px 36px);
    opacity:.7;
  }
  .float-card{
    position:absolute;bottom:16px;left:16px;background:#fff;border-radius:12px;
    padding:10px 14px;box-shadow:var(--shadow);display:flex;align-items:center;gap:10px;font-size:12.5px;
  }
  .float-card .ic{width:30px;height:30px;border-radius:8px;background:var(--brand-light);display:flex;align-items:center;justify-content:center;color:var(--brand-dark);font-size:14px;}
  .float-card b{display:block;font-size:13.5px;}

  /* ---------- 2. Chiffres ---------- */
  .stats{padding:48px 0;}
  .stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
  @media(max-width:800px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
  .stat{
    background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:22px 16px;text-align:center;
  }
  .stat .num{font-size:26px;font-weight:800;color:var(--brand-dark);}
  .stat .lbl{font-size:12px;color:var(--ink-soft);margin-top:4px;}

  /* ---------- 3. Épreuve du jour ---------- */
  .epreuve{background:#0b1f1a;color:#eef5f2;}
  .epreuve .eyebrow{background:rgba(15,157,116,.18);color:#8fe3c2;}
  .epreuve-inner{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;}
  @media(max-width:800px){.epreuve-inner{grid-template-columns:1fr;}}
  .epreuve ul{padding:0;margin:20px 0 0;list-style:none;display:flex;flex-direction:column;gap:12px;}
  .epreuve ul li{display:flex;gap:10px;font-size:14.5px;color:#c7dcd6;}
  .epreuve ul li::before{content:"✓";color:#7be0bb;font-weight:700;}
  .epreuve-card{
    background:#122e27;border:1px solid #1e433a;border-radius:16px;padding:22px;
  }
  .epreuve-badge{background:var(--brand);color:#fff;font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:999px;text-transform:uppercase;float:right;}
  .epreuve-card h4{margin:26px 0 4px;font-size:16px;}
  .epreuve-card p{margin:0;font-size:13px;color:#a9c2ba;}
  .epreuve-card .skel{height:9px;background:#1e433a;border-radius:5px;margin-top:16px;}
  .epreuve-card .skel.w60{width:60%;}
  .epreuve-card .skel.w80{width:80%;}
  .epreuve-actions{display:flex;gap:10px;margin-top:20px;}
  .epreuve-actions .btn-primary{padding:10px 16px;font-size:13px;}
  .epreuve-actions .btn-ghost{background:transparent;border:1px solid #2a5147;color:#eef5f2;padding:10px 16px;font-size:13px;}

  /* ---------- 4/5. Problème / Solution ---------- */
  .split-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  @media(max-width:800px){.split-grid{grid-template-columns:1fr;}}
  .split-card{border-radius:var(--radius);padding:30px;}
  .split-card.problem{background:#fdf1ee;border:1px solid #f6dcd4;}
  .split-card.solution{background:var(--brand-light);border:1px solid #cdeadd;}
  .split-card h3{font-size:19px;margin:0 0 18px;}
  .split-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;}
  .split-card li{display:flex;gap:10px;font-size:14.5px;color:var(--ink-soft);}
  .problem li::before{content:"✕";color:#d9694f;font-weight:700;flex:none;}
  .solution li::before{content:"✓";color:var(--brand-dark);font-weight:700;flex:none;}

  /* ---------- 6. Comment ça marche ---------- */
  .steps{background:var(--card);}
  .steps-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
  @media(max-width:900px){.steps-row{grid-template-columns:repeat(3,1fr);}}
  @media(max-width:520px){.steps-row{grid-template-columns:repeat(2,1fr);}}
  .step{text-align:center;}
  .step .circle{
    width:44px;height:44px;border-radius:50%;background:var(--paper);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;
    margin:0 auto 12px;color:var(--ink-soft);
  }
  .step.active .circle{background:var(--brand);color:#fff;border-color:var(--brand);}
  .step p{font-size:13px;margin:0;color:var(--ink-soft);}

  /* ---------- 7. Aperçu de l'application ---------- */
  .preview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
  @media(max-width:800px){.preview-grid{grid-template-columns:repeat(2,1fr);}}
  .preview-tile{
    aspect-ratio:4/3;border-radius:14px;border:1px solid var(--line);background:#fff;
    display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  }
  .preview-tile span{
    position:absolute;bottom:10px;left:10px;background:rgba(11,31,26,.75);color:#fff;
    font-size:11.5px;padding:4px 9px;border-radius:999px;
  }
  .preview-tile .fill{position:absolute;inset:0;background:linear-gradient(135deg,var(--brand-light),#fff);}

  /* ---------- 9+10. Feed ---------- */
  .feed-section{background:#0b1f1a;color:#eef5f2;overflow:hidden;}
  .feed-section .lead{color:#a9c2ba;}
  .feed-section .eyebrow{background:rgba(15,157,116,.18);color:#8fe3c2;}
  .feed-viewport{
    position:relative;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  }
  /* .feed-track{display:flex;gap:20px;width:max-content;animation:scroll-feed 42s linear infinite;}
  .feed-viewport:hover .feed-track{animation-play-state:paused;}
  @keyframes scroll-feed{from{transform:translateX(0);}to{transform:translateX(-50%);}} */
  .feed-track{display:flex;gap:20px;width:max-content;animation:scroll-feed var(--feed-duration,120s) linear infinite;will-change:transform;}
.feed-viewport:hover .feed-track{animation-play-state:paused;}
@keyframes scroll-feed{from{transform:translateX(0);}to{transform:translateX(var(--feed-shift,-50%));}}
  /* .feed-card{flex:0 0 320px;background:#122e27;border:1px solid #1e433a;border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:14px;} */
  .feed-tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;}
  .feed-tag.annonce{background:rgba(15,157,116,.2);color:#7be0bb;}
  .feed-tag.temoignage{background:rgba(217,164,65,.2);color:#f0c778;}
  .feed-card{flex:0 0 320px;min-width:0;max-width:320px;background:#122e27;border:1px solid #1e433a;border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:14px;}

.feed-card p{
  margin:0;font-size:14.5px;line-height:1.55;color:#d7e6e1;
  overflow-wrap:anywhere;      /* coupe les mots trop longs */
  display:-webkit-box;
  -webkit-line-clamp:6;        /* 6 lignes maximum, puis "..." */
  line-clamp:6;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
  /* .feed-card p{margin:0;font-size:14.5px;line-height:1.55;color:#d7e6e1;} */
  .feed-meta{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid #1e433a;}
  .feed-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--gold));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#08211b;flex:none;}
  .feed-name{font-size:13px;font-weight:600;color:#f2f8f6;}
  .feed-sub{font-size:12px;color:#8fa79f;}
  .feed-stars{font-size:12px;color:var(--gold);letter-spacing:1px;}

  /* ---------- 8. Plans ---------- */
  .plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:15px;
    max-width: 900px; 
    margin: 0 auto;
    align-items: stretch;
}
.plan-card {
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    padding: 20px;
    border-radius: 10px;
    height: 100%;
    background-color: #fff;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);  
}
 
  @media (max-width: 992px) {
    .plan-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .plan-grid {
        grid-template-columns: 1fr;
    }
}
  .plan-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);position:relative;}
  .plan-card.premium{border:1px solid var(--brand);background:linear-gradient(180deg,#ffffff, #f1faf6);}
  .plan-badge{position:absolute;top:20px;right:20px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;padding:5px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em;}
  .plan-name{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:6px;margin-bottom: 5px;}
  .plan-price{font-size:32px;font-weight:700;margin: 0 0 6px;}
  .plan-price span{font-size:14px;font-weight:500;color:var(--ink-soft);}
  .plan-list{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;}
  .plan-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft);}
  .plan-list li::before{content:"✓";flex:none;width:20px;height:20px;border-radius:50%;background:var(--brand-light);color:var(--brand-dark);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px;}
  .plan-cta{display:block;text-align:center;margin-top:28px;padding:13px;border-radius:10px;font-weight:600;font-size:14.5px;text-decoration:none;cursor:pointer;border:none;width:100%;}
  .plan-card:not(.premium) .plan-cta{background:#fff;border:1px solid var(--line);color:var(--ink);}
  .plan-card.premium .plan-cta{background:var(--brand);color:#fff;}

  /* ---------- 11. FAQ ---------- */
  .faq{background:var(--card);}
  .faq-list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:10px;}
  .faq-item{border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden;}
  .faq-q{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:17px 20px;cursor:pointer;font-size:14.5px;font-weight:600;list-style:none;
  }
  .faq-q::-webkit-details-marker{display:none;}
  .faq-q::after{content:"+";font-size:20px;color:var(--brand-dark);font-weight:400;transition:transform .2s;}
  details[open] .faq-q::after{transform:rotate(45deg);}
  .faq-a{padding:0 20px 18px;font-size:14px;color:var(--ink-soft);line-height:1.6;}

  /* ---------- 12. Contact ---------- */
  .contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:flex-start;}
  @media(max-width:760px){.contact-grid{grid-template-columns:1fr;}}
  .contact-info{display:flex;flex-direction:column;gap:22px;}
  .contact-item{display:flex;gap:14px;align-items:flex-start;}
  .contact-icon{width:40px;height:40px;border-radius:10px;background:var(--brand-light);display:flex;align-items:center;justify-content:center;flex:none;font-size:17px;color:var(--brand-dark);}
  .contact-item h4{margin:0 0 3px;font-size:14.5px;}
  .contact-item p{margin:0;font-size:13.5px;color:var(--ink-soft);}
  .social-row{display:flex;gap:10px;margin-top:6px;}
  .social-row a{width:38px;height:38px;border-radius:50%;background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:14px;}
  form.contact-form{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:flex;flex-direction:column;gap:14px;}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  @media(max-width:480px){.form-row{grid-template-columns:1fr;}}
  label{font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:5px;display:block;}
  input,textarea,select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:9px;font-size:14px;font-family:inherit;background:#fff;color:var(--ink);}
  textarea{resize:vertical;min-height:100px;}
  .submit-btn{background:var(--brand);color:#fff;border:none;padding:13px;border-radius:9px;font-weight:600;font-size:14.5px;cursor:pointer;width:100%;}

  /* ---------- 13. Footer ---------- */
  footer{background:#0b1f1a;color:#c6d6d1;padding:56px 0 26px;}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:32px;}
  @media(max-width:700px){.foot-grid{grid-template-columns:1fr 1fr;}}
  .foot-brand{display:flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:15px;margin-bottom:10px;}
  .foot-brand .dot{width:9px;height:9px;border-radius:50%;background:var(--brand);}
  footer h5{font-size:12.5px;text-transform:uppercase;letter-spacing:.07em;color:#8fa79f;margin:0 0 14px;}
  footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
  footer a{text-decoration:none;font-size:13.5px;}
  .foot-newsletter input{padding:10px 12px;border-radius:8px 0 0 8px;border:1px solid #1e433a;background:#122e27;color:#fff;font-size:13px;}
  .newsletter-row{display:flex;}
  .newsletter-row button{border:none;background:var(--brand);color:#fff;padding:0 16px;border-radius:0 8px 8px 0;cursor:pointer;font-size:13px;}
  .foot-bottom{margin-top:44px;padding-top:22px;border-top:1px solid #1e433a;font-size:12.5px;color:#7f9994;text-align:center;}

    /* ---------- 14. logo ---------- */
  #nav-logo{
              width: 75px;
              height: 64px;
  }

/* ===================== Galerie "Épreuve du jour" (cartes cliquables) ===================== */
/* Scopé sous .epreuve-card : n'affecte rien d'autre sur la page. */
.epreuve-card .epreuve-gallery {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.epreuve-card .epreuve-gallery__item {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 12px;
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  background: none;
}

.epreuve-card .epreuve-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 220ms ease;
}

.epreuve-card .epreuve-gallery__item:hover img {
  transform: scale(1.1);
}

.epreuve-card .epreuve-gallery__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(6, 20, 16, .85), transparent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 5px 7px 6px;
  text-align: left;
  line-height: 1.2;
}

/* ===================== Modal galerie "Épreuve du jour" (fond flouté) ===================== */
/* Namespace dédié epreuve-modal-* : ne peut entrer en conflit avec aucune autre modal du site. */
.epreuve-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 20, 16, .5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 20px;
}

.epreuve-modal-overlay.is-open {
  display: flex;
}

.epreuve-modal-overlay .epreuve-modal {
  background: #fff;
  border-radius: 18px;
  max-width: 480px;
  width: 100%;
  overflow: hidden;
  position: relative;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  animation: epreuveModalIn 180ms ease;
}

@keyframes epreuveModalIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.epreuve-modal-overlay .epreuve-modal img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  display: block;
}

.epreuve-modal-overlay .epreuve-modal__body {
  padding: 18px 22px 24px;
}

.epreuve-modal-overlay .epreuve-modal__body h3 {
  margin: 0;
  font-size: 18px;
  color: #0b2a20;
}

.epreuve-modal-overlay .epreuve-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.epreuve-modal-overlay .epreuve-modal__close:hover {
  background: rgba(0, 0, 0, .7);
}

.epreuve-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;

    align-items: center;
    justify-content: center;

    padding: 25px;

    background: rgba(0, 0, 0, 0.88);
}

.epreuve-modal-overlay.is-open {
    display: flex;
}

.epreuve-modal {
    position: relative;

    width: min(900px, 95vw);
    max-height: 95vh;

    padding: 20px;

    border-radius: 16px;

    background: #fff;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.epreuve-modal h3 {
    margin: 0 0 15px;
    color: #222;
    font-size: 18px;
}

.epreuve-modal-image-container {
    width: 100%;
    max-height: 80vh;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: auto;
}

#epreuveModalImg {
    display: block;

    max-width: 100%;
    max-height: 75vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 10px;
}

.epreuve-modal-close {
    position: absolute;

    top: 10px;
    right: 10px;

    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #789BEF;
    color: #fff;

    font-size: 25px;
    line-height: 1;

    cursor: pointer;

    z-index: 2;
}

.epreuve-modal-close:hover {
    opacity: .85;
}
.epreuve-click-indicator {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 8px;

    margin: 8px 5px 12px;

    color: #789BEF;

    font-size: 13px;
    font-weight: 600;

    animation: indicatorFloat 1.5s ease-in-out infinite;
}

.epreuve-click-indicator__arrow {
    font-size: 24px;

    animation: indicatorArrow 1s ease-in-out infinite;
}

.epreuve-click-indicator__hand {
    font-size: 22px;

    display: inline-block;

    animation: indicatorHand 1s ease-in-out infinite;
}

.epreuve-click-indicator__text {
    white-space: nowrap;
}


/* Mouvement général */
@keyframes indicatorFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}


/* La flèche pointe vers l'image */
@keyframes indicatorArrow {
    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(5px, 5px);
    }
}

.socials { display: flex; gap: 12px; margin-top: 12px; }

.socials a {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #d9e2dd;
  color: #0f9d6e;
  font-size: 18px;
  text-decoration: none;
  transition: all .25s ease;
}

.socials a:hover {
  background: #0f9d6e;
  color: #fff;
  border-color: #0f9d6e;
  transform: translateY(-3px);
}




/* La main fait un petit mouvement de clic */
@keyframes indicatorHand {
    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(4px, 5px) scale(.9);
    }
}

.newsletter-form { width: 100%; max-width: 360px; }

.newsletter-box {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 999px;
  padding: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
  transition: box-shadow .25s ease;
}

.newsletter-box:focus-within {
  box-shadow: 0 0 0 3px rgba(15, 157, 110, .45);
}

.newsletter-box input {
  flex: 1;
  min-width: 0;            /* évite le débordement sur petit écran */
  border: none;
  outline: none;
  background: transparent;
  padding: 10px 16px;
  font-size: 15px;
  color: #1f2937;
}

.newsletter-box input::placeholder { color: #9ca3af; }

.newsletter-box button {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  background: #0f9d6e;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .25s ease, transform .15s ease;
}

.newsletter-box button:hover { background: #0b7d57; }
.newsletter-box button:active { transform: scale(.96); }

/* Petit écran : on garde seulement l'icône */
@media (max-width: 420px) {
  .newsletter-box button span { display: none; }
  .newsletter-box button { padding: 10px 14px; }
}