/* =========================================================
   TISSE — style-tisse.css
   CSS globale unifiée — base issue de index.html + pages internes
   ========================================================= */

/* =========================
       TISSE — Base & Tokens
       ========================= */
    :root{
      --brown: #c37d57;
      --beige:#fffaf3;
      --yellow: #f5ca47;
      --sand: #d9b18f;
      --taupe: #f5eee8;
      --peach: #f6f3ee;

      --ink: #241a16;
      --ink2:#3a2b24;

      --card: rgba(255,255,255,.55);
      --border: rgba(195,125,87,.22);

      --shadow: 0 12px 30px rgba(28,18,14,.10);
      --shadow2: 0 10px 18px rgba(28,18,14,.10);

      --radius: 18px;
      --radius2: 26px;

      --max: 1120px;
      --pad: clamp(18px, 3vw, 34px);

      --ease: cubic-bezier(.2,.8,.2,1);
      --dur: 560ms;

    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    a{ color:inherit; text-decoration:none; }
    .wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }

    /* =========================
       Header
       ========================= */
    header,
.site-header{
      position:sticky;
      top:0;
      z-index:40;
      backdrop-filter: blur(10px);
      background: linear-gradient(180deg, rgba(255,250,241,.70), rgba(255,250,241,.45));
      border-bottom: 1px solid rgba(195,125,87,.16);
    }
    .topbar{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: nowrap;        /* important */
    }
    .brand{
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;             /* CRUCIAL */
      flex: 1 1 auto;           /* peut rétrécir */
    }
    .logo{
      width:64px;height:64px;
      background: url("/img/Tisse_Logo_TS.png") center/contain no-repeat;
      position:relative;
    }
    .logo:after{
      content:"";
      position:absolute; inset:8px;
      opacity:.8;
    }
    .brand strong{
      font-weight:700;
      letter-spacing:.06em;
    }
    .brand small{
      display:block;
      font-size:12px;
      color:rgba(36,26,22,.70);
      margin-top:2px;
    }
    nav{
      display:flex;
      align-items:center;
      gap:14px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    nav a{
      font-size:14px;
      color:rgba(36,26,22,.78);
      padding:12px 16px;
      border-radius:999px;
      transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
    }
    nav a:hover{
      background: rgba(195,125,87,.10);
      color:var(--ink);
    }
    .actions{
      display:flex;
      gap:10px;
      align-items:center;
      min-width: 0;                /* autorise la réduction */
      flex: 0 0 auto;/* ne s’étire pas */
      margin-left: auto;        /* pousse à droite */
    }
    .actions .btn.menu{
      max-width: 100%;
      white-space: nowrap;
    }

  /* =========================
   Buttons — TISSE (minimal premium)
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding: 11px 16px;
  border-radius: 999px;

  font-weight: 650;
  font-size: 14px;
  line-height: 1.05;
  text-decoration: none;
  color:#3a2f2a;

  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;

  background: rgba(255,250,241,.92); /* crème clair */
  border: 1px solid rgba(217,177,143,.42);

  box-shadow:
    0 10px 26px rgba(28,18,14,.10),
    inset 0 1px 0 rgba(255,255,255,.75);

  transition:
    transform 200ms var(--ease),
    box-shadow 200ms var(--ease),
    background 200ms var(--ease),
    border-color 200ms var(--ease);
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 14px 34px rgba(28,18,14,.12),
    inset 0 1px 0 rgba(255,255,255,.82);
}

.btn:active{
  transform: translateY(0);
  box-shadow:
    0 8px 18px rgba(28,18,14,.10),
    inset 0 1px 0 rgba(255,255,255,.60);
}

.btn:focus{ outline:none; }
.btn:focus-visible{
  box-shadow:
    0 0 0 4px rgba(255,250,241,.92),
    0 0 0 7px rgba(245,202,71,.22),
    0 14px 34px rgba(28,18,14,.12);
}

/* Primaire : plus net, moins "boudin" */
.btn.primary{
  color: #fffaf1;
  border-color: rgba(195,125,87,.55);
  background:
    linear-gradient(135deg, rgba(195,125,87,.95), rgba(195,125,87,.78));
  box-shadow:
    0 12px 30px rgba(195,125,87,.20),
    inset 0 1px 0 rgba(255,250,241,.18);
}

.btn.primary:hover{
  box-shadow:
    0 16px 40px rgba(195,125,87,.24),
    inset 0 1px 0 rgba(255,250,241,.22);
}

.btn.primary:active{
  box-shadow:
    0 10px 24px rgba(195,125,87,.20),
    inset 0 1px 0 rgba(255,250,241,.14);
}

/* Si tu veux un secondaire plus "outline" */
.btn.ghost{
  background: rgba(255,255,255,.60);
  border-color: rgba(195,125,87,.22);
}

    .pill{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:12px 16px;
      border-radius:999px;
      font-size:13px;
      color:rgba(36,26,22,.78);
      border:1px solid rgba(217,177,143,.40);
      background: rgba(246,243,238,.65);
    }
    .dot{
      width:8px;height:8px;border-radius:999px;
      background: var(--yellow);
      box-shadow: 0 0 0 4px rgba(217, 177, 143,.20);
    }

    /* =========================
       Sections & layout
       ========================= */
    section{
      position:relative;
      padding: clamp(25px, 7vw, 45px) 0;
    }
    .section-title{
      font-size: clamp(35px, 3.2vw, 55px);
      line-height:1.1;
      margin:0 0 12px;
      letter-spacing:-.02em;
    }
    .lead{
      font-size: clamp(16px, 1.4vw, 18px);
      line-height:1.6;
      color:rgba(36,26,22,.82);
      max-width: 98%;
      margin:0 0 15px;
    }
    .grid{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 30px;
      margin: 26px 0;
    }
    .card{
      border-radius: var(--radius);
      background: rgba(255,255,255,.62);
      border:1px solid var(--border);
      box-shadow: var(--shadow);
      padding: 18px;
    }
    .soft{
      background: rgba(246,243,238,.76);
    }
    .kicker{
      font-size:12px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:rgba(36,26,22,.64);
      margin:0 0 10px;
    }

    /* =========================
       Hero
       ========================= */
    #accueil{ padding-top: 64px; }
    .hero{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: clamp(18px, 4vw, 34px);
      align-items:center;
      margin-top: 18px;
    }
    .hero h1{
      font-size: clamp(34px, 4.6vw, 60px);
      line-height:1.02;
      margin: 10px 0 14px;
      letter-spacing:-.03em;
    }
    .highlight{
      position:relative;
      display:inline-block;
    }
    .highlight:after{
      content:"";
      position:absolute;
      left:-2%;
      right:-2%;
      bottom: .08em;
      border-radius: 999px;
      transform: scaleX(0);
      transform-origin:left;
      animation: underline 1.2s var(--ease) .35s forwards;
      height: .46em;
      background:
        linear-gradient(
          90deg,
          rgba(217, 177, 143, .14),
          rgba(217, 177, 143, .38),
          rgba(217, 177, 143, .14)
        );
      filter: blur(.25px);
      z-index:-1;
    }
    @keyframes underline{ to{ transform: scaleX(1); } }
    .hero .meta{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin: 14px 0 18px;
    }
    .hero .cta{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-top: 18px;
    }

.hero > div:first-child{
  position: relative;
}
.hero > div:first-child::before{
  content:"";
  position:absolute;
  inset:-10px -10px -10px -10px;
  background: rgba(255,255,255,.18);
  filter: blur(10px);
  border-radius: 26px;
  z-index:-1;
  opacity:.6;
}
/* =========================
   HERO SLIDE (hero-visual)
   ========================= */

.hero-visual.hero-slide{
  border: none;
  background: transparent;
  box-shadow: none;
  position: relative;   /* on garde */
  border-radius: 0;     /* ou garde un radius si tu veux */
  padding-left: 60px;
  height:280px;
  isolation: isolate; /* crée un contexte, évite les z-index bizarres */
  touch-action: pan-y;
}

/* lueur douce sous le bloc (et un peu derrière) */
.hero-visual.hero-slide::after{
  content:"";
  position:absolute;
  inset: -14px -18px -18px -18px; /* un peu plus large que le bloc */
  z-index: 0;                     /* derrière le contenu */
  pointer-events:none;

  background:
    radial-gradient(520px 320px at 45% 40%, rgba(255,250,241,.92), transparent 68%),
    radial-gradient(560px 360px at 70% 55%, rgba(217,177,143,.18), transparent 72%),
    radial-gradient(520px 320px at 18% 52%, rgba(195,125,87,.12), transparent 74%);
  filter: blur(18px);
  opacity: .95;
  transform: translateZ(0);
}
/* on met le contenu du slide au-dessus de la lueur */
.hero-visual.hero-slide > *{
  position: relative;
  z-index: 1;
}

.hs-stage{
  position: relative;
  z-index: 3;
  width: min(300px, 100%);
  height:270px;
  padding: 8px 0;
}

.hs-kicker{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(36,26,22,.58);
  margin: 0 0 20px;
  display:flex;
  align-items:center;
  gap:10px;
}
.hs-kicker::before{
  content:"";
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(217, 177, 143,.9);
  box-shadow: 0 0 0 4px rgba(217, 177, 143,.18);
}

