/* =========================================================================
   Inuksuk — feuille de style globale
   Refonte 2026-10-05 : look & feel epure facon SaaS moderne (grande typo,
   beaucoup d'air, cartes arrondies), couleurs de marque conservees (teal #10a37f).
   Tous les noms de classes existants sont preserves : la refonte est purement
   visuelle, chaque page continue de fonctionner.
   ========================================================================= */

/* Police auto-hebergee (CSP font-src 'self') : Inter variable, 100-900. */
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/inter.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
  --bg:#ffffff; --bg-soft:#f6f7f9; --panel:#ffffff; --panel2:#f6f7f9; --panel3:#eef0f3;
  --txt:#0b0b0f; --mut:#60636e; --acc:#10a37f; --acc-d:#0c8465; --acc-soft:#eafaf4;
  --bord:#e7e8ec; --bord-fort:#d7d8de; --btn:#0b0b0f; --btn-txt:#ffffff;
  --ok:#0c8465; --warn:#a86b00; --err:#c0392b;
  --ombre:0 1px 2px rgba(10,12,20,.04), 0 10px 30px rgba(10,12,20,.06);
  --ombre-fort:0 2px 6px rgba(10,12,20,.06), 0 24px 60px rgba(10,12,20,.12);
  --rayon:18px; --rayon-lg:26px; --rayon-sm:12px;
  --max:1160px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;
  font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--txt);line-height:1.6;font-size:16px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}
small{color:var(--mut)}
::selection{background:var(--acc);color:#fff}

h1,h2,h3,h4{letter-spacing:-.025em;line-height:1.1;font-weight:680;margin:.2rem 0;color:var(--txt)}
h1{font-size:clamp(2.2rem,4.2vw,3.4rem)}
h2{font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.03em}
h3{font-size:1.2rem;letter-spacing:-.02em}
p{margin:.6rem 0}

/* ---------- Barre du haut : logo | liens centres | actions ---------- */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.85rem 2rem;background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--bord)}
.marque{font-weight:700;font-size:1.18rem;color:var(--txt);display:inline-flex;align-items:center;gap:.5rem;letter-spacing:-.02em}
.marque:hover{text-decoration:none}
.marque .logo{height:36px;width:auto;display:block}
.marque span{color:var(--acc)}
.marque small{color:var(--mut);font-weight:500;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;margin-left:.15rem}
.nav-liens{flex:1;display:flex;gap:.1rem;justify-content:center;align-items:center;flex-wrap:wrap}
.nav-liens a{padding:.5rem .85rem;border-radius:10px;color:var(--mut);font-size:.95rem;font-weight:500;transition:.15s}
.nav-liens a:hover{background:var(--panel2);color:var(--txt)}
.nav-actions{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}
.nav-actions .lien-connexion{padding:.5rem .4rem;color:var(--txt);font-weight:500;font-size:.95rem}
.nav-actions .lien-connexion:hover{color:var(--acc)}
/* ancien <nav> (au cas ou une page l'utilise encore) */
.topbar>nav{display:flex;gap:.15rem;flex-wrap:wrap;align-items:center}
.btn-sortie{color:var(--err)!important;font-size:.93rem}

.conteneur{max-width:var(--max);margin:0 auto;padding:2.5rem 1.5rem}
.pied{max-width:var(--max);margin:4rem auto 2rem;padding:2rem 1.5rem;color:var(--mut);display:flex;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--bord);font-size:.9rem}
.liens-pied a{margin-left:1.2rem;color:var(--mut)}
.liens-pied a:hover{color:var(--txt)}
.sim{width:100%;font-size:.82rem;color:var(--mut)}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;background:var(--btn);color:var(--btn-txt);
  padding:.72rem 1.4rem;border-radius:999px;font-weight:560;font-size:.98rem;border:1px solid var(--btn);
  cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,opacity .15s}
