/* ==========================================================================
   Zwickert — page /conditions/
   Même grammaire, composants propres à la proposition
   ========================================================================== */

.cond-nav{
  position:fixed; inset:0 0 auto 0; z-index:110; height:74px;
  background:rgba(244,241,234,.95); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); color:var(--ink);
}
.cond-nav__in{ max-width:var(--maxw); margin:0 auto; height:100%; padding:0 var(--pad); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.cond-nav img{ height:34px; width:auto; }
.cond-nav__liens{ display:flex; align-items:center; gap:clamp(12px,1.8vw,26px); }
.cond-nav__liens a{ font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); padding:6px 0; border-bottom:1px solid transparent; }
.cond-nav__liens a:hover, .cond-nav__liens a.actif{ color:var(--ink); border-bottom-color:var(--ink); }
.cond-nav .btn{ padding:11px 20px; font-size:11.5px; }

/* ---------- Ouverture ---------- */
.offre{ padding:calc(74px + clamp(56px,7vw,96px)) 0 clamp(56px,7vw,96px); }
.offre__grille{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(30px,6vw,90px); align-items:center; }
.offre h1{ margin:22px 0 6px; font-size:clamp(38px,4.6vw,68px); }
.offre h1 em{ display:block; font-style:italic; color:var(--blue); font-weight:300; }
.offre__txt > p{ max-width:52ch; color:#2A3541; margin-top:18px; }
.offre__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.offre__sign{ margin-top:26px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

.collage{ position:relative; height:min(560px,54vw); min-height:380px; }
.collage figure{ position:absolute; margin:0; overflow:hidden; box-shadow:0 24px 60px rgba(15,25,35,.22); }
.collage img{ width:100%; height:100%; object-fit:cover; }
.collage .c1{ width:38%; height:74%; left:0; top:0; border-radius:220px 220px 14px 14px; transform:rotate(-2.5deg); }
.collage .c2{ width:52%; height:52%; right:0; top:12%; border-radius:14px; transform:rotate(2deg); }
.collage .c3{ width:46%; height:38%; left:16%; bottom:0; border-radius:14px; transform:rotate(-1.2deg); }
.collage .tampon{
  position:absolute; right:2%; bottom:6%; width:132px; height:132px; border-radius:50%;
  background:var(--blue); color:#fff; display:grid; place-items:center; text-align:center;
  font-size:12px; letter-spacing:.06em; line-height:1.35; padding:16px; transform:rotate(-7deg);
  box-shadow:0 18px 40px rgba(15,25,35,.25);
}
.collage .tampon b{ font-family:var(--serif); font-weight:400; font-size:17px; display:block; margin-top:4px; }

/* ---------- Repères ---------- */
.reperes-bande{ background:var(--navy); color:var(--white); padding:clamp(46px,5vw,72px) 0; }
.reperes-bande__in{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(14px,2vw,26px); }
.rep b{ display:block; font-family:var(--serif); font-weight:300; font-size:clamp(30px,3.2vw,44px); line-height:1; color:#fff; }
.rep span{ display:block; margin-top:10px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(252,251,247,.6); line-height:1.5; }
.reperes-bande__note{ margin-top:clamp(26px,3vw,40px); padding-top:22px; border-top:1px solid rgba(255,255,255,.14); font-size:13px; color:rgba(252,251,247,.6); }

/* ---------- Forfaits ---------- */
.forfaits{ padding:clamp(80px,9vw,140px) 0; scroll-margin-top:90px; }
.forfaits__grille{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,26px); align-items:stretch; margin-top:clamp(34px,4vw,54px); }
.forfait{
  position:relative; background:var(--white); border:1px solid var(--line); border-radius:20px;
  padding:clamp(22px,2.4vw,32px); display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.forfait:hover{ transform:translateY(-6px); box-shadow:0 26px 60px rgba(15,25,35,.10); }
.forfait--mis{ border-color:rgba(39,91,157,.5); }
.forfait--mis::before{
  content:""; position:absolute; inset:-1px; border-radius:20px; pointer-events:none;
  background:linear-gradient(120deg, rgba(39,91,157,.0) 20%, rgba(39,91,157,.55) 50%, rgba(199,165,106,.5) 70%, rgba(39,91,157,0) 90%);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:1px;
  animation:liserai 7s linear infinite; background-size:220% 220%;
}
@keyframes liserai{ from{ background-position:0% 50%; } to{ background-position:220% 50%; } }
.badge{
  position:absolute; top:-13px; left:22px; background:var(--blue); color:#fff;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:6px 12px; border-radius:999px;
}
.forfait__num{ position:absolute; right:18px; top:10px; font-family:var(--serif); font-size:56px; color:rgba(15,25,35,.06); line-height:1; }
.forfait h3{ font-size:clamp(21px,1.6vw,25px); max-width:none; }
.forfait__prix{ font-family:var(--serif); font-size:clamp(32px,3vw,42px); line-height:1; margin:12px 0 6px; }
.forfait__prix small{ font-family:var(--sans); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-left:6px; }
.forfait__situation{ font-size:14.5px; color:#3A4653; font-style:italic; margin:0 0 18px; }
.forfait ul{ list-style:none; margin:0 0 22px; padding:0; border-top:1px solid var(--line); }
.forfait li{ padding:11px 0; border-bottom:1px solid var(--line); font-size:14px; line-height:1.5; }
.forfait li b{ display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500; margin-bottom:3px; }
.forfait__remise{ font-size:13px; color:#3A4653; margin-bottom:18px; }
.forfait .btn{ margin-top:auto; justify-content:center; }
.forfaits__note{ margin-top:24px; font-size:13px; color:var(--muted); }

/* ---------- Tableau ---------- */
.comparer{ padding:clamp(70px,8vw,120px) 0; background:var(--paper-2); scroll-margin-top:90px; }
.tableau{ margin-top:clamp(30px,4vw,48px); overflow-x:auto; position:relative; -webkit-overflow-scrolling:touch; }
.tableau table{ width:100%; border-collapse:collapse; min-width:720px; font-size:14px; }
.tableau th, .tableau td{ padding:14px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle; }
.tableau thead th{ font-family:var(--serif); font-weight:400; font-size:19px; vertical-align:bottom; }
.tableau thead th small{ display:block; font-family:var(--sans); font-size:11px; letter-spacing:.1em; color:var(--muted); margin-top:4px; }
.tableau thead th:nth-child(3){ background:rgba(39,91,157,.07); }
.tableau td:nth-child(3){ background:rgba(39,91,157,.05); }
.tableau tbody th{ font-weight:400; color:#2A3541; }
.tableau .pt{ width:12px; height:12px; border-radius:50%; background:var(--blue); display:inline-block; }
.tableau .tiret{ width:12px; height:1px; background:var(--muted); display:inline-block; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- Bande photo ---------- */
.bande{ position:relative; height:clamp(280px,38vw,460px); overflow:hidden; background:var(--navy); }
.bande img{ position:absolute; left:0; top:-10%; width:100%; height:120%; object-fit:cover; }
.bande__voile{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(9,15,22,.8), rgba(9,15,22,.15)); }
.bande__txt{ position:absolute; left:0; right:0; bottom:clamp(22px,4vw,52px); color:#fff; }
.bande__txt p{ font-family:var(--serif); font-size:clamp(22px,2.8vw,38px); line-height:1.2; max-width:22ch; }

/* ---------- Visibilité ---------- */
.visibilite{ padding:clamp(80px,9vw,140px) 0; scroll-margin-top:90px; }
.visibilite__grille{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.2vw,30px); margin-top:clamp(34px,4vw,52px); }
.visi{ background:var(--white); border:1px solid var(--line); border-radius:18px; padding:clamp(22px,2.4vw,30px); }
.visi svg{ width:34px; height:34px; color:var(--blue); margin-bottom:16px; }
.visi h3{ font-size:21px; margin-bottom:10px; }
.visi p{ font-size:14.5px; line-height:1.6; color:#33404C; }
.reserve{ margin-top:26px; font-size:12.5px; color:var(--muted); max-width:80ch; border-left:1px solid var(--blue); padding-left:16px; }
.terme{ display:inline; border:0; border-bottom:1px dotted var(--blue); color:var(--blue); cursor:pointer; background:none; padding:0; font:inherit; line-height:inherit; }
.terme:hover{ color:var(--ink); }

/* ---------- Méthode ---------- */
.methode{ padding:clamp(70px,8vw,120px) 0; background:var(--navy); color:var(--white); scroll-margin-top:90px; }
.methode .surtitre{ color:rgba(252,251,247,.55); }
.methode h2{ margin:14px 0 0; max-width:18ch; }
.etapes{ position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,44px); margin-top:clamp(40px,5vw,64px); }
.etapes__ligne{ position:absolute; left:0; right:calc(100% / 3); top:6px; height:1px; background:rgba(255,255,255,.16); }
.etapes__ligne i{ display:block; height:1px; width:100%; background:#C7A56A; transition:width 1.8s var(--ease); }
.js .etapes__ligne i{ width:0; }
.js .etapes.in .etapes__ligne i{ width:100%; }
.etape{ position:relative; padding-top:30px; }
.etape::before{ content:""; position:absolute; top:2px; left:0; width:9px; height:9px; border-radius:50%; background:#C7A56A; }
.etape b{ display:block; font-size:11px; letter-spacing:.2em; color:rgba(252,251,247,.5); margin-bottom:8px; }
.etape h3{ font-size:24px; margin-bottom:10px; }
.etape p{ font-size:14.5px; color:rgba(252,251,247,.75); }

/* ---------- Questions ---------- */
.questions{ padding:clamp(80px,9vw,140px) 0; scroll-margin-top:90px; }
.groupe{ margin-top:clamp(34px,4vw,54px); }
.groupe h3{ font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
details{ border-bottom:1px solid var(--line); }
details summary{
  list-style:none; cursor:pointer; padding:18px 40px 18px 0; position:relative;
  font-size:16.5px; color:var(--ink); line-height:1.4;
}
details summary::-webkit-details-marker{ display:none; }
details summary::after{ content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:22px; color:var(--muted); transition:transform .3s; }
details[open] summary::after{ content:"–"; }
details .rep{ padding:0 40px 22px 0; font-size:15px; color:#33404C; max-width:80ch; }
.def p{ padding:0 0 18px; font-size:14.5px; color:#33404C; max-width:80ch; }
.def em{ display:block; font-size:15.5px; color:var(--ink); margin-bottom:6px; }

/* ---------- Appel ---------- */
.appel{ position:relative; overflow:hidden; background:var(--navy); color:#fff; padding:clamp(90px,11vw,170px) 0; }
.appel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.appel__voile{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,13,20,.92), rgba(8,13,20,.55)); }
.appel__in{ position:relative; }
.appel h2{ font-size:clamp(32px,4vw,58px); max-width:22ch; margin:14px 0 20px; }
.appel p{ max-width:52ch; color:rgba(252,251,247,.82); }
.appel .btn{ margin-top:26px; margin-right:10px; }

/* ---------- Pied conditions ---------- */
.cond-pied{ background:var(--ink); color:rgba(252,251,247,.6); padding:clamp(40px,5vw,64px) 0 26px; font-size:13px; }
.cond-pied__in{ display:grid; grid-template-columns:1fr auto; gap:24px; align-items:start; }
.cond-pied a{ color:rgba(252,251,247,.8); }
.cond-pied__sign{ margin-top:8px; }
.cond-pied__droits{ grid-column:1/-1; margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); font-size:11px; line-height:1.7; color:rgba(252,251,247,.38); }

/* ---------- Responsive conditions ---------- */
@media (max-width:1100px){
  .cond-nav__liens{ display:none; }
  .reperes-bande__in{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:26px; }
}
@media (max-width:900px){
  .offre__grille{ grid-template-columns:1fr; }
  .collage{ height:420px; }
  .forfaits__grille{ grid-template-columns:1fr; }
  .visibilite__grille{ grid-template-columns:1fr; }
  .etapes{ grid-template-columns:1fr; }
  .etapes__ligne{ display:none; }
  .etape{ padding-top:22px; border-top:1px solid rgba(255,255,255,.16); }
  .etape::before{ top:-5px; }
  .cond-pied__in{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .reperes-bande__in{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .collage .tampon{ width:104px; height:104px; font-size:10px; }
  .collage{ height:360px; }
}
@media (prefers-reduced-motion:reduce){
  .forfait--mis::before{ animation:none; }
}