/* ============================================================
   NEPTUNE KG : style.css (feuille commune à TOUTES les pages)
   Une page ne change que son CONTENU (html) et ses COULEURS (tokens).
   ============================================================ */
:root {
  --ink:#ffffff; --muted:rgba(255,255,255,.74); --faint:rgba(255,255,255,.55);   /* textes : blanc */

  /* Palette de marque (celle des lignes dégradées) */
  --sun:#ffd04a; --fox:#ff8a3d; --rose:#f0386b; --violet:#7542e5;

  /* Rôles, tous dérivés de la palette */
  --accent:var(--fox);                                    /* orange : survol et repères (sur-titres, « Recommandé ») */
  --accent-2:var(--rose);                                 /* reflets et ombres roses */
  --accent-3:color-mix(in srgb,var(--violet) 55%,#fff);   /* violet clair : liens et éléments cliquables sur fond sombre */
  --grad-text:linear-gradient(120deg,var(--sun),var(--fox),var(--rose));   /* titres en dégradé */
  --grad-line:linear-gradient(90deg,transparent,var(--sun),var(--fox),var(--rose),var(--violet),transparent);   /* ligne signal */
  --grad-line-v:linear-gradient(180deg,transparent,var(--sun),var(--fox),var(--rose),var(--violet),transparent);   /* ligne signal verticale */
  --grad-full:linear-gradient(135deg,var(--sun),var(--fox),var(--rose),var(--violet));   /* dégradé complet en diagonale, pour les contours */

  /* Fond */
  --deep:#1a0b2e;
  --g1:color-mix(in srgb,var(--accent-3) 50%,transparent);
  --g2:color-mix(in srgb,var(--rose) 42%,transparent);
  --g3:color-mix(in srgb,var(--fox) 42%,transparent);   /* taches du fond */
  --panel:rgba(24,11,38,.55); --edge:rgba(255,255,255,.15); --edge-2:rgba(255,255,255,.09);

  /* Échelle de texte : trois tailles seulement (titres et prix à part) */
  --t-label:.78rem;   /* libellés mono : sur-titres, étiquettes, prix, pied de page */
  --t-small:.93rem;   /* texte secondaire : cartes, notes, liens d'appoint, intro de panneau */
  --t-body:1rem;      /* texte courant */

  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --wrap:64rem;
  --gap:clamp(3.5rem,7vw,6.5rem);   /* espace entre deux blocs de page */
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box;}
html{ scroll-behavior:smooth; scrollbar-gutter:stable; scroll-padding-top:5rem; }
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--deep);color:var(--ink);font-family:var(--sans);font-size:var(--t-body);line-height:1.6;-webkit-font-smoothing:antialiased;}

/* Fond dégradé fixe (couleurs = tokens, donc change avec le thème de page) */
.backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;
  background:
    radial-gradient(60vmax 60vmax at 12% 8%,var(--g1),transparent 60%),
    radial-gradient(55vmax 55vmax at 88% 15%,var(--g2),transparent 60%),
    radial-gradient(62vmax 62vmax at 50% 105%,var(--g3),transparent 60%),
    var(--deep);}
.backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,2,18,.35),rgba(8,2,18,.5));}

/* ===== Barre du haut (fixe), identique partout ===== */
.topbar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.4rem;background:rgba(20,8,38,.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--grad-line);opacity:.9;}   /* ligne signal sous la barre */
.topbar-right{display:flex;align-items:center;gap:.7rem;}