.btn:hover{text-decoration:none;transform:translateY(-1px);box-shadow:var(--ombre)}
.btn:active{transform:translateY(0)}
.btn.vert{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.vert:hover{background:var(--acc-d)}
.btn.gris{background:#fff;color:var(--txt);border:1px solid var(--bord-fort)}
.btn.gris:hover{background:var(--panel2)}
.btn.petit{padding:.42rem .85rem;font-size:.85rem}
.btn.bloc{width:100%}
.btn.grand{padding:.9rem 1.8rem;font-size:1.05rem}

/* ---------- Hero ---------- */
.hero{position:relative;text-align:center;padding:5.5rem 1rem 3.5rem;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 60% at 50% -10%, var(--acc-soft) 0%, rgba(234,250,244,0) 70%),
    radial-gradient(40% 40% at 85% 10%, rgba(16,163,127,.06) 0%, rgba(255,255,255,0) 70%)}
.hero h1{font-size:clamp(2.6rem,6vw,4.4rem);margin:0 auto;max-width:17ch;font-weight:700;letter-spacing:-.035em}
.hero p{color:var(--mut);font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:60rem;margin:1.3rem auto 2.2rem;line-height:1.6}
.cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.eyebrow{display:inline-flex;align-items:center;gap:.45rem;background:var(--acc-soft);color:var(--acc-d);
  border:1px solid rgba(16,163,127,.22);padding:.4rem .9rem;border-radius:999px;font-size:.85rem;font-weight:560;
  margin-bottom:1.4rem;letter-spacing:.01em}

/* ---------- Grilles / sections ---------- */
.grille{display:grid;gap:1.3rem}
.grille.c1{grid-template-columns:1fr}
.grille.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grille.c3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grille.c4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.section{margin:4rem 0}
.section>h2{margin-bottom:.4rem}

.carte{background:var(--panel);border:1px solid var(--bord);border-radius:var(--rayon);padding:1.6rem;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.carte h3{margin:.1rem 0 .5rem;font-size:1.15rem}
.carte p{color:var(--mut);margin:.3rem 0}
.carte.flotte:hover{transform:translateY(-3px);box-shadow:var(--ombre);border-color:var(--bord-fort)}

/* ---------- Cartes de prix ---------- */
.carte.plan{display:flex;flex-direction:column;text-align:left;padding:2rem;border-radius:var(--rayon-lg);
  position:relative;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.carte.plan:hover{transform:translateY(-3px);box-shadow:var(--ombre)}
.carte.plan h3{font-size:1.3rem;font-weight:650}
.carte.plan .grosprix{font-size:3rem;font-weight:720;letter-spacing:-.04em;margin:.5rem 0 .1rem;color:var(--txt);line-height:1}
.carte.plan .grosprix small{font-size:1rem;color:var(--mut);font-weight:450;letter-spacing:0}
.carte.plan ul{list-style:none;text-align:left;color:var(--txt);padding:0;margin:1.4rem 0;display:grid;gap:.7rem}
.carte.plan ul li{position:relative;padding-left:1.8rem;color:var(--txt);font-size:.96rem;line-height:1.45}
.carte.plan ul li:before{content:"✓";position:absolute;left:0;top:0;color:var(--acc);font-weight:800}
.carte.plan .btn{margin-top:auto}
.carte.plan.vedette{border:1.5px solid var(--acc);box-shadow:var(--ombre-fort)}
.carte.plan.vedette:hover{transform:translateY(-4px)}
.badge{position:absolute;top:-.8rem;left:2rem;background:var(--acc);color:#fff;font-size:.74rem;font-weight:650;
  padding:.3rem .8rem;border-radius:999px;letter-spacing:.02em;box-shadow:var(--ombre)}

/* ---------- Tuiles chiffres ---------- */
.tuile{background:var(--panel2);border:1px solid var(--bord);border-radius:var(--rayon-sm);padding:1.2rem 1.3rem}
.tuile .val{font-size:2rem;font-weight:700;letter-spacing:-.03em}
.tuile .lbl{color:var(--mut);font-size:.85rem}

/* ---------- Etapes ---------- */
.etape{background:var(--panel);border:1px solid var(--bord);border-radius:var(--rayon-sm);
  padding:1.2rem 1.3rem 1.2rem 3.6rem;margin:.9rem 0;position:relative}
.etapes{counter-reset:e}
.etape:before{counter-increment:e;content:counter(e);position:absolute;left:1.1rem;top:1.15rem;width:1.8rem;height:1.8rem;
  background:var(--acc);color:#fff;border-radius:50%;display:grid;place-items:center;font-weight:650;font-size:.9rem}
.etape h3{margin:.1rem 0 .3rem}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--bord);border-radius:var(--rayon-sm);overflow:hidden}
th,td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--bord);font-size:.92rem}
th{background:var(--panel2);color:var(--mut);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;font-weight:650}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--panel2)}
.tableau-scroll{overflow-x:auto}

