/* EKILIBRUM — feuille de style de la page « index » (fusion de : fonts, style, contact, contact-accueil, documents-juridiques, tarifs, formules-accueil, blog, fondateur, valeurs, cookie-consent, accessibilite). Chaque partie est repérable par « ===== PARTIE : nom ===== ». Aucune règle modifiée. */

/* ===== PARTIE : fonts ===== */
/* EKILIBRUM — Polices hébergées sur le site (aucune requête vers Google Fonts).
   Orbitron 600/800/900 · Rajdhani 500/600/700 · Inter 400/500/600 (sous-ensemble latin, accents français inclus). */
@font-face{font-family:'Orbitron';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/orbitron-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:800;font-display:swap;src:url('../assets/fonts/orbitron-latin-800-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:900;font-display:swap;src:url('../assets/fonts/orbitron-latin-900-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/rajdhani-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/rajdhani-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/rajdhani-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/inter-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/inter-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/inter-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}


/* ===== PARTIE : style ===== */
  :root{
    --bg: #06090b;
    --bg-2: #0a0f12;
    --panel-border: rgba(46, 230, 224, 0.28);
    --cyan: #2ee6e0;
    --cyan-soft: rgba(46, 230, 224, 0.55);
    --white: #f3f7f8;
    --muted: #9aa7ac;
    --muted-2: #7c8a8f;
    --card-bg: linear-gradient(180deg, rgba(46,230,224,0.03), transparent);
  }

  @keyframes pulseGlow{
    0%, 100%{
      box-shadow: 0 0 0px rgba(46,230,224,0);
      border-color: var(--panel-border);
    }
    50%{
      box-shadow: 0 0 30px rgba(46,230,224,0.35), 0 0 60px rgba(46,230,224,0.12);
      border-color: rgba(46,230,224,0.65);
    }
  }

  *{ box-sizing: border-box; }

  html{ scroll-behavior: smooth; background: var(--bg); }

  body{
    margin:0;
    background: var(--bg);
    color: var(--white);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  }

  a, button{ font-family: inherit; }

  .wrap{
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(0px, 5vw, 70px);
  }

  /* ---------- HERO ---------- */

  .hero{
    position: relative;
    min-height: 650px;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: stretch;
    padding-top: clamp(88px, 10vh, 128px);
    padding-bottom: 0;
  }

  .hero-left{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    padding: 0;
    z-index: 3;
    transform: translateY(clamp(-18px, -2vh, 0px));
  }

  .logo{
    display: block;
    width: clamp(288px, 32vw, 450px);
    height: auto;
    filter: drop-shadow(0 0 18px rgba(46,230,224,0.35)) drop-shadow(0 0 40px rgba(46,230,224,0.12));
  }

  .headline{
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(2.16rem, 3.72vw, 3.24rem);
    line-height: 1.06;
    letter-spacing: 0.01em;
    margin: 26px 0 0 0;
  }

  .headline .accent{
    color: var(--cyan);
    text-shadow: 0 0 22px rgba(46,230,224,0.45);
  }

  .headline-divider{
    width: 56px;
    height: 3px;
    background: var(--cyan);
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(46,230,224,0.5);
    margin: 18px 0 0 0;
  }

  .sub{
    max-width: 44ch;
    color: var(--muted);
    font-size: clamp(1.03rem, 1.1vw, 1.14rem);
    line-height: 1.6;
    font-weight: 400;
    margin: 10px 0 0 0;
  }

  .cta-row{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 17px;
    margin-top: 34px;
  }

  .btn-primary{
    background: var(--cyan);
    color: #041012;
    border: none;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.89rem;
    padding: 17px 28px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    box-shadow: 0 0 0px rgba(46,230,224,0);
    transition: box-shadow .25s ease, transform .2s ease, background .25s ease;
  }
  .btn-primary:hover{
    box-shadow: 0 0 32px rgba(46,230,224,0.55);
    transform: translateY(-1px);
  }
  .btn-primary svg{ width: 16px; height: 16px; transition: transform .25s ease; }
  .btn-primary:hover svg{ transform: translateX(4px); }

  .btn-primary:focus-visible{
    outline: 2px solid var(--white);
    outline-offset: 3px;
  }

  /* ---------- HERO RIGHT VISUAL ---------- */

  .hero-right{
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: clamp(0px, 6vh, 54px);
    z-index: 1;
  }

  .figures{
    position: relative;
    display: block;
    width: 100%;
    max-width: 1138px;
    height: auto;
    margin-bottom: -1px;
    margin-left: clamp(-72px, -5vw, 0px);
    z-index: 2;
    transform: scale(1.495);
    transform-origin: bottom center;
    filter:
      drop-shadow(0 6px 14px rgba(0,0,0,0.7))
      drop-shadow(0 0 3px rgba(46,230,224,0.65))
      drop-shadow(0 0 8px rgba(46,230,224,0.42))
      drop-shadow(0 0 14px rgba(46,230,224,0.22));
  }

  /* ---------- FEATURES STRIP ---------- */

  .features{
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    background: var(--bg);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: -6vh 0 9.75vh 0;
    position: relative;
    z-index: 3;
  }

  .feature{
    padding: 34px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    border-right: 1px solid var(--panel-border);
  }
  .feature:last-child{ border-right: none; }

  .feature-icon{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid var(--cyan-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cyan);
    box-shadow: 0 0 12px rgba(46,230,224,0.35), 0 0 24px rgba(46,230,224,0.15);
  }
  .feature-icon svg{ width: 20px; height: 20px; }

  .feature h3, .feature h2{
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.03em;
    font-size: 0.86rem;
    color: var(--cyan);
    margin: 0;
    text-shadow: 0 0 10px rgba(46,230,224,0.5), 0 0 20px rgba(46,230,224,0.25);
  }

  .feature p{
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted-2);
    line-height: 1.5;
  }

  /* ---------- RESPONSIVE ---------- */

  @media (max-width: 980px){
    .hero{ grid-template-columns: 1fr; padding-top: 6vh; }
    .hero-right{ min-height: 46vh; order: -1; margin-bottom: 2rem; }
    .hero-left{ padding-right: 0; transform: none; }
    .figures{ width: min(98vw, 680px); max-width: 98vw; margin-left: 0; }
    .features{ grid-template-columns: repeat(6, 1fr); }
    .feature{ grid-column: span 2; }
    .feature:nth-child(4), .feature:nth-child(5){ grid-column: span 3; }
    .feature:nth-child(3){ border-right: none; }
    .feature{ border-bottom: 1px solid var(--panel-border); }
    .feature:nth-child(4), .feature:nth-child(5), .feature:nth-child(6){ border-bottom: none; }
  }

  @media (max-width: 560px){
    .features{ grid-template-columns: repeat(2, 1fr); }
    .feature:nth-child(2n){ border-right: none; }
    .feature:nth-child(odd){ border-right: 1px solid var(--panel-border); }
    .feature:nth-child(-n+4){ border-bottom: 1px solid var(--panel-border); }
    .feature:nth-child(5), .feature:nth-child(6){ border-bottom: none; }
    .features{ grid-template-columns: repeat(2, 1fr); }
    .feature:nth-child(n){ grid-column: auto; }
    .feature:nth-child(5){ grid-column: 1 / -1; border-right: none; }
  }

  /* Ordinateur uniquement : le bloc logo / titre / paragraphe est centré verticalement sur l'image (sans changer son alignement interne) */
  @media (min-width: 981px){
    .sub{ font-size: 0.97rem; max-width: 42ch; }
    .hero-left{
      align-self: end;
      justify-content: center;
      transform: none;
      height: 0;
      margin-bottom: calc(clamp(0px, 6vh, 54px) + 0.213 * min(90vw, 1260px) - 17px); /* 17 px = moitié du .cta-row désormais vide */
    }
    .hero-left > *{ flex-shrink: 0; }
  }

  /* Ancres du menu : le titre de la section reste visible sous le header collant */
  #solution, #formules, #contact, #fondateur, #blog-home{ scroll-margin-top: 110px; }

  /* ---------- HEADER / NAVBAR ---------- */
  .site-header{
    position: sticky;
    top: 14px;
    z-index: 100;
    max-width: 1260px;
    width: calc(100% - clamp(0px, 10vw, 140px));
    margin: 14px auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0px, 2vw, 24px);
    padding: 14px 36px;
    border-radius: 999px;
    background: rgba(6, 9, 11, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(46, 230, 224, 0.45);
    box-shadow: 0 0 18px rgba(46, 230, 224, 0.25), 0 0 45px rgba(46, 230, 224, 0.08), inset 0 0 12px rgba(46,230,224,0.05);
  }
  .site-header .logo-mark{ height: clamp(38px, 4.2vw, 54px); width: auto; filter: drop-shadow(0 0 6px rgba(46,230,224,0.6)); flex-shrink: 0; }
  .site-nav{ display:flex; align-items:center; gap: clamp(34px, 5.4vw, 88px); list-style:none; margin:0; padding:0; flex-wrap: nowrap; }
  .site-nav a{
    font-family:'Rajdhani', sans-serif;
    font-weight:600;
    letter-spacing:0.03em;
    font-size: clamp(0.7rem, 0.95vw, 0.92rem);
    text-transform:uppercase;
    color: var(--muted);
    text-decoration:none;
    white-space:nowrap;
    padding-bottom:6px;
    position:relative;
    transition: color .2s, text-shadow .2s;
  }
  .site-nav a:hover{ color: var(--white); text-shadow: 0 0 10px rgba(46,230,224,0.6), 0 0 20px rgba(46,230,224,0.35); }
  .site-nav a.active{ color: var(--cyan); }
  .site-nav a.active::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:2px;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan-soft);
    border-radius:2px;
  }
  .header-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
  .logo-link{ display:flex; align-items:center; text-decoration:none; line-height:0; }
  .mobile-menu-btn{
    display: none;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid var(--panel-border);
    background: transparent;
    color: var(--cyan);
    align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: box-shadow .2s, border-color .2s;
  }
  .mobile-menu-btn:hover{ border-color: var(--cyan); box-shadow: 0 0 14px rgba(46,230,224,0.5); }
  .mobile-menu-btn svg{ width: 18px; height: 18px; }
  .hero-beam-mobile{ display: none; }
  
  

  .mobile-nav-overlay{
    position: relative;
    z-index: 90;
    background: rgba(6, 9, 11, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    max-height: 0;
    visibility: hidden; /* menu fermé : liens non atteignables au clavier */
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition: max-height .35s ease, box-shadow .35s ease, border-color .35s ease, visibility 0s linear .35s;
  }
  .mobile-nav-overlay.open{
    max-height: 600px;
    visibility: visible;
    transition-delay: 0s;
    border-bottom: 1px solid var(--cyan);
    box-shadow: 0 2px 18px rgba(46, 230, 224, 0.45), 0 4px 40px rgba(46, 230, 224, 0.2);
  }
  .mobile-nav-links{
    list-style:none; margin:0; padding: 24px 24px 28px;
    display:flex; flex-direction:column; gap: 22px;
  }
  .mobile-nav-links a{
    font-family:'Rajdhani', sans-serif; font-weight:700; text-transform:uppercase;
    letter-spacing:0.03em; font-size: 1.05rem; color: var(--muted); text-decoration:none;
    display: block;
    transition: color .2s, text-shadow .2s;
  }
  .mobile-nav-links a:hover{ color: var(--cyan); text-shadow: 0 0 10px rgba(46,230,224,0.7), 0 0 20px rgba(46,230,224,0.4); }
  .mobile-nav-links a.active{ color: var(--cyan); }

  @media (max-width: 980px){
    .site-header{ flex-wrap: wrap; border-radius: 26px; justify-content:center; }
    .site-nav{ order:3; width:100%; justify-content:center; flex-wrap:wrap; row-gap:10px; padding-top:10px; border-top:1px solid var(--panel-border); margin-top:8px; }
  }

  /* ---------- GOALS / HOW IT WORKS SECTION ---------- */
  /* How it works steps */

  /* ---------- SOLUTION FOR ALL ---------- */
  .solution-section{ margin-bottom: 9.75vh; }
  .solution-header{
    text-align: center;
    margin-bottom: 40px;
  }
  .solution-header h2{
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: clamp(1.5rem, 2.6vw, 2.3rem);
    color: var(--white);
    text-shadow: 0 0 22px rgba(46,230,224,0.4);
    margin: 0 0 12px 0;
  }
  .solution-header p{
    color: var(--muted);
    font-size: 0.95rem;
    margin: 0 0 18px 0;
  }
  .solution-divider{
    width: 60px;
    height: 2px;
    background: var(--cyan);
    box-shadow: 0 0 10px var(--cyan-soft);
    margin: 0 auto;
    border-radius: 2px;
  }
  .solution-grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
  }
  @media (max-width: 980px){
    .solution-grid{ grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
    .solution-card{ max-width: 85%; margin: 0 auto; width: 100%; }
  }
  @media (max-width: 640px){
    .solution-grid{ grid-template-columns: 1fr; }
    .solution-card{ max-width: 100%; margin: 0 auto; width: 100%; }
  }
  .solution-card{
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    background: var(--card-bg);
    padding: 24px 18px 18px;
    display: flex;
    flex-direction: column;
    transition: border-color .25s, box-shadow .25s;
  }
  .solution-card:hover{
    border-color: var(--cyan);
    box-shadow: 0 0 25px rgba(46,230,224,0.35), 0 0 60px rgba(46,230,224,0.15);
  }
  .solution-icon{
    width: 54px; height: 54px;
    border-radius: 50%;
    border: 1px solid var(--panel-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--cyan);
    margin-bottom: 16px;
    box-shadow: 0 0 12px rgba(46,230,224,0.35), 0 0 24px rgba(46,230,224,0.15);
  }
  .solution-icon svg{ width: 24px; height: 24px; }
  .solution-title{
    font-family: 'Rajdhani', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    line-height: 1.15;
    font-size: 0.98rem;
    color: var(--white);
    margin: 0 0 10px 0;
    white-space: nowrap;
  }
  /* Écrans moyens (981–1280 px) : les 5 cartes tiennent dans la largeur (plus de carte coupée à droite) */
  @media (min-width: 981px) and (max-width: 1280px){
    .solution-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
    .solution-card{ min-width: 0; padding: 20px 12px 14px; }
    .solution-title{ white-space: normal; font-size: clamp(0.78rem, 1.3vw, 0.98rem); min-height: 2.3em; }
  }
  .solution-card-divider{
    width: 26px; height: 2px;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan-soft);
    border-radius: 2px;
    margin-bottom: 14px;
  }
  .solution-image{
    width: 100%;
    height: 264px;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 16px;
    background: none;
    display: flex; align-items: flex-end; justify-content: center;
    position: relative;
  }
  .solution-image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter:
      drop-shadow(0 0 4px rgba(46,230,224,0.9))
      drop-shadow(0 0 12px rgba(46,230,224,0.6))
      drop-shadow(0 0 26px rgba(46,230,224,0.35));
  }
  .solution-image svg{ width: 62%; color: rgba(46,230,224,0.55); }
  

  /* phones */
  .phone{
    position: relative;
    width: 172px;
    aspect-ratio: 9 / 19.3;
    background: #05070a;
    border: 2px solid rgba(46,230,224,0.35);
    border-radius: 26px;
    box-shadow: 0 0 22px rgba(46,230,224,0.18), 0 20px 50px rgba(0,0,0,0.6);
    overflow: hidden;
    flex-shrink: 0;
  }

  /* ---------- FINAL CTA ---------- */
  .final-cta-primary{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Rajdhani', sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:0.02em;
    font-size:0.95rem; color:#06090b; background: var(--cyan);
    border:none; border-radius:10px; padding:17px 30px; cursor:pointer;
    box-shadow: 0 0 18px rgba(46,230,224,0.4);
    transition: filter .2s;
  }
  .final-cta-primary:hover{ filter: brightness(1.1); }
  
  

  /* ---------- FOOTER ---------- */
  .site-footer{
    position: relative;
    margin: 0 auto 14px;
    max-width: 1260px;
    width: calc(100% - clamp(0px, 10vw, 140px));
    border-radius: 28px;
    background: rgba(6, 9, 11, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(46, 230, 224, 0.45);
    box-shadow: 0 0 18px rgba(46, 230, 224, 0.25), 0 0 45px rgba(46, 230, 224, 0.08), inset 0 0 12px rgba(46,230,224,0.05);
    padding: 36px 36px 26px;
  }
  .footer-top{
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 26px;
  }
  .footer-logo{ height: auto; width: clamp(220px, 24vw, 320px); filter: drop-shadow(0 0 6px rgba(46,230,224,0.6)); margin-bottom: 14px; }
  .footer-top > div{ display: flex; flex-direction: column; align-items: center; text-align: center; }
  .footer-desc{ color: var(--muted); font-size: 0.85rem; line-height: 1.55; max-width: 44ch; margin: 0 0 18px 0; }
  .footer-socials{ display: flex; gap: 10px; justify-content: center; }
  .footer-social{
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--panel-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--cyan);
    transition: border-color .2s, box-shadow .2s;
  }
  .footer-social:hover{ border-color: var(--cyan); box-shadow: 0 0 12px rgba(46,230,224,0.4); }
  .footer-social svg{ width: 16px; height: 16px; }
  
  
  
  
  .footer-bottom{
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 20px; border-top: 1px solid var(--panel-border);
    flex-wrap: wrap; gap: 10px; justify-content: center; text-align: center;
  }
  .footer-copy{ color: var(--muted-2); font-size: 0.82rem; }
  .footer-tagline{
    font-family: 'Rajdhani', sans-serif; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; font-size: 0.78rem; color: var(--cyan);
    margin: 0 0 8px 0;
  }

  @media (max-width: 900px){
    .footer-top{ grid-template-columns: 1fr 1fr; }
    .footer-top > div:first-child{ grid-column: 1 / -1; }
  }
  @media (max-width: 560px){
    .footer-top{ grid-template-columns: 1fr; }
    .site-footer{ border-radius: 22px; padding: 28px 24px 20px; }
  }

  /* ================= PHONE REDESIGN (reference mock) ================= */
  @media (max-width: 640px){

    /* ---- Header: flat full-width bar, sticky, same transparency as desktop ---- */
    .site-header{
      position: sticky;
      top: 0;
      max-width: 100%;
      width: 100%;
      margin: 0;
      padding: 13px 20px;
      border-radius: 0;
      border: none;
      border-bottom: 1px solid var(--cyan);
      background: rgba(6, 9, 11, 0.55);
      box-shadow: 0 2px 18px rgba(46, 230, 224, 0.45), 0 4px 40px rgba(46, 230, 224, 0.2);
      transition: box-shadow .35s ease, border-color .35s ease;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      justify-content: space-between;
      flex-wrap: nowrap;
    }
    .site-header.menu-open{
      border-bottom-color: rgba(255,255,255,0.1);
      box-shadow: none;
    }
    .site-nav{ display: none; }
    .header-actions{ gap: 10px; }
    .mobile-menu-btn{ display: flex; position: relative; z-index: 310; }
    .site-header .logo-mark{ height: clamp(41px, 4.54vw, 58px); }

    /* Menu mobile : reste visuellement attaché au header sticky (sinon le
       panneau se rouvre au niveau de la position d'origine du header dans
       le flux du document, avant tout scroll). --mobile-nav-offset est
       calculé dynamiquement (js/app.js) à partir de la hauteur réelle du
       header, pour que ce comportement reste correct sur toutes les pages. */
    .mobile-nav-overlay{
      position: sticky;
      top: var(--mobile-nav-offset, 0px);
      background: rgba(6, 9, 11, 0.55);
    }

    /* ---- Hero: normal stacked flow, image below buttons ---- */
    .hero{
      display: block;
      min-height: unset;
      padding: 34px 0 0;
    }
    .hero-left{
      width: 100%;
      padding: 0 22px;
      transform: none;
      align-items: center;
      text-align: center;
    }
    .cta-row{ align-items: center; }
    .logo{ width: min(83vw, 345px); }
    .headline{ font-size: clamp(1.9rem, 8vw, 2.4rem); }
    .headline-divider{ display: none; }
    .sub{ display: none; }
    .cta-row{ width: 100%; margin-top: 14px; }
    .btn-primary{
      width: 90%;
      justify-content: center;
      text-align: center;
    }

    .hero-right{
      position: static;
      width: 100%;
      min-height: 0;
      order: 0;
      margin: 34px 0 0;
      padding-bottom: 0;
      display: block;
      overflow: visible;
    }
    .figures{
      width: 110%;
      max-width: none;
      margin: 0 -5%;
      transform: scale(1.15);
      transform-origin: bottom center;
    }
    .hero-beam-mobile{ display: none; }

    
    

    .features{ margin-top: 0; }
    .wrap{ overflow-x: clip; } /* mobile : la grande image du héro ne crée pas de défilement horizontal */

    /* ---- Mobile app card: shorter, tighter, title on one line ---- */

    .site-footer{
      max-width: 100%;
      width: 100%;
      margin: 0;
      border-radius: 0;
      border: none;
      border-top: 1px solid var(--cyan);
      background: var(--bg);
      box-shadow: 0 -2px 18px rgba(46, 230, 224, 0.45), 0 -4px 40px rgba(46, 230, 224, 0.2);
      backdrop-filter: none;
      padding: 32px 22px 22px;
    }
    .footer-logo{ height: auto; width: min(260px, 72vw); }
    .footer-top{ text-align: center; }
    .footer-top > div{ display: flex; flex-direction: column; align-items: center; }
    .footer-desc{ text-align: center; }
    .footer-socials{ justify-content: center; }
    
    .footer-bottom{ justify-content: center; text-align: center; flex-direction: column; }
  }

  /* ================= TABLET ONLY (641px - 980px) ================= */
  @media (min-width: 641px) and (max-width: 980px){

    /* ---- Header on one line ---- */
    .site-header{
      flex-wrap: nowrap;
      justify-content: space-between;
      padding: 10px 18px;
      gap: 6px;
    }
    .site-nav{
      order: 0;
      width: auto;
      flex-wrap: nowrap;
      border-top: none;
      margin-top: 0;
      padding-top: 0;
      gap: clamp(18px, 4.2vw, 46px);
    }
    .site-nav a{ font-size: 0.651rem; }
    .header-actions{ gap: 6px; }
    /* Petites tablettes (641–820 px) : textes et boutons du header un peu plus grands */
    @media (max-width: 820px){
      .site-nav a{ font-size: 0.72rem; }
    }
    /* Petite tablette (641–700 px) : header resserré pour ne jamais dépasser de l'écran */
    @media (max-width: 700px){
      .site-header{ padding: 10px 14px; }
      .site-nav{ gap: 20px; }
    }

    /* ---- Hero: centered text, image below (glued to card), enlarged ---- */
    .hero{ min-height: 0; }
    .hero-left{
      order: 0;
      align-items: center;
      text-align: center;
    }
    .cta-row{ align-items: center; }
    .hero-right{
      position: static;
      order: 1;
      margin: 40px 0 0;
      padding: 0;
      min-height: 0;
      width: 100%;
      justify-content: center;
    }
    .figures{ width: min(73.5vw, 510px); max-width: 73.5vw; margin: 0; transform: scale(1.3); transform-origin: bottom center; }
    .features{ margin-top: 0; }

    /* ---- Solution grid: center the incomplete last row ---- */
    .solution-grid{
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      row-gap: 24px;
      column-gap: 20px;
    }
    .solution-card{
      flex: 0 0 calc(33.333% - 14px);
      max-width: calc(33.333% - 14px);
      margin: 0;
    }
  }

  /* ---------- TRÈS PETITS ÉCRANS (≤360px) : cartes d'atouts sans débordement ---------- */
  @media (max-width: 360px){
    .features{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feature{ padding: 28px 10px; min-width: 0; }
    .feature h3, .feature h2, .feature p{ overflow-wrap: anywhere; }
  }

  /* ================= TABLETTE UNIQUEMENT (641px - 980px) =================
     Les cards de l'accueil reprennent le rendu ordinateur :
     bandeau d'atouts sur 5 colonnes, cartes « Pour tous » sur 5 colonnes. */
  @media (min-width: 641px) and (max-width: 980px){
    .features{ grid-template-columns: repeat(5, 1fr); }
    .feature:nth-child(n){ grid-column: auto; border-right: 1px solid var(--panel-border); border-bottom: none; }
    .feature:last-child{ border-right: none; }
    .feature{ padding: 18px 10px; gap: 10px; min-width: 0; }
    .feature-icon{ width: 40px; height: 40px; }
    .feature-icon svg{ width: 18px; height: 18px; }
    .feature p{ font-size: 0.78rem; line-height: 1.4; }
    .solution-grid{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; row-gap: 14px; }
    .solution-card{ flex: none; max-width: none; width: auto; min-width: 0; margin: 0; padding: 20px 12px 14px; }
    .solution-title{ white-space: normal; font-size: clamp(0.78rem, 1.3vw, 0.98rem); min-height: 2.3em; }
    .solution-image{ height: 200px; overflow: visible; }
    .solution-image img{ width: 100% !important; height: 100% !important; max-width: 100%; object-fit: contain; object-position: center bottom; }
    .solution-icon{ width: 44px; height: 44px; margin-bottom: 12px; }
    .solution-icon svg{ width: 20px; height: 20px; }
  }

  /* Tablette uniquement : bandeau d'atouts sous l'image du héro moins haut */
  @media (min-width: 641px) and (max-width: 980px){
    .feature{ padding: 18px 10px; gap: 8px; }
    .feature-icon{ width: 38px; height: 38px; }
    .feature-icon svg{ width: 17px; height: 17px; }
    .feature p{ line-height: 1.4; }
  }

  /* Tablette uniquement : texte d'accroche du héro plus petit */
  @media (min-width: 641px) and (max-width: 980px){
    .sub{ font-size: 0.85rem; line-height: 1.5; max-width: 46ch; }
  }


/* ===== PARTIE : contact ===== */
/* ==========================================================================
   CONTACT — styles spécifiques à la page, complètent css/style.css
   et réutilisent les variables/composants globaux (--cyan, --card-bg,
   --panel-border, pulseGlow, .footer-social)
   ========================================================================== */

/* ---------- FORMULAIRE + COORDONNÉES
   Prend toute la largeur disponible du .wrap — qui, par construction
   du site (padding de .wrap = clamp identique à la marge du header),
   ne dépasse jamais la largeur du header. La card formulaire est
   flexible (elle absorbe l'espace disponible) tandis que le panneau
   de coordonnées garde une largeur fixe, pour ne jamais être réduit.
   ---------- */
.contact-form-section{
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 24px;
  margin: 0 0 9.75vh;
  align-items: stretch;
}

.contact-form-card{
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  background: var(--card-bg), rgba(8,12,14,0.35);
  padding: 34px 30px;
  animation: pulseGlow 6s ease-in-out infinite;
}

.field{ margin-bottom: 18px; }
.field:last-of-type{ margin-bottom: 20px; }
.field label{
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 8px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea{
  width: 100%;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 13px 14px;
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea{ resize: vertical; min-height: 260px; line-height: 1.5; }
.field select{ cursor: pointer; }
.field select option{ color: #06090b; background: #ffffff; }
.field input::placeholder,
.field textarea::placeholder{ color: var(--muted-2); }

.field input:hover,
.field select:hover,
.field textarea:hover{ border-color: var(--cyan-soft); }

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: var(--cyan);
  box-shadow: 0 0 14px rgba(46,230,224,0.3);
}

/* États de validation, gérés en JS (js/contact.js) */
.contact-field-error{
  display: none;
  margin-top: 7px;
  font-size: 0.76rem;
  color: #ff6b6b;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  border-color: rgba(255,107,107,0.6);
  box-shadow: 0 0 12px rgba(255,107,107,0.2);
}
.field.has-error .contact-field-error{ display: block; }
.field.has-success input,
.field.has-success select,
.field.has-success textarea{
  border-color: rgba(53,212,138,0.55);
}

.contact-field-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-submit-btn{
  width: 100%;
  justify-content: center;
  border: none;
  cursor: pointer;
}

.contact-secure-note{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0 0;
  color: var(--muted-2);
  font-size: 0.76rem;
  text-align: center;
}
.contact-secure-note svg{ width: 14px; height: 14px; flex-shrink: 0; color: var(--cyan); }

/* ---------- PANNEAU DE COORDONNÉES
   E-mail / Téléphone / Horaires, séparés par
   des lignes fines avec un accent lumineux central (haut et bas de
   la carte), même famille visuelle que .goal-item / .step-item de
   style.css. ---------- */
.contact-info-panel{
  position: relative;
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  background: var(--card-bg), rgba(8,12,14,0.35);
  padding: 8px 30px;
  animation: pulseGlow 6s ease-in-out infinite;
  display: flex;
  flex-direction: column;
}
.contact-info-panel::before,
.contact-info-panel::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 12px rgba(46,230,224,0.6);
  opacity: 0.85;
}
.contact-info-panel::before{ top: -1px; }
.contact-info-panel::after{ bottom: -1px; }

.contact-info-row{
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 26px 0;
}
.contact-info-row-icon{
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan);
  box-shadow: 0 0 12px rgba(46,230,224,0.35), 0 0 24px rgba(46,230,224,0.15);
}
.contact-info-row-icon svg{ width: 23px; height: 23px; }
.contact-info-row-body{ flex: 1; min-width: 0; }
.contact-info-row-label{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.76rem;
  color: var(--cyan);
  margin: 0 0 8px 0;
}
.contact-info-row-value{
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--white);
  margin: 0 0 6px 0;
  word-break: break-word;
}
.contact-info-link{
  color: inherit;
  font: inherit;
  text-decoration: none;
}
.contact-info-row-desc{
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
}
.contact-info-divider{
  height: 1px;
  background: var(--panel-border);
}

