/* ==========================================================================
   Astella Agency — feuille de style
   Direction : planche d'atlas céleste. Le bleu est l'encre de la carte,
   l'or est réservé à ce qui est « mis en lumière ».
   ========================================================================== */

/* Polices auto-hébergées (licence SIL OFL) : aucun appel à Google, plus rapide et conforme RGPD */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/bodoni-moda-latin-opsz-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 900;font-display:swap;src:url(/assets/fonts/bodoni-moda-latin-opsz-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/montserrat-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme: light;
  /* Nuit (planches sombres) */
  --nuit:#0e1a23; --nuit-2:#132431; --nuit-3:#1a3040;
  --trait-nuit:rgba(134,187,214,.2); --trait-nuit-fort:rgba(134,187,214,.38);
  --sur-nuit:#c9d7e0; --sur-nuit-2:#8ea4b2;
  /* Papier (planches claires) */
  --papier:#eef2f3; --papier-2:#e4ebee; --blanc:#f8fafa;
  --encre:#13242f; --encre-2:#3d5361; --encre-3:#667b88; --filet:#c9d5dc;
  /* Charte */
  --bleu:#336699; --ciel:#86bbd6; --ardoise:#2f4858;
  /* Lumière */
  --or:#e9c46a; --or-2:#f6e1a4; --or-encre:#8a6412;

  --f-titre:"Bodoni Moda","Bodoni 72","Didot",Georgia,serif;
  --f-texte:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,.68,.18,1);
  --large:1240px; --gouttiere:clamp(18px,4vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;overflow-x:clip;background:var(--papier);color:var(--encre-2);font:400 1.0625rem/1.65 var(--f-texte);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
img{height:auto;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;color:var(--encre);text-wrap:balance}
h1,h2{font-family:var(--f-titre);font-weight:500;letter-spacing:-.018em;font-optical-sizing:auto}
h2{font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.02}
h3{font-family:var(--f-texte);font-weight:600;font-size:1.2rem;line-height:1.3;letter-spacing:-.005em}
em.lu{font-style:italic;font-weight:400}
.nuit em.lu,.planche em.lu{color:var(--or)}
::selection{background:var(--or-2);color:var(--nuit)}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}

.cadre{width:100%;max-width:var(--large);margin-inline:auto;padding-inline:var(--gouttiere)}
.mono{font-family:var(--f-mono);font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.repere{display:flex;align-items:baseline;gap:14px;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bleu)}
.repere b{font-weight:500;color:var(--encre-3)}
.repere::after{content:"";flex:1;height:1px;background:var(--filet);transform:translateY(-3px)}
.nuit .repere{color:var(--or)}
.nuit .repere b{color:var(--sur-nuit-2)}
.nuit .repere::after{background:var(--trait-nuit)}