.hs-title{
  margin: 0 0 20px;
  font-size: 22px;
  letter-spacing: -.01em;
  line-height: 1.15;
}

.hs-text{
  margin: 0 0 20px;
  color: rgba(36,26,22,.78);
  line-height: 1.65;
  font-size: 15px;
  max-width: 54ch;
}

.hs-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.hs-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(255,250,241,.78);
  border: 1px solid rgba(217,177,143,.45);
  box-shadow: 0 10px 20px rgba(28,18,14,.08);
  color: rgba(36,26,22,.80);
  font-weight: 620;
  font-size: 13px;
  backdrop-filter: blur(10px);
}

.hs-chip::before{
  content:"";
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(217, 177, 143,.95);
  box-shadow: 0 0 0 4px rgba(217, 177, 143,.20);
}
.hs-highlights{
  margin: 12px 0 20px;
  font-size: 13px;
  letter-spacing: .02em;
  color: rgba(36,26,22,.75);
}

.hs-highlights strong{
  font-weight: 650;
}
/* --- LUEUR + SCAN --- */
.hs-glow{
  position:absolute;
  inset:-55%;
  z-index:1;
  background:
    radial-gradient(520px 360px at 26% 38%, rgba(217, 177, 143,.22), transparent 70%),
    radial-gradient(680px 480px at 80% 60%, rgba(195,125,87,.16), transparent 72%),
    radial-gradient(520px 360px at 55% 52%, rgba(255,250,241,.70), transparent 68%);
  filter: blur(34px);
  opacity: .75;
  animation: hsSweep 10.5s cubic-bezier(.2,.8,.2,1) infinite;
  pointer-events:none;
}

.hs-glow2{
  opacity: .38;
  filter: blur(44px);
  animation-duration: 14.5s;
  animation-direction: reverse;
}

@keyframes hsSweep{
  0%{ transform: rotate(-10deg) translateX(-18%) translateY(0); }
  50%{ transform: rotate(-10deg) translateX(12%) translateY(-2%); }
  100%{ transform: rotate(-10deg) translateX(-18%) translateY(0); }
}

/* --- Animation des slides (entrée/sortie) --- */
.hs-slide{
  position:absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(0);
  transition:
    opacity 600ms cubic-bezier(.22,.65,.3,1),
    transform 600ms cubic-bezier(.22,.65,.3,1);
  padding: 20px 44px 0 30px; /* laisse respirer les dots à droite */
  will-change: opacity, transform;
  
}

.hs-slide.is-active{
  opacity:1;
}

.hs-slide.is-exit{
  opacity: 0;
}

/* Dots discrets */
.hs-dots{
  position:absolute;
  right: 10px;
  top: -12%;
  transform: translateY(-50%);
  z-index: 4;
  display:flex;
  flex-direction:column;
  gap: 8px;
  opacity: .75;
}

.hs-dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(217,177,143,.85);
  border: 2px solid rgba(255,250,241,.70);
  transition: transform 240ms var(--ease), background 240ms var(--ease);
}

.hs-dot.active{
  background: rgba(255,250,241,.92);
  border-color: rgba(255,250,241,.92);
  box-shadow: 0 0 0 5px rgba(195,125,87,.22);
  transform: scale(1.05);
}

/* ---- RESPONSIVE HERO ---- */
    @media (max-width: 980px){
      .hero{ grid-template-columns: 1fr;}
      .hero-slide{ margin-top: 12px; }
      .hero-visual.hero-slide {padding: 0 50px 0 10px !important;}
      .hero-visual.hero-slide::after{
          margin-left: 0;
          inset: -18px -18px -22px -18px;
          filter: blur(20px);
          opacity: 1;}

      .hs-slide{ padding: 34px 0 15px 0; } /* laisse place aux dots */
      .hs-slide.is-active {padding-left: 0;}
      .hs-stage{
        width: 100%;
        padding: 0;  }
      .hs-title{ font-size: 20px; }
      .hs-text{ font-size: 14.5px; }
      .hs-dots{
        right: 6px;
        top: 20px;
        transform: none;
        flex-direction: row;
        gap: 8px;
        opacity: .55;}
      
      .hs-chips{ gap: 8px; }
      .hs-chip{
        padding: 10px 12px;
        font-size: 12.5px;  }
        
      .wrap{ padding: 10px 20px; }
    }

    @media (max-width: 700px){
      .hero .cta .btn{ width:100%; justify-content:center; padding: 12px 16px;}
      .hero .cta{ flex-direction: column; align-items: stretch; }
    }
    /* ---  Fin responsive HERO --- */

    /* =========================
       Lists / bullets
       ========================= */
    .bullets{ margin:0; padding-left: 18px; color:rgba(36,26,22,.82); }
    .bullets li{ margin: 8px 0; line-height:1.55; }
    .checklist{ list-style:none; padding:0; margin:0; }
    .checklist li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      padding: 8px 0;
      color: rgba(36,26,22,.82);
      line-height:1.65;
      margin-bottom:8px;
      font-weight: 550;
    }
    .checklist li:before{
      content:"";
      margin-top: 10px;
      width:8px;
      height:8px;
      background:#c89a78;
      border-radius:50%;
      box-shadow: 0 0 0 4px rgba(195,125,87,.12);
      flex:0 0 auto;
    }

    /* ====  Dans VECU - liste ckecklist changé en checkcards  ==== */
    .checkcards{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:16px;
      grid-template-columns:1fr; /* mobile par défaut */
    }
    @media (min-width: 760px){
      .checkcards{ grid-template-columns:1fr  1fr; }  /* 3 colonnes */
    }
        @media (hover:hover){  
    .checkcards li{
    transition:transform .2s ease, box-shadow .2s ease;
    }
    .checkcards li:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(40,25,20,.08);
}
    }
    .checkcards li{
      position:relative;
      padding:16px 18px 16px 42px;
      border-radius:14px;
      background:rgba(255,255,255,.6);
      border:1px solid rgba(0,0,0,.05);
      box-shadow:0 8px 20px rgba(40,25,20,.05);
      line-height:1.6;
      font-weight:550; 
      color:#3a2f2a;
    }
    /* puce “pastille” */
    .checkcards li::before{
      content:"";
      position:absolute;
      left:18px;
      top:22px;
      width:8px;
      height:8px;
      border-radius:999px;
      background:#c89a78;
      box-shadow:0 0 0 4px rgba(200,154,120,.18);
    }
    /* ====Fin liste de Vecu ======= */


    /* =========================
       Mon Role
       ========================= */
    .role-cards{
      display:grid;
      gap:18px;
      grid-template-columns:1fr;
      margin: 30px 0;
    }
    .role{
      font-size: clamp(16px, 1.4vw, 18px);
      font-weight: 450;
      line-height:1.6;
      color:rgba(36,26,22,.82);
      margin:0;
    }
@media (min-width: 760px){
  .role-cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px){
  .role-cards{ grid-template-columns: repeat(3, 1fr); }
}
.role-cards .card{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(40,25,20,.05);
  padding: 18px 18px 16px;
}
/* label LIBRE / DURABLE / CONCRET */
.role-cards .eyebrow{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: 10px;
  display:flex;
  align-items:center;
  gap:10px;
}
.role-cards .eyebrow .icon{
  font-size: 16px;           /* 14–16px */
  opacity: .65;              /* doux */
  transform: translateY(-1px);
  filter: saturate(0.85);    /* rend les emojis moins flashy */
}
/* phrase */
.role-cards p{
  margin:0;
  line-height:1.55;
  font-weight: 450; /* ou 400 si tu veux plus airy */
}
/* accent léger plutôt que gras partout */
.role-cards strong{
  font-weight: 650;
}
    /* ====Fin card MON-ROLE ======= */

    /* =========================
       Offer cards
       ========================= */
    .offers{
      grid-template-columns: repeat(12, 1fr);
    }
    .offer{
      grid-column: span 6;
      padding: 18px;
      border-radius: var(--radius2);
      position:relative;
      overflow:hidden;
      cursor:pointer;
      transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), background 240ms var(--ease);
    }
    .offer::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      border-radius: var(--radius2);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
      opacity:.9;
    }

    .offer:hover{
      transform: translateY(-3px);
      box-shadow: 0 18px 40px rgba(28,18,14,.14);
      background: rgba(255,255,255,.72);
    }
    .offer .top{
      display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
    }
    .badge {
      display: inline-block;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(195, 125, 87, .12);
    color: var(--brown);
    margin-bottom: 14px;
    line-height: 1.2;
    }
    section .badge + h2 {
    margin: 6px 0 14px;
}
    .offer h3{ margin: 15px 0 8px 5px; font-size: 20px; letter-spacing:-.01em; }
    .offer p{ margin:0 0 0 5px; color: rgba(36,26,22,.78); line-height:1.55; max-width: 60ch; }
    .offer .more{
      margin: 12px 5px;
      display:inline-flex;
      gap:8px;
      align-items:center;
      color: rgba(195,125,87,.92);
      font-weight: 650;
      font-size: 14px;
      opacity: .9;
    }
    .arrow{
      width: 22px; height: 22px;
      border-radius: 999px;
      border:1px solid rgba(195,125,87,.28);
      display:inline-grid;
      place-items:center;
      transition: transform 240ms var(--ease);
    }
    .offer:hover .arrow{ transform: translateX(3px); }

    .diagnostic{
      grid-column: 1 / -1;
      border-radius: var(--radius2);
      padding: 18px;
      background:
        radial-gradient(620px 360px at 10% 10%, rgba(217, 177, 143,.20), transparent 55%),
        linear-gradient(135deg, rgba(246,243,238,.85), rgba(255,255,255,.55));
      border:1px solid rgba(217,177,143,.45);
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      flex-wrap:wrap;
    }
    .diagnostic .left{ max-width: 72ch; }
    .diagnostic h4{ margin:0 0 8px; font-size: 18px; }
    .diagnostic p{ margin:0; color: rgba(36,26,22,.78); line-height:1.55; }


