/* =========================================================
   TRAKADOM – Template #3 
   developped by Michaël John - Web engineer
   - sobre, premium, séparation nette
   - mosaïques asymétriques + galerie
   - motifs: grain + lignes + grille (ultra léger)
   ========================================================= */

   :root{
    --max: 1600px;
    --pad: 4.5rem;
  
    --bg0:#070A10;
    --bg1:#0E1422;
    --bg2:#111A2E;
  
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.66);
  
    --brand:#F57E57;
    --brand2:#1D6677;
  
    --panel: rgba(255,255,255,.06);
    --border: rgba(255,255,255,.11);
  
    --shadow: 0 18px 50px rgba(0,0,0,.38);
    --shadow2: 0 12px 30px rgba(0,0,0,.22);
  
    --r: 18px;
    --r2: 28px;
    --r3: 40px;
  
    --h1: clamp(2.2rem, 3.2vw, 3.6rem);
    --h2: clamp(1.5rem, 2.1vw, 2.3rem);
    --lead: clamp(1.02rem, 1.1vw, 1.18rem);
  
    --gapXL: clamp(1.8rem, 2.6vw, 3.1rem);
    --gapL: clamp(1.15rem, 1.7vw, 1.9rem);
    --sectionY: clamp(4.8rem, 6.4vw, 7.4rem);
  
    --heroH: 700px;


   --hero-blur-img: url("https://trakadom.com/media/2020/07/trakadom-retour-domicile-tracheotomie-gastrostomie-la-sla-pour-les-nuls-banner-3.jpg");

  }
  
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: var(--text);
    font-size: 16px;
  font-weight: 100;
    background:
      radial-gradient(1100px 650px at 12% 10%, rgba(29,102,119,.32), transparent 55%),
      radial-gradient(900px 550px at 88% 20%, rgba(245,126,87,.20), transparent 55%),
      linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 55%, var(--bg2) 100%);
    overflow-x:hidden;
  }
  
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  strong{ color: rgba(255,255,255,.97); }
  
  .container{ width:min(var(--max), calc(100% - var(--pad))); margin-inline:auto; padding: 30px;}
  
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  
  .top-progress{
    position:fixed; inset:0 0 auto 0; height:3px;
    background: linear-gradient(90deg, var(--brand), var(--brand2));
    transform-origin:left; transform:scaleX(0); z-index:9999;
  }
  
  /* Header */
  .site-header{
    position:sticky; top:0; z-index:1000;
    backdrop-filter: blur(14px);
    background: rgba(7,10,16,.82);
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .header-row{
    display:flex; align-items:center; justify-content:space-between;
    padding: 1rem 0; gap:1rem;
  }
  .brand{ display:flex; align-items:center; gap:.9rem; min-width:240px; }
  .brand-logo{
    width:46px; height:46px; border-radius: 16px;
    border:1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
  }
  .brand-text strong{ display:block; font-weight: 950; letter-spacing:.2px; }
  .brand-text span{ display:block; color: var(--muted); font-size:.95rem; margin-top:1px; }
  
  .nav{ position:relative; }
  .nav-toggle{
    display:none;
    border:1px solid var(--border);
    background: var(--panel);
    border-radius: 14px;
    padding:.65rem .75rem;
    cursor:pointer;
  }
  .burger{ width:22px; height:14px; display:block; position:relative; }
  .burger:before, .burger:after{
    content:""; position:absolute; left:0; right:0; height:2px;
    background: rgba(255,255,255,.88); border-radius:2px;
  }
  .burger:before{ top:0; } .burger:after{ bottom:0; }
  
  .nav-panel{ display:flex; align-items:center; gap:.25rem; }
  .nav-link{
    padding:.65rem .9rem;
    border-radius: 14px;
    color: var(--muted);
    transition:.18s ease;
  }
  .nav-link:hover{ color:var(--text); background: rgba(255,255,255,.06); }
  .nav-link.is-active{
    color: var(--text);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.10);
  }
  
  .nav-actions{ display:flex; gap:.55rem; margin-left:.5rem; }
  
  /* Buttons */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
    border-radius: 16px;
    padding: .75rem 1.05rem;
    border: 1px solid transparent;
    font-weight: 900;
    letter-spacing:.2px;
    cursor:pointer;
    transition:.18s ease;
  }
  .btn-primary{
    background: linear-gradient(135deg, var(--brand), #ff9a79);
    color:#1b0f0a;
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 14px 34px rgba(245,126,87,.18);
  }
  .btn-primary:hover{ transform: translateY(-1px); }
  .btn-ghost{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    color: var(--text);
  }
  .btn-ghost:hover{ background: rgba(255,255,255,.10); }
  
  /* Hero */
  .hero{
    position:relative;
    min-height: var(--heroH);
    padding: clamp(3rem, 4vw, 4.5rem) 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .hero-bg{ position:absolute; inset:0; pointer-events:none; z-index:-1; }
  .motif{ position:absolute; inset:-20% -20%; opacity:1; }
  
  /* motif grid */
  .motif-grid{
    background-image: url("/assets/motifs/motif-grid.svg");
    background-size: 520px 520px;
    background-position: center;
    opacity: 1;
    mix-blend-mode: overlay;
    mask-image: radial-gradient(closest-side, rgba(0,0,0,.95), transparent 72%);
  
  }
  
  /* motif grain (noise) */
  .motif-grain{
    background-image: url("/assets/motifs/motif-grain.png");
    background-size: 260px 260px;
    background-repeat: repeat;
    opacity: 1;
    mix-blend-mode: overlay;
  }
  
  /* motif lines */
  .motif-lines{
    background:
      radial-gradient(900px 520px at 20% 22%, rgba(245,126,87,.12), transparent 62%),
      radial-gradient(900px 520px at 80% 20%, rgba(29,102,119,.12), transparent 62%),
      url("/assets/motifs/motif-lines.svg");
    background-size: cover, cover, 720px 720px;
    background-position: center, center, center;
    opacity: 1;
    mix-blend-mode: screen;
    mask-image: radial-gradient(closest-side, rgba(0,0,0,.95), transparent 70%);
  }
  
  .hero-grid{
    display:grid;
    grid-template-columns: 6.6fr 5.4fr;
    gap: var(--gapXL);
    align-items:center;
  }
  
  .kicker{
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .85rem;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: rgb(255, 255, 255);
    width: max-content;
    font-weight: 500;
  }
  .k-icon{ color: rgba(255,255,255,.88); }
  
  .hero-copy h1{
    margin: 1.1rem 0 .9rem;
    font-size: var(--h1);
    line-height: 1.03;
    letter-spacing: -0.02em;
    font-weight: 980;
  }
  .accent{ color: var(--brand); }
  
  .lead{
    margin:0;
    font-size: var(--lead);
    line-height: 1.65;
    color: rgba(255,255,255,.84);
    max-width: 70ch;
  }
  
  .cta-row{
    display:flex; gap:.8rem; flex-wrap:wrap;
    margin-top: 1.35rem;
  }
  
  /* mini features */
  .mini-features{
    margin-top: 1.55rem;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gapL);
  }
  .mini{
    display:flex; gap:.8rem; align-items:center;
    padding: .95rem 1.05rem;
    border-radius: 20px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow2);
  }
  .ico{
    width:40px; height:40px;
    display:grid; place-items:center;

  }
  .ico svg{ width:22px; height:22px; color: rgba(255,255,255,.88); }
  .mini strong{ display:block; font-weight: 950; }
  .mini span{ display:block; margin-top:2px; color: var(--muted); font-size:.95rem; }
  
  /* Mosaic */
  .mosaic{
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 150px;
    gap: var(--gapL);
  }
  .tile{
    position:relative;
    border-radius: var(--r3);
    overflow:hidden;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    box-shadow: var(--shadow);
    transform: translateZ(0);
  }
  .tile img{
    width:100%; height:100%;
    object-fit: cover;
    filter:saturate(1.06) contrast(1.05);
    transform: scale(1.03);
    transition: transform .35s ease;
  }
  .tile:before{
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.38) 55%, rgba(0,0,0,.62) 100%);
    opacity:.95;
  }
  .tile:hover img{ transform: scale(1.08); }
  
  .tile-cap{
    position:absolute;
    inset:auto 1.05rem 1.0rem 1.05rem;
    display:grid; gap:.25rem;
  }
  .tag{
    width:max-content;
    font-size:.82rem;
    font-weight: 950;
    padding:.28rem .6rem;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
  }
  .tag-strong{
    background: rgba(245,126,87,.18);
    border-color: rgba(245,126,87,.28);
  }
  .tile-cap strong{
    font-size: 1.25rem;
    font-weight: 980;
    letter-spacing:-0.01em;
  }
  .sub{ color: rgba(255,255,255,.78); }
  
  /* tile placements (asymmetry) */
  .t1{ grid-column: 1 / 8; grid-row: 1 / 3; }
  .t2{ grid-column: 8 / 13; grid-row: 1 / 2; }
  .t3{ grid-column: 8 / 13; grid-row: 2 / 3; }
  .t4{ grid-column: 1 / 13; grid-row: 3 / 4; }
  
  /* Bands (sections) */
  .band{
    padding: var(--sectionY) 0;
    border-top: 1px solid rgba(255,255,255,.06);
  }
  .band-alt{
    background:
      linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  
  .head{
    display:flex; align-items:flex-end; justify-content:space-between;
    gap: var(--gapXL);
    margin-bottom: var(--gapXL);
  }
  .head h2{
    margin:0;
    font-size: var(--h2);
    font-weight: 980;
    letter-spacing:-0.01em;
  }
  .head p{ margin:.35rem 0 0; color: var(--muted); max-width: 70ch; line-height:1.55; }
  .head-actions{ display:flex; gap:.6rem; align-items:center; }
  
  .chip{
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    padding:.6rem .85rem;
    font-weight: 900;
    cursor:pointer;
  }
  .chip-link{ display:inline-flex; }
  
  /* Cards row */
  .cards{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gapXL);
    margin-bottom: var(--gapXL);
  }
  .card{
    border-radius: var(--r3);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    padding: 1.35rem 1.4rem;
    box-shadow: var(--shadow2);
  }
  .card-ico{ font-size: 1.3rem; }
  .card h3{ margin:.65rem 0 .45rem; font-weight: 980; }
  .card p{ margin:0; color: rgba(255,255,255,.80); line-height:1.7; }
  
  /* Gallery mosaic row */
  .gallery{
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gapL);
  }
  .gallery a{
    border-radius: var(--r3);
    overflow:hidden;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    box-shadow: var(--shadow2);
    position:relative;
    min-height: 260px;
  }
  .gallery img{ width:100%; height:100%; object-fit:cover; transform: scale(1.02); transition:.35s ease; }
  .gallery a:before{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.62));
  }
  .gallery a span{
    position:absolute; left:1.05rem; bottom:1rem;
    font-weight: 980;
    letter-spacing:-0.01em;
  }
  .gallery a:hover img{ transform: scale(1.08); }
  .g1{ grid-column: 1 / 6; }
  .g2{ grid-column: 6 / 9; }
  .g3{ grid-column: 9 / 13; }
  
  /* Steps */
  .steps{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gapXL);
  }
  .step{
    border-radius: var(--r3);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    padding: 1.35rem 1.4rem;
    box-shadow: var(--shadow2);
  }
  .step-n{
    font-weight: 980;
    color: rgba(255,255,255,.72);
    letter-spacing: .12em;
  }
  .step h3{ margin:.65rem 0 .35rem; font-weight: 980; }
  .step p{ margin:0; color: rgba(255,255,255,.80); line-height:1.7; }
  
  /* CTA split */
  .cta{
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    gap: var(--gapXL);
    align-items:start;
  }
  .cta-left h2{ margin:0; font-size: var(--h2); font-weight: 980; }
  .cta-left p{ margin:.45rem 0 0; color: var(--muted); line-height:1.6; }
  .cta-actions{ display:flex; gap:.8rem; margin-top:1.2rem; flex-wrap:wrap; }
  
  .cta-right{
    display:grid;
    gap: var(--gapL);
  }
  .cta-card{
    border-radius: var(--r3);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    padding: 1.2rem 1.25rem;
    box-shadow: var(--shadow2);
  }
  .badge{
    display:inline-flex;
    padding:.25rem .6rem;
    border-radius: 999px;
    font-weight: 980;
    font-size:.82rem;
    background: rgba(245,126,87,.16);
    border: 1px solid rgba(245,126,87,.24);
  }
  .badge2{
    background: rgba(29,102,119,.18);
    border-color: rgba(29,102,119,.28);
  }
  .cta-card strong{ display:block; margin-top:.6rem; font-weight: 980; font-size:1.15rem; }
  .cta-card p{ margin:.35rem 0 .8rem; color: rgba(255,255,255,.80); line-height:1.6; }
  .link{ font-weight: 980; }
  
  /* Form */
  .form{
    display:grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--gapL);
    align-items:end;
  }
  .field span{ display:block; color: var(--muted); margin-bottom:.45rem; font-size:.92rem; }
  .field input{
    width:100%;
    padding:.95rem 1.05rem;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.20);
    color: var(--text);
    outline:none;
  }
  .field input:focus{
    border-color: rgba(245,126,87,.45);
    box-shadow: 0 0 0 4px rgba(245,126,87,.14);
  }
  
  /* Footer */
  .site-footer{
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.22);
    padding: 2.4rem 0 2.0rem;
  }
  .foot{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap: var(--gapXL);
  }
  .muted{ color: rgba(255,255,255,.62); margin:.55rem 0 0; }
  .foot-links{ display:flex; gap:1rem; align-items:center; }
  .foot-links a{ color: rgba(255,255,255,.74); font-weight: 900; }
  .foot-links a:hover{ color: rgba(255,255,255,.92); }
  
  /* Reveal */
  .reveal{ opacity:0; transform: translateY(10px); transition:.6s ease; }
  .reveal.is-in{ opacity:1; transform: translateY(0); }
  
  /* Responsive */
  @media (max-width: 980px){
    :root{ --pad: 2rem; --heroH:auto; }
    .hero-grid{ grid-template-columns: 1fr; }
    .mini-features{ grid-template-columns: 1fr; }
    .mosaic{ grid-auto-rows: 150px; }
    .t1{ grid-column: 1 / 13; grid-row: 1 / 3; }
    .t2{ grid-column: 1 / 13; grid-row: 3 / 4; }
    .t3{ grid-column: 1 / 13; grid-row: 4 / 5; }
    .t4{ grid-column: 1 / 13; grid-row: 5 / 6; }
    .cards{ grid-template-columns: 1fr; }
    .gallery{ grid-template-columns: 1fr; }
    .g1,.g2,.g3{ grid-column: 1 / -1; }
    .steps{ grid-template-columns: 1fr; }
    .cta{ grid-template-columns: 1fr; }
    .form{ grid-template-columns: 1fr; }
    .foot{ flex-direction:column; }
  
    .nav-toggle{ display:inline-flex; }
    .nav-panel{

      right:0; top: calc(100% + .65rem);
      width: min(92vw, 420px);
      flex-direction:column; align-items:stretch;
      padding:.75rem;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(7,10,16,.88);
      backdrop-filter: blur(16px);
      box-shadow: var(--shadow);
      display:none;
    }
    .nav-panel.is-open{ display:flex; }
    .nav-actions{ margin-left:0; padding-top:.45rem; }
  }
  
  /* Light theme */
  body[data-theme="light"]{
    --bg0:#ffffff;
    --bg1:#f6f7fb;
    --bg2:#eef1f7;
  
    --text: rgba(16,18,26,.92);
    --muted: rgba(16,18,26,.64);
  
    --panel: rgba(0,0,0,.04);
    --border: rgba(0,0,0,.10);
  
    --shadow: 0 18px 45px rgba(0,0,0,.12);
    --shadow2: 0 12px 30px rgba(0,0,0,.10);
  
    background:
      radial-gradient(1100px 650px at 12% 10%, rgba(29,102,119,.14), transparent 55%),
      radial-gradient(900px 550px at 88% 20%, rgba(245,126,87,.10), transparent 55%),
      linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 60%, var(--bg2) 100%);
  }
  body[data-theme="light"] .site-header{
    background: rgba(255,255,255,.74);
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  body[data-theme="light"] .motif-lines{
    background:
      radial-gradient(800px 520px at 20% 20%, rgba(245,126,87,.12), transparent 60%),
      radial-gradient(800px 520px at 85% 25%, rgba(29,102,119,.12), transparent 62%),
      linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 50%, rgba(255,255,255,.90) 100%);
  }
  body[data-theme="light"] .btn-ghost{
    background: rgba(0,0,0,.04);
    border-color: rgba(0,0,0,.08);
  }
  body[data-theme="light"] .field input{
    background: rgba(255,255,255,.80);
  }
  body[data-theme="light"] .ico svg{
    color: rgba(16,18,26,.86);
  }
  

  /* =========================================================
   HERO – Background image flouté sous les calques
   ========================================================= */