.contact-hours-list{
  list-style: none;
  margin: 6px 0 0 0;
  padding: 0;
}
.contact-hours-list li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--panel-border);
  font-size: 0.88rem;
  color: var(--white);
}
.contact-hours-list li:last-child{ border-bottom: none; }
.contact-hours-list li span:last-child{ color: var(--muted); font-weight: 500; }
.contact-hours-list li.is-closed span:last-child{ color: var(--muted-2); }

/* ---------- CARTES D'INFORMATIONS — une seule carte, items séparés
   par des séparateurs (même composant que .partenaires-why-card /
   .partenaires-why-items sur la page Partenaires ; classes réutilisées
   à l'identique, dupliquées ici car partenaires.css n'est pas chargé
   sur cette page). ---------- */

/* ---------- RESPONSIVE (formulaire + coordonnées) ---------- */
@media (min-width: 641px) and (max-width: 980px){
  .contact-form-section{ grid-template-columns: 1fr; }

  /* Tablette uniquement : cartes plus compactes et centrées (formulaire,
     coordonnées, bloc d'informations). Le bloc « Prêt à commencer ? » n'est pas concerné. */
  .contact-form-card,
  .contact-info-panel{
    width: 100%;
    max-width: 560px;
    justify-self: center;
  }
  .contact-form-card{ padding: 26px 26px; }
  
  .field{ margin-bottom: 14px; }
  .field textarea{ min-height: 150px; }
  .contact-info-panel{ padding: 4px 22px; }
  .contact-info-row{ padding: 18px 0; gap: 12px; }
  .contact-info-row-icon{ width: 46px; height: 46px; }
  .contact-info-row-icon svg{ width: 20px; height: 20px; }
  .contact-hours-list li{ padding: 6px 0; }
  

  /* Panneau de coordonnées : éléments centrés (tablette uniquement) */
  .contact-info-row{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .contact-info-row-body{ width: 100%; }

  

  /* Horaires d'ouverture : jour et créneau rapprochés (au lieu d'être
     étalés sur toute la largeur de la carte) et liste centrée. La
     première colonne (jour) a une largeur fixe pour que les jours ET
     les horaires soient chacun alignés en colonne, les uns sous les
     autres, plutôt que décalés selon la longueur du nom du jour. */
  .contact-hours-list{
    width: fit-content;
    margin: 6px auto 0;
  }
  .contact-hours-list li{
    justify-content: flex-start;
    gap: 26px;
  }
  .contact-hours-list li span:first-child{
    min-width: 92px;
  }
}
@media (max-width: 640px){
  .contact-form-section{ grid-template-columns: 1fr; }
  .contact-form-card{ padding: 26px 20px; }
  .contact-info-panel{ padding: 6px 22px; }
  .contact-field-row{ grid-template-columns: 1fr; gap: 0; }
  /* Mobile : le cadenas reste collé au début du texte, même quand celui-ci passe sur 2 lignes */
  .contact-secure-note{ display: block; line-height: 1.5; }
  .contact-secure-note svg{ display: inline-block; vertical-align: -3px; margin-right: 6px; }
}


/* Mention RGPD sous le formulaire */
.contact-rgpd-note{ margin: 8px 0 0 0; color: var(--muted-2); font-size: 0.76rem; line-height: 1.5; text-align: center; }
.contact-rgpd-note a{ color: var(--cyan); text-decoration: none; }
.contact-rgpd-note a:hover{ text-shadow: 0 0 10px rgba(46,230,224,0.6); }

/* Envoi réel : champ piège anti-robot (invisible) et widget Turnstile */
.contact-hp{ position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.contact-turnstile{ margin: 0; }
.contact-submit-btn[disabled]{ opacity: 0.65; cursor: wait; }

/* ================= TABLETTE UNIQUEMENT (641px - 980px) =================
   Formulaire + coordonnées côte à côte et cards au rendu ordinateur
   (le panneau de coordonnées s'adapte à la largeur au lieu des 520 px fixes). */
@media (min-width: 641px) and (max-width: 980px){
  .contact-form-section{ grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 24px; }
  .contact-form-card,
  .contact-info-panel{ width: auto; max-width: none; justify-self: stretch; }
  .contact-form-card{ padding: 34px 30px; }
  .field{ margin-bottom: 18px; }
  .field textarea{ min-height: 260px; }
  .contact-info-panel{ padding: 8px 30px; }
  .contact-info-row{ flex-direction: row; align-items: flex-start; text-align: left; padding: 26px 0; gap: 18px; }
  .contact-info-row-body{ width: auto; }
  .contact-info-row-icon{ width: 56px; height: 56px; }
  .contact-info-row-icon svg{ width: 23px; height: 23px; }
  .contact-hours-list{ width: auto; margin: 6px 0 0 0; }
  .contact-hours-list li{ justify-content: space-between; gap: 10px; padding: 9px 0; }
  .contact-hours-list li span:first-child{ min-width: 0; }
}

/* Tablette uniquement : panneau de coordonnées plus compact */
@media (min-width: 641px) and (max-width: 980px){
  .contact-info-panel{ padding: 4px 20px; }
  .contact-info-row{ padding: 16px 0; gap: 12px; }
  .contact-info-row-icon{ width: 44px; height: 44px; }
  .contact-info-row-icon svg{ width: 19px; height: 19px; }
  .contact-info-row-value{ font-size: 0.92rem; }
  .contact-info-row-desc{ font-size: 0.8rem; }
  .contact-hours-list li{ padding: 6px 0; font-size: 0.8rem; }
}

/* Tablette uniquement : éléments du panneau de coordonnées mieux répartis dans la card
   et textes à la même échelle que les horaires d'ouverture */
@media (min-width: 641px) and (max-width: 980px){
  .contact-info-panel{ padding: 4px 20px; }
  .contact-info-row{ flex: 1 1 auto; align-items: center; padding: 16px 0; }
  .contact-info-row-value{ font-size: 0.88rem; }
  .contact-info-row-desc{ font-size: 0.78rem; line-height: 1.4; }
  .contact-hours-list li{ font-size: 0.84rem; }
}


/* ===== PARTIE : contact-accueil ===== */
/* ==========================================================================
   EKILIBRUM — Formulaire de contact sur l'accueil (css/contact-accueil.css)
   Complète css/contact.css : la card prend toute la largeur du contenu (comme les autres
   sections de l'accueil), avec le même espacement.
   ========================================================================== */
.contact-accueil{ margin: 0 auto 9.75vh; }
.contact-accueil .contact-form-card{ width: 100%; max-width: none; }
.contact-accueil .field textarea{ min-height: 170px; }
@media (min-width: 641px) and (max-width: 980px){
  .contact-accueil .contact-form-card{ max-width: none; }
}

/* Formulaire + panneau de coordonnées côte à côte (comme sur l'ancienne page Contact) */
.contact-accueil .contact-form-section{ margin: 0; }
@media (min-width: 641px) and (max-width: 980px){
  .contact-accueil .contact-info-panel{ max-width: none; }
}

/* Tablette uniquement : même hauteur de zone de texte que sur ordinateur */
@media (min-width: 641px) and (max-width: 980px){
  .contact-accueil .field textarea{ min-height: 170px; }
}


/* ===== PARTIE : documents-juridiques ===== */
/* ==========================================================================
   EKILIBRUM — Documents juridiques sur l'accueil (css/documents-juridiques.css)
   Même card « Nos documents juridiques » que sur les pages légales (copie des règles
   .legal-docs* de css/mentions-legales.css), pleine largeur comme les autres sections de l'accueil.
   ========================================================================== */
/* ---------- DOCUMENTS JURIDIQUES ---------- */
#documents.legal-docs{
  max-width: none;
  margin: 0 auto 9.75vh;
  text-align: center;
}
.legal-docs-card{
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  background: var(--card-bg);
  padding: 30px 32px;
  animation: pulseGlow 6s ease-in-out infinite;
}
.legal-docs-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.legal-doc-item{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: var(--card-bg);
  padding: 18px 14px;
  color: var(--muted);
  text-decoration: none;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.8rem;
  text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.legal-doc-item:hover{
  border-color: var(--cyan);
  color: var(--white);
  box-shadow: 0 0 16px rgba(46,230,224,0.2);
}
.legal-doc-item.is-active{
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 16px rgba(46,230,224,0.25);
}
.legal-doc-icon{
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.legal-doc-icon svg{ width: 16px; height: 16px; }

@media (max-width: 980px){
  .legal-docs-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .legal-docs-grid{ grid-template-columns: 1fr; }
  .legal-doc-item{ justify-content: flex-start; }
}

/* Tablette uniquement (641–980 px) : cartes de documents comme sur ordinateur */
@media (min-width: 641px) and (max-width: 980px){
  .legal-docs-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
  .legal-doc-item{ min-width: 0; padding-left: 10px; padding-right: 10px; }
  .legal-doc-item *{ min-width: 0; overflow-wrap: anywhere; }
}


/* ===== PARTIE : tarifs ===== */
/* ==========================================================================
   TARIFS — styles spécifiques à la page, complètent css/style.css
   et réutilisent les variables/composants globaux (--cyan, --card-bg,
   --panel-border, .check-list)
   ========================================================================== */

/* ---------- CHECK-LIST (répliqué depuis objectifs.css, dupliqué ici car
   objectifs.css n'est pas chargé sur cette page) ---------- */
.check-list{
  list-style: none;
  margin: 0 0 18px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.check-list li{
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--white);
  font-size: 0.84rem;
  line-height: 1.4;
}
.check-list li svg{
  flex-shrink: 0;
  width: 15px; height: 15px;
  margin-top: 2px;
  color: var(--cyan);
}

/* ---------- PRICING CARD — composant unique réutilisable ---------- */
.pricing-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 32px 1fr;
  gap: 22px;
  margin-bottom: 9.5vh;
  align-items: stretch;
}

/* Séparateur visuel entre les 3 offres en présentiel et le coaching à
   distance : ligne verticale néon discrète + libellé, uniquement au
   sein de la grille 4 colonnes (desktop). Masqué dès que les cartes
   repassent en 2 puis 1 colonne (voir media queries plus bas). */
.pricing-separator{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 0;
}
.pricing-separator::before,
.pricing-separator::after{
  content: "";
  width: 1px;
  flex: 1;
  background: linear-gradient(to bottom, transparent, var(--panel-border) 20%, var(--panel-border) 80%, transparent);
}
.pricing-separator span{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.66rem;
  color: var(--muted-2);
  white-space: nowrap;
}

.pricing-card{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  background: var(--card-bg);
  padding: 34px 26px 28px;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.pricing-card:hover{
  border-color: var(--cyan);
  box-shadow: 0 0 25px rgba(46,230,224,0.35), 0 0 60px rgba(46,230,224,0.15), inset 0 0 20px rgba(46,230,224,0.06);
  transform: translateY(-4px);
}

/* Carte mise en avant : légère élévation, glow un peu plus présent,
   contour plus lumineux — sans effet agressif */
.pricing-card--featured{
  border-color: rgba(46,230,224,0.65);
  background: linear-gradient(180deg, rgba(46,230,224,0.07), transparent);
  box-shadow: 0 0 30px rgba(46,230,224,0.28), 0 0 70px rgba(46,230,224,0.12), inset 0 0 24px rgba(46,230,224,0.05);
  transform: translateY(-10px);
}
.pricing-card--featured:hover{
  transform: translateY(-14px);
  box-shadow: 0 0 34px rgba(46,230,224,0.4), 0 0 80px rgba(46,230,224,0.18), inset 0 0 24px rgba(46,230,224,0.07);
}

/* Badge premium, discret, en surimpression du haut de la carte */
.pricing-badge{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.66rem;
  color: #06090b;
  background: var(--cyan);
  border-radius: 999px;
  padding: 7px 16px;
  box-shadow: 0 0 16px rgba(46,230,224,0.55);
}

.pricing-icon{
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan);
  margin-bottom: 18px;
  box-shadow: 0 0 12px rgba(46,230,224,0.35), 0 0 24px rgba(46,230,224,0.15);
}
.pricing-icon svg{ width: 24px; height: 24px; }
.pricing-card--featured .pricing-icon{
  border-color: rgba(46,230,224,0.7);
  box-shadow: 0 0 16px rgba(46,230,224,0.5), 0 0 34px rgba(46,230,224,0.22);
}

.pricing-name{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 1.3rem;
  color: var(--white);
  margin: 0 0 6px 0;
}
.pricing-duration{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.74rem;
  color: var(--muted-2);
  margin: 0 0 22px 0;
}

.pricing-price{
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 18px;
}
.pricing-amount{
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 2.1rem;
  color: var(--cyan);
  text-shadow: 0 0 18px rgba(46,230,224,0.4);
}
.pricing-period{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--muted);
}

.pricing-divider{
  width: 100%;
  height: 1px;
  background: var(--panel-border);
  margin: 0 0 20px 0;
}

.pricing-features-label{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  color: var(--muted-2);
  margin: 0 0 12px 0;
}

.pricing-features{ margin-bottom: 26px; }

@media (max-width: 980px){
  .pricing-grid{ grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .pricing-card--featured{ transform: translateY(0); }
  .pricing-card--featured:hover{ transform: translateY(-4px); }
  .pricing-separator{ display: none; }
}
@media (max-width: 640px){
  .pricing-grid{ grid-template-columns: 1fr; }
}

/* ---------- PRESTATIONS À LA CARTE ---------- */
.services-section{ margin-bottom: 10vh; }
.services-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.service-card{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  background: var(--card-bg);
  padding: 26px 30px;
  transition: border-color .25s, box-shadow .25s;
}
.service-card:hover{
  border-color: var(--cyan);
  box-shadow: 0 0 25px rgba(46,230,224,0.35), 0 0 60px rgba(46,230,224,0.15);
}

.service-icon{
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan);
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(46,230,224,0.35), 0 0 24px rgba(46,230,224,0.15);
}
.service-icon svg{ width: 24px; height: 24px; }

.service-main{ min-width: 0; }
.service-title{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 1rem;
  color: var(--white);
  margin: 0 0 8px 0;
}
.service-price{
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--cyan);
  text-shadow: 0 0 16px rgba(46,230,224,0.4);
}

