/* maquette page d'accueil crushbody — direction artistique octobre 2026.
   layout : une maison en deux heures. sections claires (le jour), une section kaki profond (le rituel),
   une section soir (les 100), séparées par du fond clair : le kaki et le rouge ne se touchent jamais. */
:root{
  --fond:#F9F8F1;   /* fond de page, jamais blanc pur */
  --papier:#FDFCFA; /* cartes claires */
  --aloe:#E7E4D2;   /* le voile */
  --ink:#26241B;    /* l'encre */
  --bouton:#1E2318; /* les contrôles */
  --olive:#75704A;  /* le kaki */
  --cypres:#4B4830; /* le kaki profond */
  --cedar:#8E8A6C;  /* légendes */
  --gris:#615D4B;   /* texte secondaire */
  --texte:#494633;  /* texte courant */
  --filet:#E8E6D8;
  --rouge:#A60000;  /* le crush, rare */
  --soir:#800300;
  --noir:#16120F;
  --creme:#F2F0EA;
  --lueur:#EFE2BE;
  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --gout:clamp(20px,5vw,56px);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--fond)}
body{background:var(--fond);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
::selection{background:var(--cypres);color:var(--fond)}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:var(--gout)}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.pr{color:var(--rouge)}
.wm{display:block;height:auto;fill:currentColor}

/* contrôles */
.pill{display:inline-flex;align-items:center;gap:10px;background:var(--bouton);color:#F4F2E6;font:600 15px/1 var(--sans);letter-spacing:.01em;padding:14px 24px 15px;border-radius:999px;border:0;cursor:pointer;white-space:nowrap}
.pill:hover{background:var(--cypres)}
.lien{font-weight:600;font-size:15.5px;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.lien:hover{color:var(--cypres)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--cypres);outline-offset:3px;border-radius:6px}
.label{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15.5px;margin-bottom:24px}
.label i,.pt{width:7px;height:7px;border-radius:50%;background:var(--olive);flex:none;display:inline-block}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(249,248,241,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
header.scroll{border-bottom-color:var(--filet)}
.nav{display:flex;align-items:center;gap:36px;padding-block:20px}
.nav .wm{width:132px;color:var(--ink)}
.nav nav{display:flex;gap:26px;font-weight:500;font-size:15.5px;color:var(--gris)}
.nav nav a{position:relative}
.nav nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--cypres)}
.nav nav a:hover{color:var(--ink)}
.nav .pill{margin-left:auto}