/* =========================================================
   HERO – Background image flouté (FIABLE)
   ========================================================= */
/* =========================================================
   MOTIFS – fichiers externes (download)
   Place les fichiers dans /assets/motifs/
   ========================================================= */

   .hero{
    position: relative;
    overflow: hidden;
  }
  
  /* 1) IMAGE FLOUTÉE (fond réel) */
  .hero::before{
    content:"";
    position:absolute;
    inset:-90px; /* évite les bords du blur */
    background-image: var(--hero-blur-img);
    background-size: cover;
    background-position: center;
    background-repeat:no-repeat;
  
    transform: scale(1.14);
    filter: blur(20px) saturate(1.08) contrast(1.06);
    opacity: .52;
    z-index: 0;
  }
  
  /* 2) CALQUE LISIBILITÉ */
  .hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(900px 520px at 15% 30%, rgba(245,126,87,.16), transparent 62%),
      radial-gradient(900px 520px at 85% 30%, rgba(29,102,119,.16), transparent 62%),
      linear-gradient(90deg,
        rgba(7,10,18,.62) 0%,
        rgba(7,10,18,.28) 45%,
        rgba(7,10,18,.62) 100%);
    z-index: 1;
  }
  
  /* 3) TES MOTIFS AU-DESSUS */
  .hero-bg{
    position:absolute;
    inset:0;
    z-index: 2;
    pointer-events:none;
  }
  
  /* Base motif */
  .motif{
    position:absolute;
    inset:0;
    pointer-events:none;
  }
  

  
  /* GRAIN – texture ultra légère */

  

  /* 4) CONTENU AU-DESSUS */
  .hero .container,
  .hero-grid{
    position: relative;
    z-index: 3;
  }
  

  /* =========================================================
   ABOUT 2026 – look "magazine / paper" (différent du hero)
   ========================================================= */