.service-features{
  margin: 0;
  gap: 8px;
  flex: none;
}
.service-features li{ font-size: 0.8rem; }
.service-features li svg{ width: 14px; height: 14px; }

@media (max-width: 980px){
  .service-card{
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon main"
      "features features";
    row-gap: 18px;
  }
  .service-icon{ grid-area: icon; }
  .service-main{ grid-area: main; }
  .service-features{ grid-area: features; }
}
@media (max-width: 640px){
  .services-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .service-card{ padding: 22px 20px; }
}

/* ================= TABLETTE UNIQUEMENT (641px - 980px) =================
   Les cards tarifs et prestations reprennent la disposition ordinateur. */
@media (min-width: 641px) and (max-width: 980px){
  .pricing-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) 32px minmax(0,1fr); gap: 12px; row-gap: 22px; }
  .pricing-card{ min-width: 0; padding-left: 14px; padding-right: 14px; }
  .pricing-card *{ overflow-wrap: break-word; }
  .pricing-name{ font-size: clamp(1rem, 2.4vw, 1.3rem); }
  .pricing-price{ flex-wrap: wrap; gap: 2px 6px; }
  .pricing-amount{ font-size: clamp(1.35rem, 3.2vw, 2.1rem); white-space: nowrap; }
  .pricing-period{ white-space: nowrap; font-size: 0.8rem; }
  .pricing-features li{ font-size: 0.8rem; }
  .pricing-separator{ display: flex; }
  .pricing-card--featured{ transform: translateY(-10px); }
  .pricing-card--featured:hover{ transform: translateY(-14px); }
}