/* hero */
.hero{position:relative;padding-block:clamp(48px,9vh,104px) 0}
.halo{position:absolute;top:-180px;right:0;left:8%;height:680px;pointer-events:none;z-index:-1;
  background:radial-gradient(38% 50% at 60% 28%,#E0DCBA 0%,rgba(224,220,186,0) 70%),radial-gradient(19% 30% at 82% 54%,#EFE2BE 0%,rgba(239,226,190,0) 72%);filter:blur(2px)}
.hero h1{font-weight:600;letter-spacing:-.032em;line-height:.99;font-size:clamp(44px,7.6vw,112px);max-width:15ch;text-wrap:balance}
.hero .sous{margin-top:36px;display:flex;gap:clamp(28px,6vw,96px);align-items:flex-start;flex-wrap:wrap}
.hero .sous p{max-width:44ch;font-size:18px;color:var(--gris);flex:1 1 320px;min-width:0}
.hero .actions{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.hero .actions .ligne{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.hero .mention{font-size:14.5px;font-weight:500;color:var(--gris)}

/* photos placeholders : plâtre et chêne le jour, braise le soir */
.photo{position:relative;overflow:hidden;display:flex;align-items:flex-end;color:#F0F1EB;max-width:100%}
.photo::after{content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.photo figcaption{position:relative;z-index:1;padding:20px 26px;font-size:14px;font-weight:500;opacity:.92}
.jour{background:radial-gradient(120% 90% at 78% 0%,#EFE2BE 0%,rgba(239,226,190,0) 52%),linear-gradient(165deg,#CCC49C 0%,#908A5E 52%,#5B5636 100%)}
.jour2{background:radial-gradient(110% 80% at 80% 0%,#EFE2BE 0%,rgba(239,226,190,0) 50%),linear-gradient(175deg,#D8D1AE 0%,#A39C72 55%,#6E6943 100%)}
.braise{background:radial-gradient(120% 90% at 78% 0%,#E8CDA0 0%,rgba(232,205,160,0) 48%),linear-gradient(200deg,#A60000 0%,#8C0200 56%,#6E0300 100%)}
.hero .photo{margin-top:clamp(44px,7vh,72px);aspect-ratio:21/9;min-height:300px;width:100%}

/* bandeau */
.bandeau{overflow:hidden;white-space:nowrap;padding-block:clamp(24px,4vh,38px);border-bottom:1px solid var(--filet)}
.piste{display:inline-flex}
.file{display:inline-flex;align-items:center;gap:clamp(28px,3vw,48px);padding-right:clamp(28px,3vw,48px);font-weight:600;letter-spacing:-.02em;font-size:clamp(20px,2.6vw,32px)}
.file .pt{width:.3em;height:.3em}

section{padding-block:clamp(84px,13vh,150px)}
h2{font-weight:600;letter-spacing:-.025em;line-height:1.05;font-size:clamp(34px,4.8vw,62px);max-width:17ch;text-wrap:balance}
.intro{margin-top:24px;max-width:52ch;font-size:18px;color:var(--gris)}

/* repères */
.reperes{padding-block:clamp(56px,8vh,88px)}
.reperes .grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.repere{border-top:1px solid var(--ink);padding-top:22px}
.repere b{display:block;font-weight:700;font-size:clamp(34px,4vw,50px);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.repere p{margin-top:14px;font-size:15.5px;color:var(--texte);max-width:34ch}

/* concept */
.concept .cols{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(36px,6vw,110px);align-items:start}
.concept .cols > p{color:var(--texte);font-size:17.5px;max-width:54ch}
.piliers{margin-top:clamp(48px,7vh,72px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.pilier{border-top:1px solid var(--filet);padding-top:22px}
.pilier h3{font-weight:600;font-size:22px;letter-spacing:-.015em;margin-bottom:10px;display:flex;align-items:baseline;gap:2px}
.pilier p{font-size:15.5px;color:var(--texte)}
.concept .suite{margin-top:40px}

/* rituel — kaki profond */
.rituel{background:radial-gradient(58% 44% at 12% 100%,rgba(239,226,190,.16) 0%,rgba(239,226,190,0) 70%),var(--cypres);color:#F0EDDC}
.rituel .label{color:#F0EDDC}.rituel .label i{background:#CDC8A2}
.rituel .intro{color:#C6C1A0}
.etapes{margin-top:clamp(52px,8vh,80px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,44px);list-style:none;counter-reset:e}
.etapes li{border-top:1px solid #6A6647;padding-top:22px;counter-increment:e}
.etapes li::before{content:counter(e);display:block;font-weight:700;font-size:14px;color:#ABA57E;margin-bottom:14px;font-variant-numeric:tabular-nums}
.etapes b{display:block;font-weight:600;font-size:20px;letter-spacing:-.012em;margin-bottom:10px}
.etapes p{font-size:15.5px;color:#C6C1A0}

/* machines */
.tete{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.tete p{color:var(--gris);max-width:40ch}
.machines .grille{margin-top:clamp(48px,7vh,72px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}
.machine .photo{aspect-ratio:4/5;border-radius:999px 999px 0 0;width:100%}
.machine .photo figcaption{padding-inline:30px}
.machine h3{margin-top:24px;font-weight:600;font-size:clamp(24px,2.4vw,30px);letter-spacing:-.02em}
.machine .acc{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink);margin-top:2px}
.machine p.desc{margin-top:12px;font-size:15.5px;color:var(--texte);max-width:38ch}
.machine .lien{display:inline-block;margin-top:16px}

/* pour qui */
.pourqui .cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,110px);align-items:start}
.pourqui .cols > div > p{margin-top:24px;color:var(--texte);max-width:46ch}
.liste{list-style:none;border-top:1px solid var(--filet)}
.liste li{display:flex;gap:16px;align-items:baseline;padding-block:18px;border-bottom:1px solid var(--filet);font-size:18px;font-weight:500;letter-spacing:-.005em}
.liste li .pt{transform:translateY(-3px)}
.pourqui .lien{display:inline-block;margin-top:28px}

/* promesse — voile aloe */
.promesse{background:linear-gradient(180deg,var(--fond) 0%,var(--aloe) 55%,var(--fond) 100%)}
.citation{font-weight:600;font-size:clamp(34px,5vw,68px);line-height:1.04;letter-spacing:-.03em;max-width:16ch;text-wrap:balance}
.promesse .cols{margin-top:40px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,6vw,100px);align-items:end}
.promesse .cols p{color:var(--texte);font-size:17.5px;max-width:52ch}
.mesure{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
.mesure b{font-weight:700;font-size:clamp(36px,4.2vw,52px);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.mesure span{font-weight:500;color:var(--gris);font-size:15.5px}

/* tarifs */
.offres{margin-top:clamp(44px,6vh,64px);border-top:1px solid var(--filet)}
.offre{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) auto;gap:26px;align-items:center;padding-block:30px;padding-inline:14px;margin-inline:-14px;border-bottom:1px solid var(--filet)}
.offre h3{font-weight:600;font-size:clamp(20px,2.2vw,25px);letter-spacing:-.018em}
.offre p{font-size:15.5px;color:var(--texte);max-width:46ch}
.prix{font-weight:700;font-size:clamp(26px,3vw,40px);letter-spacing:-.025em;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.prix small{display:block;font-weight:500;font-size:13.5px;letter-spacing:0;color:var(--gris)}
.tarifs .pied{margin-top:26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.tarifs .pied p{font-size:14.5px;font-weight:500;color:var(--gris);max-width:56ch}

/* la maison */
.maison .grille{margin-top:clamp(48px,7vh,72px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:18px;align-items:end}
.maison .grille .photo:first-child{aspect-ratio:4/5;border-radius:999px 999px 0 0}
.maison .grille .photo:last-child{aspect-ratio:16/11}
.maison .cols{margin-top:40px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,6vw,110px)}
.maison .cols p{color:var(--texte);max-width:54ch}
.maison .infos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 30px;font-size:15.5px}
.maison .infos b{display:block;font-weight:600;color:var(--ink);margin-bottom:4px}
.maison .infos span{color:var(--gris)}

/* les 100 — le soir */
.cent{background:radial-gradient(52% 46% at 82% 10%,rgba(232,205,160,.16) 0%,rgba(232,205,160,0) 70%),linear-gradient(185deg,var(--rouge) 0%,var(--soir) 70%,#5E0200 100%);color:#F6F1EA}
.cent .label{color:#F6F1EA}.cent .label i{background:#E8CDA0}
.cent h2{max-width:16ch}
.cent .intro{color:#DBB4A2}
.carte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:clamp(40px,6vh,60px);list-style:none}
.carte li{border-top:1px solid #B5402C;padding-top:18px;font-size:15.5px;color:#E9CFC2}
.carte b{display:block;color:#F6F1EA;font-weight:600;font-size:18px;margin-bottom:6px}
.cent form{margin-top:48px;display:flex;gap:12px;flex-wrap:wrap;max-width:720px}
.cent input{flex:1 1 200px;min-width:0;background:rgba(80,0,0,.35);border:1px solid #B5402C;color:#F6F1EA;font:inherit;font-size:16px;padding:14px 20px;border-radius:999px}
.cent input::placeholder{color:#D9A08A}
.cent .pill{background:#F6F1EA;color:var(--soir)}
.cent .pill:hover{background:#EAE4DB;color:var(--ink)}
.cent .note{margin-top:18px;font-size:14.5px;color:#DFA68C;font-weight:500}
.cent .merci{margin-top:20px;font-weight:600;font-size:17px}
.compteur{margin-top:34px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-weight:500;color:#E9CFC2;font-size:15px}
.jauge{width:min(320px,100%);height:4px;background:rgba(246,241,234,.2);border-radius:4px;overflow:hidden}
.jauge i{display:block;height:100%;width:63%;background:#F6F1EA}

/* appel final */
.appel{text-align:left}
.appel h2{font-size:clamp(40px,6.4vw,92px);max-width:14ch;line-height:1}
.appel .bas{margin-top:36px;display:flex;gap:clamp(28px,6vw,96px);flex-wrap:wrap;align-items:flex-start}
.appel .bas p{max-width:44ch;font-size:18px;color:var(--gris);flex:1 1 300px;min-width:0}
.appel .actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap}

/* footer */
footer{background:var(--noir);color:var(--creme);padding-top:72px;overflow:hidden}
footer .haut{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2.6fr));gap:36px}
footer .haut .wm{width:150px}
footer .devise{margin-top:18px;font-family:var(--serif);font-style:italic;color:#CFC9BC;max-width:24ch;font-size:18px}
footer h4{font-weight:600;font-size:14px;color:#9A9184;margin-bottom:14px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:15px;color:#E4E0D6}
footer ul a:hover{color:#FFFFFF}
footer .legal{margin-top:56px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px;color:#847B6E;border-top:1px solid #2B2520;padding-top:22px}
.geant{display:block;margin-top:clamp(40px,7vh,72px);margin-bottom:-4.2%;color:var(--creme);width:100%}

/* note de maquette */
.maquette{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;background:var(--noir);color:var(--creme);font-size:12.5px;font-weight:500;padding:9px 14px;border-radius:999px;opacity:.88}

@media (max-width:960px){
  .nav nav{display:none}
  .reperes .grille,.piliers{grid-template-columns:1fr}
  .etapes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .machines .grille{grid-template-columns:1fr;max-width:460px}
  .concept .cols,.pourqui .cols,.promesse .cols,.maison .cols,.maison .grille{grid-template-columns:1fr}
  .offre{grid-template-columns:1fr;gap:8px}
  .prix{text-align:left}
  .carte{grid-template-columns:repeat(2,minmax(0,1fr))}
  footer .haut{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .etapes,.carte,.maison .infos{grid-template-columns:1fr}
  .hero .photo{aspect-ratio:4/5}
  .nav .wm{width:112px}
  .nav .pill{padding:12px 18px 13px}
  footer .haut{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:no-preference){
  .pill{transition:background .18s ease,color .18s ease,transform .18s ease}
  .pill:hover{transform:translateY(-1px)}
  .nav nav a::after{transition:right .22s ease}
  .nav nav a:hover::after{right:0}
  .halo{animation:souffle 14s ease-in-out infinite alternate}
  @keyframes souffle{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-3%,2.5%,0) scale(1.06)}}
  .hero h1,.hero .sous,.hero .photo{animation:lever .8s cubic-bezier(.22,.7,.2,1) both}
  .hero .sous{animation-delay:.1s}.hero .photo{animation-delay:.18s}
  @keyframes lever{from{opacity:.001;transform:translateY(20px)}to{opacity:1;transform:none}}
  .piste{animation:defile 32s linear infinite}
  .offre{transition:background .22s ease}
  .offre:hover{background:rgba(166,0,0,.04)}
  .prix{transition:color .22s ease}
  .offre:hover .prix{color:var(--rouge)}
  .photo{transition:transform .5s cubic-bezier(.22,.7,.2,1)}
  .machine:hover .photo{transform:scale(1.012)}
}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- dynamisme : le rouge en plus (demande nastassia, oct. 2026) ---- */
.crush{color:var(--rouge);display:inline-block;position:relative}
.crush::after{content:"";position:absolute;left:.04em;right:.08em;bottom:.02em;height:.06em;background:var(--rouge);border-radius:2px;transform-origin:left;transform:scaleX(1)}
.rougec{color:#E36A55;font-family:var(--serif);font-style:italic}
.label.rouge i,.label i{background:var(--rouge)}
.rituel .label i{background:#CDC8A2}
.cent .label i{background:#E8CDA0}
.halo{background:radial-gradient(38% 50% at 60% 28%,#E0DCBA 0%,rgba(224,220,186,0) 70%),radial-gradient(22% 32% at 84% 50%,rgba(166,0,0,.16) 0%,rgba(166,0,0,0) 72%),radial-gradient(19% 30% at 70% 70%,#EFE2BE 0%,rgba(239,226,190,0) 72%)}
/* la ligne de crème : 10 px de fond entre la photo kaki et le bandeau rouge */
.bandeau{margin-top:10px;background:linear-gradient(90deg,var(--soir),var(--rouge) 50%,var(--soir));color:#F6F1EA;border-bottom:0}
.bandeau .pt{background:#F6F1EA;opacity:.7}
.bandeau em{color:#F6D9C9}
.repere{border-top:2px solid var(--rouge)}
.repere b .fl{color:var(--rouge)}
.liste li .pt{background:var(--rouge)}
.mesure b .fl{color:var(--rouge)}
.pill:hover{background:var(--rouge)}
.lien{text-decoration:none;background:linear-gradient(var(--rouge),var(--rouge)) left bottom/0 1.5px no-repeat}
.lien:hover{color:var(--rouge);border-bottom-color:transparent;background-size:100% 1.5px}
.nav nav a::after{background:var(--rouge)}
.tarifs .offre:first-child .prix{color:var(--rouge)}
.machine .num{font-weight:700;font-size:14px;color:var(--rouge);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.machine h3{display:flex;gap:12px;align-items:baseline}
.appel{background:radial-gradient(40% 60% at 92% 30%,rgba(166,0,0,.10) 0%,rgba(166,0,0,0) 70%),var(--fond)}
.promesse .citation em{color:var(--rouge)}
@media (prefers-reduced-motion:no-preference){
  .crush::after{animation:souligne 1.1s .7s cubic-bezier(.22,.7,.2,1) both}
  @keyframes souligne{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .crush{animation:pulse 4.5s 2s ease-in-out infinite}
  @keyframes pulse{0%,100%{transform:none}50%{transform:translateY(-2px) rotate(-1.5deg)}}
  .piste{animation-duration:22s}
  .lien{transition:background-size .3s ease,color .2s ease}
  .pill:hover{transform:translateY(-2px)}
  .machine .photo{transition:transform .6s cubic-bezier(.22,.7,.2,1),box-shadow .6s}
  .machine:hover .photo{transform:translateY(-6px)}
  .machine:hover h3{color:var(--rouge)}
  .machine h3{transition:color .25s}
  .repere b{transition:color .25s}
  .repere:hover b{color:var(--rouge)}
  .liste li{transition:padding-left .25s ease,color .25s}
  .liste li:hover{padding-left:10px;color:var(--rouge)}
  @supports (animation-timeline: view()){
    .monte{animation:monte linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    @keyframes monte{from{opacity:.25;transform:translateY(36px)}to{opacity:1;transform:none}}
    .jauge i{animation:jauge linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
    @keyframes jauge{from{width:0}to{width:63%}}
    .hero .photo{animation:none}
    .hero .photo.parallaxe{animation:zoom linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    @keyframes zoom{to{transform:scale(1.06)}}
  }
}
.machine h3 small{font-weight:500;font-size:14.5px;letter-spacing:0;color:var(--gris);margin-left:auto}

/* ================= site complet : ajouts aux styles de la maquette ================= */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/hanken-grotesk-400.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/hanken-grotesk-500.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/hanken-grotesk-600.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/hanken-grotesk-700.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/source-serif-4-italic.woff2) format('woff2')}

.saut{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--fond);padding:10px 16px;border-radius:999px;z-index:100}
.saut:focus{left:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header : langue + menu mobile */
.nav nav a[aria-current="page"]{color:var(--ink)}
.nav nav a[aria-current="page"]::after{right:0}
.nav .droite{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav .pill{margin-left:0}
.langue{font-weight:600;font-size:14px;color:var(--gris);letter-spacing:.02em;border:1px solid var(--filet);border-radius:999px;padding:7px 12px}
.langue:hover{color:var(--rouge);border-color:var(--rouge)}
.burger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;position:relative;color:var(--ink)}
.burger i{position:absolute;left:11px;right:11px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s,opacity .25s}
.burger i:nth-child(1){top:15px}.burger i:nth-child(2){top:21px}.burger i:nth-child(3){top:27px}
.ouvert .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.ouvert .burger i:nth-child(2){opacity:0}
.ouvert .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:960px){
  .burger{display:block}
  .nav{flex-wrap:nowrap;gap:12px}
  .nav nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--fond);flex-direction:column;gap:0;padding:8px var(--gout) 24px;border-bottom:1px solid var(--filet);box-shadow:0 18px 30px -24px rgba(38,36,27,.4)}
  .ouvert .nav nav{display:flex}
  .nav nav a{padding:14px 0;border-bottom:1px solid var(--filet);font-size:18px;color:var(--ink)}
  .nav nav a::after{display:none}
  .nav nav a[aria-current="page"]{color:var(--rouge)}
}
@media (max-width:560px){.nav .droite{gap:10px}.langue{padding:6px 10px}.nav .droite .pill{display:none}}

/* en-têtes des pages intérieures */
.ph{position:relative;padding-block:clamp(48px,9vh,104px) clamp(40px,6vh,72px)}
.ph h1{font-weight:600;letter-spacing:-.03em;line-height:1.02;font-size:clamp(40px,6.2vw,92px);max-width:17ch;text-wrap:balance}
.ph .intro{margin-top:26px;max-width:52ch;font-size:19px;color:var(--gris)}
.ph .photo{margin-top:clamp(36px,6vh,64px);aspect-ratio:21/8;min-height:240px;width:100%;border-radius:999px 999px 0 0}
.fil{font-size:14px;color:var(--gris);margin-bottom:22px;display:flex;gap:8px;flex-wrap:wrap}
.fil a:hover{color:var(--rouge)}
.page-cypres{background:radial-gradient(58% 44% at 12% 100%,rgba(239,226,190,.16) 0%,rgba(239,226,190,0) 70%),var(--cypres);color:#F0EDDC}
.page-cypres .intro,.page-cypres .fil{color:#C6C1A0}
.page-cypres .label{color:#F0EDDC}.page-cypres .label i{background:#CDC8A2}

/* blocs de texte */
.bloc{padding-block:clamp(56px,9vh,110px);border-top:1px solid var(--filet)}
.bloc.sans{border-top:0}
.bloc h2{margin-bottom:26px}
.bloc h3.titre{font-weight:600;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.018em;margin-bottom:14px}
.texte{max-width:64ch;color:var(--texte);font-size:17.5px;line-height:1.7}
.texte p+p{margin-top:1.1em}
.texte strong{color:var(--ink);font-weight:600}
.deux{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,6vw,110px);align-items:start}
.points{list-style:none;margin-top:22px;max-width:64ch;border-top:1px solid var(--filet)}
.points li{display:flex;gap:14px;align-items:baseline;padding-block:14px;border-bottom:1px solid var(--filet);font-size:17px;color:var(--texte)}
.points li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rouge);flex:none;transform:translateY(-2px)}
.points li strong{color:var(--ink);font-weight:600}

/* étapes sur fond clair */
.etapes-claires{list-style:none;counter-reset:e;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:36px}
.etapes-claires li{counter-increment:e;border-top:2px solid var(--rouge);padding-top:20px}
.etapes-claires li::before{content:counter(e);display:block;font-weight:700;font-size:14px;color:var(--rouge);margin-bottom:12px;font-variant-numeric:tabular-nums}
.etapes-claires b{display:block;font-weight:600;font-size:19px;margin-bottom:8px;letter-spacing:-.01em}
.etapes-claires p{font-size:15.5px;color:var(--texte)}

/* technologies */
.techs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:36px}
.tech{background:var(--papier);border:1px solid var(--filet);padding:clamp(22px,3vw,34px)}
.tech h3{font-weight:600;font-size:22px;letter-spacing:-.015em;margin-bottom:10px;display:flex;align-items:baseline;gap:10px}
.tech h3 span{font-weight:700;font-size:13px;color:var(--rouge);font-variant-numeric:tabular-nums}
.tech p{font-size:15.5px;color:var(--texte)}
.tech ul{list-style:none;margin-top:12px}
.tech li{font-size:15px;color:var(--texte);padding-block:6px;border-top:1px solid var(--filet);display:flex;gap:10px}
.tech li::before{content:"→";color:var(--rouge)}

/* encadré honnêteté */
.encadre{background:var(--aloe);padding:clamp(26px,4vw,48px);margin-top:12px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(20px,4vw,60px);align-items:start}
.encadre .citation{font-size:clamp(28px,3.4vw,44px)}
.encadre p{color:var(--texte);font-size:17px}

/* fiche technique */
.fiche{width:100%;max-width:760px;border-collapse:collapse;margin-top:18px;font-size:16px}
.fiche th,.fiche td{text-align:left;padding:14px 0;border-bottom:1px solid var(--filet);vertical-align:top}
.fiche th{font-weight:600;width:36%;padding-right:20px;color:var(--ink)}
.fiche td{color:var(--texte)}

/* autres machines */
.autres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:30px}
.autre{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 26px;border:1px solid var(--filet);background:var(--papier)}
.autre b{font-weight:600;font-size:20px}
.autre small{display:block;color:var(--gris);font-size:14px;font-weight:500}
.autre span.fl{color:var(--rouge);font-size:22px}
.autre:hover{border-color:var(--rouge)}

/* profils */
.profils{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:10px}
.profil{border-top:2px solid var(--rouge);padding-top:22px;padding-bottom:10px}
.profil h3{font-weight:600;font-size:21px;letter-spacing:-.015em;margin-bottom:10px}
.profil p{font-size:16px;color:var(--texte);max-width:52ch}

/* tarifs détaillés */
.groupe{margin-top:clamp(40px,6vh,64px)}
.groupe h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:6px}
.groupe .sous-titre{color:var(--gris);font-size:16px;margin-bottom:18px}
.offre .inclus{font-size:14.5px;color:var(--gris);margin-top:6px}
.offre .badge{display:inline-block;margin-left:10px;font-size:12.5px;font-weight:600;color:var(--rouge);border:1px solid var(--rouge);border-radius:999px;padding:2px 9px;vertical-align:middle;letter-spacing:.01em}
.conditions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(30px,5vw,80px);list-style:none;border-top:1px solid var(--filet)}
.conditions li{padding-block:16px;border-bottom:1px solid var(--filet);font-size:15.5px;color:var(--texte)}
.conditions li strong{display:block;color:var(--ink);font-weight:600;margin-bottom:3px}

/* faq */
.faq-liste{max-width:860px;border-top:1px solid var(--filet);margin-top:10px}
.faq-liste details{border-bottom:1px solid var(--filet)}
.faq-liste summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding-block:22px;font-weight:600;font-size:clamp(17px,1.8vw,20px);letter-spacing:-.01em}
.faq-liste summary::-webkit-details-marker{display:none}
.faq-liste summary::after{content:"+";font-weight:400;font-size:28px;line-height:1;color:var(--rouge);transition:transform .25s}
.faq-liste details[open] summary::after{transform:rotate(45deg)}
.faq-liste summary:hover{color:var(--rouge)}
.faq-liste .rep{padding-bottom:24px;color:var(--texte);font-size:16.5px;max-width:68ch}
.faq-liste .rep p+p,.faq-liste .rep ul{margin-top:.8em}
.faq-liste .rep ul{list-style:none;columns:2;column-gap:30px}
.faq-liste .rep li{padding-block:4px;break-inside:avoid;display:flex;gap:8px}
.faq-liste .rep li::before{content:"·";color:var(--rouge);font-weight:700}

/* contact */
.coord{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,60px);margin-top:10px}
.coord h3{font-weight:600;font-size:15.5px;color:var(--gris);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.coord h3::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rouge)}
.coord p,.coord li{font-size:16.5px;color:var(--ink);line-height:1.7}
.coord ul{list-style:none}
.coord a{border-bottom:1px solid var(--filet)}
.coord a:hover{color:var(--rouge);border-color:var(--rouge)}
.attente{background:var(--aloe);padding:clamp(26px,4vw,48px);display:flex;justify-content:space-between;gap:24px;align-items:center;flex-wrap:wrap}
.attente p{max-width:52ch;color:var(--texte)}
.attente h2{font-size:clamp(26px,3vw,38px);margin-bottom:10px}

/* cadeau */
.carte-cadeau{aspect-ratio:1.6;max-width:460px;width:100%;background:linear-gradient(200deg,var(--rouge) 0%,var(--soir) 75%);color:#F6F1EA;padding:28px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.carte-cadeau::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 85% 0%,rgba(232,205,160,.35),rgba(232,205,160,0) 70%)}
.carte-cadeau .wm{width:150px;color:#F6F1EA;position:relative;z-index:1}
.carte-cadeau p{position:relative;z-index:1;font-family:var(--serif);font-style:italic;font-size:22px}
.carte-cadeau small{font-family:var(--sans);font-style:normal;display:block;font-size:13px;opacity:.8;margin-top:4px}

/* légal */
.legal-texte{max-width:72ch;color:var(--texte)}
.legal-texte h2{font-size:clamp(24px,2.6vw,32px);margin:42px 0 14px}
.legal-texte p,.legal-texte li{font-size:16px;line-height:1.7}
.legal-texte ul{list-style:none;border-top:1px solid var(--filet)}
.legal-texte li{padding-block:10px;border-bottom:1px solid var(--filet)}
.legal-texte strong{color:var(--ink)}

/* liens d'appel en bas de page intérieure */
.suite-page{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:30px}

/* pied de page multi-pages */
footer .haut ul a{color:#E4E0D6}
footer .legal a:hover{color:#F2F0EA}
footer .liens-legal{display:flex;gap:18px;flex-wrap:wrap}

/* formulaire non branché */
.cent .avert{margin-top:16px;font-weight:600;color:#F6F1EA}
.cent .avert a{border-bottom:1px solid currentColor}

@media (max-width:960px){
  .deux,.encadre{grid-template-columns:1fr}
  .etapes-claires{grid-template-columns:repeat(2,minmax(0,1fr))}
  .techs,.profils,.autres,.conditions,.coord{grid-template-columns:1fr}
}
@media (max-width:560px){
  .etapes-claires{grid-template-columns:1fr}
  .faq-liste .rep ul{columns:1}
  .ph .photo{aspect-ratio:4/3}
}
.photo.portrait{aspect-ratio:4/5;max-width:340px;width:100%;margin-top:28px;border-radius:999px 999px 0 0}
.cent h1 em{color:#F6D9C9}
.ph h1 em.crush,.appel h2 em.crush{color:var(--rouge)}
.ph.avec-photo .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,5vw,80px);align-items:end}
.ph.avec-photo .photo{margin-top:0;aspect-ratio:4/5;min-height:0;max-height:560px;border-radius:999px 999px 0 0}
@media (max-width:960px){.ph.avec-photo .wrap{grid-template-columns:1fr}.ph.avec-photo .photo{aspect-ratio:4/3;max-height:none}}
.nav nav .nav-resa{display:none}
@media (max-width:960px){.nav nav .nav-resa{display:block;color:var(--rouge);font-weight:600;border-bottom:0}}