.about2026{
  position: relative;
  isolation: isolate;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* Bande "papier premium" -> rupture nette avec la bannière */
.about2026::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(900px 420px at 18% 15%, rgba(245,126,87,.10), transparent 58%),
    radial-gradient(900px 420px at 82% 15%, rgba(29,102,119,.10), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.020));
}

/* petit liseré luxe */
.about2026::after{
  content:"";
  position:absolute;
  left:0; right:0; top:-1px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  z-index:0;
}

.about2026-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: var(--gapXL);
  margin-bottom: var(--gapXL);
}

.about2026-kicker{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin:0 0 .8rem;
  color: var(--muted);
}

.about2026-kicker .mark{
  width: 46px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  opacity: .9;
}

.about2026-title h2{
  margin:0;
  font-size: clamp(2.1rem, 3vw, 3.0rem);
  font-weight: 1000;
  letter-spacing: -0.03em;
  color: #f6815b;
}

.about2026-sub{
  margin:.55rem 0 0;
  max-width: 70ch;
  color: rgba(255,255,255,.78);
  line-height: 1.75;
}

/* metrics -> aspect "magazine" */
.about2026-metrics{
  display:flex;
  gap: .9rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.metric{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: .85rem .95rem;
  min-width: 150px;
}

.metric strong{
  display:block;
  font-weight: 1000;
  letter-spacing: -0.02em;
  font-size: 1.25rem;
}

.metric span{
  display:block;
  margin-top: .2rem;
  color: rgba(255,255,255,.70);
  font-size: .95rem;
}

/* layout */
.about2026-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--gapXL);
  align-items:start;
}

/* "Paper cards" -> look différent du hero */
.about2026-copy{
  display:grid;
  gap: var(--gapL);
}

.paper{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: var(--shadow2);
  padding: clamp(1.25rem, 1.6vw, 1.65rem);
}

.paper h3 {
  margin: 0 0 .75rem;
  font-weight: 980;
  letter-spacing: 0.01em;
  color: #fff;
}