.brand{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink);}
.brand:hover .brand-name{color:var(--accent);}
.brand-mark{display:grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:7px;background:var(--violet);color:#fff;font-family:var(--mono);font-weight:700;font-size:.78rem;}
.brand-name{font-family:var(--sans);font-weight:650;font-size:.95rem;letter-spacing:.06em;}

/* Boutons de contact de la barre du haut : plein = appeler, contour = écrire */
.contact-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .95rem;border-radius:999px;border:2px solid var(--violet);background:var(--violet);color:#fff;font-family:var(--sans);font-weight:600;font-size:.82rem;text-decoration:none;box-shadow:0 8px 22px color-mix(in srgb,var(--violet) 35%,transparent);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;}
.contact-btn:hover{background:transparent;box-shadow:none;}
.contact-btn.outline{background:rgba(255,255,255,.05);border-color:var(--edge);box-shadow:none;}
.contact-btn.outline:hover{background:transparent;border-color:var(--violet);}
.contact-btn svg{width:1em;height:1em;flex:none;}

/* ===== Footer (en flux, bas de page) ===== */
.site-footer{position:relative;z-index:1;width:fit-content;margin:0 auto;padding:2.4rem 1.5rem 0;display:flex;flex-direction:column;align-items:center;gap:1.1rem;color:var(--faint);font-family:var(--mono);font-size:var(--t-label);}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--grad-line);opacity:.9;}   /* ligne signal au-dessus du pied de page */
.site-footer > *{margin:0;display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;justify-content:center;align-items:center;}
.footer-contact{font-style:normal;}
.footer-link{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink);font-family:var(--sans);font-size:var(--t-small);text-decoration:none;transition:color .15s ease;}
.footer-link:hover{color:var(--accent);}
.footer-link svg{width:1em;height:1em;flex:none;color:var(--accent-3);}
.site-footer p a, .link-btn{color:var(--faint);text-decoration:none;transition:color .15s ease;}
.site-footer p a:hover, .link-btn:hover{color:var(--accent);}

/* Mentions légales : bloc natif (details) qui se déplie sous le pied de page, à la largeur de lecture */
.mentions{position:relative;z-index:1;width:100%;max-width:calc(72ch + 3rem);margin:1.1rem auto 0;padding:0 1.5rem 5rem;}
.mentions summary{display:flex;justify-content:center;align-items:center;gap:.5em;width:fit-content;margin:0 auto;color:var(--faint);font-family:var(--mono);font-size:var(--t-label);cursor:pointer;list-style:none;transition:color .15s ease;}
.mentions summary::-webkit-details-marker{display:none;}
.mentions summary::after{content:"";width:.38em;height:.38em;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-.15em) rotate(45deg);transition:transform .15s ease;}   /* chevron : vers le bas fermé, vers le haut ouvert */
.mentions[open] summary::after{transform:translateY(.1em) rotate(-135deg);}
.mentions summary:hover{color:var(--accent);}
.mentions-corps{margin-top:1.6rem;color:var(--muted);}
.mentions-corps h2{font-size:1.1rem;font-weight:680;margin:1.8rem 0 .3rem;color:var(--ink);}   /* sous-titre : blanc, comme les h3 */
.mentions-maj{margin:0;font-family:var(--mono);font-size:var(--t-label);color:var(--faint);text-align:center;}

/* Signal d'arrivée sur une ancre (#...) : la cible s'éclaire puis revient à la normale.
   Encadrement (.card) : contour en dégradé complet et lueur. Pied de page : sa ligne brille. Section : sa carte mise en avant s'allume. */
.site-footer:target::after{content:"";position:absolute;top:-3px;left:0;right:0;height:7px;background:var(--grad-line);filter:blur(5px);opacity:0;pointer-events:none;animation:brille 3s ease-out;}
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor){
  .card.featured::after, .card:target::after, .card.featured::before, .card:target::before{content:"";position:absolute;background:var(--grad-full);-webkit-mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000);-webkit-mask-clip:content-box,border-box;-webkit-mask-composite:xor;mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000);mask-clip:content-box,border-box;mask-composite:exclude;pointer-events:none;}
  section:target .card.featured::before, section:target .card.featured::after{animation:brille 3s ease-out;}   /* arrivée sur la section : la carte mise en avant s'allume puis revient à sa lueur discrète */
  .card.featured::after, .card:target::after{inset:-1px;padding:1px;border-radius:inherit;opacity:.9;}   /* contour de 1px, même finesse que la ligne du bandeau */
  .card.featured::before, .card:target::before{inset:-15px;padding:14px;border-radius:32px;background-clip:content-box;filter:blur(7px);}   /* lueur : 32px = arrondi de .card (18px) + 14px */
  .card:target:not(.featured)::after, .card:target::before{opacity:0;animation:brille 3s ease-out;}   /* la carte mise en avant garde son contour */
  .card.featured::before{opacity:.35;}   /* lueur discrète permanente */
}
.site-footer:target .footer-link{animation:allume 3s ease-out;}
@keyframes allume{0%,35%{color:var(--accent);}}
@keyframes brille{0%,35%{opacity:1;}}