/* =========================
   ACCOMPAGNEMENT
   ========================= */

.accompagnement{
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--radius2);
  background:
    radial-gradient(700px 300px at 8% 0%, rgba(255,255,255,.30), transparent 60%),
    radial-gradient(520px 260px at 92% 100%, rgba(217,177,143,.10), transparent 65%),
    linear-gradient(135deg, rgba(255,255,255,.58), rgba(246,243,238,.52));
  border: 1px solid rgba(195,125,87,.16);
  box-shadow:
    0 16px 38px rgba(28,18,14,.08),
    inset 0 1px 0 rgba(255,255,255,.58);
  transition:
    transform 240ms var(--ease),
    box-shadow 240ms var(--ease),
    border-color 240ms var(--ease),
    background 240ms var(--ease);
}

.accompagnement::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  background:
    radial-gradient(460px 180px at 22% 12%, rgba(255,255,255,.20), transparent 72%),
    radial-gradient(320px 180px at 78% 22%, rgba(255,250,241,.24), transparent 70%);
  opacity: .9;
}

.accompagnement::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.50),
    inset 0 0 0 1px rgba(255,255,255,.08);
  opacity:.95;
}

.accompagnement > *{
  position:relative;
  z-index:1;
}

.accompagnement:hover{
  transform: translateY(-2px);
  box-shadow:
    0 22px 48px rgba(28,18,14,.10),
    inset 0 1px 0 rgba(255,255,255,.62);
  border-color: rgba(195,125,87,.22);
}

.accompagnement__grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 44px);
  align-items:start;
}

.accompagnement__col{
  min-width:0;
  margin: 15px;
}

.accompagnement__kicker{
  margin:0 0 12px;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(36,26,22,.52);
}

.accompagnement__title{
  margin:0 0 14px;
  font-size: clamp(26px, 2vw, 34px);
  line-height:1.15;
  letter-spacing:-.02em;
  color: rgba(36,26,22,.95);
  max-width:21ch;
}

.accompagnement__text{
  margin:0 0 22px;
  color: rgba(36,26,22,.78);
  line-height:1.68;
  max-width: 62ch;
}

.accompagnement__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:16px;
}

.accompagnement__list li{
  position:relative;
  padding-left:22px;
  color: rgba(36,26,22,.84);
  line-height:1.62;
  font-weight: 550;
}

.accompagnement__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#c89a78;
  box-shadow: 0 0 0 4px rgba(200,154,120,.16);
}

@media (max-width: 900px){
  .accompagnement__grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .accompagnement__title{
    max-width: none;
  }
  .accompagnement__text{
    max-width: none;
  }
}
@media (max-width: 739px){
  .accompagnement{
    padding: 20px 18px;
    border-radius: 22px;
  }
  .accompagnement__title{
    font-size: clamp(24px, 6vw, 30px);
  }
  .accompagnement__list{
    gap:14px;
  }
}

/* =========================
   ACTIVITÉS TISSE
   ========================= */

.activities-grid{
  grid-template-columns: repeat(12, 1fr);
}