/* Tablette uniquement : cards « Nos formules » plus compactes (moins hautes, plus homogènes) */
@media (min-width: 641px) and (max-width: 980px){
  .pricing-card{ padding: 24px 12px 18px; }
  .pricing-icon{ width: 44px; height: 44px; margin-bottom: 12px; }
  .pricing-icon svg{ width: 20px; height: 20px; }
  .pricing-duration{ margin-bottom: 12px; font-size: 0.66rem; }
  .pricing-price{ margin-bottom: 12px; }
  .pricing-divider{ margin-bottom: 12px; }
  .pricing-features-label{ margin-bottom: 8px; font-size: 0.64rem; }
  .pricing-features{ gap: 6px; margin-bottom: 14px; }
  .pricing-features li{ font-size: 0.74rem; gap: 6px; line-height: 1.3; }
  .pricing-features li svg{ width: 13px; height: 13px; margin-top: 1px; }
}

/* Tablette uniquement : « Prestations à la carte » au même format que les cards de formules
   (icône, titre, prix et liste empilés, mêmes tailles de texte) */
@media (min-width: 641px) and (max-width: 980px){
  .service-card{
    grid-template-columns: 1fr;
    grid-template-areas: "icon" "main" "features";
    align-items: start;
    align-content: start;
    row-gap: 0;
    padding: 24px 18px 18px;
  }
  .service-icon{ width: 44px; height: 44px; margin-bottom: 12px; }
  .service-icon svg{ width: 20px; height: 20px; }
  .service-title{ font-size: clamp(1rem, 2.4vw, 1.3rem); font-weight: 800; margin: 0 0 6px 0; }
  .service-price{ font-size: clamp(1.35rem, 3.2vw, 2.1rem); margin-bottom: 12px; }
  .service-features{ gap: 6px; padding-top: 12px; border-top: 1px solid var(--panel-border); }
  .service-features li{ font-size: 0.74rem; gap: 6px; line-height: 1.3; }
  .service-features li svg{ width: 13px; height: 13px; margin-top: 1px; }
}