.paper p{
  margin:0 0 .9rem;
  color: rgba(255,255,255,.80);
  line-height: 1.8;
}

.paper p:last-child{ margin-bottom:0; }

/* seconde carte légèrement accentuée */
.paper-accent{
  background:
    radial-gradient(800px 320px at 20% 15%, rgba(245,126,87,.12), transparent 60%),
    radial-gradient(800px 320px at 80% 20%, rgba(29,102,119,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}

.about2026-actions{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  margin-top: 1.05rem;
}

/* portraits éditoriaux (PAS comme la mosaïque du hero) */
.about2026-portraits{
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 140px;
  gap: var(--gapL);
}

.portrait{
  margin:0;
  position:relative;
  border-radius: 28px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow2);
}

/* traitement image: plus "éditorial", moins saturé */
.portrait img{
  width:100%;
  height:100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.05);
  transform: scale(1.02);
  transition: transform .35s ease;
}

.portrait:hover img{ transform: scale(1.06); }

/* cadre premium (fine border interne) */
.portrait::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  pointer-events:none;
}

/* caption minimal, sans gros dégradé (différent du hero) */
.portrait figcaption{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  padding: .65rem .7rem;
  border-radius: 18px;
  background: rgba(7,10,16,.55);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

.portrait figcaption strong{
  display:block;
  font-weight: 980;
  letter-spacing: -0.01em;
}

.portrait figcaption span{
  display:block;
  margin-top: .2rem;
  color: rgba(255,255,255,.72);
  font-size: .95rem;
}

/* placements */
.portrait.a{ grid-column: 1 / 8;  grid-row: 1 / 3; }
.portrait.b{ grid-column: 8 / 13; grid-row: 1 / 2; }
.portrait.c{ grid-column: 8 / 13; grid-row: 2 / 3; }

/* note card -> structure différente */
.note-card{
  grid-column: 1 / 13;
  grid-row: 3 / 4;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  box-shadow: var(--shadow2);
}

.note-card-inner{
  padding: 1.2rem 1.25rem;
}

.note-tag{
  display:inline-flex;
  padding:.3rem .65rem;
  border-radius: 999px;
  font-weight: 980;
  font-size:.82rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
}

.note-card-inner strong{
  display:block;
  margin-top:.65rem;
  font-size: 1.2rem;
  font-weight: 1000;
  letter-spacing: -0.02em;
}

.note-card-inner p{
  margin:.5rem 0 .9rem;
  color: rgba(255,255,255,.78);
  line-height:1.7;
}

/* responsive */
@media (max-width: 980px){
  .about2026-top{
    flex-direction: column;
    align-items:flex-start;
  }
  .about2026-metrics{ justify-content:flex-start; }
  .about2026-grid{ grid-template-columns: 1fr; }

  .portrait.a{ grid-column: 1 / 13; grid-row: 1 / 3; }
  .portrait.b{ grid-column: 1 / 13; grid-row: 3 / 4; }
  .portrait.c{ grid-column: 1 / 13; grid-row: 4 / 5; }
  .note-card{ grid-row: 5 / 6; }
}
/* ===========================
   ABOUT 2026 – note list premium
   =========================== */

   .note-card-inner{
    display:flex;
    flex-direction:column;
    gap:.75rem;
  }
  
  .note-list{
    display:flex;
    flex-direction:column;
    gap:.7rem;
    margin-top:.25rem;
  }
  
  .note-item{
    display:flex;
    align-items:flex-start;
    gap:.85rem;
    padding:.75rem .8rem;
  
    border-radius: 18px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
  
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
  }
  
  .note-item:hover{
 /*   transform: translateY(-1px);
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);*/
  }
  
  .note-avatar{
    width: 105px;
    height: 105px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 10px 22px rgba(0,0,0,.22);
    flex: 0 0 auto;
  }
  
  .note-txt{
    display:flex;
    flex-direction:column;
    gap:.25rem;
    min-width: 0;
  }
  
  .note-txt strong{
    font-weight: 980;
    letter-spacing: -0.01em;
    line-height: 1.2;
  
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  
  .note-txt span{
    color: rgba(255,255,255,.76);
    line-height: 1.45;
    font-size: .95rem;
  
    display:-webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:hidden;
  }
  
  .note-cta{
    margin-top:.15rem;
    width:max-content;
  }
  
  /* figcaption une seule ligne pour les 2 docteurs */
  .portrait figcaption{
    display:flex;
    align-items:baseline;
    gap:.55rem;
  }
  
  .portrait figcaption strong,
  .portrait figcaption .oneLine{
    display:inline;
  }
  
  .portrait figcaption .oneLine{
    color: rgba(255,255,255,.72);
    font-size: .95rem;
    white-space:nowrap;
  }
  
  /* mobile */
  @media (max-width: 520px){
    .note-avatar{ width: 52px; height: 52px; border-radius: 15px; }
    .note-item{ padding:.65rem .7rem; }
  }
  
  /* =========================================================
   AIDES 2026 – section premium interactive (différente du hero)
   ========================================================= */

.aides2026{
  position:relative;
  overflow:hidden;
}

.aides2026-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.aides2026-motif{
  position:absolute;
  inset:-20%;
  opacity:.85;
}

/* Motif points premium */
.motif-dots{
  background-image:
    radial-gradient(rgba(255,255,255,.11) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(closest-side, rgba(0,0,0,.95), transparent 72%);
  opacity:.14;
}

/* Motif vague (très discret) */
.motif-wave{
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(245,126,87,.12), transparent 62%),
    radial-gradient(900px 520px at 80% 10%, rgba(29,102,119,.14), transparent 62%);
  opacity:.9;
}

/* Shine doux */
.motif-shine{
  background:
    linear-gradient(120deg, transparent 35%, rgba(255,255,255,.06) 50%, transparent 65%);
  transform: rotate(-6deg);
  opacity:.55;
}

.aides2026 .container{ position:relative; z-index:1; }

.aides2026-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: var(--gapXL);
  margin-bottom: var(--gapXL);
}

.aides2026-kicker{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  color: var(--muted);
  font-weight: 900;
  letter-spacing:.02em;
  margin:0 0 .55rem;
}

.aides2026-kicker .spark{
  width:10px; height:10px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 0 0 6px rgba(245,126,87,.10);
}

.aides2026-title h2{
  margin:0;
  font-size: var(--h2);
  font-weight: 980;
  letter-spacing:-0.01em;
  color: #f6815b;
}

.aides2026-sub{
  margin:.35rem 0 0;
  color: var(--muted);
  line-height: 1.55;
  max-width: 70ch;
}

.aides2026-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.9rem;
}

.chip-neo{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  border-radius: 999px;
  padding:.6rem .9rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-weight: 950;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  transition:.18s ease;
}

.chip-neo:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
}

.chip-arrow{ opacity:.75; }

.aides2026-filter{
  display:flex;
  gap:.45rem;
  padding:.45rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}