.activity-card{
  grid-column: span 6;
  padding: 18px;
  border-radius: var(--radius2);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 240ms var(--ease),
    box-shadow 240ms var(--ease),
    background 240ms var(--ease),
    border-color 240ms var(--ease);
  background:
    radial-gradient(420px 220px at 0% 0%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(135deg, rgba(246,243,238,.80), rgba(255,255,255,.56));
  border: 1px solid rgba(195,125,87,.16);
  box-shadow:
    0 14px 34px rgba(28,18,14,.08),
    inset 0 1px 0 rgba(255,255,255,.58);
}

.activity-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: var(--radius2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 0 0 1px rgba(255,255,255,.06);
  opacity:.95;
}

.activity-card:hover{
  transform: translateY(-3px);
  box-shadow:
    0 20px 44px rgba(28,18,14,.12),
    inset 0 1px 0 rgba(255,255,255,.62);
  border-color: rgba(195,125,87,.24);
  background:
    radial-gradient(420px 220px at 0% 0%, rgba(255,255,255,.26), transparent 60%),
    linear-gradient(135deg, rgba(246,243,238,.88), rgba(255,255,255,.66));
}

.activity-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.activity-card h3{
  margin: 15px 0 8px 5px;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.activity-card p{
  margin: 0 0 0 5px;
  color: rgba(36,26,22,.78);
  line-height: 1.58;
  max-width: 60ch;
}

.activity-card .more{
  margin: 14px 5px 0;
  display:inline-flex;
  gap:8px;
  align-items:center;
  color: rgba(195,125,87,.92);
  font-weight: 650;
  font-size: 14px;
  opacity: .95;
}

.activity-card:hover .arrow{
  transform: translateX(3px);
}

.activity-card--soon{
  cursor: default;
  opacity: .92;
  pointer-events:none;
}

.activity-card--soon:hover{
  transform: none;
  box-shadow:
    0 14px 34px rgba(28,18,14,.08),
    inset 0 1px 0 rgba(255,255,255,.58);
}

.activity-card--soon .more{
  color: rgba(36,26,22,.52);
}

@media (max-width: 980px){
  .activity-card{
    grid-column: span 12;
  }
}


    /* =========================
       Timeline
       ========================= */
    .timeline{
      grid-column: 1 / -1;
      padding: 32px 28px 26px;
      border-radius: var(--radius2);
      background: rgba(255,255,255,.55);
      border:1px solid rgba(195,125,87,.18);
      position:relative;
      overflow:hidden;
    }
    .steps{
      position: relative;
      display:grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
      align-items: stretch;
    }
    .steps::before{
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      top: 18px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(217,177,143,.26), rgba(195,125,87,.44), rgba(217,177,143,.26));
    }
    .step{
      position: relative;
      min-height: 142px;
      padding: 32px 16px 16px;
      border-radius: 18px;
      border: 1px solid rgba(217,177,143,.42);
      z-index: 1;
      background: rgba(251,243,233,0.95);
    }
    .step::before{
      content: "";
      position: absolute;
      top: 10px;
      left: 16px;
      width: 12px;
      height: 12px;
      border-radius: 999px;
      background: rgba(255,250,241,.94);
      border: 2px solid rgba(195,125,87,.58);
      box-shadow: 0 0 0 4px rgba(195,125,87,.10);
    }
    .step strong{ display:block; margin-bottom:10px; font-size: 15px; line-height: 1.45; }
    .step p{ margin:0; color: rgba(36,26,22,.76); line-height:1.5; font-size: 14px;  }
    .line{
      position:absolute; left: 18px; right: 18px; top: 60px;
      height:2px;
      background: rgba(217,177,143,.45);
    }
    .line::after{
      content:"";
      position:absolute; left:0; top:0; height:2px; width:0%;
      background: rgba(195,125,87,.75);
      transition: width 900ms var(--ease);
    }
    .timeline.is-visible .line::after{ width:100%; }
    .timeline .line{ display: none; }
    


    /* =========================
       FAQ
       ========================= */
    details{
      border-radius: 16px;
      border:1px solid rgba(217,177,143,.45);
      background: rgba(246,243,238,.70);
      padding: 14px 14px;
      transition: background 240ms var(--ease);
    }
    details[open]{ background: rgba(255,255,255,.68); }
    summary{
      cursor:pointer;
      font-weight:650;
      color: rgba(36,26,22,.88);
      list-style:none;
    }
    summary::-webkit-details-marker{ display:none; }
    summary:after{
      content:"+";
      float:right;
      color: rgba(195,125,87,.90);
      font-weight:900;
    }
    details[open] summary:after{ content:"–"; }
    .faq p{
      margin: 10px 0 0;
      color: rgba(36,26,22,.78);
      line-height:1.6;
    }

    /* =========================
       Contact embeds placeholders
       ========================= */
    .embed{
      border-radius: var(--radius2);
      border:1px dashed rgba(195,125,87,.32);
      background: rgba(255,255,255,.45);
      padding: 18px;
      min-height: 260px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:8px;
      color: rgba(36,26,22,.78);
    }
    .embed code{
      background: rgba(246,243,238,.9);
      border:1px solid rgba(217,177,143,.45);
      padding: 10px 12px;
      border-radius: 14px;
      overflow:auto;
      display:block;
      font-size: 12px;
      color: rgba(36,26,22,.82);
    }

    /* =========================
       Elevator / Scroll-spy
       ========================= */
    .elevator{
      position:fixed;
      right: 10px;
      margin-right: 15px;
      top: 80%;
      transform: translateY(-50%);
      z-index:60;
      display:flex;
      justify-content:center;
      pointer-events:none;
    }
    .elevator-inner{
      pointer-events:auto;
      background: rgba(36,26,22,.10);
      border:2px solid rgba(217,177,143,.24);
      border-radius: 999px;
      padding: 13px 8px;
      backdrop-filter: blur(0);
      box-shadow: 0 18px 40px rgba(28,18,14,.12);
      display:flex;
      flex-direction:column;
      gap: 10px;
      align-items:center;
    }
    .navdot{
      width:14px;height:10px;
      border-radius:6px;
      background: rgba(217,177,143,.85);
      border: 2px solid rgba(255,250,241,.70);
      opacity:.95;
      transition: transform 240ms var(--ease), background 240ms var(--ease);
      cursor:pointer;
      position:relative;
    }
    .navdot:hover{ transform: scale(1.12); background: rgba(195,125,87,.85); }
    .navdot.active{
      background: rgba(253, 250, 248, 0.95);
      border-color: rgba(255, 255, 255, 0.92);
      box-shadow: 0 0 0 5px rgba(195,125,87,.22);
    }
    .tooltip{
      position:absolute;
      right: 22px;
      top:50%;
      transform: translateY(-50%);
      background: rgba(36,26,22,.92);
      color: var(--beige);
      font-size: 12px;
      padding: 7px 10px;
      border-radius: 999px;
      white-space:nowrap;
      opacity:0;
      pointer-events:none;
      transition: opacity 200ms var(--ease), transform 200ms var(--ease);
      transform-origin:right;
    }
    .navdot:hover .tooltip{
      opacity:1;
      transform: translateY(-50%) translateX(-2px);
    }

    /* =========================
       Reveal animations
       ========================= */
    .reveal{
      opacity: 0;
      transform: translateY(26px) scale(.985);
      filter: blur(8px);
      transition:
        opacity 700ms cubic-bezier(.16,1,.3,1),
        transform 700ms cubic-bezier(.16,1,.3,1),
        filter 700ms cubic-bezier(.16,1,.3,1);
      will-change: opacity, transform, filter;
    }
    .reveal.is-visible{
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }
    .stagger > *{
      opacity:0;
      transform: translateY(10px);
    }
    .stagger.is-visible > *{
      opacity:1;
      transform: translateY(0);
      transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
    }
    .stagger.is-visible > *:nth-child(1){ transition-delay: 0ms; }
    .stagger.is-visible > *:nth-child(2){ transition-delay: 80ms; }
    .stagger.is-visible > *:nth-child(3){ transition-delay: 160ms; }
    .stagger.is-visible > *:nth-child(4){ transition-delay: 240ms; }
    .stagger.is-visible > *:nth-child(5){ transition-delay: 320ms; }
    .stagger.is-visible > *:nth-child(6){ transition-delay: 400ms; }


    /* =========================
       Footer
       ========================= */
    footer,
.site-footer{
      padding: 36px 0 46px;
      border-top: 1px solid rgba(217,177,143,.35);
      background: linear-gradient(180deg, transparent, rgba(255,250,241,.55));
    }
    .foot{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
      color: rgba(36,26,22,.70);
      font-size:13px; 
      font-weight:450 ;
    }
    .footer-location{opacity:0.8; font-size:0.89rem; text-align: center; width: 100%;margin: 0 0 20px;}

    .foot a{
      color: inherit;
      text-decoration: none;
      opacity: .75;
      transition: opacity .2s ease, color .2s ease;
    }

    .foot a:hover{
      opacity: 1;
      color: var(--brown);
    }
    .foot > div{
      min-width:0;
    }
    /* ======= NEWSLETTER ======= */
    .newsletter-modal-panel{
      width:min(96vw, 1280px);
    }

    .newsletter-modal-body{
      padding:0;
    }

    .newsletter-modal-frame{
      height:100%;
      border-radius:0 0 24px 24px;
      overflow:hidden;
      background:#fffaf3;
    }

    .newsletter-modal-iframe{
      width:100%;
      height:100%;
      border:0;
      display:block;
      background:#fffaf3;
    }
    .newsletter-invite{
      margin-top:22px;
      padding:18px;
      border-radius:22px;
    }

    .newsletter-invite__eyebrow{
      margin:0 0 8px;
      font-size:12px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:rgba(36,26,22,.52);
    }

    .newsletter-invite__title{
      margin:0 0 8px;
      font-size:18px;
      line-height:1.25;
      color:rgba(36,26,22,.9);
    }

    .newsletter-invite__text{
      margin:0 0 14px;
      color:rgba(36,26,22,.72);
      line-height:1.6;
      font-size:14px;
    }

    .newsletter-invite__button{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border:0;
      background:transparent;
      color:rgba(195,125,87,.95);
      font:inherit;
      font-weight:700;
      cursor:pointer;
      padding:0;
    }

    .newsletter-invite__button span{
      transition:transform .2s ease;
    }

    .newsletter-invite__button:hover span{
      transform:translateX(3px);
    }
    .newsletter-invite__note{
      margin:8px 0 0;
      font-size:12px;
      color:rgba(36,26,22,.48);
    }


    /* =========================
       Responsive
       ========================= */
    @media (max-width: 980px){
      nav{ display:none; }
      .elevator{ right: 8px; margin-right: 0; }
      .actions{ margin-left:auto; flex: 0 0 auto;
                margin-left: auto;  /* pousse le bouton à droite */ }
      .btn.primary{ padding: 12px 16px; }
      .offer{ grid-column: span 12; }
      .line{ display:none; }
      .modal .content{ grid-template-columns: 1fr; }
    }
    @media (max-width: 739px){
      nav{ display:none; }
      .elevator-inner{ padding: 10px 8px; gap:8px; }
      .navdot.active{padding: 0;}
      .actions .pill{ display:none; }
      .topbar{ align-items: center; gap: 10px; }
      .brand{ flex: 1 1 220px; /* priorité au logo + texte */  }
      .brand strong{ font-size: 14px;  }
      .actions{  flex: 0 0 auto; margin-left: auto;   /* pousse le bouton à droite */  }
      .logo{ width: 52px; height: 52px; }
      .btn.primary{ padding: 12px 16px;}
      .btn.menu{
        padding: 14px;
        font-size: 13px;
        font-weight: 650;
        border-radius: 14px; /* capsule, pas pilule */
        background: rgba(195,125,87,.92);
        border: 1px solid rgba(195,125,87,.55);
        box-shadow:
          0 8px 18px rgba(195,125,87,.18),
          inset 0 1px 0 rgba(255,250,241,.18);
        white-space: nowrap;}
        .btn.menu:hover{
        transform: translateY(-1px);
        box-shadow:
          0 12px 26px rgba(195,125,87,.22),
          inset 0 1px 0 rgba(255,250,241,.22);}
        .role-cards .card{  padding: 18px 18px 25px; }
        .foot{
          flex-direction:column;
          align-items:flex-start;
          gap:10px;        }
        .foot > div{
          width:100%;
          display:block;
          text-align: center;        }
        .foot > div:last-child{
          margin-top:2px;        }
        .foot a{
          display:inline-block;        }
        .footer-location{padding-top: 30px;}
       
    }

    @media (max-width: 420px){
      .navdot {height: 8px; padding: 2px; width: 15px;}
      .navdot.active{padding: 0;}
      
    }
    
    @media (prefers-reduced-motion: reduce){
      *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
    }

    /* =========================================
   TISSE ++++ — Signature upgrade (override)
   À coller EN BAS de ton CSS actuel
   ========================================= */

:root{
  /* micro ajustements palette */
  --cream: #fff7eb;
  --paper: rgba(255,250,241,.72);
  --glass: rgba(255,255,255,.52);
  --glass2: rgba(246,243,238,.74);

  --accent: var(--brown);
  --accent2: rgba(195,125,87,.18);

  --ring: rgba(217, 177, 143,.35);

  /* typo */
  --lh: 1.65;
  --titleTrack: -0.035em;

  /* shadows + borders plus premium */
  --border2: rgba(195,125,87,.14);
  --shadowSoft: 0 18px 55px rgba(28,18,14,.10);
  --shadowHover: 0 28px 80px rgba(28,18,14,.14);
}

/* 1) Fond : ajout d’un motif “fil” ultra discret */
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--ink);
  background:
    radial-gradient(700px 400px at 50% 0%, rgba(255,255,255,.38), transparent 70%),
    radial-gradient(1200px 800px at 12% 6%, rgba(217,177,143,.18), transparent 70%),
    radial-gradient(900px 700px at 88% 14%, rgba(195,125,87,.12), transparent 72%),
    repeating-linear-gradient(
      135deg,
      rgba(195,125,87,.022) 0px,
      rgba(195,125,87,.022) 1px,
      transparent 1px,
      transparent 16px
    ),
    linear-gradient(180deg, #fffaf3 0%, #f8f3ee 52%, #fffaf3 100%);
  overflow-x: hidden;
}

/* contenu au-dessus */
main section,
header.site-header,
footer.site-footer{
  position: relative;
  z-index: 2; }

/* 2) Typo + rythme */
.section-title{
  letter-spacing: var(--titleTrack);
}
.lead{
  line-height: var(--lh);
  color: rgba(36,26,22,.80);
  max-width: 98%;
}
.kicker{
  letter-spacing: .18em;
  color: rgba(36,26,22,.58);
}