/* Tablette uniquement : « Prestations à la carte » à la même largeur et au même format que
   les cards de formules (même gabarit de colonne, rayon, marges, libellé « Inclus ») */
@media (min-width: 641px) and (max-width: 980px){
  .services-grid{ grid-template-columns: repeat(2, calc((100% - 32px - 48px) / 4)); gap: 12px; justify-content: center; }
  .service-card{ padding: 24px 12px 18px; border-radius: 18px; transition: border-color .25s, box-shadow .25s, transform .25s; }
  .service-card:hover{ transform: translateY(-4px); }
  .service-features::before{
    content: "Inclus";
    display: block;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.64rem;
    color: var(--muted-2);
    margin-bottom: 2px;
  }
}

/* Petits portables (981–1060 px) : les 5 colonnes des formules tiennent sans dépasser à droite */
@media (min-width: 981px) and (max-width: 1060px){
  .pricing-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)) 32px minmax(0, 1fr); gap: 12px; }
  .pricing-card{ min-width: 0; padding-left: 14px; padding-right: 14px; }
  .pricing-card *{ overflow-wrap: break-word; }
  .pricing-name{ font-size: 1.15rem; }
  .pricing-amount{ font-size: 1.8rem; white-space: nowrap; }
  .pricing-period{ white-space: nowrap; }
}