.filter-btn{
  border:0;
  cursor:pointer;
  color: var(--muted);
  background: transparent;
  font-weight: 950;
  padding:.55rem .8rem;
  border-radius: 999px;
  transition:.18s ease;
}

.filter-btn:hover{
  color: var(--text);
  background: rgba(255,255,255,.06);
}

.filter-btn.is-active{
  color: #1b0f0a;
  background: linear-gradient(135deg, var(--brand), #ff9a79);
}

/* GRID */
.aides2026-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gapXL);
}

.aideCard{
  grid-column: span 6;
  border-radius: var(--r3);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  transform: translateZ(0);
  outline:none;
}

.aideCard-link{
  display:block;
  height:100%;
}

.aideCard-top{
  display:flex;
  align-items:flex-start;
  gap: 1rem;
  padding: 1.2rem 1.2rem .95rem;
}

.aideCard-ico{
  width:52px; height:52px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  flex: 0 0 auto;
}

.aideCard-ico svg{
  width:24px; height:24px;
  color: rgba(255,255,255,.9);
}

.aideCard-meta h3{
  margin:.25rem 0 .25rem;
  font-weight: 980;
  letter-spacing:-0.01em;
  color: #f6815b;
}

.aideCard-meta p{
  margin:0;
  color: rgb(255, 255, 255);
  line-height:1.45;
  max-width: 58ch;
}

.badgeX{
  display:inline-flex;
  padding:.25rem .6rem;
  border-radius: 999px;
  font-weight: 980;
  font-size:.82rem;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
}

.badgeX2{
  background: rgba(29,102,119,.16);
  border-color: rgba(29,102,119,.24);
}

.badgeX3{
  background: rgba(245,126,87,.16);
  border-color: rgba(245,126,87,.24);
}

.aideCard-media{
  position:relative;
  height: 230px;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow:hidden;
}

.aideCard-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform .45s ease;
  filter: saturate(1.08) contrast(1.05);
}

.aideCard-gloss{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.62)),
    radial-gradient(900px 320px at 20% 20%, rgba(245,126,87,.18), transparent 60%),
    radial-gradient(900px 320px at 80% 30%, rgba(29,102,119,.18), transparent 60%);
  pointer-events:none;
}

.aideCard-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  padding: 1rem 1.2rem 1.15rem;
}

.miniStat{
  display:flex;
  flex-direction:column;
  gap:.1rem;
}

.miniStat .k{
  color: rgba(255,255,255,.60);
  font-size:.82rem;
  font-weight: 900;
  letter-spacing:.04em;
}

.miniStat .v{
  color: rgba(255,255,255,.88);
  font-weight: 950;
  font-size:.95rem;
}

.go{
  margin-left:auto;
  font-weight: 980;
  color: rgba(255,255,255,.92);
  opacity:.9;
}

.aideCard:hover .aideCard-media img{
  transform: scale(1.12);
}

.aideCard:focus-visible{
  box-shadow: 0 0 0 5px rgba(245,126,87,.18), var(--shadow);
  border-color: rgba(245,126,87,.35);
}

/* CTA bas */
.aides2026-cta{
  margin-top: var(--gapXL);
  padding: 1.25rem 1.25rem;
  border-radius: var(--r3);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--gapXL);
}

.aides2026-cta h3{
  margin:0;
  font-weight: 980;
  letter-spacing:-0.01em;
}

.aides2026-cta p{
  margin:.35rem 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.aides2026-ctaR{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
}

/* Responsive */
@media (max-width: 980px){
  .aides2026-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .aides2026-actions{
    width:100%;
    align-items:flex-start;
  }
  .aides2026-filter{
    flex-wrap:wrap;
    border-radius: 18px;
  }
  .aides2026-grid{
    grid-template-columns: 1fr;
  }
  .aideCard{
    grid-column: 1 / -1;
  }
  .aides2026-cta{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* =========================================================
   SUPPORT 2026 – SECTION ASSOCIATION (GRID 3 COLONNES)
   ========================================================= */

   .support2026{
    position:relative;
    overflow:hidden;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: clamp(4.6rem, 6vw, 7.2rem) 0;
  }
  
  /* background différent du reste */
  .support2026-bg{
    position:absolute; inset:0;
    pointer-events:none;
    z-index:0;
    background:
      radial-gradient(900px 520px at 15% 20%, rgba(245,126,87,.10), transparent 62%),
      radial-gradient(900px 520px at 85% 25%, rgba(29,102,119,.12), transparent 62%),
      linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.02));
  }
  
  .support2026-motif{ position:absolute; inset:-20%; opacity:1; }
  
  .support2026-motif-grid{
    background:
      linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 120px 120px;
    opacity:.10;
    mask-image: radial-gradient(closest-side, rgba(0,0,0,.92), transparent 70%);
  }
  
  .support2026-motif-orbs{
    background:
      radial-gradient(700px 500px at 20% 35%, rgba(245,126,87,.12), transparent 62%),
      radial-gradient(700px 520px at 80% 20%, rgba(29,102,119,.14), transparent 62%);
    opacity:1;
  }
  
  .support2026-motif-grain{
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
    opacity:.06;
  }
  
  /* content above bg */
  .support2026 .container{ position:relative; z-index:1; }
  
  /* Head */
  .support2026-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap: clamp(1.2rem, 2.2vw, 2rem);
    margin-bottom: clamp(1.3rem, 2.2vw, 2.2rem);
  }
  
  .support2026-kicker{
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    padding:.55rem .85rem;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: var(--muted);
    width:max-content;
  }
  
  .support2026-dot{
    width:10px; height:10px;
    border-radius:999px;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    box-shadow: 0 0 0 4px rgba(245,126,87,.10);
  }
  
  .support2026-title h2{
    margin:.75rem 0 .5rem;
    font-size: clamp(1.8rem, 2.4vw, 2.6rem);
    font-weight: 980;
    letter-spacing:-0.02em;
    color: #f6815b;
  }
  
  .support2026-sub{
    margin:0;
    color: rgba(255,255,255,.82);
    line-height:1.6;
    max-width: 72ch;
  }
  
  .support2026-actions{
    display:flex;
    flex-wrap:wrap;
    gap:.65rem;
    align-items:center;
  }
  
  /* Intro + grid wrapper */
  .support2026-gridWrap{
    display:grid;
    gap: clamp(1.1rem, 2vw, 1.8rem);
  }
  
  /* intro card */
  .support2026-donateTop{
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    box-shadow: var(--shadow2);
    padding: 1.15rem 1.2rem;
    max-width: 980px;
  }
  
  .support2026-donateTop > strong{
    display:block;
    margin-top:.5rem;
    font-size: 1.2rem;
    font-weight: 980;
  }
  
  .support2026-donateTop p{
    margin:.35rem 0 0;
    color: rgba(255,255,255,.78);
    line-height:1.55;
  }
  
  .support2026-badge{
    display:inline-flex;
    padding:.3rem .65rem;
    border-radius: 999px;
    font-weight: 950;
    font-size:.85rem;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.08);
  }
  
  .support2026-badgeStrong{
    background: rgba(245,126,87,.16);
    border-color: rgba(245,126,87,.24);
  }
  
  /* GRID 3 COLONNES */
  .support2026-cards{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
  }
  
  /* Card */
  .support2026-card{
    position:relative;
    border-radius: 28px;
    overflow:hidden;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.18);
    box-shadow: var(--shadow2);
    transform: translateZ(0);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
    min-height: 420px;
    display:flex;
  }
  
  .support2026-card:hover{
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.05);
  }
  
  .support2026-cardMedia{
    position:absolute;
    inset:0;
  }
  
  .support2026-cardMedia img{
    width:100%;
    height:100%;
    object-fit: cover;
    transform: scale(1.03);
    filter: saturate(1.06) contrast(1.04);
    transition: transform .35s ease;
  }
  
  .support2026-card:hover .support2026-cardMedia img{
    transform: scale(1.08);
  }
  
  .support2026-cardMedia:after{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(900px 520px at 25% 25%, rgba(245,126,87,.10), transparent 60%),
      radial-gradient(900px 520px at 85% 15%, rgba(29,102,119,.12), transparent 62%),
      linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.52) 58%, rgba(0,0,0,.80) 100%);
  }
  
  /* Body */
  .support2026-cardBody{
    margin-top:auto;
    width:100%;
    position:relative;
    padding: 1.1rem 1.1rem 1.05rem;
    border-radius: 26px 26px 0 0;
    background: rgba(7,10,16,.62);
    border-top: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(12px);
  }
  
  .support2026-cardRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.9rem;
    margin-bottom:.55rem;
  }
  
  .support2026-chip{
    display:inline-flex;
    padding:.35rem .65rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.08);
    font-weight: 900;
    font-size:.85rem;
  }
  
  .support2026-chipHot{
    background: rgba(245,126,87,.18);
    border-color: rgba(245,126,87,.26);
  }
  
  .support2026-open{
    color: rgba(255,255,255,.82);
    font-weight: 900;
    font-size:.9rem;
  }
  
  .support2026-cardBody strong{
    display:block;
    font-weight: 980;
    letter-spacing: -0.01em;
    font-size: 1.15rem;
  }
  
  .support2026-cardBody p{
    margin:.3rem 0 0;
    color: rgba(255,255,255,.78);
    line-height:1.5;
    font-size:.98rem;
  }
  
  /* Bottom CTA */
  .support2026-bottomCta{
    margin-top: .35rem;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    box-shadow: var(--shadow2);
    padding: 1.15rem 1.2rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 1rem;
  }
  
  .support2026-bottomLeft strong{
    font-weight: 980;
  }
  
  .support2026-bottomLeft p{
    margin:.35rem 0 0;
    color: rgba(255,255,255,.78);
    line-height:1.55;
  }
  
  .support2026-bottomRight{
    display:flex;
    gap:.7rem;
    flex-wrap:wrap;
    align-items:center;
  }
  
  /* Responsive */
  @media (max-width: 980px){
    .support2026-head{
      flex-direction:column;
      align-items:flex-start;
    }
    .support2026-cards{
      grid-template-columns: 1fr;
    }
    .support2026-card{
      min-height: 360px;
    }
    .support2026-bottomCta{
      flex-direction:column;
      align-items:flex-start;
    }
  }

