/* Séneria Home — seneria-home.fr
   Feuille de style unique du site. */

:root{
    --violet:#C9B7EA;   --violet-deep:#8B6FC4;
    --vert:#BFE3D0;     --vert-deep:#6FAE8C;
    --rose:#F3C1D6;     --rose-deep:#E1849F;
    --bleu:#BFDCF2;     --bleu-deep:#6FA3D9;
    --marron:#E3CBB0;   --marron-deep:#A9805A;
    --orange:#F5CBA0;   --orange-deep:#D98B3F;
    --ink:#4A3F5C;
    --paper:#FFFFFF;
    --line: rgba(74,63,92,0.10);
    --radius: 18px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    color:var(--ink);
    font-family:'Outfit', sans-serif;
    -webkit-font-smoothing:antialiased;
    background:#FDF8FB;
  }
  h1,h2,h3,.display{ font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em; margin:0; }
  .mono{ font-family:'IBM Plex Mono', monospace; }
  .wrap{ max-width:900px; margin:0 auto; padding:0 24px; }

  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:12px 26px; border-radius:999px; background:var(--violet-deep); color:#fff;
    text-decoration:none; font-size:0.95rem; font-weight:500; border:none; cursor:pointer;
    transition:transform .15s ease, background .2s ease;
  }
  .btn:hover{ background:#7457AD; transform:translateY(-1px); }
  .btn-ghost{ background:transparent; color:var(--violet-deep); border:1.5px solid var(--violet-deep); }
  .btn-ghost:hover{ background:var(--violet-deep); color:#fff; }

  /* ---------- Header ---------- */
  header{ padding:52px 24px 28px; text-align:center; }
  .logo-card{
    width:170px; height:170px; margin:0 auto 20px;
    display:flex; align-items:center; justify-content:center;
  }
  .logo-card img{ width:100%; height:100%; object-fit:contain; }
  header h1{ font-size:clamp(1.9rem, 4vw, 2.6rem); color:var(--ink); }
  header p{ margin-top:12px; font-size:1rem; opacity:0.6; }

  /* ---------- Tabs ---------- */
  .tabs{
    display:flex; gap:14px; justify-content:space-between; align-items:center; flex-wrap:wrap;
    margin:32px 0 0; position:sticky; top:0; z-index:20;
    background:#FDF8FB; padding:16px 24px; border-bottom:1px solid var(--line);
  }
  .tabs-main{ display:flex; gap:10px; flex-wrap:wrap; margin:0 auto; }
  .tabs-right{ display:flex; }
  @media (max-width:640px){
    .tabs{ justify-content:center; }
    .tabs-main{ margin:0; order:2; width:100%; justify-content:center; }
    .tabs-right{ order:1; width:100%; justify-content:center; }
  }
  .tab-btn{
    appearance:none; border:1.5px solid var(--line); background:var(--paper);
    color:var(--ink); font-family:'Outfit', sans-serif; font-size:0.92rem; font-weight:500;
    padding:10px 22px; border-radius:999px; cursor:pointer;
    transition:all .2s ease;
  }
  .tab-btn .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; vertical-align:middle; }
  .tab-btn[data-cat="menage"] .dot{ background:var(--rose-deep); }
  .tab-btn[data-cat="garde"] .dot{ background:var(--bleu-deep); }
  .tab-btn[data-cat="senior"] .dot{ background:var(--vert-deep); }
  .tab-btn[data-cat="entreprise"] .dot{ background:var(--marron-deep); }
  .tab-btn[data-cat="ponctuel"] .dot{ background:var(--orange-deep); }
  .tab-btn.active[data-cat="menage"]{ background:var(--rose-deep); border-color:var(--rose-deep); color:#fff; }
  .tab-btn.active[data-cat="garde"]{ background:var(--bleu-deep); border-color:var(--bleu-deep); color:#fff; }
  .tab-btn.active[data-cat="senior"]{ background:var(--vert-deep); border-color:var(--vert-deep); color:#fff; }
  .tab-btn.active[data-cat="entreprise"]{ background:var(--marron-deep); border-color:var(--marron-deep); color:#fff; }
  .tab-btn.active[data-cat="ponctuel"]{ background:var(--orange-deep); border-color:var(--orange-deep); color:#fff; }
  .tab-btn.active .dot{ background:#fff; }
  .tab-btn.contact-btn{
    background:var(--violet-deep); border-color:var(--violet-deep); color:#fff;
    display:flex; align-items:center; gap:6px;
  }
  .tab-btn.contact-btn:hover{ background:#7457AD; }
  .tab-btn.contact-btn.active{ background:#7457AD; border-color:#7457AD; }

  /* ---------- Panels ---------- */
  .panel{ display:none; padding:40px 24px 72px; perspective:1200px; }
  .panel.active{ display:block; animation:flipIn3D .5s cubic-bezier(.2,.7,.3,1); transform-origin:center top; }
  @keyframes flipIn3D{
    from{ opacity:0; transform:perspective(1200px) rotateX(10deg) translateY(18px) scale(0.97); }
    to{ opacity:1; transform:perspective(1200px) rotateX(0deg) translateY(0) scale(1); }
  }

  .panel-intro{ text-align:center; max-width:520px; margin:0 auto 32px; }
  .panel-intro h2{ font-size:1.5rem; }
  .panel-intro p{ margin-top:8px; font-size:0.92rem; opacity:0.6; }

  .plans-stack{ display:flex; flex-direction:column; gap:16px; }

  .plan{
    background:var(--paper); border-radius:var(--radius); border:1px solid var(--line);
    padding:22px 24px; position:relative;
  }
  #menage .plan{ border-left:4px solid var(--rose); }
  #garde .plan{ border-left:4px solid var(--bleu); }
  #senior .plan{ border-left:4px solid var(--vert); }
  #entreprise .plan{ border-left:4px solid var(--marron); }
  #ponctuel .plan{ border-left:4px solid var(--orange); }
  .plan.featured{ box-shadow:0 20px 40px -26px rgba(74,63,92,0.3); }

  .plan-top{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px; }
  .plan-name-row{ display:flex; align-items:center; gap:10px; }
  .plan-name{ font-size:1.15rem; color:var(--ink); }
  .plan-flag{
    font-size:0.68rem; font-weight:600; letter-spacing:0.03em; padding:3px 10px; border-radius:999px; color:#fff;
  }
  #menage .plan-flag{ background:var(--rose-deep); }
  #garde .plan-flag{ background:var(--bleu-deep); }
  #senior .plan-flag{ background:var(--vert-deep); }
  #entreprise .plan-flag{ background:var(--marron-deep); }
  #ponctuel .plan-flag{ background:var(--orange-deep); }

  .plan-price{ text-align:right; }
  .plan-price .before{ font-size:0.8rem; opacity:0.5; }
  .plan-price .net{ font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:1.3rem; }
  #menage .plan-price .net{ color:var(--rose-deep); }
  #garde .plan-price .net{ color:var(--bleu-deep); }
  #senior .plan-price .net{ color:var(--vert-deep); }
  #entreprise .plan-price .net{ color:var(--marron-deep); }
  #ponctuel .plan-price .net{ color:var(--orange-deep); }

  details{ margin-top:14px; }
  summary{
    cursor:pointer; font-size:0.85rem; font-weight:500; color:var(--ink); opacity:0.65;
    list-style:none; display:flex; align-items:center; gap:6px;
    padding-top:10px; border-top:1px solid var(--line);
  }
  summary::-webkit-details-marker{ display:none; }
  summary::before{
    content:"+"; font-size:1rem; width:16px; text-align:center;
    display:inline-block; transition:transform .25s ease, color .25s ease;
  }
  details[open] summary::before{ transform:rotate(45deg); color:var(--violet-deep); }
  details[open] summary{ opacity:1; }
  summary:hover{ opacity:1; }

  .group-label{
    font-size:0.68rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
    opacity:0.45; margin:16px 0 8px;
  }
  .group-label:first-of-type{ margin-top:14px; }
  .plan ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
  .plan li{ font-size:0.87rem; line-height:1.45; display:flex; gap:8px; align-items:flex-start; opacity:0.85; }
  .plan li svg{ flex-shrink:0; margin-top:3px; opacity:0.55; }

  .plans-note{ margin-top:28px; font-size:0.82rem; opacity:0.55; text-align:center; line-height:1.6; max-width:640px; margin-left:auto; margin-right:auto; }
  .cross-sell{ margin-top:44px; padding-top:32px; border-top:1px solid var(--line); text-align:center; }
  .cross-sell h4{ font-size:0.95rem; font-weight:600; color:var(--ink); margin-bottom:16px; }
  .cross-sell-links{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
  .cross-sell-links a{
    text-decoration:none; font-size:0.85rem; font-weight:500; color:var(--ink);
    padding:9px 18px; border-radius:999px; border:1.5px solid var(--line); background:var(--paper);
    transition:transform .15s ease, border-color .2s ease;
  }
  .cross-sell-links a:hover{ transform:translateY(-1px); border-color:var(--violet-deep); }

  footer{ padding:36px 24px 56px; text-align:center; }
  footer p{ font-size:0.82rem; opacity:0.5; max-width:56ch; margin:0 auto; line-height:1.6; }

  @media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }
  /* ---------- Hero ---------- */
  .hero{ padding:64px 24px 56px; text-align:center; }
  .logo-card{
    width:170px; height:170px; margin:0 auto 20px;
    display:flex; align-items:center; justify-content:center;
  }
  .logo-card img{ width:100%; height:100%; object-fit:contain; }
  .hero h1{ font-size:clamp(2rem, 4.6vw, 3rem); line-height:1.12; }
  .hero .mission{
    max-width:640px; margin:22px auto 0; font-size:1.05rem; line-height:1.65; opacity:0.75;
    font-style:italic;
  }
  .hero-cta{ display:flex; gap:14px; justify-content:center; margin-top:32px; flex-wrap:wrap; }
  .mission-row{
    display:flex; align-items:center; gap:32px; max-width:700px; margin:26px auto 0; text-align:left;
  }
  .mission-photo{
    width:180px; height:196px; object-fit:cover; border-radius:20px; flex-shrink:0;
    box-shadow:0 18px 36px -16px rgba(74,63,92,0.32);
  }
  .mission-row .mission{ margin:0; }
  .mission-signature{ margin-top:12px; font-size:0.85rem; font-weight:500; opacity:0.6; font-style:normal; }
  @media (max-width:640px){
    .mission-row{ flex-direction:column; text-align:center; gap:18px; }
    .mission-photo{ width:160px; height:174px; }
  }

  /* ---------- Comment ça marche ---------- */
  .steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
  @media (max-width:860px){ .steps{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .steps{ grid-template-columns:1fr; } }
  .step{
    background:var(--paper); border-radius:var(--radius); border:1px solid var(--line);
    padding:26px 22px; text-align:center;
  }
  .step .num{
    width:34px; height:34px; border-radius:50%; background:var(--violet); color:var(--ink);
    display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
    font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:0.95rem;
  }
  .step h3{ font-size:1rem; margin-bottom:6px; }
  .step p{ font-size:0.85rem; opacity:0.65; line-height:1.5; margin:0; }

  /* ---------- Domaines ---------- */
  #domaines{ background:var(--paper); }
  .domains-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
  @media (max-width:820px){ .domains-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .domains-grid{ grid-template-columns:1fr; } }
  .domain-card.entreprise{ background:linear-gradient(180deg, rgba(227,203,176,0.32), transparent 60%); }
  .domain-card.ponctuel{ background:linear-gradient(180deg, rgba(245,203,160,0.32), transparent 60%); }
  .domain-card.entreprise .from{ color:#A9805A; }
  .domain-card.ponctuel .from{ color:#D98B3F; }
  .discover-badge{
    display:inline-flex; align-items:center; gap:6px; font-size:0.78rem; font-weight:600;
    letter-spacing:0.03em; color:#fff; background:var(--violet-deep);
    padding:6px 16px; border-radius:999px; margin-bottom:14px;
  }
  .domain-card{
    border-radius:var(--radius); padding:30px 26px; text-decoration:none; color:var(--ink);
    display:block; transition:transform .2s ease, box-shadow .2s ease; border:1px solid var(--line);
  }
  .domain-card:hover{ transform:translateY(-4px); box-shadow:0 22px 40px -26px rgba(74,63,92,0.3); }
  .domain-card.menage{ background:linear-gradient(180deg, rgba(243,193,214,0.28), transparent 60%); }
  .domain-card.garde{ background:linear-gradient(180deg, rgba(191,220,242,0.28), transparent 60%); }
  .domain-card.senior{ background:linear-gradient(180deg, rgba(191,227,208,0.28), transparent 60%); }
  .domain-card h3{ font-size:1.2rem; margin-bottom:10px; }
  .domain-card p{ font-size:0.9rem; opacity:0.68; line-height:1.55; margin:0 0 16px; }
  .domain-card .from{ font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:1.05rem; }
  .domain-card.menage .from{ color:var(--rose-deep); }
  .domain-card.garde .from{ color:var(--bleu-deep); }
  .domain-card.senior .from{ color:var(--vert-deep); }
  .domain-card .arrow{ font-size:0.85rem; font-weight:500; margin-top:14px; display:inline-block; opacity:0.7; }

  /* ---------- Zone + contact ---------- */
  .bottom-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  @media (max-width:700px){ .bottom-grid{ grid-template-columns:1fr; } }
  .info-card{
    background:var(--paper); border-radius:var(--radius); border:1px solid var(--line);
    padding:30px 26px;
  }
  .info-card h3{ font-size:1.05rem; margin-bottom:12px; }
  .info-card p{ font-size:0.92rem; opacity:0.7; line-height:1.6; margin:0 0 8px; }
  .info-card a{ color:var(--violet-deep); text-decoration:none; font-weight:500; }



  #accueil .hero{ padding:44px 24px 8px; }
  #accueil section{ padding:48px 24px; }
  #accueil .section-head{ text-align:center; max-width:560px; margin:0 auto 40px; }
  #accueil .section-head h2{ font-size:clamp(1.5rem, 2.8vw, 2rem); }
  #accueil .section-head p{ margin-top:10px; font-size:0.92rem; opacity:0.6; }
  .domain-card{ cursor:pointer; }

  /* ======================================================================
     ANIMATIONS — bloc optionnel.
     Pour tout désactiver : supprimer ce bloc CSS et le bloc JS du même nom
     en bas de page. Rien d'autre ne dépend de ces règles.
     ====================================================================== */
  @keyframes seneriaCardIn{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
  }
  /* cartes des formules : arrivée en cascade */
  .panel.active .plans-stack > .plan{ animation:seneriaCardIn .42s cubic-bezier(.2,.7,.3,1); }
  .panel.active .plans-stack > .plan:nth-child(1){ animation-delay:.05s; }
  .panel.active .plans-stack > .plan:nth-child(2){ animation-delay:.13s; }
  .panel.active .plans-stack > .plan:nth-child(3){ animation-delay:.21s; }
  .panel.active .plans-stack > .plan:nth-child(4){ animation-delay:.29s; }
  .panel.active .plans-stack > .plan:nth-child(n+5){ animation-delay:.36s; }
  /* apparition au défilement (page d'accueil) */
  .seneria-reveal{ opacity:0; transform:translateY(18px); }
  .seneria-reveal.is-visible{ opacity:1; transform:translateY(0); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); }
  /* respect du réglage « réduire les animations » de l'appareil */
  @media (prefers-reduced-motion: reduce){
    .panel.active .plans-stack > .plan{ animation:none !important; }
    .seneria-reveal{ opacity:1 !important; transform:none !important; }
  }