/* ===== PARTIE : formules-accueil ===== */
/* ==========================================================================
   EKILIBRUM — « Prestations à la carte » sur l'accueil (css/formules-accueil.css)
   Même style que le séparateur « À distance » de css/tarifs.css (libellé discret + ligne
   néon), en version horizontale.
   ========================================================================== */
.services-sep{
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 clamp(36px, 5vh, 56px) 0;
  font-weight: normal;
}
/* libellé centré entre les formules du dessus et les cards du dessous : même espace de chaque côté */
.formules-accueil .pricing-grid{ margin-bottom: clamp(36px, 5vh, 56px); }
.services-sep::before,
.services-sep::after{
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--panel-border) 20%, var(--panel-border) 80%, transparent);
}
.services-sep span{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.66rem;
  color: var(--muted-2);
  white-space: nowrap;
}


/* ===== PARTIE : blog ===== */
/* ==========================================================================
   BLOG — styles de la section « Derniers articles » (accueil), complètent css/style.css
   et réutilisent les variables/composants globaux déjà utilisés ailleurs
   sur le site (--cyan, --card-bg, --panel-border, --muted, --muted-2,
   pulseGlow, .wrap, polices Orbitron/Rajdhani/Inter). Aucune classe
   globale n'est redéfinie ici : tout ce qui suit est propre à Blog,
   comme pour tarifs.css / contact.css.
   ========================================================================== */

/* ---------- GRILLE D'ARTICLES ---------- */

.blog-card{
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  background: var(--card-bg);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.blog-card:hover{
  border-color: var(--cyan);
  box-shadow: 0 0 25px rgba(46,230,224,0.3), 0 0 55px rgba(46,230,224,0.12);
  transform: translateY(-4px);
}

.blog-card-image{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0a0f12;
}
.blog-card-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.blog-card:hover .blog-card-image img{ transform: scale(1.06); }

.blog-card-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.66rem;
  color: var(--cyan);
  background: rgba(6, 9, 11, 0.72);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 6px 12px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.blog-card-body{
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 20px 22px;
}

.blog-card-meta{
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted-2);
  font-size: 0.74rem;
  margin: 0 0 12px 0;
}
.blog-card-meta span{ display: inline-flex; align-items: center; gap: 5px; }
.blog-card-meta svg{ width: 13px; height: 13px; flex-shrink: 0; }

.blog-card-title{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.32;
  color: var(--white);
  margin: 0 0 10px 0;
}

.blog-card-excerpt{
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
  margin: 0 0 18px 0;
  flex: 1;
}

.blog-card-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.8rem;
  color: var(--cyan);
  text-decoration: none;
}
.blog-card-link svg{ width: 14px; height: 14px; transition: transform .25s ease; }
.blog-card-link:hover svg{ transform: translateX(4px); }

/* ---------- Carte sans image : le logo, centré, à la place de la photo ---------- */
.blog-card-image img.is-placeholder{
  object-fit: contain;
  padding: 20% 26%;
  opacity: 0.55;
}

/* ---------- SECTION BLOG DE L'ACCUEIL (index.html) ----------
   Titre, texte et trait cyan : mêmes classes que « Une solution pour tous » (.solution-header,
   .solution-divider dans style.css). Les cartes sont les .blog-card de cette page (js/blog-home.js). */
.blog-home-section{ margin-bottom: 9.75vh; }
.blog-home-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.blog-home-message{
  display: none;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  padding: 10px 0;
}
.blog-home-message.is-visible{ display: block; }
@media (max-width: 760px){
  .blog-home-grid{ grid-template-columns: 1fr; }
}

/* Textes longs dans les cards d'articles (Blog et accueil) : retour à la ligne, jamais de débordement */
.blog-card-title, .blog-card-excerpt, .blog-card-meta span{ overflow-wrap: anywhere; min-width: 0; }


/* ===== PARTIE : fondateur ===== */
/* ==========================================================================
   FONDATEUR — card « Moi, le fondateur » de la page d'accueil (css/fondateur.css)
   Styles repris tels quels de l'ancienne page À propos (supprimée) : la card garde
   exactement le même rendu. Complète css/style.css et réutilise ses variables
   (--cyan, --card-bg, --panel-border, --muted, --white...).
   ========================================================================== */