/* =========================================================
   SLA 2026 – CTA premium (band-b)
   ========================================================= */

   .sla2026{
    position:relative;
    overflow:hidden;
  }
  
  .sla2026-bg{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
  }
  
  .sla2026-motif{ position:absolute; inset:-20%; }
  
  .sla2026-orbs{
    background:
      radial-gradient(900px 520px at 18% 35%, rgba(245,126,87,.14), transparent 62%),
      radial-gradient(900px 520px at 82% 25%, rgba(29,102,119,.14), transparent 64%),
      linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
    opacity:1;
  }
  
  .sla2026-grid{
    background:
      linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 120px 120px;
    opacity:.10;
    mask-image: radial-gradient(closest-side, rgba(0,0,0,.9), transparent 70%);
  }
  
  .sla2026-shine{
    background:
      linear-gradient(120deg, transparent 35%, rgba(255,255,255,.08) 50%, transparent 65%);
    transform: rotate(-7deg);
    opacity:.5;
  }
  
  .sla2026 .container{ position:relative; z-index:1; }
  
  /* Card layout */
  .sla2026-card{
    display:grid;
    grid-template-columns: .9fr 1.6fr .9fr;
    gap: clamp(1.0rem, 2vw, 1.8rem);
    align-items:center;
  
    border-radius: 34px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
    box-shadow: var(--shadow);
    padding: clamp(1.1rem, 2.2vw, 1.7rem);
  }
  
/* VISUEL : l'image prend tout le cadre */
.sla2026-visual{
  position: relative;
  min-height: 200px;
  border-radius: 28px;
  overflow: hidden;

  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
}

/* image full cover */
.sla2026-cover{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  filter: saturate(1.05) contrast(1.05);
}

