/* ============================================================
   Samuel Stauffer SA — page des conditions
   Même grammaire, même identité, registre de la proposition.
   ============================================================ */

body.cond{background:var(--papier)}

/* barre de progression + nav */
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--bleu),#8fc2ec);z-index:300}

.nav2{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(243,241,234,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--filet)}
.nav2-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--marge);height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav2 .logo-patch{padding:8px 10px;box-shadow:0 0 0 1px var(--filet)}
.nav2 .logo-patch img{width:86px}
.nav2-liens{display:flex;gap:clamp(12px,1.6vw,26px);font-size:13px;font-weight:500}
.nav2-liens a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;transition:border-color .25s,color .25s;white-space:nowrap}
.nav2-liens a:hover,.nav2-liens a.actif{border-color:var(--bleu);color:var(--bleu)}
.nav2-cta{background:var(--bleu);color:#fff;border-radius:100px;padding:11px 20px;font-size:13px;font-weight:600;text-decoration:none;transition:background .3s}
.nav2-cta:hover{background:var(--nuit)}
@media(max-width:1000px){.nav2-liens{display:none}}

/* ouverture */
.ouv{padding:clamp(120px,12vw,170px) 0 clamp(60px,7vw,100px)}
.ouv-grille{display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,80px);align-items:center}
@media(min-width:980px){.ouv-grille{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.ouv h1{font-size:clamp(34px,4.6vw,64px);margin:22px 0 0;max-width:14ch}
.ouv h1 em{display:block;font-style:italic;font-weight:500;color:var(--bleu);letter-spacing:-.02em;text-transform:none;font-size:.86em;margin-top:8px}
.ouv p{margin-top:22px;max-width:52ch;color:#28343f}
.ouv-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.ouv-sign{margin-top:26px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}

.collage{position:relative;min-height:420px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.collage figure{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 18px 40px rgba(13,27,38,.16);background:#fff}
.collage img{width:100%;height:100%;object-fit:cover}
.collage .c1{grid-column:1/-1;aspect-ratio:1.5;transform:rotate(-2deg)}
.collage .c2{aspect-ratio:.9;transform:rotate(2.5deg) translateY(10px)}
.collage .c3{aspect-ratio:.9;transform:rotate(-1.5deg) translateY(-6px)}
.tampon{
  position:absolute;right:-6px;bottom:-14px;background:var(--bleu);color:#fff;border-radius:100px;
  padding:12px 20px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  transform:rotate(-4deg);box-shadow:0 10px 24px rgba(13,27,38,.25);
}
@media(max-width:560px){
  .collage{min-height:0}
  .collage .c1{transform:none}
  .collage .c2,.collage .c3{transform:none}
  .tampon{right:8px;bottom:-10px}
}

/* bandeau sombre */
.bandeau{background:var(--nuit);color:#fff;padding:clamp(50px,6vw,80px) 0}
.bandeau h2{font-size:clamp(22px,2.2vw,32px);max-width:26ch;margin-bottom:30px}
.reperes{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.14)}
@media(min-width:900px){.reperes{grid-template-columns:repeat(5,1fr)}}
.reperes li{background:var(--nuit);padding:22px 18px}
.reperes .num{display:block;font-size:clamp(28px,3vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.reperes .lab{display:block;margin-top:10px;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.6)}
.bandeau .note{margin-top:22px;font-size:12px;color:rgba(255,255,255,.5)}

/* forfaits */
.forfaits{padding:clamp(70px,9vw,130px) 0}
.forfaits-tete{max-width:60ch;margin-bottom:clamp(32px,4vw,56px)}
.forfaits-tete h2{font-size:clamp(30px,3.8vw,52px);margin-top:16px}
.forfaits-grille{display:grid;grid-template-columns:1fr;gap:18px;align-items:stretch}
@media(min-width:900px){.forfaits-grille{grid-template-columns:repeat(3,1fr)}}
.forfait{position:relative;background:#fff;border:1px solid var(--filet);border-radius:var(--r);padding:26px 24px 24px;display:flex;flex-direction:column;gap:14px;transition:transform .35s ease,box-shadow .35s ease}
.forfait:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(13,27,38,.08)}
.forfait.vedette{border:1px solid var(--bleu);box-shadow:0 18px 44px rgba(0,83,148,.12)}
.forfait.vedette::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(120deg,var(--bleu),#8fc2ec,var(--bleu));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.badge{position:absolute;top:-12px;left:22px;background:var(--bleu);color:#fff;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:6px 11px;border-radius:100px}
.forfait .num{position:absolute;right:18px;top:14px;font-family:var(--mono);font-size:11px;color:var(--filet);letter-spacing:.1em}
.forfait h3{font-size:20px;text-transform:none;letter-spacing:-.01em;margin-top:6px}
.prix{font-size:clamp(26px,2.6vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1}
.prix small{display:block;font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-top:6px}
.situation{font-size:13.5px;color:var(--gris);font-style:italic}
.forfait ul{display:flex;flex-direction:column;gap:9px;font-size:13px;line-height:1.45}
.forfait li{padding-left:16px;position:relative;color:#2b3944}
.forfait li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--bleu)}
.forfait li b{font-weight:600}
.forfait .btn{margin-top:auto;justify-content:center;padding:12px 18px;font-size:13px}
.forfait .remise{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--gris);text-transform:uppercase}
.forfaits-note{margin-top:26px;font-size:12.5px;color:var(--gris);max-width:90ch}

/* comparer */
.comparer{padding:clamp(60px,7vw,100px) 0;background:var(--papier-2)}
.tab-wrap{overflow-x:auto;position:relative;margin-top:30px;border-radius:var(--r);border:1px solid var(--filet);background:#fff}
table.comp{width:100%;border-collapse:collapse;min-width:720px;font-size:13.5px}
.comp th,.comp td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--filet)}
.comp thead th{font-size:11px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--gris);vertical-align:bottom}
.comp thead th.mid{background:rgba(0,83,148,.06);color:var(--encre)}
.comp thead th b{display:block;font-size:15px;text-transform:none;letter-spacing:-.01em;color:var(--encre);margin-bottom:4px}
.comp td.mid{background:rgba(0,83,148,.045)}
.comp tbody tr:last-child td{border-bottom:0}
.comp td:first-child{font-weight:500}
.pastille{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--bleu)}
.tiret{color:var(--gris)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* bandeau photo */
.bandephoto{position:relative;height:clamp(280px,38vw,460px);overflow:hidden}
.bandephoto img{width:100%;height:100%;object-fit:cover;object-position:center 55%;will-change:transform}
.bandephoto::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,18,33,.65),rgba(4,18,33,.05))}
.bandephoto .cap{position:absolute;left:var(--marge);bottom:clamp(20px,3vw,36px);color:#fff;z-index:2;max-width:90%}
.bandephoto .cap span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#a9cdea}
.bandephoto .cap p{font-size:clamp(20px,2.4vw,34px);font-weight:700;letter-spacing:-.02em;margin-top:8px;text-transform:uppercase;line-height:1.05}

/* visibilité */
.visibilite{padding:clamp(70px,9vw,120px) 0}
.visibilite h2{font-size:clamp(28px,3.3vw,46px);max-width:24ch;margin-top:16px}
.visibilite .chapeau{margin-top:20px;max-width:70ch;color:#2b3944}
.cartes{display:grid;grid-template-columns:1fr;gap:18px;margin-top:38px}
@media(min-width:900px){.cartes{grid-template-columns:repeat(3,1fr)}}
.carte-vis{border:1px solid var(--filet);border-radius:var(--r);padding:24px;background:#fff}
.carte-vis .ico{width:38px;height:38px;border-radius:50%;border:1px solid var(--bleu);display:flex;align-items:center;justify-content:center;color:var(--bleu);margin-bottom:16px}
.carte-vis .ico svg{width:18px;height:18px}
.carte-vis h3{font-size:17px;text-transform:none;letter-spacing:-.01em;margin-bottom:10px}
.carte-vis p,.carte-vis li{font-size:13.5px;line-height:1.55;color:#2b3944}
.carte-vis ul{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.carte-vis li{padding-left:14px;position:relative}
.carte-vis li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;background:var(--bleu)}
.reserve{margin-top:24px;padding-top:18px;border-top:1px solid var(--filet);font-size:12px;color:var(--gris);max-width:100ch}

/* déroulement */
.methode{background:var(--nuit);color:#fff;padding:clamp(70px,9vw,120px) 0}
.methode h2{font-size:clamp(26px,3vw,40px);max-width:20ch;margin-top:16px}
.etapes{display:grid;grid-template-columns:1fr;gap:30px;margin-top:46px;position:relative}
@media(min-width:900px){.etapes{grid-template-columns:repeat(3,1fr);gap:40px}}
.etapes::before{content:"";position:absolute;left:0;right:0;top:15px;height:1px;background:rgba(255,255,255,.18)}
.etape{position:relative;padding-top:44px}
.etape .rond{position:absolute;top:7px;left:0;width:17px;height:17px;border-radius:50%;border:1px solid #8fc2ec;background:var(--nuit)}
.etape .rond::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#8fc2ec;transform:scale(0);transition:transform .5s}
.etape.vu .rond::after{transform:scale(1)}
.etape .nb{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:#8fc2ec}
.etape h3{font-size:22px;margin:8px 0 10px;text-transform:none;letter-spacing:-.01em}
.etape p{font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.66);max-width:40ch}

/* questions */
.questions{padding:clamp(70px,9vw,120px) 0}
.questions h2{font-size:clamp(28px,3.3vw,46px);margin-top:16px}
.groupe{margin-top:36px}
.groupe>h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--bleu);margin-bottom:10px}
details{border-bottom:1px solid var(--filet)}
details summary{list-style:none;cursor:pointer;padding:16px 44px 16px 0;position:relative;font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:20px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:18px;color:var(--bleu);transition:transform .3s}
details[open] summary::after{content:"−"}
details .reponse{padding:0 40px 18px 0;font-size:14px;line-height:1.6;color:#2b3944;max-width:80ch}
details .reponse p+p{margin-top:10px}
.def h3{font-size:15px}
.def .idee{font-style:italic;color:var(--bleu);margin-bottom:6px;display:block}
.term{border-bottom:1px dotted var(--bleu);color:var(--bleu);text-decoration:none;cursor:pointer}

/* appel final */
.appel{position:relative;color:#fff;padding:clamp(70px,9vw,120px) 0;overflow:hidden}
.appel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.appel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,18,33,.92),rgba(4,18,33,.55))}
.appel .wrap{position:relative;z-index:2}
.appel h2{font-size:clamp(28px,3.6vw,48px);max-width:20ch;margin-top:16px}
.appel p{margin-top:16px;max-width:52ch;color:rgba(255,255,255,.78)}
.appel .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* pied */
.pied2{background:#03101f;color:rgba(255,255,255,.7);padding:clamp(36px,4vw,54px) 0 30px;font-size:12.5px}
.pied2 .haut{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.1)}
.pied2 .droits{margin-top:20px}

@media(max-width:600px){
  .reperes li:last-child{grid-column:1/-1}
}

section[id],details[id]{scroll-margin-top:96px}