/* 3) Header plus “atelier premium” */
header{
  background: linear-gradient(180deg, rgba(255,250,241,.78), rgba(255,250,241,.44));
  border-bottom: 1px solid rgba(195,125,87,.14);
}
nav a:hover{
  background: rgba(195,125,87,.08);
}

/* 4) Focus visible (accessibilité + feeling premium) */
:focus{ outline: none; }
:focus-visible{
  box-shadow:
    0 0 0 4px rgba(255,250,241,.88),
    0 0 0 8px var(--ring);
  border-radius: 14px;
}

/* 5) Cards : verre mat plus net + micro relief */
.card{
  background: var(--glass);
  border: 1px solid var(--border2);
  box-shadow: var(--shadowSoft);
}
.card.soft{
  background: var(--glass2);
}
.offer:hover{
  box-shadow: var(--shadowHover);
  border-color: rgba(195,125,87,.22);
}

/* 8) Chips / pills + dot plus vivant */
.pill{
  background: rgba(246,243,238,.72);
  border: 1px solid rgba(217,177,143,.34);
}
.dot{
  box-shadow:
    0 0 0 4px rgba(217, 177, 143,.16),
    0 0 18px rgba(217, 177, 143,.22);
}
.hs-chip{
  background: rgba(255,250,241,.70);
  border: 1px solid rgba(217,177,143,.38);
}

/* 9) Timeline : ligne plus “fil” */
.timeline .line{
  height: 2px;
  background:
    linear-gradient(90deg,
      rgba(217,177,143,.35),
      rgba(195,125,87,.22),
      rgba(217,177,143,.35)
    );
}
.timeline .line::after{
  height: 2px;
  background:
    linear-gradient(90deg,
      rgba(195,125,87,.55),
      rgba(195,125,87,.85),
      rgba(195,125,87,.55)
    );
}

/* 10) FAQ : interaction plus douce */
details{
  border: 1px solid rgba(217,177,143,.40);
}
details:hover{
  background: rgba(255,255,255,.60);
}

/* 11) Elevator : plus discret + premium */
.elevator-inner{
  background: rgba(36,26,22,.08);
  border: 1px solid rgba(217,177,143,.20);
}
.navdot{
  background: rgba(217,177,143,.75);
}
.navdot:hover{
  background: rgba(195,125,87,.78);
}
.skip-link{
  position:absolute;
  left:-999px; top:10px;
  background: rgba(36,26,22,.92);
  color: var(--beige);
  padding:10px 14px;
  border-radius: 999px;
  z-index: 999;
}
.skip-link:focus-visible{ left: 12px; }

/* ====================================================
   PRESTATION A LA UNE — FLOATCARD (version unifiée)
   ==================================================== */

#alaune{
  padding: 22px 0 16px;
}

/* Carte "nuage" au 1er plan */
.floatcard{
  position: relative;
  border-radius: 28px;
  padding: 30px;

  background: rgba(255,250,241,.74);
  border: 1px solid rgba(217,177,143,.36);
  box-shadow: 0 22px 78px rgba(28,18,14,.13);
  backdrop-filter: blur(14px);

  /* effet premier plan + flottement (optionnel via --floatY) */
  transform: translate3d(0, calc(-10px + var(--floatY, 0px)), 0);
  will-change: transform;
  overflow: hidden;
}

/* Nuage / halos doux */
.floatcard::before{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;
  background:
    radial-gradient(520px 320px at 18% 32%, rgba(255,255,255,.82), transparent 68%),
    radial-gradient(560px 360px at 82% 38%, rgba(255,255,255,.72), transparent 70%),
    radial-gradient(520px 360px at 52% 70%, rgba(217,177,143,.18), transparent 72%),
    radial-gradient(420px 280px at 62% 18%, rgba(245,202,71,.08), transparent 72%);
  filter: blur(20px);
  opacity: .95;
}

/* Liseré interne (relief) */
.floatcard::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: 28px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.60),
    inset 0 0 0 1px rgba(255,255,255,.12);
  opacity:.9;
}

.floatcard > *{ position: relative; z-index: 1; }

/* Head */
.floatcard-head{
  display:flex;
  align-items:center;
  justify-content:flex-end; /* -> pousse à droite */
  gap:10px;
  flex-wrap:wrap;
  margin-bottom: 15px;
}

.floatbadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.50);
  border: 1px solid rgba(217,177,143,.40);
  font-size: 12.5px;
  font-weight: 750;
  color: rgba(36,26,22,.74);
}

.floatdot{
  width:8px;height:8px;border-radius:999px;
  background: rgba(245,202,71,.95);
  box-shadow: 0 0 0 4px rgba(245,202,71,.16);
}

.floattag{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(36,26,22,.58);
}

/* Titre / intro */
.floatcard-title{
  margin: 0 0 10px;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.25;
  letter-spacing: -.02em;
  max-width: 44ch;
}

.floatcard-sub{
  margin: 0 0 12px;
  color: rgba(36,26,22,.78);
  line-height: 1.55;
  max-width: 72ch;
}

/* Grid interne */
.floatgrid{
  display:grid;
  grid-template-columns: 2.15fr .85fr;
  gap: 16px;
  align-items:start;
  margin-top: 6px;
  max-width:1165px;
}

.floatnote{
  border-radius: 22px;
  padding: 14px 14px 12px 41px;
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(217,177,143,.32);
  width: 300px;
  max-width: 340px;
  margin: 20px 0;
  justify-content:flex-end; /* -> pousse à droite */
}

.floatnote-title{
  font-size: 14px;
  margin:0 0 18px;
  font-weight: 750;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(36,26,22,.65);
}
/* Variante encart "Plan d’action" */
.floatnote.plan{
  position: relative;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(217,177,143,.40);
}

.floatnote.plan::before{
  content:"";
  position:absolute;
  left: 50px;
  top: 47px;
  bottom: 16px;
  width: 2px;
  height: 61%;
  border-radius: 999px;
  background: rgba(217,177,143,.35);
}

/* Titre plus “méthode” */
.floatnote.plan .floatnote-title{
  display:flex;
  align-items:center;
  gap:12px;
  padding-top: 20px;
  margin-left: 5px;
}

.floatnote.plan .floatnote-title::before{
  content:"";
  width:10px;height:10px;border-radius:999px;
  background: rgba(245,202,71,.95);
  box-shadow: 0 0 0 4px rgba(245,202,71,.14);
}

/* Étapes (si tu utilises .floatsteps en <ol>) */
.floatsteps{
  list-style: none;   /* supprime 1. 2. 3. 4. */
  counter-reset: step;
  display:grid;
  gap:14px;
  padding: 0;
  margin:10px 0 20px;
}

.floatsteps li{
  counter-increment: step;
  position:relative;
  padding-left:26px;
  margin-left:2px;
  font-size:14px;
  line-height:1.55;
}

.floatsteps li::before{
  content: counter(step);
  position:absolute;
  left:-2px;
  top:1px;
  width:18px;
  height:18px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,250,241,.85);
  border:1px solid rgba(217,177,143,.45);
  color:rgba(36,26,22,.7);
}

/* List propre */
.floatlist{
  margin:20px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap: 14px;

}

.floatlist li{
  display:flex;
  gap:16px;
  align-items:flex-start;
  color: rgba(36,26,22,.80);
  line-height: 1.6;
  font-size: 14px;
}

.floatlist li::before{
  content:"";
  margin-top: 5px;
  width:8px;height:8px;
  border-radius: 999px;
  background: rgba(195,125,87,.55);
  box-shadow: 0 0 0 4px rgba(195,125,87,.10);
  flex:0 0 auto;
}

/* Actions */
.floatcard-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 12px;
  justify-content:flex-end; /* -> pousse à droite */
}

/* Responsive */
@media (max-width: 980px){
  #alaune{ padding-top: 14px; }
  .floatcard{ border-radius: 22px; transform: translate3d(0, calc(-6px + var(--floatY, 0px)), 0); }
}

@media (max-width: 700px){
  .floatgrid{ grid-template-columns: 1fr; }
  .floatcard-actions{ flex-direction: column; align-items: stretch; }
  .floatcard-actions .btn{ width: 100%; }
  .floatcard{padding: 25px;}
  .floatbadge{padding: 4px 11px;}
  .floatlist{gap: 8px;}
}

/* =========================
   Diagnostic — carte signature
   ========================= */