/* -------------------------------------------------------------- Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 24px;border-radius:2px;border:1px solid transparent;font:600 .98rem/1 var(--f-texte);letter-spacing:.005em;text-decoration:none;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s,box-shadow .4s var(--ease)}
.btn .fl{display:inline-block;transition:transform .35s var(--ease)}
.btn:hover .fl{transform:translateX(4px)}
.btn-or{background:var(--or);color:var(--nuit)}
.btn-or:hover{background:var(--or-2);box-shadow:0 0 0 1px var(--or),0 0 34px -4px rgba(233,196,106,.7)}
.btn-trait{border-color:var(--trait-nuit-fort);color:#eef4f7}
.btn-trait:hover{border-color:var(--or);color:var(--or-2)}
.btn-encre{background:var(--encre);color:var(--papier)}
.btn-encre:hover{background:var(--bleu)}
.btn-ligne{border-color:var(--encre);color:var(--encre)}
.btn-ligne:hover{background:var(--encre);color:var(--papier)}
.lien{color:var(--bleu);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(51,102,153,.35);transition:text-decoration-color .2s}
.lien:hover{text-decoration-color:currentColor}
.nuit .lien{color:var(--or-2);text-decoration-color:rgba(233,196,106,.4)}

/* -------------------------------------------------------------- En-tête */
.entete{position:fixed;inset:0 0 auto;z-index:60;padding-top:env(safe-area-inset-top,0px);transition:background-color .35s,box-shadow .35s}
.entete .cadre{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.entete.defile{background:rgba(14,26,35,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--trait-nuit)}
.logo{display:inline-flex;align-items:center;gap:12px;color:#f2f6f8;text-decoration:none}
.logo svg{width:24px;height:24px;flex:none;overflow:visible}
.logo .mot{font:600 1.08rem/1 Montserrat,var(--f-texte);letter-spacing:.24em}
.logo-img{height:38px;width:auto}
.portrait .cadre-photo svg{width:100%;height:100%}
.logo .mot small{display:block;margin-top:6px;font:600 .56rem/1 Montserrat,var(--f-texte);letter-spacing:.62em;color:var(--sur-nuit-2)}
.menu{display:flex;align-items:center;gap:30px}
.menu a{position:relative;color:var(--sur-nuit);text-decoration:none;font:500 1.12rem/1 var(--f-titre);letter-spacing:.005em;padding-block:8px}
.menu a.btn{font:600 1rem var(--f-texte)}
.menu a::before{content:"";position:absolute;left:50%;bottom:-2px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--or);opacity:0;transform:scale(0);transition:opacity .3s,transform .3s var(--ease)}
.menu a:hover{color:#fff}
.menu a:hover::before,.menu a[aria-current="page"]::before{opacity:1;transform:scale(1)}
.menu a[aria-current="page"]{color:#fff}
.entete .btn{min-height:42px;padding:0 18px;font-size:.9rem}
.burger{display:none;width:44px;height:44px;border:1px solid var(--trait-nuit-fort);border-radius:2px;background:transparent;color:#fff;cursor:pointer;position:relative}
.burger span,.burger span::before,.burger span::after{position:absolute;left:12px;right:12px;height:1.5px;background:currentColor;content:"";transition:transform .3s var(--ease),top .3s}
.burger span{top:50%}
.burger span::before{left:0;right:0;top:-6px}
.burger span::after{left:0;right:0;top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
@media (max-width:940px){
  .burger{display:block}
  .entete .btn{display:none}
  .menu{position:fixed;inset:0;top:calc(76px + env(safe-area-inset-top,0px));flex-direction:column;align-items:stretch;gap:0;padding:12px var(--gouttiere) 40px;background:var(--nuit);border-top:1px solid var(--trait-nuit);visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .3s var(--ease),visibility 0s .3s}
  .menu.ouvert{visibility:visible;opacity:1;transform:none;transition:opacity .3s,transform .3s var(--ease)}
  .menu a{font:500 1.9rem/1.2 var(--f-titre);padding:16px 0;border-bottom:1px solid var(--trait-nuit);color:#eef4f7}
  .menu a::before{left:auto;right:4px;bottom:50%;margin:0}
  .menu .btn{display:flex;margin-top:28px;font:600 1rem var(--f-texte);min-height:54px}
}
@media (min-width:941px){.menu .btn{display:none}}

/* -------------------------------------------------------------- Planches sombres */
.nuit{background:var(--nuit);color:var(--sur-nuit)}
.nuit h1,.nuit h2,.nuit h3,.planche h1,.planche h2,.planche h3{color:#f1f5f7}
.planche{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(120% 90% at 78% 30%,#18303f 0%,var(--nuit) 58%);color:var(--sur-nuit)}
/* cadre gradué de la planche */
.gradue{position:absolute;inset:calc(76px + env(safe-area-inset-top,0px)) var(--gouttiere) 22px;pointer-events:none;border:1px solid var(--trait-nuit);z-index:1}
.gradue::before,.gradue::after{content:"";position:absolute;inset:0;pointer-events:none}
.gradue::before{background:
  repeating-linear-gradient(90deg,var(--trait-nuit-fort) 0 1px,transparent 1px 48px) top/100% 7px no-repeat,
  repeating-linear-gradient(90deg,var(--trait-nuit-fort) 0 1px,transparent 1px 48px) bottom/100% 7px no-repeat}
.gradue::after{background:
  repeating-linear-gradient(0deg,var(--trait-nuit-fort) 0 1px,transparent 1px 48px) left/7px 100% no-repeat,
  repeating-linear-gradient(0deg,var(--trait-nuit-fort) 0 1px,transparent 1px 48px) right/7px 100% no-repeat}
.gradue .coin{position:absolute;font:500 .66rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sur-nuit-2);background:var(--nuit);padding:0 10px}
.gradue .coin.hg{top:-.4em;left:22px}
.gradue .coin.hd{top:-.4em;right:22px}
.gradue .coin.bg{bottom:-.45em;left:22px}
.gradue .coin.bd{bottom:-.45em;right:22px}

/* -------------------------------------------------------------- Hero accueil */
.hero{min-height:max(680px,min(100svh,960px));display:flex;align-items:flex-end}
.carte{position:absolute;inset:0;z-index:-1;overflow:hidden}
.carte canvas{position:absolute;inset:0;width:100%;height:100%}
.carte svg{position:absolute;inset:0;width:100%;height:100%}
.hero-texte{position:relative;z-index:2;width:100%;padding-block:170px 96px}
.hero-texte .accroche{max-width:640px}
.hero .sur{margin:0;display:flex;align-items:center;gap:12px;font:500 .74rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--or)}
.hero .sur::before{content:"";width:28px;height:1px;background:currentColor}
.hero .slogan{font-family:var(--f-titre);font-weight:500;text-wrap:balance;margin-top:24px;font-size:clamp(3.1rem,7.3vw,6.5rem);line-height:.94;letter-spacing:-.028em;color:#f4f7f9}
.hero .slogan em.lu{display:inline-block;color:var(--or);text-shadow:0 0 38px rgba(233,196,106,.35)}
.hero .chapo{margin-top:26px;max-width:32em;font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.6;color:#cbd9e2}
.hero .chapo strong{color:#fff;font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.legende{position:absolute;right:calc(var(--gouttiere) + 26px);bottom:56px;z-index:2;width:250px;padding:18px 18px 16px;border:1px solid var(--trait-nuit);background:rgba(14,26,35,.72);backdrop-filter:blur(4px);font:400 .72rem/1.5 var(--f-mono);color:var(--sur-nuit-2)}
.legende b{display:block;font-weight:500;color:var(--sur-nuit);letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.legende .mags{display:flex;align-items:center;justify-content:space-between;margin:10px 0 12px}
.legende .mags i{display:block;border-radius:50%;background:#f2f0e6;box-shadow:0 0 6px rgba(255,244,214,.6)}
.legende .ligne-loire{display:flex;align-items:center;gap:10px;margin-top:8px}
.legende .ligne-loire::before{content:"";width:34px;height:6px;border-radius:6px;background:linear-gradient(90deg,rgba(134,187,214,.1),rgba(134,187,214,.55),rgba(134,187,214,.1))}
@media (max-width:1100px){.legende{display:none}}
@media (max-width:760px){
  .hero{display:block;min-height:0}
  .carte{position:relative;height:min(62svh,460px);inset:auto;margin-top:calc(76px + env(safe-area-inset-top,0px))}
  .hero-texte{padding-block:0 64px;margin-top:-90px}
  .gradue{display:none}
}

/* Tracés de la carte (SVG) */
.c-grille{fill:none;stroke:rgba(134,187,214,.16);stroke-width:1;vector-effect:non-scaling-stroke}
.c-grille.maj{stroke:rgba(134,187,214,.26)}
.c-graduation{font:400 11px var(--f-mono);fill:rgba(142,164,178,.75);letter-spacing:.06em}
.c-loire{fill:none;stroke:rgba(134,187,214,.22);stroke-width:34;stroke-linecap:round;filter:url(#flou)}
.c-loire-fil{fill:none;stroke:rgba(134,187,214,.5);stroke-width:1;stroke-dasharray:2 6;vector-effect:non-scaling-stroke}
.c-loire-nom{font:italic 400 19px var(--f-titre);fill:rgba(170,206,226,.75);letter-spacing:.04em}
.c-lien{fill:none;stroke:rgba(233,196,106,.45);stroke-width:1;vector-effect:non-scaling-stroke}
.c-etoile .halo{fill:url(#halo)}
.c-etoile .coeur{fill:#fbf6e7}
.c-etoile.or .coeur{fill:#fff3cf}
.c-etoile.or .halo{fill:url(#halo-or)}
.c-pique{stroke:url(#pique);stroke-width:1.2}
.c-nom{font:500 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;fill:rgba(201,215,224,.72);transition:fill .3s}
.c-nom.maj{font-size:12.5px;fill:#f5e6b8}
.c-etoile{cursor:default}
.c-etoile:hover .c-nom,.c-etoile.actif .c-nom{fill:#fff}
.c-etoile:hover .halo{opacity:1}
.c-etoile .nom-sec{opacity:0;transition:opacity .3s}
.c-etoile .cible{fill:transparent}
@media (max-width:760px){.c-nom{font-size:14px}.c-nom.maj{font-size:16px}.c-graduation{display:none}.c-loire-nom{font-size:20px}}
.c-etoile:hover .nom-sec,.c-etoile:focus .nom-sec{opacity:1}
.c-scintille{animation:scintille var(--t,4s) ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes scintille{0%,100%{opacity:1}50%{opacity:.45}}
/* Séquence d'apparition de la carte */
.js .carte .trace{stroke-dasharray:var(--l);stroke-dashoffset:var(--l);animation:trace 2.4s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes trace{to{stroke-dashoffset:0}}
.js .carte .apparait{opacity:0;animation:apparait 1.2s ease forwards;animation-delay:var(--d,0s)}
@keyframes apparait{to{opacity:1}}

/* Entrée du texte du hero */
.js .monte{opacity:0;transform:translateY(18px);animation:monte 1s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes monte{to{opacity:1;transform:none}}

/* -------------------------------------------------------------- Sections */
.section{padding-block:clamp(88px,11vw,150px)}
.tete{display:grid;gap:22px;max-width:780px}
.tete p{font-size:1.12rem;max-width:36em}
.tete p.repere{font-size:.74rem;max-width:none}
.tete-2col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,90px);align-items:end}
.tete-2col .repere{grid-column:1/-1}
@media (max-width:860px){.tete-2col{grid-template-columns:1fr}}

/* Méthode — phases de lune */
.phases{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);margin:80px 0 0;padding:0;list-style:none}
.phases::before{content:"";position:absolute;top:44px;left:0;right:0;height:1px;background:repeating-linear-gradient(90deg,var(--filet) 0 6px,transparent 6px 12px)}
.phase{position:relative;display:grid;gap:12px;align-content:start}
.phase .lune{width:88px;height:88px;background:var(--papier);padding-right:14px;box-sizing:content-box;position:relative}
.phase .lune svg{width:88px;height:88px;display:block;overflow:visible}
.lune .disque{fill:#dbe4e9;stroke:var(--bleu);stroke-width:1}
.lune .eclaire{fill:var(--or);transition:opacity .8s}
.lune .contour{fill:none;stroke:var(--bleu);stroke-width:1}
.phase .nomphase{font:500 .7rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--encre-3);margin-top:14px}
.phase h3{font:500 1.7rem/1.1 var(--f-titre);letter-spacing:-.01em}
.phase p{font-size:1rem}
.phase.pleine .lune svg{filter:drop-shadow(0 0 14px rgba(233,196,106,.75))}
.js .phase .eclaire{opacity:0}
.js .phase.vue .eclaire{opacity:1}
@media (max-width:900px){.phases{grid-template-columns:1fr 1fr;row-gap:56px}.phases::before{display:none}}
@media (max-width:520px){.phases{grid-template-columns:1fr}.phase{grid-template-columns:72px 1fr;column-gap:20px}.phase .lune,.phase .lune svg{width:64px;height:64px;padding:0}.phase .lune{grid-row:span 3}.phase .nomphase{margin-top:0}}

/* Offres — magnitudes */
.offres{background:var(--papier-2)}
.intro-mag{display:flex;gap:18px;align-items:flex-start;max-width:520px;font-size:.98rem;color:var(--encre-2)}
.intro-mag svg{flex:none;width:40px;height:40px;margin-top:2px}
.magnitudes{display:grid;grid-template-columns:repeat(3,1fr);margin-top:70px;border-top:1px solid var(--encre);border-bottom:1px solid var(--filet)}
.offre{position:relative;display:flex;flex-direction:column;gap:18px;padding:34px clamp(20px,2.4vw,34px) 34px;border-left:1px solid var(--filet)}
.offre:first-child{border-left:0;padding-left:0}
.offre:last-child{padding-right:0}
.offre .astre{height:96px;display:flex;align-items:center}
.offre .astre svg{overflow:visible;transition:transform .6s var(--ease),filter .6s}
.offre:hover .astre svg{transform:scale(1.12);filter:drop-shadow(0 0 10px rgba(233,196,106,.8))}
.offre .mag{font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--encre-3)}
.offre h3{font:500 2.5rem/1 var(--f-titre);letter-spacing:-.02em}
.offre .devise{font:italic 400 1.2rem/1.35 var(--f-titre);color:var(--bleu);min-height:2.7em}
.prix{display:grid;gap:4px;padding-block:18px;border-block:1px solid var(--filet)}
.prix .p1{font:500 2.6rem/1 var(--f-titre);color:var(--encre);letter-spacing:-.02em}
.prix .p2{font:600 1rem/1.3 var(--f-texte);color:var(--bleu)}
.prix .p3{font:400 .8rem/1.4 var(--f-mono);color:var(--encre-3);letter-spacing:.02em}
.liste{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:9px;font-size:.98rem;line-height:1.45}
.liste li{position:relative;padding-left:22px}
.liste li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;background:var(--bleu);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.liste strong{color:var(--encre);font-weight:600}
.offre .btn{margin-top:auto}
.offre.choisie{background:var(--nuit);color:var(--sur-nuit);border-left-color:transparent;padding-left:clamp(20px,2.4vw,34px);margin-block:-1px;box-shadow:0 30px 60px -30px rgba(14,26,35,.6)}
.offre.choisie + .offre{border-left-color:transparent}
.offre.choisie h3,.offre.choisie .prix .p1,.offre.choisie .liste strong{color:#f4f7f9}
.offre.choisie .devise{color:var(--or)}
.offre.choisie .prix{border-color:var(--trait-nuit)}
.offre.choisie .prix .p2{color:var(--ciel)}
.offre.choisie .prix .p3,.offre.choisie .mag{color:var(--sur-nuit-2)}
.offre.choisie .liste li::before{background:var(--or)}
.etiquette{position:absolute;top:0;right:clamp(20px,2.4vw,34px);transform:translateY(-50%);font:500 .66rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;background:var(--or);color:var(--nuit);padding:7px 10px}
.note{margin-top:26px;font-size:.95rem;color:var(--encre-3);max-width:62em}
.note strong{color:var(--encre);font-weight:600}
@media (max-width:980px){
  .magnitudes{grid-template-columns:1fr;border-bottom:0}
  .offre,.offre:first-child,.offre:last-child{border-left:0;padding-inline:0;border-bottom:1px solid var(--filet)}
  .offre.choisie{padding-inline:24px;margin-inline:calc(var(--gouttiere) * -1);padding-inline:var(--gouttiere)}
  .offre .devise{min-height:0}
}

/* Boutiques — lumières au sol */
.bloc{margin-top:clamp(90px,11vw,140px)}
.sol{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:56px;border-top:1px solid var(--encre)}
.sol .offre{border-left:1px solid var(--filet)}
.sol .offre:first-child{border-left:0}
.sol .offre .astre{height:110px}
.sol .offre .devise{min-height:0}
.sol .pour{font-size:.98rem}
@media (max-width:860px){.sol{grid-template-columns:1fr}.sol .offre{border-left:0;padding-inline:0;border-bottom:1px solid var(--filet)}}
.faisceau{transform-origin:40px 27px;animation:balaie 7s ease-in-out infinite}
@keyframes balaie{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
.flamme{transform-origin:50% 100%;animation:flamme 3.2s ease-in-out infinite}
@keyframes flamme{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.86)}}

/* Options — catalogue */
.catalogue{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(36px,7vw,100px);align-items:start}
@media (max-width:900px){.catalogue{grid-template-columns:1fr}}
.cat-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--encre)}
.cat-liste li{display:flex;align-items:baseline;gap:14px;padding-block:15px;border-bottom:1px solid var(--filet)}
.cat-liste .n{color:var(--encre);font-weight:500}
.cat-liste .n small{display:block;font-size:.86rem;font-weight:400;color:var(--encre-3)}
.cat-liste .pts{flex:1;min-width:20px;border-bottom:1px dotted #9fb3bf;transform:translateY(-5px)}
.cat-liste .v{font:500 1.05rem/1 var(--f-titre);color:var(--encre);white-space:nowrap}
.cat-liste li.pack{background:linear-gradient(90deg,rgba(233,196,106,.28),rgba(233,196,106,.08));margin-inline:-14px;padding-inline:14px}
.cat-liste li.pack .v{color:var(--or-encre)}

/* Pourquoi */
.pourquoi-grille{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(36px,6vw,90px);margin-top:64px}
@media (max-width:860px){.pourquoi-grille{grid-template-columns:1fr}}
.raison{display:grid;grid-template-columns:34px 1fr;gap:16px;padding-block:28px;border-top:1px solid var(--trait-nuit)}
.raison svg{width:20px;height:20px;margin-top:5px;overflow:visible}
.raison h3{font:500 1.55rem/1.15 var(--f-titre);letter-spacing:-.01em}
.raison p{margin-top:8px;color:var(--sur-nuit)}
.instruments{display:flex;flex-wrap:wrap;align-items:center;gap:26px 40px;margin-top:40px;padding-top:30px;border-top:1px solid var(--trait-nuit)}
.cadrans{display:grid;grid-template-columns:repeat(4,minmax(0,88px));gap:10px}
@media (max-width:420px){.cadrans{grid-template-columns:repeat(4,minmax(0,1fr))}.cadran svg{width:56px;height:56px}}
.cadran{display:grid;justify-items:center;gap:8px;font:400 .66rem/1.2 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--sur-nuit-2);text-align:center;font-size:.6rem}
.cadran svg{width:64px;height:64px;overflow:visible}
.cadran .g{fill:none;stroke:var(--trait-nuit-fort);stroke-width:1}
.cadran .tick{stroke:var(--trait-nuit-fort);stroke-width:1}
.cadran .arc{fill:none;stroke:#3ad07f;stroke-width:2;stroke-linecap:round;stroke-dasharray:163.4;transform:rotate(-90deg);transform-origin:32px 32px;transition:stroke-dashoffset 1.6s var(--ease)}
.cadran text{font:500 17px var(--f-titre);fill:#eaf5ee}
.instruments p{flex:1;min-width:240px;max-width:30em;font-size:.95rem}

/* FAQ */
.faq-grille{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(36px,6vw,90px);align-items:start}
.faq-grille .tete{position:sticky;top:120px}
@media (max-width:900px){.faq-grille{grid-template-columns:1fr}.faq-grille .tete{position:static}}
.faq{border-top:1px solid var(--encre)}
.faq details{border-bottom:1px solid var(--filet)}
.faq summary{display:grid;grid-template-columns:1fr 22px;gap:20px;align-items:center;padding-block:22px;list-style:none;cursor:pointer;font:500 1.35rem/1.25 var(--f-titre);color:var(--encre)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:22px;height:22px;transition:transform .4s var(--ease)}
.faq summary svg path{stroke:var(--bleu)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details[open] summary svg path{stroke:var(--or-encre)}
.faq summary:hover{color:var(--bleu)}
.faq .rep{padding:0 42px 26px 0;font-size:1.02rem}

/* Appel final */
.appel{position:relative;overflow:hidden;text-align:center;padding-block:clamp(110px,14vw,180px)}
.appel .cadre{position:relative;display:grid;justify-items:center;gap:24px}
.appel .phare-etoile{width:120px;height:120px;overflow:visible}
.appel h2{font-size:clamp(2.6rem,6.2vw,5rem);max-width:13ch}
.appel p{max-width:34em;font-size:1.12rem}
.appel .direct{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;font-size:1.02rem}
.appel .direct a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(233,196,106,.5);padding-bottom:2px}
.appel .direct a:hover{color:var(--or-2);border-color:var(--or)}
.appel::before{content:"";position:absolute;left:50%;top:10%;width:760px;height:760px;margin-left:-380px;border-radius:50%;background:radial-gradient(circle,rgba(233,196,106,.16),rgba(51,102,153,.14) 35%,transparent 65%);pointer-events:none}
.rayons{transform-origin:60px 60px;animation:tourne 90s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}

/* Pied de page */
.pied{background:#09131a;color:var(--sur-nuit-2);font-size:.94rem;padding-block:70px 34px}
.pied-grille{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
@media (max-width:900px){.pied-grille{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pied-grille{grid-template-columns:1fr}}
.pied h4{margin:0 0 14px;font:500 .7rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sur-nuit)}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pied a{color:var(--sur-nuit);text-decoration:none}
.pied a:hover{color:var(--or-2)}
.pied .coord{margin-top:18px;font:400 .72rem/1.6 var(--f-mono);letter-spacing:.1em}
.pied-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid var(--trait-nuit);font:400 .74rem/1.6 var(--f-mono);letter-spacing:.04em}

/* -------------------------------------------------------------- Pages intérieures */
.tete-page{padding-block:calc(76px + env(safe-area-inset-top,0px) + clamp(70px,9vw,120px)) clamp(64px,8vw,100px)}
.tete-page .gradue{bottom:0;border-bottom:0}
.tete-page .cadre{position:relative;z-index:2}
.tete-page h1{margin-top:22px;font-size:clamp(2.8rem,6.4vw,5.4rem);line-height:.98;letter-spacing:-.025em;max-width:14ch}
.tete-page .chapo{margin-top:24px;max-width:36em;font-size:1.15rem;color:#cbd9e2}
.fil{display:flex;flex-wrap:wrap;gap:8px;font:500 .7rem/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sur-nuit-2)}
.fil a{color:var(--sur-nuit-2);text-decoration:none}
.fil a:hover{color:var(--or)}
.fil span[aria-hidden]{color:var(--trait-nuit-fort)}
.ciel-fond{position:absolute;inset:0;z-index:-1;opacity:.9}
.ciel-fond canvas{width:100%;height:100%;display:block}

/* À propos */
.apropos-grille{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,7vw,100px);align-items:start}
@media (max-width:900px){.apropos-grille{grid-template-columns:1fr}}
.portrait{position:sticky;top:110px}
.portrait figure{margin:0}
.portrait .cadre-photo{position:relative;aspect-ratio:4/5;background:radial-gradient(90% 70% at 70% 25%,#1d3546,var(--nuit));border:1px solid var(--encre);display:grid;place-items:center;overflow:hidden}
.portrait .cadre-photo img{width:100%;height:100%;object-fit:cover}
.portrait .vide{display:grid;justify-items:center;gap:14px;text-align:center;font:500 .7rem/1.5 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sur-nuit-2);padding:24px}
.portrait figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font:400 .72rem/1.4 var(--f-mono);letter-spacing:.08em;color:var(--encre-3)}
@media (max-width:900px){.portrait{position:static;max-width:420px}}
.prose{font-size:1.1rem;line-height:1.75;color:var(--encre-2)}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(1.8rem,3vw,2.4rem);margin-top:1.9em;line-height:1.1}
.prose h3{font:600 1.25rem/1.3 var(--f-texte);margin-top:1.6em}
.prose strong{color:var(--encre);font-weight:600}
.prose a{color:var(--bleu);text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.4em}
.prose li::marker{color:var(--bleu)}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 24px;border-left:2px solid var(--or);font:italic 400 1.35rem/1.45 var(--f-titre);color:var(--encre)}
.prose hr{border:0;height:1px;background:var(--filet);margin-block:2.4em}
.prose img{border:1px solid var(--filet)}
.prose figure{margin:1.8em 0}
.prose figcaption{margin-top:8px;font:400 .76rem/1.5 var(--f-mono);color:var(--encre-3)}
.prose table{width:100%;border-collapse:collapse;font-size:.98rem}
.prose .table{overflow-x:auto}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--filet);vertical-align:top}
.prose th{font:500 .72rem/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--encre-3);border-bottom-color:var(--encre)}
.prose code{font:400 .9em var(--f-mono);background:var(--papier-2);padding:.1em .35em}
.prose pre{background:var(--nuit);color:var(--sur-nuit);padding:18px;overflow-x:auto;font-size:.9rem}
.prose pre code{background:none;padding:0}
.etym{margin:0;padding:30px 0;border-block:1px solid var(--encre);display:grid;grid-template-columns:auto 1fr;gap:10px 28px;align-items:baseline}
.etym dt{font:italic 500 2.6rem/1 var(--f-titre);color:var(--encre)}
.etym dd{margin:0;font-size:1.05rem}
.etym dd .ph{font:400 .8rem var(--f-mono);color:var(--encre-3);letter-spacing:.06em}
.principes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
@media (max-width:640px){.principes{grid-template-columns:1fr}}
.principes li{padding-block:22px;border-top:1px solid var(--filet)}
.principes h3{display:flex;align-items:center;gap:10px}
.principes h3 svg{width:14px;height:14px;flex:none}
.principes p{margin-top:6px;font-size:1rem}
.fiche{display:grid;grid-template-columns:auto 1fr;margin:0;border-top:1px solid var(--encre);font-size:1rem}
.fiche dt,.fiche dd{padding-block:12px;border-bottom:1px solid var(--filet);margin:0}
.fiche dt{font:500 .72rem/1.6 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--encre-3);padding-right:28px;padding-top:15px}
.fiche dd{color:var(--encre)}

/* Contact */
.contact-grille{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(40px,7vw,100px);align-items:start}
@media (max-width:960px){.contact-grille{grid-template-columns:1fr}}
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
.form .plein{grid-column:1/-1}
@media (max-width:600px){.form{grid-template-columns:1fr}}
.champ{display:grid;gap:8px}
.champ label,.champ legend{font:500 .72rem/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--encre-2)}
.champ label i{font-style:normal;color:var(--encre-3);text-transform:none;letter-spacing:.02em}
.champ input,.champ select,.champ textarea{width:100%;font:400 1.02rem/1.4 var(--f-texte);color:var(--encre);background:var(--blanc);border:1px solid #b9c9d2;border-radius:2px;padding:14px 14px;transition:border-color .2s,box-shadow .2s}
.champ textarea{min-height:170px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px rgba(51,102,153,.15)}
.champ input:user-invalid,.champ textarea:user-invalid{border-color:#b3261e}
fieldset.champ{border:0;padding:0;margin:0}
.choix{display:flex;flex-wrap:wrap;gap:8px}
.choix label{position:relative;cursor:pointer}
.choix input{position:absolute;opacity:0;pointer-events:none}
.choix span{display:inline-block;padding:10px 14px;border:1px solid #b9c9d2;background:var(--blanc);font:500 .95rem/1.2 var(--f-texte);color:var(--encre-2);text-transform:none;letter-spacing:0;transition:all .2s}
.choix input:checked + span{background:var(--encre);border-color:var(--encre);color:var(--papier)}
.choix input:focus-visible + span{outline:2px solid var(--or);outline-offset:2px}
.consent{display:grid;grid-template-columns:20px 1fr;gap:12px;font-size:.9rem;color:var(--encre-3);align-items:start}
.consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--bleu)}
.pot{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.retour{padding:16px 18px;border-left:3px solid var(--bleu);background:var(--blanc);font-size:1rem;color:var(--encre)}
.retour.ok{border-color:#2f8f5b}
.retour.err{border-color:#b3261e}
.aside-contact{display:grid;gap:36px}
.aside-contact h2{font-size:1.8rem}
.coord-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--encre)}
.coord-liste li{display:grid;gap:2px;padding-block:14px;border-bottom:1px solid var(--filet)}
.coord-liste .l{font:500 .7rem/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--encre-3)}
.coord-liste a,.coord-liste .v{font:500 1.25rem/1.3 var(--f-titre);color:var(--encre);text-decoration:none;user-select:all}
.coord-liste a:hover{color:var(--bleu)}
.mini-carte{background:var(--nuit);border:1px solid var(--encre);aspect-ratio:4/3;position:relative;overflow:hidden}
.mini-carte svg{width:100%;height:100%;display:block}
.suite{list-style:none;margin:0;padding:0;counter-reset:s}
.suite li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:10px;padding-block:10px;font-size:.98rem}
.suite li::before{content:counter(s,decimal-leading-zero);font:500 .76rem/1.9 var(--f-mono);color:var(--bleu)}

/* Articles — carnet d'observation */
.cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.cats a{font:500 .72rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--sur-nuit);border:1px solid var(--trait-nuit-fort);padding:10px 12px}
.cats a:hover,.cats a[aria-current]{border-color:var(--or);color:var(--or)}
.obs-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--encre)}
.obs{display:grid;grid-template-columns:130px 1fr 260px;gap:clamp(20px,4vw,48px);padding-block:36px;border-bottom:1px solid var(--filet);align-items:start}
.obs .num{font:500 .72rem/1.7 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--encre-3)}
.obs .num b{display:block;font:500 1.9rem/1 var(--f-titre);letter-spacing:0;color:var(--bleu);margin-bottom:8px}
.obs h2{font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.1}
.obs h2 a{text-decoration:none;background:linear-gradient(var(--or),var(--or)) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.obs h2 a:hover{background-size:100% 1px}
.obs .ext{margin-top:12px;font-size:1rem}
.obs .meta{margin-top:14px;font:400 .72rem/1.6 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--encre-3)}
.obs .vign{aspect-ratio:3/2;background:var(--nuit);overflow:hidden;border:1px solid var(--filet)}
.obs .vign img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.obs:hover .vign img{transform:scale(1.04)}
@media (max-width:900px){.obs{grid-template-columns:1fr}.obs .vign{order:-1;max-width:520px}}
.vide-liste{padding:40px 0;font-size:1.05rem}

.article-tete .meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;font:400 .74rem/1.6 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sur-nuit-2)}
.article-tete h1{max-width:18ch;font-size:clamp(2.5rem,5.4vw,4.4rem)}
.article-grille{display:grid;grid-template-columns:220px minmax(0,720px);gap:clamp(30px,6vw,90px);justify-content:center}
@media (max-width:1000px){.article-grille{grid-template-columns:minmax(0,720px)}.sommaire{display:none}}
.couverture{margin:0 0 48px}
.couverture img{width:100%;border:1px solid var(--filet)}
.sommaire{position:sticky;top:110px;align-self:start;font-size:.92rem}
.sommaire p{font:500 .7rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--encre-3);margin-bottom:14px}
.sommaire ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--filet)}
.sommaire a{display:block;padding:6px 0 6px 16px;margin-left:-1px;border-left:1px solid transparent;color:var(--encre-2);text-decoration:none;line-height:1.35}
.sommaire a:hover,.sommaire a.actif{color:var(--encre);border-left-color:var(--or)}
.encadre{margin-top:56px;padding:34px;background:var(--nuit);color:var(--sur-nuit);display:grid;gap:14px}
.encadre h2{font-size:1.9rem;color:#f4f7f9}
.encadre .actions{margin-top:8px}
.auteur{display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:center;margin-top:48px;padding-top:28px;border-top:1px solid var(--filet);font-size:.95rem}
.auteur .av{width:56px;height:56px;border-radius:50%;background:var(--nuit);display:grid;place-items:center}
.auteur strong{color:var(--encre)}
.faq-article{margin-top:56px}
.faq-article h2{margin-bottom:18px}

/* -------------------------------------------------------------- Apparitions au défilement */
.js [data-apparait]{transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js [data-apparait].attente{opacity:0;transform:translateY(22px)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .monte,.js .carte .apparait{opacity:1;transform:none}
  .js .carte .trace{stroke-dashoffset:0}
  .js [data-apparait].attente{opacity:1;transform:none}
  .js .phase .eclaire{opacity:1}
}

/* Étoiles filantes du hero */
.filante{position:absolute;z-index:0;height:1.5px;width:var(--l,160px);border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,rgba(246,225,164,0),rgba(246,225,164,.55) 70%,#fffaf0);
  transform:rotate(var(--a,24deg)) translateX(0);transform-origin:right center;opacity:0;
  animation:filante var(--t,1.1s) cubic-bezier(.3,.1,.5,1) forwards}
.filante::after{content:"";position:absolute;right:-2px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#fffaf0;box-shadow:0 0 8px 2px rgba(255,236,190,.8)}
@keyframes filante{0%{opacity:0;transform:rotate(var(--a)) translateX(0)}12%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d,420px))}}