/* overlay / glow (optionnel mais joli) */
.sla2026-ring{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 35% 35%, rgba(245,126,87,.22), transparent 55%),
    radial-gradient(circle at 65% 55%, rgba(29,102,119,.24), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55));
  opacity: .95;
  pointer-events: none;
}

  
  .sla2026-badge{
    width: 112px;
    height: 112px;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
    z-index:2;
  }
  
  .sla2026-ring{
    position:absolute;
    inset:-40px;
    background:
      radial-gradient(circle at 35% 35%, rgba(245,126,87,.22), transparent 55%),
      radial-gradient(circle at 65% 55%, rgba(29,102,119,.24), transparent 58%);
    opacity:.9;
    z-index:1;
  }
  
  .sla2026-pills{
    position:absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    display:flex;
    flex-wrap:wrap;
    gap:.45rem;
    z-index:3;
  }
  
  .sla2026-pill{
    display:inline-flex;
    padding:.35rem .6rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.08);
    font-weight: 900;
    font-size:.82rem;
    color: rgba(255,255,255,.86);
  }
  
  /* Text */
  .sla2026-kicker{
    display: block;
    align-items: center;
    gap: .55rem;
    padding: 3px 14px 3px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    color: var(--muted);
    width: max-content;
    margin: 0 0 .8rem;
    font-size: 14px;
  }
  
  .sla2026-dot{
    width:10px; height:10px;
    border-radius:999px;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    box-shadow: 0 0 0 4px rgba(245,126,87,.10);
  }
  
  .sla2026-body h2{
    margin:0 0 .35rem;
    font-size: clamp(1.6rem, 2.2vw, 2.2rem);
    font-weight: 980;
    letter-spacing:-0.02em;
    color: #f6815b;
  }
  
  .sla2026-sub{
    margin:0;
    color: rgba(255,255,255,.78);
    line-height: 1.65;
    max-width: 75ch;
  }
  
  /* Stats */
  .sla2026-stats{
    margin-top: 1rem;
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: .7rem;
  }
  
  .sla2026-stat{
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.16);
    padding: .7rem .8rem;
  }
  
  .sla2026-stat .k{
    display:block;
    font-size:.82rem;
    font-weight: 900;
    letter-spacing:.04em;
    color: rgba(255,255,255,.62);
  }
  
  .sla2026-stat .v{
    display:block;
    margin-top:.15rem;
    font-weight: 950;
    color: rgba(255,255,255,.88);
  }
  
  /* Actions */
  .sla2026-actions{
    margin-top: 1.1rem;
    display:flex;
    gap:.8rem;
    flex-wrap:wrap;
  }
  
  /* Right aside */
  .sla2026-aside{
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.16);
    padding: 1rem 1.05rem;
  }
  
  .sla2026-quote strong{
    display:block;
    font-weight: 980;
    letter-spacing:-0.01em;
  }
  
  .sla2026-quote span{
    display:block;
    margin-top:.35rem;
    color: rgba(255,255,255,.74);
    line-height:1.55;
  }
  
  /* Responsive */
  @media (max-width: 980px){
    .sla2026-card{
      grid-template-columns: 1fr;
    }
    .sla2026-aside{
      display:none;
    }
    .sla2026-stats{
      grid-template-columns: 1fr;
    }
  }
  .sla2026-visual{
    position: relative;
    border-radius: 28px;
    overflow: hidden;
  
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.18);
  
    /* ✅ padding interne */
    padding: 16px;
    min-height: 220px; /* ajuste si tu veux plus haut */
    display: grid;
    place-items: center;
  }
  
  .sla2026-cover{
    width: 100%;
    height: 100%;
    max-height: 220px;      /* ✅ évite que ça déborde */
    object-fit: contain;    /* ✅ pas de crop */
    border-radius: 18px;    /* ✅ image un peu arrondie dans le cadre */
    background: rgb(255, 239, 2);
    filter: none;
  }
  
  /* overlay en option */
  .sla2026-ring{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(circle at 35% 35%, rgba(245,126,87,.18), transparent 55%),
      radial-gradient(circle at 65% 55%, rgba(29,102,119,.18), transparent 58%),
      linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35));
    opacity:.9;
  }
  /* ✅ Plus d’espace entre les cards */
.support2026-cards{
  gap: clamp(1.7rem, 4.2vw, 3.2rem);  /* avant: 1.2rem */
}

/* ✅ (optionnel) espace entre la grille et la barre CTA */
.support2026-bottomCta{
  margin-top: clamp(1.2rem, 2vw, 1.8rem); /* avant: .35rem */
}

/* ✅ AIDES : grille en 3 colonnes (3 → 2 → 1) */
#aidesGrid.aides2026-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
  gap: clamp(32px, 2vw, 22px) !important;
  align-items: stretch;
}

/* Sécurité : si des cartes ont un grid-column défini, on neutralise */
#aidesGrid.aides2026-grid > *{
  grid-column: auto !important;
}

/* 2 colonnes */
@media (max-width: 1100px){
  #aidesGrid.aides2026-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 1 colonne */
@media (max-width: 680px){
  #aidesGrid.aides2026-grid{
    grid-template-columns: 1fr !important;
  }
}

/* Badge "Aide" toujours blanc */
.badgeX{
  color: #4099ac !important;
}

/* Même quand on hover la carte */
.aideCard-link:hover .badgeX{
  color: #fff !important;
}