.diagnostic-card{
  grid-column: 1 / -1;
  border-radius: 26px;
  padding: 18px 18px;
  border: 1px solid rgba(217,177,143,.48);
  box-shadow: 0 18px 55px rgba(28,18,14,.10);
  background:
    radial-gradient(620px 360px at 12% 20%, rgba(245,202,71,.14), transparent 62%),
    radial-gradient(520px 320px at 88% 40%, rgba(195,125,87,.14), transparent 66%),
    linear-gradient(135deg, rgba(255,250,241,.92), rgba(246,243,238,.74));
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

/* lueur interne (comme tu aimes dans la modal) */
.diagnostic-card::after{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  border-radius: 26px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 0 26px rgba(195,125,87,.10);
  opacity: .95;
}

.diagnostic-card > *{
  position: relative;
  z-index: 1;
}

.diag-left{
  max-width: 78ch;
}

.diag-kicker{
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(36,26,22,.66);
  display:flex;
  align-items:center;
  gap: 10px;
}

.diag-icon{
  width: 22px;
  height: 22px;
  display:grid;
  place-items:center;
  border-radius: 999px;
  background: rgba(255,250,241,.75);
  border: 1px solid rgba(217,177,143,.50);
  box-shadow: 0 10px 22px rgba(28,18,14,.08);
  font-size: 14px;
  opacity: .9;
}

.diag-title{
  margin: 0 0 6px;
  font-size: 18px;
  letter-spacing: -.01em;
}

.diag-text{
  margin: 0;
  line-height: 1.6;
  color: rgba(36,26,22,.80);
}

.diag-note{
  margin: 10px 0 0;
  font-size: 12px;
  opacity: .70;
  line-height: 1.5;
}

.diag-actions{
  display:flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  min-width: 220px;
}
/*Fin diagnostic */

/* ===================
   SECTION CONTACT V2
   =================== */

   /* =========================
   CONTACT — TISSE premium
   ========================= */

.contact-grid{
  align-items: stretch;
}

.contact-card,
.contact-form-card{
  border-radius: 24px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(217,177,143,.28);
  box-shadow: 0 18px 44px rgba(28,18,14,.08);
  padding: 22px;
}

.contact-card__eyebrow{
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(36,26,22,.50);
}

.contact-card__title,
.contact-map__title,
.contact-form-card__title{
  margin: 0 0 10px;
  font-size: clamp(28px, 2.3vw, 40px);
  line-height: 1.08;
  letter-spacing: -.03em;
  color: rgba(36,26,22,.88);
}

.contact-card__title{
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.15;
}

.contact-card__subtitle{
  margin: 0;
  color: rgba(36,26,22,.82);
  line-height: 1.5;
  font-size: 15px;
  font-weight: 550;
}

.contact-card__text,
.contact-form-card__intro{
  margin: 15px 0;
  color: rgba(36,26,22,.78);
  line-height: 1.65;
}

.contact-card__infos{
  display: grid;
  gap: 12px;
  margin: 30px 0;
}

.contact-info{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  color: rgba(36,26,22,.82);
  font-weight: 550;
  transition: opacity .2s ease, transform .2s ease;
}

.contact-info:hover{
  opacity: .9;
  transform: translateX(2px);
}

.contact-info__icon{
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(245,202,71,.18);
  color: rgba(195,125,87,.92);
  font-size: 12px;
  flex: 0 0 auto;
}

.contact-card__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 30px 0 20px;
}

.contact-btn-main,
.contact-btn-secondary{
  min-height: 46px;
}

.contact-card__meta{
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
}
.sep-thin{
  height:1px;
  background:rgba(195,125,87,.18);
  margin:20px 0;
  margin: 25px 0;
}
.contact-card__note{
  margin: 0;
  font-size: 13px;
  color: rgba(36,26,22,.60);
  padding-left: 15px;
}

.contact-link{
  border: 0;
  background: transparent;
  padding: 0 15px;
  font: inherit;
  cursor: pointer;
  color: rgba(195,125,87,.85);
  font-weight:600;
}

.contact-link:hover{
  text-decoration: underline;
}



/* Cadre du calendrier */
#calendarModal .modal-tisse__body--iframe{
  /*padding: 15px;*/
  background:#f6f3ee;
}
.calendar-embed iframe{
  border-radius:12px;
  border:1px solid rgba(0,0,0,.06);
    margin-bottom: 20px;
}

/* carte intervention */
.contact-card--map{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(520px 280px at 65% 75%, rgba(217,177,143,.24), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(246,243,238,.52));
}

.contact-map__tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 18px;
}

.contact-tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,250,241,.78);
  border: 1px solid rgba(217,177,143,.34);
  font-size: 13px;
  color: rgba(36,26,22,.76);
}

.contact-visual{
  margin-top:22px;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(217,177,143,.26);
  background:rgba(255,255,255,.35);
}
.contact-visual__img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s ease;
  display: block;
}

.contact-visual:hover .contact-visual__img{
  transform:scale(1.04);
}

.contact-visual__screen{
  position: absolute;
  left: 24px;
  bottom: 22px;
  width: 44%;
  min-width: 180px;
  height: 138px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(217,177,143,.35);
  box-shadow: 0 18px 38px rgba(28,18,14,.10);
  overflow: hidden;
}

.contact-visual__bar{
  height: 18px;
  background: linear-gradient(90deg, rgba(217,177,143,.30), rgba(255,250,241,.72));
  border-bottom: 1px solid rgba(217,177,143,.22);
}

.contact-visual__content{
  padding: 14px;
  display: grid;
  gap: 10px;
}

.contact-visual__card{
  height: 18px;
  border-radius: 999px;
  background: rgba(217,177,143,.28);
}

.contact-visual__card--large{
  height: 38px;
  border-radius: 14px;
  background: rgba(195,125,87,.20);
}

.contact-visual__map{
  position: absolute;
  right: 20px;
  top: 20px;
  width: 42%;
  min-width: 190px;
  height: 180px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 52% 45%, rgba(217,177,143,.10), transparent 55%),
    rgba(255,255,255,.28);
  border: 1px dashed rgba(217,177,143,.34);
}

.contact-visual__dot{
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(245,202,71,.96);
  box-shadow:
    0 0 0 6px rgba(245,202,71,.14),
    0 0 22px rgba(245,202,71,.28);
}

.contact-visual__dot--auvergne{
  left: 44%;
  top: 45%;
}

.contact-visual__line{
  position: absolute;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(195,125,87,.0), rgba(195,125,87,.52), rgba(195,125,87,.0));
  opacity: .8;
}

.contact-visual__line--1{
  width: 90px;
  left: 48%;
  top: 50%;
  transform: rotate(-18deg);
}

.contact-visual__line--2{
  width: 72px;
  left: 28%;
  top: 34%;
  transform: rotate(22deg);
}

.contact-visual__line--3{
  width: 84px;
  left: 30%;
  top: 68%;
  transform: rotate(-10deg);
}

/* formulaire */
.contact-form-card{
  padding: 24px;
  scroll-margin-top:95px;
}

.contact-form-card__head{
  margin-bottom: 18px;
}

.contact-form{
  display: grid;
  gap: 18px;
}

.contact-form__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}

.field{
  display: grid;
  gap: 8px;
}
.field label .required{
  color: var(--brown);
  margin-left: 4px;
}
.field--full{
  grid-column: 1 / -1;
}

.field label{
  font-size: 13px;
  font-weight: 650;
  color: rgba(36,26,22,.74);
}

.field input,
.field select,
.field textarea{
  width: 100%;
  border: 1px solid rgba(217,177,143,.34);
  border-radius: 16px;
  padding: 14px 15px;
  background: rgba(255,255,255,.72);
  color: var(--ink);
  font: inherit;
  line-height: 1.4;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.field textarea{
  resize: none;
  min-height: 140px;
  max-height: 340px;
  overflow-y: auto;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline: none;
  border-color: rgba(195,125,87,.42);
  box-shadow: 0 0 0 4px rgba(217,177,143,.14);
  background: rgba(255,255,255,.92);
}

/* Placeholder inputs / textarea */
.field input::placeholder,
.field textarea::placeholder{
  color: rgba(36,26,22,.45);
  opacity: 1;
}

/* Select custom */
.field select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 46px;
  cursor: pointer;

  background-color: rgba(255,255,255,.72);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233a2b24' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px;
}
/* Etat placeholder du select */
.field select:required:invalid{
  color: rgba(36,26,22,.45);
}
/* quand une vraie option est choisie */
.field select:valid{
  color: var(--ink);
}


/* Options normales */
.field select option{
  color: var(--ink);
}

/* Option vide = placeholder */
.field select option[value=""]{
  color: rgba(36,26,22,.45);
  display:none;
}

.contact-form__footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.contact-form__note{
  margin: 0;
  font-size: 13px;
  color: rgba(36,26,22,.58);
}
.contact-form__success,
.contact-form__error{
  margin: 14px 0 0;
  padding: 14px 16px;
  border-radius: 14px;
  line-height: 1.55;
  font-size: 14px;
  font-weight: 550;
}
.contact-form__success{
  background: rgba(224,191,167,0.38);
  border: 1px solid rgba(217,177,143,.36);
  color: rgba(36,26,22,.82);
}
.contact-form__error{
  background: rgba(255,245,245,.82);
  border: 1px solid rgba(210,120,120,.24);
  color: rgba(120,50,50,.88);
}

