/* Charte NEFRA — mêmes polices et mêmes couleurs que nefra.fr (identité de Marine). */
@font-face{font-family:Fraunces;font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/polices/fraunces-latin-opsz-normal.woff2) format("woff2")}
@font-face{font-family:Outfit;font-style:normal;font-weight:300 600;font-display:swap;
  src:url(/polices/outfit-latin-wght-normal.woff2) format("woff2")}
/* Polices de secours calées sur les mêmes mesures : le texte ne saute pas au chargement. */
@font-face{font-family:"Outfit Repli";src:local("Arial"),local("Helvetica Neue"),local("Roboto");
  size-adjust:98%;ascent-override:100%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:"Fraunces Repli";src:local("Georgia"),local("Times New Roman");
  size-adjust:104%;ascent-override:94%;descent-override:25%;line-gap-override:0%}

:root{
  /* mêmes valeurs que nefra.fr ; les noms du site sont rappelés en commentaire */
  --chocolat:#2b1c10;         /* --choco */
  --chocolat-fonce:#241b12;   /* --ink */
  --chocolat-clair:#3d2a18;   /* --choco-2 */
  --sable:#f4ece1;            /* --bg-soft */
  --creme:#faf5ee;            /* --surface */
  --sable-fonce:#ece2d4;      /* --bg */
  --bordure:#dccdb8;          /* --line */
  --or:#c9a06a;               /* --champ — aplats, filets, et texte sur fond chocolat */
  --or-clair:#e3cba4;         /* --champ-soft */
  --or-profond:#7a5623;       /* --champ-deep — le même champagne assombri jusqu'à 4,5:1
                                 sur nos fonds crème : à utiliser dès que l'or porte du
                                 texte ou un repère sur fond clair. */
  --terre:#6f5d49;            /* --muted */
  --terre-clair:#b39a7c;      /* --on-dark-mute */
  --vert:#3f6b4d;             /* --ok */
  --brique:#93392c;           /* --alert */
  --sur-fonce:#f3e7d3;        /* --on-dark */
  --serif:"Fraunces","Fraunces Repli",Georgia,"Times New Roman",serif;
  --sans:"Outfit","Outfit Repli",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --arrondi:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--sable);color:var(--chocolat-fonce);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  min-height:100svh;padding-bottom:env(safe-area-inset-bottom);
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15;margin:0 0 12px}
h1{font-size:26px} h2{font-size:20px} h3{font-size:17px}
a{color:var(--chocolat)}
p{margin:0 0 14px}

.enseigne{
  font-family:var(--serif);letter-spacing:.22em;text-transform:uppercase;
  font-size:12px;color:var(--or-profond);
}
.discret{color:var(--terre);font-size:14px}
.centre{text-align:center}

.bandeau{
  background:var(--chocolat);color:var(--sur-fonce);
  padding:calc(14px + env(safe-area-inset-top)) 20px 14px;
  display:flex;align-items:center;gap:12px;
}
.bandeau .titre{font-family:var(--serif);font-size:17px;flex:1}
.bandeau button{background:none;border:0;color:var(--or);font-family:var(--sans);font-size:14px;padding:6px;cursor:pointer}

.page{max-width:620px;margin:0 auto;padding:20px 16px 90px}

.carte{
  background:var(--creme);border:1px solid var(--bordure);border-radius:var(--arrondi);
  padding:18px;margin:0 0 14px;
}
.carte.serree{padding:14px 16px}

label{display:block;font-size:14px;color:var(--terre);margin:0 0 6px}
input,select,textarea{
  width:100%;font-family:var(--sans);font-size:17px;color:var(--chocolat-fonce);
  background:#fff;border:1px solid var(--bordure);border-radius:8px;padding:13px 14px;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--or-profond);outline-offset:1px}
input.code{
  font-family:var(--serif);font-size:30px;letter-spacing:.42em;text-align:center;padding:14px 8px;
}

.bouton{
  display:block;width:100%;border:0;border-radius:8px;cursor:pointer;
  font-family:var(--sans);font-size:17px;padding:15px;margin:12px 0 0;
  background:var(--chocolat);color:var(--sur-fonce);text-align:center;text-decoration:none;
}
.bouton:disabled{opacity:.45}
.bouton.vert{background:var(--vert);color:#fff}
.bouton.brique{background:var(--brique);color:#fff}
.bouton.efface{background:none;color:var(--terre);border:1px solid var(--bordure)}

.message{border-radius:8px;padding:12px 14px;margin:14px 0;font-size:15px}
.message.erreur{background:#f7e3df;color:#7a2d22;border:1px solid #e6c4bc}
.message.bien{background:#e5efe8;color:#2f5340;border:1px solid #c6ddcf}

.etiquette{
  display:inline-block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;background:var(--sable-fonce);color:var(--terre);
}
.etiquette.vert{background:#dceadf;color:#2f5340}
.etiquette.brique{background:#f2ded9;color:#7a2d22}
.etiquette.or{background:#f0e2cc;color:#7a5a24}

.vide{text-align:center;color:var(--terre);padding:34px 10px}
.vide .arche{opacity:.35;margin-bottom:10px}

.onglets{
  position:fixed;left:0;right:0;bottom:0;display:flex;
  background:var(--creme);border-top:1px solid var(--bordure);
  padding-bottom:env(safe-area-inset-bottom);
}
.onglets button{
  flex:1;background:none;border:0;padding:10px 4px 12px;cursor:pointer;
  font-family:var(--sans);font-size:11px;color:var(--terre);letter-spacing:.04em;
}
.onglets button .pic{display:block;font-size:18px;line-height:1.3}
.onglets button[aria-current="page"]{color:var(--chocolat)}
.onglets button[aria-current="page"] .pic{color:var(--or-profond)}

.liste{list-style:none;margin:0;padding:0}
.liste li{border-top:1px solid var(--bordure);padding:13px 0}
.liste li:first-child{border-top:0}

.chargement{color:var(--terre);text-align:center;padding:26px}
[hidden]{display:none !important}