/* =========================================================
   TRAKADOM – Accueil (Premium) – Responsive aligné Aides
   developped by Michaël John - Web engineer
   Objectif : mêmes marges / mêmes cadres / même container que Aides
   ========================================================= */

   :root{
    --max: 1600px;
  
    /* même logique que aides.css */
    --header-offset: 96px;
  
    --bg0:#070A10;
    --bg1:#0E1422;
    --bg2:#111A2E;
  
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.66);
  
    --brand:#F57E57;
    --brand2:#1D6677;
  
    --panel: rgba(255,255,255,.06);
    --border: rgba(255,255,255,.11);
  
    --shadow: 0 18px 50px rgba(0,0,0,.38);
    --shadow2: 0 12px 30px rgba(0,0,0,.22);
  
    --r: 18px;
    --r2: 28px;
    --r3: 40px;
  
    --h1: clamp(2.0rem, 3.2vw, 3.6rem);
    --h2: clamp(1.5rem, 2.1vw, 2.3rem);
    --lead: clamp(1.0rem, 1.1vw, 1.18rem);
  
    --gapXL: clamp(1.6rem, 2.6vw, 3.1rem);
    --gapL: clamp(1.05rem, 1.7vw, 1.9rem);
    --sectionY: clamp(4.2rem, 6.4vw, 7.4rem);
  
    --heroH: 700px;
  
    --hero-blur-img: url("https://trakadom.com/media/2020/07/trakadom-retour-domicile-tracheotomie-gastrostomie-la-sla-pour-les-nuls-banner-3.jpg");
  }
  
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: var(--text);
    font-size: 16px;
    font-weight: 100;
    background:
      radial-gradient(1100px 650px at 12% 10%, rgba(29,102,119,.32), transparent 55%),
      radial-gradient(900px 550px at 88% 20%, rgba(245,126,87,.20), transparent 55%),
      linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 55%, var(--bg2) 100%);
    overflow-x:hidden;
  }
  
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  strong{ color: rgba(255,255,255,.97); }
  
  /* ✅ Container aligné Aides (même feeling) */
  .container{
    width: min(var(--max), 100%);
    margin-left:auto;
    margin-right:auto;
    padding-left: clamp(16px, 2vw, 24px);
    padding-right: clamp(16px, 2vw, 24px);
  }
  
  /* ✅ ancres safe si header sticky */
  [id]{ scroll-margin-top: var(--header-offset); }
  
  .top-progress{
    position:fixed; inset:0 0 auto 0; height:3px;
    background: linear-gradient(90deg, var(--brand), var(--brand2));
    transform-origin:left; transform:scaleX(0);
    z-index:9999;
  }
  
  /* Header (si géré ailleurs, on ne casse pas : seulement amélioration) */
  .site-header{
    position:sticky; top:0; z-index:1000;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(7,10,16,.82);
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  
  /* Buttons */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
    border-radius: 16px;
    padding: .75rem 1.05rem;
    border: 1px solid transparent;
    font-weight: 900;
    letter-spacing:.2px;
    cursor:pointer;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
  }
  
  .btn-primary{
    background: linear-gradient(135deg, var(--brand), #ff9a79);
    color:#1b0f0a;
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 14px 34px rgba(245,126,87,.18);
  }
  .btn-primary:hover{ transform: translateY(-1px); }
  
  .btn-ghost{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    color: var(--text);
  }
  .btn-ghost:hover{ background: rgba(255,255,255,.10); }
  
  /* Hero */
  .hero{
    position:relative;
    min-height: var(--heroH);
    padding: clamp(3rem, 4vw, 4.5rem) 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    overflow:hidden;
  }
  
  .hero::before{
    content:"";
    position:absolute;
    inset:-90px;
    background-image: var(--hero-blur-img);
    background-size: cover;
    background-position: center;
    background-repeat:no-repeat;
    transform: scale(1.14);
    filter: blur(20px) saturate(1.08) contrast(1.06);
    opacity: .52;
    z-index: 0;
  }
  
  .hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(900px 520px at 15% 30%, rgba(245,126,87,.16), transparent 62%),
      radial-gradient(900px 520px at 85% 30%, rgba(29,102,119,.16), transparent 62%),
      linear-gradient(90deg,
        rgba(7,10,18,.62) 0%,
        rgba(7,10,18,.28) 45%,
        rgba(7,10,18,.62) 100%);
    z-index: 1;
  }
  
  .hero-bg{ position:absolute; inset:0; pointer-events:none; z-index:2; }
  .motif{ position:absolute; inset:-20% -20%; pointer-events:none; }
  
  .motif-grid{
    background-image: url("/assets/motifs/motif-grid.svg");
    background-size: 520px 520px;
    background-position: center;
    opacity: 1;
    mix-blend-mode: overlay;
    mask-image: radial-gradient(closest-side, rgba(0,0,0,.95), transparent 72%);
  }
  .motif-grain{
    background-image: url("/assets/motifs/motif-grain.png");
    background-size: 260px 260px;
    background-repeat: repeat;
    opacity: 1;
    mix-blend-mode: overlay;
  }
  .motif-lines{
    background:
      radial-gradient(900px 520px at 20% 22%, rgba(245,126,87,.12), transparent 62%),
      radial-gradient(900px 520px at 80% 20%, rgba(29,102,119,.12), transparent 62%),
      url("/assets/motifs/motif-lines.svg");
    background-size: cover, cover, 720px 720px;
    background-position: center, center, center;
    opacity: 1;
    mix-blend-mode: screen;
    mask-image: radial-gradient(closest-side, rgba(0,0,0,.95), transparent 70%);
  }
  
  /* ✅ contenu au-dessus */
  .hero .container,
  .hero-grid{
    position:relative;
    z-index:3;
  }
  
  .hero-grid{
    display:grid;
    grid-template-columns: 6.6fr 5.4fr;
    gap: var(--gapXL);
    align-items:center;
  }
  
  .kicker{
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .85rem;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: rgb(255, 255, 255);
    width: max-content;
    font-weight: 500;
  }
  
  .k-icon{ color: rgba(255,255,255,.88); }
  
  .hero-copy h1{
    margin: 1.1rem 0 .9rem;
    font-size: var(--h1);
    line-height: 1.03;
    letter-spacing: -0.02em;
    font-weight: 980;
  }
  
  .accent{ color: var(--brand); }
  
  .lead{
    margin:0;
    font-size: var(--lead);
    line-height: 1.65;
    color: rgba(255,255,255,.84);
    max-width: 70ch;
  }
  
  .cta-row{
    display:flex; gap:.8rem; flex-wrap:wrap;
    margin-top: 1.35rem;
  }
  
  /* Mosaic */
  .mosaic{
    display:grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
    grid-auto-rows: 150px;
    gap: var(--gapL);
  }
  
  .tile{
    position:relative;
    border-radius: var(--r3);
    overflow:hidden;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.04);
    box-shadow: var(--shadow);
    transform: translateZ(0);
  }
  
  .tile img{
    width:100%; height:100%;
    object-fit: cover;
    filter:saturate(1.06) contrast(1.05);
    transform: scale(1.03);
    transition: transform .35s ease;
  }
  
  .tile:before{
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.38) 55%, rgba(0,0,0,.62) 100%);
    opacity:.95;
  }
  
  .tile:hover img{ transform: scale(1.08); }
  
  .tile-cap{
    position:absolute;
    inset:auto 1.05rem 1.0rem 1.05rem;
    display:grid; gap:.25rem;
  }
  
  .tag{
    width:max-content;
    font-size:.82rem;
    font-weight: 950;
    padding:.28rem .6rem;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
  }
  
  .tag-strong{
    background: rgba(245,126,87,.18);
    border-color: rgba(245,126,87,.28);
  }
  
  .tile-cap strong{
    font-size: 1.25rem;
    font-weight: 980;
    letter-spacing:-0.01em;
  }
  
  .sub{ color: rgba(255,255,255,.78); }
  
  /* placements */
  .t1{ grid-column: 1 / 8; grid-row: 1 / 3; }
  .t2{ grid-column: 8 / 13; grid-row: 1 / 2; }
  .t3{ grid-column: 8 / 13; grid-row: 2 / 3; }
  .t4{ grid-column: 1 / 13; grid-row: 3 / 4; }
  
  /* Bands */
  .band{
    padding: var(--sectionY) 0;
    border-top: 1px solid rgba(255,255,255,.06);
  }
  
  /* About + Aides + Support + SLA
     (tu gardes tes blocs existants, mais le container/paddings sont désormais cohérents) */
  
  /* Footer */
  .site-footer{
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.22);
    padding: 2.4rem 0 2.0rem;
  }
  
  /* Reveal */
  .reveal{ opacity:0; transform: translateY(10px); transition:.6s ease; }
  .reveal.is-visible,
  .reveal.is-in{ opacity:1; transform:none; }
  
  /* =========================================================
     Responsive – aligné Aides
     ========================================================= */
  @media (max-width: 1100px){
    :root{ --heroH:auto; }
  
    .hero-grid{
      grid-template-columns: 1fr;
    }
  
    /* Mosaic devient stack propre */
    .mosaic{ grid-auto-rows: 150px; }
    .t1{ grid-column: 1 / 13; grid-row: 1 / 3; }
    .t2{ grid-column: 1 / 13; grid-row: 3 / 4; }
    .t3{ grid-column: 1 / 13; grid-row: 4 / 5; }
    .t4{ grid-column: 1 / 13; grid-row: 5 / 6; }
  }
  
  @media (max-width: 640px){
    :root{ --header-offset: 88px; }
  
    .kicker{ width: 100%; justify-content:center; text-align:center; }
    .cta-row a{ width: 100%; }
  }
  
  /* Accessibilité */
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .reveal{ transition:none; opacity:1; transform:none; }
    .tile img{ transition:none; }
    .btn{ transition:none; }
  }

/* ✅ Empêche les motifs (inset négatif) de créer du scroll horizontal */
.hero,
.aides2026,
.support2026,
.sla2026,
.footer2026{
  overflow-x: clip;   /* mieux que hidden */
  overflow-y: visible;
}


  .hero-bg,
.aides2026-bg,
.support2026-bg,
.sla2026-bg,
.footer2026-bg{
  position: absolute;
  inset: 0;
  overflow: clip;     /* le bg clippe ses enfants */
  pointer-events: none;
}
.container{
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: clamp(16px, 2vw, 24px);
  box-sizing: border-box;
}

html, body{
  overflow-x: clip;
}