/* responsive */
@media (max-width: 980px){
  .contact-card,
  .contact-form-card{
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 739px){
  .contact-card,
  .contact-form-card{
    padding: 18px;
    border-radius: 20px;
  }

  .contact-card__actions{
    flex-direction: column;
    align-items: stretch;
  }

  .contact-card__actions .btn{
    width: 100%;
  }

  .contact-card__meta{
    align-items: flex-start;
    flex-direction: column;
  }

  .contact-form__grid{
    grid-template-columns: 1fr;
  }

  .field--full{
    grid-column: auto;
  }

  .contact-form__footer{
    flex-direction: column;
    align-items: stretch;
  }

  .contact-form__footer .btn{
    width: 100%;
  }

  .contact-visual{
    min-height: 220px;
  }

  .contact-visual__screen{
    left: 16px;
    bottom: 16px;
    width: 48%;
    min-width: 150px;
    height: 120px;
  }

  .contact-visual__map{
    right: 12px;
    top: 12px;
    width: 44%;
    min-width: 150px;
    height: 150px;
  }
}

/* =========================================================
   MODAL TISSE — signature globale
   ========================================================= */
   
body.modal-open{
  overflow: hidden !important;
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
}
.modal-tisse{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  padding: 0;
}
.modal-tisse.is-open{
  display: grid;
}
.modal-tisse__overlay{
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(217,177,143,.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-tisse__panel{
  position: relative;
  z-index: 2;
  margin-left: auto;
  width: min(1080px, calc(100% - 28px));
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 0;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 80% 0%, rgba(217,177,143,.18), rgba(255,248,242,.92) 60%),
    linear-gradient(180deg, rgba(255,252,248,.96), rgba(255,246,238,.92));
  border: 0;
  box-shadow: 0 28px 80px rgba(28,18,14,.18);
  opacity: 0;
  transition: opacity .22s ease;
}
.modal-tisse.is-open .modal-tisse__panel{
  opacity: 1;
}
.modal-tisse__panel.is-narrow{
  width: min(720px, calc(100% - 28px));
}
.modal-tisse__panel.is-wide{
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  width: min(1080px, calc(100% - 28px));
}
.modal-tisse__header{
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: start;
  gap: 14px;
  padding: 18px 22px 16px;
  background: rgba(246,243,238,.72);
  border-bottom: 1px solid rgba(217,177,143,.38);
}

.modal-tisse__body--iframe{
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #f6f3ee;
}
.modal-tisse__header-text{ min-width: 0; }
.modal-tisse__eyebrow{
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(36,26,22,.48);
}
.modal-tisse__header h3{
  margin: 0;
  font-size: clamp(1.35rem, 1.2rem + .45vw, 1.72rem);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.modal-tisse__intro{
  margin: 6px 0 0;
  color: rgba(36,26,22,.72);
  line-height: 1.5;
}
.modal-tisse__close{
  width: 38px;
  height: 38px;
  padding: 6px 4px 2px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(195,125,87,.28);
  background: rgba(255,255,255,.42);
  color: var(--brown);
  font-size: 1.55rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.modal-tisse__close:hover{
  transform: scale(1.03);
  background: rgba(255,255,255,.62);
  border-color: rgba(195,125,87,.42);
}
.modal-tisse__body{
  flex: 1 1 auto;
  min-height: 0;
  /*padding: 18px 22px 22px;*/
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(195,125,87,.40) rgba(217,177,143,.18);
}
.modal-tisse__body::-webkit-scrollbar{ width: 10px; }
.modal-tisse__body::-webkit-scrollbar-track{ background: transparent; }
.modal-tisse__body::-webkit-scrollbar-thumb{
  background: rgba(195,125,87,.32);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.modal-tisse__body--split{
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: 16px;
  align-items: start;
}
/**GESTION DES MARGES DE MODALE*/
  .modal-tisse__body > *{  margin: 15px;}
  .newsletter-modal-frame{  margin: 0;}

.modal-tisse--clean .modal-tisse__header{
  display: none;
}

.modal-tisse__close--floating{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
}
.modal-tisse__section{
  margin-bottom: 16px;
  padding: 18px;
  border-radius: 15px;
  background: rgba(255,252,248,.92);
  border: 0.5px solid rgba(195,125,87,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 0 18px rgba(255,255,255,0.35);
}
.modal-tisse__section p{ margin: 0 0 12px; line-height: 1.62; color: rgba(36,26,22,.84); }
.modal-tisse__section p:last-child{ margin-bottom: 0; }
.modal-tisse__section-label{
  margin: 0 0 12px !important;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(36,26,22,.50);
}
.modal-tisse__note{
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: radial-gradient(
      1200px 600px at 80% 0%,
      rgba(217,177,143,.08),
      rgba(255,248,242,.22) 60%
    ),
    linear-gradient(
     180deg,
      rgba(255,252,248,.26),
      rgba(255,246,238,.22)
    );
  border: 1px solid rgba(195,125,87,.18);
  line-height: 1.55;
}
.modal-tisse__actions{ padding: 6px 0 2px; }
.modal-tisse__spacer{ height: 14px; }
.modal-tisse__footnote{
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(36,26,22,.66);
}
.modal-tisse__checklist{ margin-bottom: 0; }
.modal-tisse__frame{
  flex: 1 1 auto;
  min-height: 540px;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border: 0;
  display: block;
  background: #f6f3ee;
  padding: 0;
  margin: 0;
  /*border: 1px solid rgba(217,177,143,.42);
  border-radius: 20px;
  background: rgba(255,255,255,.42);
  box-shadow: 0 16px 36px rgba(28,18,14,.08);*/
}
.modal-tisse__iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
}
.modal-tisse a:not(.btn){ color: var(--brown); }

/* Champ email réforme */
#reforme-form{
  display:block;
  align-items:center;
  gap:12px;
  margin-top:12px;
}
#reforme-form input[type="email"]{
  flex:1;
  height:42px;
  min-width:240px;
  margin: 5px 10px 10px 0;
  padding:0 14px;
  border-radius:10px;
  border:1px solid rgba(195,125,87,.25);
  background:rgba(255,255,255,.75);
  font-size:14px;
  color:var(--ink);
  outline:none;
  transition:border .2s ease, box-shadow .2s ease;
}
#reforme-form input[type="email"]::placeholder{
  color:rgba(36,26,22,.45);
}
#reforme-form input[type="email"]:focus{
  border:1px solid var(--brown);
  box-shadow:0 0 0 2px rgba(195,125,87,.12);
}
#reforme-form button{
  white-space:nowrap;
}
.modal-tisse__success{
  margin-top:10px;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(195,125,87,.12);
  border:1px solid rgba(195,125,87,.25);
  font-size:14px;
}
@media (max-width: 450px){
  #reforme-form input[type="email"]{
    width:100%;
  }}