/* ===== Glossaire : panneaux qui glissent depuis la droite (attribut popover, sans JavaScript) ===== */
.link-btn, .topbar-link, .terme, .index button, .vers-index, .panneau-fermer{font:inherit;background:none;border:0;padding:0;cursor:pointer;}
.topbar-link{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .3rem;color:var(--muted);font-family:var(--sans);font-weight:600;font-size:.82rem;transition:color .15s ease;}
.topbar-link:hover{color:var(--accent);}
.topbar-link svg{width:1em;height:1em;flex:none;}
.terme{color:inherit;text-decoration:underline dotted var(--accent-3);text-decoration-thickness:1px;text-underline-offset:.22em;transition:color .15s ease;}
.terme:hover{color:var(--accent);text-decoration:underline solid var(--accent);}   /* survol : texte et trait orange, trait plein */

.panneau{position:fixed;inset:0 0 0 auto;width:min(24rem,calc(100% - 3rem));height:100%;max-height:none;margin:0;padding:1.4rem 1.6rem 2rem;border:0;
  background:var(--grad-line-v) left / 1px 100% no-repeat, rgba(20,8,38,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:var(--ink);font-family:var(--sans);overflow-y:auto;}   /* fond : trait dégradé de 1px à gauche + panneau sombre */
.panneau:popover-open{animation:glisse .28s ease-out;}
@keyframes glisse{from{transform:translateX(100%);}}
.panneau::backdrop{background:rgba(8,2,18,.45);}
#glossaire:popover-open ~ .panneau::backdrop{background:none;}   /* terme ouvert depuis l'index : pas de second voile */
.panneau-tete{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.panneau-titre{margin:0;font-size:1.3rem;}
.panneau-fermer{display:grid;place-items:center;width:2.1rem;height:2.1rem;flex:none;border:1px solid var(--edge);border-radius:999px;color:var(--ink);transition:border-color .15s ease;}
.panneau-fermer:hover{border-color:var(--violet);}
.panneau-fermer svg{width:1rem;height:1rem;}
.panneau p{color:var(--muted);}
.panneau-intro{margin-top:.4rem;font-size:var(--t-small);}
.index{list-style:none;margin:1.2rem 0 0;padding:0;}
.index button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:.62rem 0;border-bottom:1px solid var(--edge-2);color:var(--ink);text-align:left;transition:color .15s ease;}
.index button::after{content:"→";color:var(--accent);font-family:var(--mono);}
.index button:hover{color:var(--accent);}
.vers-index{margin-top:1.4rem;color:var(--accent-3);font-size:var(--t-small);text-decoration:underline;text-underline-offset:.2em;}
.vers-index:hover{color:var(--accent);}
#glossaire:popover-open ~ .panneau .vers-index{display:none;}   /* déjà dans l'index : lien inutile */
@media (prefers-reduced-motion:reduce){.panneau:popover-open{animation:none;}}

/* Mobile */
@media (max-width:600px){
  .topbar{padding:.65rem 1rem;}
  .brand-name{display:none;}
  .topbar .contact-btn{padding:.5rem .6rem;}
  .topbar .topbar-link{padding:.5rem .4rem;}
  .topbar .label{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
  }
}

/* ===== Contenu : conteneur centré commun (dégage les coins) ===== */
.page{position:relative;z-index:1;width:100%;max-width:var(--wrap);margin:0 auto;padding:calc(4.2rem + var(--gap)) 1.5rem var(--gap);flex:1 0 auto;}   /* 4.2rem : hauteur de la barre du haut */

/* Pages courtes : contenu centré verticalement, footer collé en bas */
.center-page .page{ display:flex; flex-direction:column; justify-content:center; }

/* Typo commune */
h1{font-size:clamp(2rem,5vw,3rem);font-weight:750;letter-spacing:-.02em;line-height:1.08;margin:0 0 .6rem;}
h2{font-size:clamp(1.35rem,2.6vw,1.6rem);font-weight:720;letter-spacing:-.015em;margin:0 0 .5rem;}
h3{font-size:1.1rem;font-weight:680;margin:0;}
p{margin:.7rem 0 0;}
.lead{font-size:clamp(1.02rem,2vw,1.2rem);color:var(--muted);}
/* En-tête de page (titre + accroche), centré et réutilisable sur toutes les pages */
.page-head{ text-align:center; margin:0 auto; }
.page > .page-head + *{ margin-top:var(--gap); }
.page-head .lead{ max-width:60ch; margin:.8rem auto 0; }
.muted{color:var(--muted);}
.measure{max-width:72ch;}
a{color:var(--accent-3);text-underline-offset:.2em;}   /* violet = cliquable */
/* Focus clavier : un seul style pour tout le site, contour orange qui suit l'arrondi de l'élément */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
:focus-visible:not(.btn):not(.contact-btn):not(.panneau-fermer){border-radius:4px;}   /* éléments sans arrondi propre : coins légèrement arrondis */
a:not([class]):hover{color:var(--accent);}   /* liens dans le texte : orange au survol */

/* Composants communs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.8rem 1.35rem;border-radius:999px;border:1px solid var(--edge);background:rgba(255,255,255,.05);color:var(--ink);font:inherit;font-weight:560;text-decoration:none;transition:background-color .15s ease,border-color .15s ease;}
.btn:hover{background:transparent;border-color:var(--violet);}
.btn.primary{border:2px solid var(--violet);color:#fff;font-weight:620;background:var(--violet);box-shadow:0 10px 30px color-mix(in srgb,var(--violet) 35%,transparent);}
.btn.primary:hover{background:transparent;box-shadow:none;}
.tag{font-family:var(--mono);font-size:var(--t-label);color:var(--muted);padding:.34rem .75rem;border:1px solid var(--edge-2);border-radius:999px;background:rgba(255,255,255,.03);white-space:nowrap;}

/* Carte commune (forfaits) */
.card{position:relative;display:flex;flex-direction:column;padding:1.5rem 1.35rem;border-radius:18px;border:1px solid var(--edge-2);background:var(--panel);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:border-color .15s ease,box-shadow .15s ease;}
.card.featured{border-color:color-mix(in srgb,var(--accent) 50%,transparent);}   /* orange : repli si le navigateur ne gère pas le contour dégradé */

/* Sur-titre : petite ligne au-dessus d'un titre (accueil, 404) */
.surtitre{margin:0 0 .9rem;color:var(--accent);font-family:var(--mono);font-size:var(--t-label);letter-spacing:.04em;}

/* Page 404 */
.error-actions{margin-top:1.8rem;display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;}

/* ===== Accueil (index.html) : regroupé ici pour que la CSP se passe de 'unsafe-inline' ===== */
/* Même espace entre les sections (--gap, défini dans :root) */
.page > section + section{ margin-top:var(--gap); }
.page > section:last-child .section-head{ margin-bottom:0; }
.btn-row{ margin-top:1.8rem; display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }
.tags{ margin:1.6rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; }
.section-head{ max-width:72ch; margin-left:auto; margin-right:auto; margin-bottom:1.6rem; text-align:center; }
.section-head .measure{ margin-left:auto; margin-right:auto; }

.hero{ text-align:center; }
.hero .lead{ max-width:56ch; margin-left:auto; margin-right:auto; }
.hero .btn-row, .hero .tags{ justify-content:center; }
.hero .btn-row{ flex-direction:column; align-items:center; }

.btn-row a.link{ align-self:center; font-size:var(--t-small); text-decoration:underline; }   /* lien d'appoint : violet clair souligné, comme les liens du texte */
.btn-row a.link:hover{ color:var(--accent); }

.plans{ margin-top:1.6rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.plan-flag{ min-height:1em; margin-bottom:.6rem; font-family:var(--mono); font-size:var(--t-label); color:var(--accent); }
.plan-flag:empty{ display:none; }   /* cartes sans badge : plus d'espace réservé */
.card.featured .plan-flag{ position:absolute; top:0; left:50%; transform:translate(-50%,-50%); z-index:1; margin:0; min-height:0; padding:.25rem .85rem; border:1px solid transparent; border-radius:999px; background:linear-gradient(var(--deep),var(--deep)) padding-box, var(--grad-full) border-box; white-space:nowrap; }   /* badge à cheval sur le bord, contour en dégradé comme la carte */
section:target .card.featured .plan-flag{ animation:halo 3s ease-out; }   /* arrivée sur #offres : le badge s'allume avec la carte */
@keyframes halo{0%,35%{filter:drop-shadow(0 0 4px var(--fox)) drop-shadow(0 0 10px var(--rose));}}
section:target .card.featured .plan-flag span{ animation:halo-texte 3s ease-out; }   /* le texte s'allume aussi */
@keyframes halo-texte{0%,35%{filter:drop-shadow(0 0 3px var(--fox));}}
.card.featured .plan-flag span{ background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }   /* texte en dégradé comme les titres */
.plan-desc{ margin-top:.7rem; color:var(--muted); font-size:var(--t-small); }
.plans-note{ margin:1.3rem auto 0; font-size:var(--t-small); text-align:center; }

.plans-conditions{ display:grid; grid-template-columns:2fr 1fr; gap:1rem 2.4rem; margin:2rem 0 0; font-size:var(--t-small); color:var(--muted); }
.plans-conditions h3{ font-size:var(--t-body); color:var(--ink); margin:0 0 .5rem; }
.plans-conditions ul{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.plans-conditions li{ position:relative; padding-left:1.5rem; }
.plans-conditions li::before{ content:"→"; position:absolute; left:0; color:var(--accent); font-family:var(--mono); }

.etapes{ position:relative; list-style:none; margin:1.4rem auto 0; padding:0; max-width:46rem; display:grid; gap:1.6rem; counter-reset:etape; }
.etapes::before{ content:""; position:absolute; left:3.5rem; top:.4rem; bottom:.4rem; width:1px; background:var(--grad-line-v); }   /* fil vertical qui relie les étapes */
.etapes li{ counter-increment:etape; display:grid; grid-template-columns:3rem 1fr; column-gap:1rem; }
.etapes li::before{ content:"0" counter(etape); grid-row:1 / span 2; padding-top:.3rem; color:var(--accent); font-family:var(--mono); font-size:var(--t-label); }
.etapes h3, .etapes p{ grid-column:2; padding-left:1rem; }
.etapes h3{ margin:0; }
.etapes p{ margin-top:.3rem; color:var(--muted); font-size:var(--t-small); }

.topbar-horaires{ color:var(--faint); font-family:var(--mono); font-size:var(--t-label); white-space:nowrap; }
.footer-horaires{ color:var(--faint); }
@media (max-width:900px){ .topbar-horaires{ display:none; } }
@media (min-width:901px){ .footer-horaires{ display:none; } }

.price{ margin:.6rem 0 0; font-size:1.6rem; font-weight:720; }
.price small{ display:block; margin-top:.2rem; font-family:var(--mono); font-size:var(--t-label); font-weight:400; color:var(--muted); }

.feats{ list-style:none; margin:1.1rem 0 0; padding:0; display:grid; gap:.55rem; font-size:var(--t-small); }
.feats li{ position:relative; padding-left:1.5rem; }
.feats li::before{ content:"→"; position:absolute; left:0; color:var(--accent); font-family:var(--mono); }

.problems{ margin-top:1.4rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; align-items:stretch; }
.problem h3{ margin-bottom:.4rem; }
.problem p{ margin-top:.4rem; color:var(--muted); font-size:var(--t-small); }

.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem 2.4rem; margin-top:1.4rem; }
.grid-2 p{ margin-top:.2rem; color:var(--muted); font-size:var(--t-small); }

@media (max-width:760px){ .plans{ grid-template-columns:1fr; } .grid-2{ grid-template-columns:1fr; } .problems{ grid-template-columns:1fr; } .plans-conditions{ grid-template-columns:1fr; } }

/* Texte en dégradé "renard" (titres de section, titres de panneau, mot accent du héros) */
.section-head h2, .panneau-titre, .hero h1 .accent{
   background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
@media (forced-colors:active){
.section-head h2, .panneau-titre, .hero h1 .accent{ background:none; color:CanvasText; }
.topbar{ border-bottom:1px solid CanvasText; }
.site-footer{ border-top:1px solid CanvasText; }
.panneau{ border-left:1px solid CanvasText; }
.card.featured .plan-flag span{ background:none; color:CanvasText; }
}