/* ---------- Pastilles ---------- */
.pastille{display:inline-block;padding:.18rem .6rem;border-radius:999px;font-size:.76rem;font-weight:650}
.pastille.on{background:var(--acc-soft);color:var(--acc-d)}
.pastille.off{background:var(--panel3);color:var(--mut)}
.pastille.exp{background:rgba(192,57,43,.12);color:var(--err)}

/* ---------- Formulaires ---------- */
form.pile{display:grid;gap:1.1rem;max-width:440px}
label{display:block;font-size:.88rem;color:var(--mut);margin-bottom:.35rem;font-weight:560}
input,textarea,select{width:100%;padding:.75rem .9rem;background:#fff;border:1px solid var(--bord-fort);
  border-radius:10px;color:var(--txt);font:inherit;transition:border-color .15s,box-shadow .15s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(16,163,127,.15)}
textarea{min-height:88px}
.case{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--mut)}
.case input{width:auto;margin-top:.2rem}

/* ---------- Encarts ---------- */
.alerte{background:#fff8ec;border:1px solid #f0d59a;color:#8a5a00;padding:.9rem 1.1rem;border-radius:var(--rayon-sm);margin:1rem 0}
.erreur{background:#fdecea;border:1px solid #f5c4bd;color:var(--err);padding:.8rem 1.1rem;border-radius:var(--rayon-sm);margin:.9rem 0}
.bandeau-ok{background:var(--acc-soft);border:1px solid rgba(16,163,127,.3);color:var(--acc-d);padding:.75rem 1.1rem;border-radius:var(--rayon-sm);margin:1rem 0}
.succes{background:var(--acc-soft);border:1px solid rgba(16,163,127,.35);color:var(--acc-d);padding:.9rem 1.1rem;border-radius:var(--rayon-sm);margin:1rem 0}

/* ---------- Paiement ---------- */
.checkout{max-width:500px;margin:2.5rem auto;background:var(--panel);border:1px solid var(--bord);border-radius:var(--rayon-lg);padding:2rem;box-shadow:var(--ombre)}
.checkout .faux{background:var(--panel2);border:1px dashed var(--bord-fort);border-radius:var(--rayon-sm);padding:1rem;color:var(--mut);font-size:.85rem;margin:1.2rem 0}
.entete-page{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.muted{color:var(--mut)}
.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;background:var(--panel2);padding:.15rem .4rem;border-radius:6px;font-size:.9em}

/* ---------- Prose (pages de contenu) ---------- */
.prose{max-width:760px;margin:0 auto}
.prose p{color:var(--txt);max-width:72ch}
.prose h2{margin-top:2.4rem;font-size:1.5rem}
.prose ul{max-width:72ch;color:var(--txt)}
.prose .accroche{font-size:1.25rem;color:var(--mut);max-width:70ch;line-height:1.6}

/* ---------- Appels a l'action / landing ---------- */
.cta-final{margin:4rem 0 1rem;padding:3rem 2rem;text-align:center;background:var(--bg-soft);
  border:1px solid var(--bord);border-radius:var(--rayon-lg)}
.cta-final h2{margin-top:0}
.landing-liste{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:1.8rem 0}
.landing-liste a{display:block;padding:1.4rem;border:1px solid var(--bord);border-radius:var(--rayon);color:var(--txt);transition:transform .18s,box-shadow .18s,border-color .18s}
.landing-liste a:hover{border-color:var(--bord-fort);box-shadow:var(--ombre);transform:translateY(-3px)}
.landing-liste a strong{display:block;margin-bottom:.25rem;font-size:1.05rem}
.landing-liste a span{color:var(--mut);font-size:.9rem}

/* ---------- Selecteur de langue ---------- */
.langue{margin-left:.3rem;padding:.35rem .5rem;color:var(--mut);font-size:.85rem;white-space:nowrap}
.langue a{color:var(--mut)}
.langue a:hover{color:var(--txt)}
.langue strong{color:var(--txt)}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .topbar{padding:.75rem 1.1rem}
  .nav-liens{order:3;flex-basis:100%;justify-content:flex-start;gap:.1rem;overflow-x:auto;padding-bottom:.2rem}
  .nav-liens::-webkit-scrollbar{height:0}
}
@media(max-width:640px){
  .conteneur{padding:1.8rem 1.1rem}
  .hero{padding:3.2rem 1rem 2rem}
  .section{margin:2.8rem 0}
  .carte.plan{padding:1.5rem}
}

/* ---------- Rapports d'erreur (admin) ---------- */
.badge-alerte{display:inline-block;background:var(--err,#c0392b);color:#fff;font-size:.72rem;font-weight:650;
  padding:.15rem .5rem;border-radius:999px;vertical-align:middle;margin-left:.4rem}
.en-ligne{display:inline}
pre.trace{max-height:16rem;overflow:auto;background:var(--panel2);border:1px solid var(--bord);
  border-radius:8px;padding:.6rem;font-size:.78rem;line-height:1.35;white-space:pre-wrap;word-break:break-word;margin:.4rem 0 0}

/* ---------- Silhouette d'inuksuk ---------- */
.marque .logo-inuksuk{display:block;color:var(--txt)}
.carte.plan .pierre{display:flex;align-items:flex-end;height:76px;margin-bottom:.8rem;color:var(--mut)}
.carte.plan.vedette .pierre{color:var(--acc)}
.carte .actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}

/* ---------- Compte connecte (en-tete) ---------- */
.compte-actif{color:var(--mut);font-size:.85rem;white-space:nowrap}
.compte-actif .pastille{font-size:.7rem;padding:.1em .45em;margin-left:.3em;vertical-align:middle}

/* ---------- Authentification (connexion) ---------- */
.auth{max-width:400px;margin:3.5rem auto;padding:0 1rem;text-align:center}
.auth .marque-auth{display:inline-flex;justify-content:center;color:var(--txt);margin-bottom:1.3rem}
.auth h1{font-size:1.9rem;margin:.2rem 0 .3rem;letter-spacing:-.02em}
.auth .sous{color:var(--mut);margin:0 0 1.8rem;font-size:1rem}
.auth form.pile{max-width:none;gap:.85rem;text-align:left}
.auth .btn.bloc{margin-top:.4rem}
.auth .lien-social{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;
  background:#fff;color:var(--txt);border:1px solid var(--bord-fort);border-radius:999px;
  padding:.72rem 1.2rem;font-weight:560;font-size:.98rem;transition:.15s}
.auth .lien-social:hover{background:var(--panel2);text-decoration:none;transform:translateY(-1px);box-shadow:var(--ombre)}
.auth .sep{display:flex;align-items:center;gap:.8rem;color:var(--mut);font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;margin:1.3rem 0}
.auth .sep:before,.auth .sep:after{content:"";flex:1;height:1px;background:var(--bord)}
.auth .pied-auth{margin-top:1.5rem;color:var(--mut);font-size:.95rem}
.auth .pied-auth a{color:var(--acc-d);font-weight:560}
.auth .pied-auth a:hover{text-decoration:underline}
.auth .erreur{text-align:left}