/* Mobile: on prend plus de hauteur */
@media (max-width: 980px){
  .modal-tisse__body{
  /*padding: 18px 22px 22px;*/
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(195,125,87,.40) rgba(217,177,143,.18);
}
.modal-tisse__body::-webkit-scrollbar{ width: 10px; }
.modal-tisse__body::-webkit-scrollbar-track{ background: transparent; }
.modal-tisse__body::-webkit-scrollbar-thumb{
  background: rgba(195,125,87,.32);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}  
  .modal-tisse__panel,
  .modal-tisse__panel.is-wide,
  .modal-tisse__panel.is-narrow{
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
  }
}
@media (max-width: 739px){
  .steps{
    grid-template-columns: 1fr;
    gap: 14px;
    position: relative;  }
  .steps::before{
    content: "";
    display: block;
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 28px;
    width: 2px;
    height: auto;
    border-radius: 999px;
    background: linear-gradient(
      180deg,
      rgba(217,177,143,.16),
      rgba(195,125,87,.32),
      rgba(217,177,143,.16)
    ); }
  .step{
    min-height: 0;
    padding: 18px 18px 18px 55px;
    position: relative;   }
  .step::before{
    top: 20px;
    left: 22px;
    width: 10px;
    height: 10px;
  }
  .modal-tisse__header{
    padding: 16px;
    gap: 12px;
  }
  .modal-tisse__close{
    width: 38px;
    height: 38px;
    padding: 0 4px 4px; }
  .modal-tisse__frame{
    min-height: 480px;
  }.modal-tisse__overlay{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .modal-tisse__panel,
  .modal-tisse__panel.is-wide,
  .modal-tisse__panel.is-narrow{
    width: 100vw;
    height: 100svh;
    max-height: 100svh;
  }
  .modal-tisse__body{
    /*padding: 16px;*/
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
}
  @media (max-width: 450px){
    .modal-tisse__body--split { display: block; }
  }

/* -- position à l'ancrage -- */
section[id]{
  scroll-margin-top: 96px;
}


/* =========================
   Newsletter modal — iframe locale
   ========================= */
.newsletter-modal-panel{width:min(100vw,1280px)}
.newsletter-modal-body{padding:0}
.newsletter-modal-frame{border-radius:0 0 24px 24px;overflow:hidden;background:#fffaf3}
.newsletter-modal-iframe{width:100%;height:100%;border:0;display:block;background:#fffaf3}

/* =========================================================
   TISSE — Pages internes & système visuel réutilisable
   Objectif : noms visuels + compatibilité avec les anciennes classes
   ========================================================= */

/* ----- Page simple / page ressource ----- */
.tisse-page,
.page-simple{
  padding: 34px 0 54px;
}

.tisse-hero,
.page-hero{
  max-width: 860px;
  margin: 0 auto;
}

.tisse-eyebrow,
.card-label,
.tisse-card-label{
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(36, 26, 22, .58);
}

.tisse-hero h1,
.page-hero h1{
  margin: 0 0 10px;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -.02em;
}

.tisse-hero p,
.page-hero p{
  margin: 0 0 10px;
  color: rgba(36,26,22,.72);
  font-size: 14px;
  line-height: 1.65;
}

.tisse-grid,
.content-grid{
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

/* Ancien .approach gardé en alias temporaire */
.tisse-card,
.surface-card,
.feature-card,
.approach{
  padding: 28px;
  border-radius: 24px;
  background: rgba(255,255,255,.44);
  border: 1px solid rgba(195,125,87,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}

.tisse-card p,
.surface-card p,
.feature-card p,
.approach p{
  margin: 0 0 12px;
  line-height: 1.75;
  color: rgba(36,26,22,.78);
}

.tisse-card p:last-child,
.surface-card p:last-child,
.feature-card p:last-child,
.approach p:last-child{
  margin-bottom: 0;
}

/* ----- Pages activité / ressource longues ----- */
.page-activity,
.activity-page{
  padding: 6px 0 28px;
}

/* Ancien .activity-card des pages activité : scoped pour éviter conflit avec les cartes de l'accueil */
.page-content-card,
.page-activity .surface-card,
.activity-page .activity-card{
  max-width: 980px;
  margin: 0 auto;
  background:
    radial-gradient(500px 220px at 0% 0%, rgba(255,255,255,.25), transparent 60%),
    linear-gradient(135deg, rgba(246,243,238,.80), rgba(255,255,255,.60));
  border-radius: 30px;
  padding: 42px;
  border: 1px solid rgba(195,125,87,.18);
  box-shadow:
    0 18px 40px rgba(28,18,14,.10),
    inset 0 1px 0 rgba(255,255,255,.60);
  cursor: auto;
}

.page-content-card h1,
.activity-page .activity-card h1{
  font-size: clamp(34px, 4vw, 48px);
  margin: 0 0 16px;
  letter-spacing: -.02em;
  line-height: 1.08;
}

.page-content-card h2,
.activity-page .activity-card h2{
  font-size: clamp(24px, 2.2vw, 30px);
  margin: 36px 0 14px;
  letter-spacing: -.01em;
  line-height: 1.15;
}

.page-content-card h3,
.activity-page .activity-card h3{
  font-size: 22px;
  margin: 30px 0 12px;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.page-content-card p,
.page-content-card li,
.activity-page .activity-card p,
.activity-page .activity-card li{
  line-height: 1.72;
  color: rgba(36,26,22,.78);
  font-size: 16px;
}

.page-content-card p,
.activity-page .activity-card p{
  margin: 0 0 20px;
}

.page-content-card .intro,
.activity-page .activity-card .intro{
  font-size: 17px;
  color: rgba(36,26,22,.92);
  max-width: 60ch;
}

.page-content-card ul,
.activity-page .activity-card ul{
  padding-left: 20px;
  margin: 0 0 10px;
}

.page-content-card li,
.activity-page .activity-card li{
  margin-bottom: 10px;
}

/* Hero interne */
.page-hero-split,
.activity-hero--split{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 30px;
  align-items: center;
}

.activity-hero{
  margin: 8px 0 32px;
}

.activity-hero__content{
  min-width: 0;
}

.media-frame,
.activity-hero__media{
  margin: 0;
  min-width: 0;
}

.media-frame img,
.activity-hero__media img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 26px;
  border: 1px solid rgba(195,125,87,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(246,243,238,.92));
  box-shadow:
    0 16px 36px rgba(28,18,14,.08),
    inset 0 1px 0 rgba(255,255,255,.45);
  object-fit: cover;
}

.media-frame--padded,
.activity-hero__media--framed{
  padding: 10px;
  border-radius: 28px;
  background: rgba(255,255,255,.46);
  border: 1px solid rgba(195,125,87,.12);
  box-shadow:
    0 14px 34px rgba(28,18,14,.08),
    inset 0 1px 0 rgba(255,255,255,.55);
}

.media-frame--padded img,
.activity-hero__media--framed img{
  border-radius: 20px;
}

.media-wide,
.activity-wide-media,
.media-wide-frame,
.activity-wide-media-cadre{
  border-radius: 28px;
  box-shadow:
    0 16px 36px rgba(28,18,14,.08),
    inset 0 1px 0 rgba(255,255,255,.55);
}

.media-wide-frame,
.activity-wide-media-cadre{
  margin: 10px 0;
  padding: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(246,243,238,.72));
  border: 1px solid rgba(195,125,87,.14);
}

.media-wide,
.activity-wide-media{
  width: 96%;
  margin: 25px 0;
}

.media-wide img,
.media-wide-frame img,
.activity-wide-media img,
.activity-wide-media-cadre img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:20px;
}

/* CTA internes */
.action-row,
.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin:22px 0 8px;
}

.action-row--main,
.cta-row-main{
  margin-top: 24px;
}

.link-arrow,
.text-link{
  color:rgba(195,125,87,.92);
  font-weight:650;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.link-arrow::after,
.text-link::after{
  content:"→";
  transition:transform .18s ease;
}

.link-arrow:hover::after,
.text-link:hover::after{
  transform:translateX(2px);
}

/* Aperçus iframe */
.preview-frame,
.activites-preview{
  position:relative;
  overflow:hidden;
  border-radius:22px;
}

.preview-frame iframe,
.activites-preview iframe{
  height: 100%;
  width:100%;
  border:0;
}

.preview-frame::after,
.activites-preview::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:120px;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(247,243,238,0), #f7f3ee);
}

.preview-newsletter,
.newsletter-preview{ height:534px; }

.preview-realisation-bnc,
.realisation-bnc-preview{ height:635px; }

.preview-realisation-bnc iframe,
.realisation-bnc-preview iframe{
  height:900px;
  width: 1200px;
  transform: scale(0.75);
  transform-origin: top left;
}

/* Séparateurs */
.separator,
.tisse-separator{
  width:100%;
  height:1px;
  margin:42px 0;
  border:0;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(195,125,87,.16) 18%,
    rgba(195,125,87,.42) 50%,
    rgba(195,125,87,.16) 82%,
    transparent 100%
  );
}

.separator--soft,
.tisse-separator--soft{
  margin:34px 0;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(217,177,143,.14) 20%,
    rgba(195,125,87,.28) 50%,
    rgba(217,177,143,.14) 80%,
    transparent 100%
  );
}

.separator--blank,
.tisse-separator-invisible{
  padding: 14px 0;
  border: 0;
}

/* Grilles visuelles */
.split-grid,
.activity--split{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 30px;
  align-items: center;
}

.split-grid > div,
.activity--split > div{
  padding-right: 35px;
}

/* ----- Mode embed : affichage dans iframe / modale ----- */
.only-standalone{ display:block; }
html.is-embed .only-standalone{ display:none !important; }

html.is-embed,
html.is-embed body{
  min-height: 100%;
  background:#f6f3ee;
}

html.is-embed main{
  min-height: 100vh;
  padding: 0;
  background:#f6f3ee;
}

html.is-embed main .wrap{
  max-width: none;
  width: 100%;
  padding: 0;
}

html.is-embed .content-shell{
  min-height: 100vh;
}

html.is-embed .activity-page,
html.is-embed .page-activity{
  padding: 18px;
}

/* ----- Compatibilité ancienne modale générique : on force le style signature index ----- */
.tisse-modal{
  display:none;
}

/* Si une page utilise encore .tisse-modal au lieu de .modal-tisse */
.tisse-modal.is-open{
  display:block;
}

/* ----- Responsive pages internes ----- */
@media (max-width: 900px){
  .page-hero-split,
  .activity-hero--split,
  .split-grid,
  .activity--split{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .activity-hero__content{ order: 1; }
  .activity-hero__media{ order: 2; }

  .split-grid > div,
  .activity--split > div{
    padding-right: 0;
  }
}

@media (max-width: 700px){
  .page-content-card,
  .activity-page .activity-card{
    padding: 28px 22px;
    border-radius: 24px;
  }

  .page-content-card h1,
  .activity-page .activity-card h1{ font-size: 30px; }

  .page-content-card h2,
  .activity-page .activity-card h2{ font-size: 24px; }

  .page-content-card h3,
  .activity-page .activity-card h3{ font-size: 20px; }

  .page-content-card p,
  .page-content-card li,
  .activity-page .activity-card p,
  .activity-page .activity-card li{ font-size: 16px; }

  .page-content-card .intro,
  .activity-page .activity-card .intro{ font-size: 17px; }

  .tisse-card,
  .surface-card,
  .feature-card,
  .approach{
    padding: 22px 18px;
    border-radius: 20px;
  }

  .action-row,
  .cta-row{
    flex-direction: column;
    align-items: stretch;
  }

  .action-row .btn,
  .cta-row .btn{ width: 100%; }

  .link-arrow,
  .text-link{
    width: 100%;
    justify-content: flex-start;
  }
}

/* =========================================================
   Mémo migration classes — à garder temporairement
   ---------------------------------------------------------
   .approach              → .feature-card ou .surface-card
   .modal-tisse__section  → .surface-card si hors modale
   .activity-page         → .page-activity
   .activity-card (page)  → .page-content-card ou .surface-card
   .activity-card (home)  → .teaser-card + .activities-grid
   .cta-row               → .action-row
   .text-link             → .link-arrow
   .activity-wide-media   → .media-wide
   .activity-wide-media-cadre → .media-wide-frame
   .activity--split       → .split-grid
   ========================================================= */