.apropos-creator-title .accent{
  color: var(--cyan);
  text-shadow: 0 0 18px rgba(46,230,224,0.4);
}
.apropos-divider{
  width: 56px;
  height: 3px;
  background: var(--cyan);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(46,230,224,0.5);
  margin: 18px 0;
}

/* ---------- MOI, LE CRÉATEUR ---------- */
.apropos-creator-section{ margin-bottom: 9.75vh; }
.apropos-creator-block{
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  background: var(--card-bg), rgba(8,12,14,0.35);
  padding: 34px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr 1fr;
  gap: 30px;
  align-items: stretch;
  transition: border-color .25s, box-shadow .25s;
}
.apropos-creator-block:hover{
  border-color: var(--cyan);
  box-shadow: 0 0 25px rgba(46,230,224,0.3), 0 0 60px rgba(46,230,224,0.12);
}

.apropos-creator-photo-frame{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--panel-border);
  min-height: 100%;
}
.apropos-creator-photo{
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}

.apropos-creator-content{ display: flex; flex-direction: column; justify-content: center; }
.apropos-creator-eyebrow{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  color: var(--cyan);
  margin: 0 0 10px 0;
}
.apropos-creator-title{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.2;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  color: var(--white);
  margin: 0;
}
.apropos-creator-content > .apropos-divider{ margin: 16px 0 18px; }
.apropos-creator-bio{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.apropos-creator-bio p{
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0;
}
.apropos-creator-signature{
  font-family: 'Rajdhani', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(46,230,224,0.4);
  margin: 0;
}

/* Réutilise .paiement-trust-list / .paiement-trust-item / .paiement-trust-icon /
   .paiement-trust-title / .paiement-trust-desc (voir css/paiement.css),
   dupliqué ici car paiement.css n'est pas chargé sur cette page. */
.apropos-creator-list{
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  background: var(--card-bg);
  overflow: hidden;
  align-self: center;
}
.paiement-trust-item{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
}
.paiement-trust-item + .paiement-trust-item{
  border-top: 1px solid var(--panel-border);
}
.paiement-trust-icon{
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--cyan-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan);
  box-shadow: 0 0 12px rgba(46,230,224,0.3), 0 0 24px rgba(46,230,224,0.12);
}
.paiement-trust-icon svg{ width: 17px; height: 17px; }
.paiement-trust-title{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.86rem;
  color: var(--white);
  margin: 0 0 4px 0;
}
.paiement-trust-desc{
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 1180px){
  .apropos-creator-block{ grid-template-columns: 1fr; }
  .apropos-creator-photo-frame{ min-height: 280px; }
  .apropos-creator-photo{ min-height: 280px; }
  .apropos-creator-content{ text-align: center; align-items: center; }
  .apropos-creator-content > .apropos-divider{ margin-left: auto; margin-right: auto; }
  .apropos-creator-bio{ max-width: 60ch; margin-left: auto; margin-right: auto; }
}
@media (max-width: 980px){
  .apropos-creator-block{ padding: 28px 24px; }
}
@media (max-width: 640px){
  .apropos-creator-block{ padding: 24px 20px; row-gap: 0; }
  .paiement-trust-item{ padding: 18px; }

  /* "Moi, le fondateur" + titre + trait néon au-dessus de la photo,
     mobile uniquement. .apropos-creator-content passe en display:contents :
     ses enfants (eyebrow / titre / trait / bio / signature) deviennent
     des items directs de la grille .apropos-creator-block, réordonnables
     individuellement via `order` — sans dupliquer aucun HTML et sans
     toucher au desktop ni à la tablette (scopé à cette media query). */
  .apropos-creator-content{ display: contents; }
  .apropos-creator-content .apropos-creator-eyebrow{ order: 1; }
  .apropos-creator-content .apropos-creator-title{ order: 2; }
  .apropos-creator-content .apropos-divider{ order: 3; margin: 16px auto 30px; }
  .apropos-creator-photo-frame{ order: 4; }
  .apropos-creator-content .apropos-creator-bio{ order: 5; margin-top: 30px; }
  .apropos-creator-content .apropos-creator-signature{ order: 6; }
  .apropos-creator-list{ order: 7; margin-top: 30px; }
}

/* ================= TABLETTE UNIQUEMENT (641px - 980px) =================
   "Moi, le fondateur" : reprend exactement la disposition desktop
   (3 colonnes, alignée à gauche) au lieu du format empilé hérité de la
   règle <=1180px pensée pour le mobile. */
@media (min-width: 641px) and (max-width: 980px){
  .apropos-creator-block{ grid-template-columns: 0.85fr 1.15fr 1fr; }
  .apropos-creator-photo-frame{ min-height: 100%; }
  .apropos-creator-photo{ min-height: 240px; }
  .apropos-creator-content{ text-align: left; align-items: flex-start; }
  .apropos-creator-content > .apropos-divider{ margin-left: 0; margin-right: auto; }
  .apropos-creator-bio{ max-width: none; margin-left: 0; margin-right: 0; }
}

/* Tablette uniquement : bloc « Moi, le fondateur » plus compact, éléments à la même échelle */
@media (min-width: 641px) and (max-width: 980px){
  .apropos-creator-block{ padding: 22px 18px; gap: 18px; }
  .apropos-creator-photo{ min-height: 200px; }
  .apropos-creator-eyebrow{ font-size: 0.66rem; }
  .apropos-creator-title{ font-size: clamp(1rem, 2.4vw, 1.2rem); }
  .apropos-creator-content > .apropos-divider{ margin: 12px 0 14px; }
  .apropos-creator-bio{ gap: 8px; margin-bottom: 12px; }
  .apropos-creator-bio p{ font-size: 0.76rem; line-height: 1.5; }
  .apropos-creator-signature{ font-size: 0.92rem; }
  .paiement-trust-item{ padding: 14px 14px; gap: 10px; }
  .paiement-trust-icon{ width: 32px; height: 32px; }
  .paiement-trust-icon svg{ width: 15px; height: 15px; }
  .paiement-trust-title{ font-size: 0.78rem; }
  .paiement-trust-desc{ font-size: 0.72rem; line-height: 1.4; }
}


/* ===== PARTIE : valeurs ===== */
/* ==========================================================================
   VALEURS — card « Nos convictions & valeurs » de la page d'accueil (css/valeurs.css)
   Styles repris tels quels de l'ancienne page À propos (supprimée) : la card garde
   exactement le même rendu. Complète css/style.css et réutilise ses variables
   (--cyan, --card-bg, --panel-border, --muted-2, --white, pulseGlow...).
   ========================================================================== */

/* ---------- NOS CONVICTIONS & VALEURS ----------
   Carte unique, items alignés en ligne et séparés par des filets verticaux. */
.apropos-values-section{ margin-bottom: 9.75vh; }

.apropos-values-card{
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  background: var(--card-bg), rgba(8,12,14,0.35);
  padding: 34px 40px 38px;
  animation: pulseGlow 5.38s ease-in-out infinite;
}

.apropos-values-items{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.apropos-value-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 4px 16px;
}
.apropos-value-item + .apropos-value-item{
  border-left: 1px solid var(--panel-border);
}
.apropos-value-icon{
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan);
  box-shadow: 0 0 12px rgba(46,230,224,0.35), 0 0 24px rgba(46,230,224,0.15);
}
.apropos-value-icon svg{ width: 20px; height: 20px; }
.apropos-value-item strong{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.86rem;
  color: var(--white);
}
.apropos-value-item span{
  font-size: 0.76rem;
  color: var(--muted-2);
  line-height: 1.4;
}

@media (max-width: 980px){
  .apropos-values-card{ padding: 34px 28px; text-align: center; }
  
  
  .apropos-values-items{ grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .apropos-value-item + .apropos-value-item{ border-left: none; }
  .apropos-value-item:nth-child(2n){ border-left: 1px solid var(--panel-border); }
}
@media (max-width: 560px){
  .apropos-values-items{ grid-template-columns: 1fr; }
  .apropos-value-item:nth-child(2n){ border-left: none; }
  .apropos-value-item + .apropos-value-item{ border-top: 1px solid var(--panel-border); padding-top: 22px; }
}

/* ================= TABLETTE UNIQUEMENT (641px - 980px) =================
   Card « valeurs » : rendu ordinateur (5 colonnes séparées par un trait). */
@media (min-width: 641px) and (max-width: 980px){
  .apropos-values-card{ padding: 34px 20px 38px; }
  .apropos-values-items{ grid-template-columns: repeat(5, 1fr); row-gap: 0; }
  .apropos-value-item + .apropos-value-item{ border-left: 1px solid var(--panel-border); }
  .apropos-value-item:nth-child(2n){ border-left: 1px solid var(--panel-border); }
  .apropos-value-item:first-child{ border-left: none; }
  .apropos-value-item:last-child:nth-child(odd){ grid-column: auto; max-width: none; margin: 0; border-left: 1px solid var(--panel-border) !important; }
}

/* Tablette uniquement : card « Ce qui nous guide » moins haute */
@media (min-width: 641px) and (max-width: 980px){
  .apropos-values-card{ padding: 20px 16px 22px; }
  .apropos-value-item{ padding: 2px 10px; gap: 8px; }
}


/* ===== PARTIE : cookie-consent ===== */
/* ==========================================================================
   EKILIBRUM — Bandeau de consentement aux cookies (css/cookie-consent.css)
   Réutilise l'identité du site : fond sombre, cyan #2EE6E0, glow, Rajdhani/Inter.
   Les valeurs de repli permettent de l'utiliser même sur les pages sans :root.
   ========================================================================== */

body.ekc-lock{ overflow: hidden; }

.ekc-banner{
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(880px, calc(100% - 32px)); z-index: 9000;
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 20px 24px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(46,230,224,0.05), transparent), rgba(8,12,14,0.97);
  border: 1px solid var(--panel-border, rgba(46,230,224,0.28));
  box-shadow: 0 0 26px rgba(46,230,224,0.16), 0 18px 40px rgba(0,0,0,0.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: 'Inter', sans-serif; color: var(--white, #f3f7f8);
  animation: ekcIn .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes ekcIn{ from{ opacity: 0; transform: translate(-50%, 16px); } to{ opacity: 1; transform: translate(-50%, 0); } }

.ekc-text{ flex: 1; min-width: 0; }
.ekc-title{
  margin: 0 0 6px; font-family: 'Rajdhani', sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: 1.15rem; color: var(--cyan, #2ee6e0);
  text-shadow: 0 0 10px rgba(46,230,224,0.45);
}
.ekc-desc{ margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--muted, #9aa7ac); }
.ekc-link{ color: var(--cyan, #2ee6e0); text-decoration: underline; text-underline-offset: 3px; }
.ekc-link:hover{ text-shadow: 0 0 10px rgba(46,230,224,0.5); }

.ekc-actions{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ekc-btn{
  font-family: 'Rajdhani', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 0.86rem; padding: 11px 18px; border-radius: 8px; cursor: pointer; white-space: nowrap;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.ekc-btn-ghost{ background: transparent; color: var(--white, #f3f7f8); border: 1.5px solid var(--cyan-soft, rgba(46,230,224,0.55)); }
.ekc-btn-ghost:hover{ background: rgba(46,230,224,0.08); border-color: var(--cyan, #2ee6e0); box-shadow: 0 0 16px rgba(46,230,224,0.35); }
.ekc-btn-main{ background: var(--cyan, #2ee6e0); color: #06090b; border: 1.5px solid var(--cyan, #2ee6e0); box-shadow: 0 0 18px rgba(46,230,224,0.4); }
.ekc-btn-main:hover{ box-shadow: 0 0 28px rgba(46,230,224,0.6); transform: translateY(-1px); }
.ekc-btn:focus-visible, .ekc-close:focus-visible, .ekc-link:focus-visible{ outline: 2px solid var(--white, #f3f7f8); outline-offset: 2px; }

/* Panneau « Gérer mes cookies » */
.ekc-overlay{
  position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(3,6,8,0.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.ekc-dialog{
  width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 24px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(46,230,224,0.05), transparent), #0a0f12;
  border: 1px solid var(--panel-border, rgba(46,230,224,0.28));
  box-shadow: 0 0 30px rgba(46,230,224,0.2), 0 24px 50px rgba(0,0,0,0.6);
  font-family: 'Inter', sans-serif; color: var(--white, #f3f7f8);
  scrollbar-width: thin; scrollbar-color: rgba(46,230,224,0.4) transparent;
}
.ekc-dlg-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ekc-dlg-head .ekc-title{ margin: 0; font-size: 1.3rem; }
.ekc-close{
  flex-shrink: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--muted, #9aa7ac); background: transparent; border: 1px solid rgba(46,230,224,0.22); border-radius: 10px;
  transition: color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ekc-close svg{ width: 16px; height: 16px; }
.ekc-close:hover{ color: var(--cyan, #2ee6e0); border-color: var(--cyan, #2ee6e0); box-shadow: 0 0 12px rgba(46,230,224,0.3); }

.ekc-list{ display: flex; flex-direction: column; gap: 10px; margin: 18px 0 20px; }
.ekc-row{
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(46,230,224,0.22); background: rgba(46,230,224,0.04);
}
.ekc-row-text{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ekc-row-title{ font-family: 'Rajdhani', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.98rem; }
.ekc-row-desc{ font-size: 0.8rem; line-height: 1.45; color: var(--muted-2, #7c8a8f); }
.ekc-always{ font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cyan, #2ee6e0); white-space: nowrap; }

.ekc-switch{ position: relative; flex-shrink: 0; width: 46px; height: 26px; cursor: pointer; }
.ekc-switch input{ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ekc-switch input:disabled{ cursor: not-allowed; }
.ekc-track{
  position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(46,230,224,0.3); transition: background .25s ease, box-shadow .25s ease; pointer-events: none;
}
.ekc-track::after{
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--muted, #9aa7ac); transition: transform .25s ease, background .25s ease;
}
.ekc-switch input:checked + .ekc-track{ background: rgba(46,230,224,0.25); box-shadow: 0 0 12px rgba(46,230,224,0.35); }
.ekc-switch input:checked + .ekc-track::after{ transform: translateX(20px); background: var(--cyan, #2ee6e0); }
.ekc-switch input:disabled + .ekc-track{ opacity: 0.65; }
.ekc-switch input:focus-visible + .ekc-track{ outline: 2px solid var(--white, #f3f7f8); outline-offset: 2px; }

.ekc-actions-dlg{ justify-content: flex-end; flex-wrap: wrap; }

/* Tablette (561–980 px) : bandeau plus étroit, centré, en colonne ; boutons de même largeur */
@media (max-width: 980px){
  .ekc-banner{ width: min(620px, calc(100% - 48px)); flex-direction: column; align-items: stretch; gap: 16px; }
  .ekc-actions{ justify-content: stretch; }
  .ekc-actions .ekc-btn{ flex: 1; }
}

/* Mobile : boutons empilés pleine largeur, bandeau collé en bas */
@media (max-width: 560px){
  .ekc-banner{ bottom: 10px; width: calc(100% - 20px); padding: 16px; border-radius: 16px; }
  .ekc-title{ font-size: 1.05rem; }
  .ekc-actions{ flex-direction: column-reverse; align-items: stretch; }
  .ekc-btn{ width: 100%; text-align: center; padding: 12px 14px; }
  /* Panneau « Gérer mes cookies » compact sur mobile */
  .ekc-overlay{ padding: 12px; }
  .ekc-dialog{ padding: 14px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border-radius: 16px; }
  .ekc-dlg-head{ margin-bottom: 6px; }
  .ekc-dlg-head .ekc-title{ font-size: 1.05rem; }
  .ekc-close{ width: 32px; height: 32px; }
  .ekc-dialog > .ekc-desc{ font-size: 0.76rem; line-height: 1.4; }
  .ekc-list{ gap: 7px; margin: 12px 0 14px; }
  .ekc-row{ padding: 9px 11px; gap: 10px; border-radius: 10px; }
  .ekc-row-title{ font-size: 0.86rem; }
  .ekc-row-desc{ font-size: 0.7rem; line-height: 1.3; }
  .ekc-always{ display: none; }
  .ekc-switch{ width: 40px; height: 22px; }
  .ekc-track::after{ top: 2px; left: 2px; width: 16px; height: 16px; }
  .ekc-switch input:checked + .ekc-track::after{ transform: translateX(18px); }
  .ekc-actions-dlg{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ekc-actions-dlg .ekc-btn{ padding: 10px 8px; font-size: 0.76rem; }
  .ekc-actions-dlg .ekc-btn-main{ grid-column: 1 / -1; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce){
  .ekc-banner{ animation: none; transform: translateX(-50%); }
  .ekc-track, .ekc-track::after, .ekc-btn{ transition: none; }
}


/* ===== PARTIE : accessibilite ===== */
/* ==========================================================================
   ACCESSIBILITÉ — lien d'évitement « Aller au contenu » (css/accessibilite.css)
   Invisible tant qu'on ne navigue pas au clavier : il apparaît en haut à gauche
   au premier appui sur Tab. Hors flux (position absolue) : aucun effet sur la mise en page.
   ========================================================================== */
.skip-link{
  position: absolute;
  left: 12px;
  top: -120px;
  z-index: 10000;
  padding: 12px 18px;
  border-radius: 8px;
  background: var(--cyan, #2ee6e0);
  color: #041012;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.84rem;
  text-decoration: none;
  box-shadow: 0 0 22px rgba(46,230,224,0.55);
  transition: top .2s ease;
}
.skip-link:focus{ top: 12px; outline: 2px solid var(--white, #f3f7f8); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce){ .skip-link{ transition: none; } }