/* IMAPF — feuille unique. Une seule page, un seul fichier : la charger coûte une requête,
   la scinder en coûterait deux pour le même octet utile.

   Palette et typographie reprises de Te Moni : les deux sites s'adressent aux mêmes agents,
   il n'y a pas de raison qu'ils se ressemblent de loin sans se ressembler de près. */

:root{
  color-scheme:light;
  --fond:#f5f3ee; --bone:#ffffff; --bord:#e1dcd1;
  --encre:#14302e; --encre2:#435754;
  --lagon:#0e6e68;           /* 5,5:1 sur le beige */
  --lagon-fonce:#0a5450;     /* 7,9:1 : les textes et les chevrons */
  --puce:#e4ece9;
  --sable:#f0d9a8;           /* 10:1 sur l'encre : les chiffres du résultat */
  --alerte:#8a4b12; --alerte-fond:#fbf0df;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
  --filigrane:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%2314302e' stroke-width='1.2' stroke-opacity='.055'%3E%3Cpath d='M36 6 L66 36 L36 66 L6 36 Z'/%3E%3Cpath d='M36 22 L50 36 L36 50 L22 36 Z'/%3E%3C/g%3E%3C/svg%3E");
  --frise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='14' viewBox='0 0 32 14'%3E%3Cpath d='M0 12 L8 3 L16 12 L24 3 L32 12' fill='none' stroke='%230e6e68' stroke-width='2.6' stroke-opacity='.55'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;color:var(--encre);background:var(--fond) var(--filigrane);
  font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
sup{font-size:.7em;line-height:0}
a{color:var(--lagon-fonce)}
a:focus-visible,summary:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible{outline:2px solid var(--lagon);outline-offset:2px}
.dedans{max-width:900px;margin:0 auto;padding:0 20px}
.evitement{position:absolute;left:-9999px;background:var(--lagon);color:#fff;
  padding:12px 18px;border-radius:6px;z-index:100;font-weight:600}
.evitement:focus{left:12px;top:12px}

/* ── barre ─────────────────────────────────────────────────────────────── */
.nav{position:relative;background:var(--fond)}
.nav::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;
  background:var(--frise) repeat-x var(--fond);background-size:auto 14px;pointer-events:none}
.nav .dedans{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding-block:16px}
.marque{font:700 17px/1 var(--serif);letter-spacing:.2em;text-transform:uppercase;
  color:var(--encre);text-decoration:none}
.marque i{font-style:normal;color:var(--lagon)}
.nav-sous{color:var(--encre2);font-size:14px}

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero{padding:46px 0 30px}
.hero h1{font:600 clamp(28px,5.4vw,42px)/1.16 var(--serif);letter-spacing:-.01em;max-width:16ch}
.chapo{margin-top:16px;max-width:60ch;color:var(--encre2);font-size:18px}
.source{margin-top:14px;max-width:70ch;color:var(--encre2);font-size:13.5px;line-height:1.55}

/* ── valeur du point ───────────────────────────────────────────────────── */
.point{background:var(--bone);border:1px solid var(--bord);border-radius:12px;
  padding:16px 18px;display:grid;grid-template-columns:1fr auto;gap:6px 20px;align-items:center}
.point label{font-weight:600;font-size:15px}
.point p{grid-column:1/-1;color:var(--encre2);font-size:13.5px;line-height:1.5}
.point-champ{display:flex;align-items:center;gap:8px}
.point-champ input{width:120px}
.point-champ span{color:var(--encre2);font-size:14px;white-space:nowrap}

/* ── onglets ───────────────────────────────────────────────────────────── */
.onglets{display:flex;gap:8px;overflow-x:auto;margin:22px 0 0;padding-bottom:4px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.onglets::-webkit-scrollbar{display:none}
.onglets button{flex:0 0 auto;font:600 14.5px/1 var(--sans);color:var(--encre2);
  background:var(--bone);border:1px solid var(--bord);border-radius:999px;
  padding:10px 16px;cursor:pointer;white-space:nowrap}
.onglets button:hover{color:var(--encre)}
.onglets button[aria-current="true"]{background:var(--lagon-fonce);border-color:var(--lagon-fonce);color:#fff}

/* ── panneaux ──────────────────────────────────────────────────────────── */
.panneau{background:var(--bone);border:1px solid var(--bord);border-radius:14px;
  padding:24px;margin:14px 0 0}
/* Sans JavaScript, aucun panneau n'est masqué : les six s'empilent et restent lisibles.
   C'est app.ts qui pose `hidden` sur les autres une fois qu'il tourne. */
.panneau + .panneau{margin-top:18px}
.panneau h2{font:600 22px/1.25 var(--serif)}
.art{margin-top:8px;color:var(--encre2);font-size:14.5px;line-height:1.55;max-width:72ch}

.champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:20px}
.champ{display:flex;flex-direction:column;gap:6px;min-width:0}
.champ-large{grid-column:1/-1}
.champ label{font-weight:600;font-size:14px;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.champ label i{font-style:normal;font-weight:400;color:var(--encre2);font-size:12.5px;
  background:var(--puce);border-radius:4px;padding:1px 6px;white-space:nowrap}
input[type=number],select{width:100%;font:400 16px/1.2 var(--sans);color:var(--encre);
  background:var(--fond);border:1px solid var(--bord);border-radius:8px;padding:11px 12px;
  font-variant-numeric:tabular-nums}
select{appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%230a5450' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.champ-case{justify-content:flex-end}
/* `.champ label` répartit l'intitulé et sa pastille de points aux deux bouts ; une case à
   cocher n'a pas de pastille, et l'héritage écartait le libellé de sa case de toute la
   largeur du champ. */
.champ label.case{justify-content:flex-start}
.case{display:flex;align-items:center;gap:10px;background:var(--fond);border:1px solid var(--bord);
  border-radius:8px;padding:11px 12px;cursor:pointer;font-weight:500;font-size:15px}
.case input{width:18px;height:18px;margin:0;flex:0 0 auto;accent-color:var(--lagon-fonce)}

/* ── résultat ──────────────────────────────────────────────────────────── */
.resultat{display:block;margin-top:22px;background:var(--encre);color:#fff;border-radius:12px;
  padding:20px;position:relative;overflow:hidden}
.resultat::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;
  background:var(--frise) repeat-x;background-size:auto 10px;opacity:.5}
.resultat .titre{display:block;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#a9c3bf;margin-top:6px}
.resultat .somme{display:block;font:600 clamp(28px,6vw,38px)/1.1 var(--serif);color:var(--sable);
  font-variant-numeric:tabular-nums;margin-top:6px}
.resultat ul{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid #2c4b48}
.resultat li{display:flex;justify-content:space-between;gap:16px;padding:4px 0;font-size:14.5px;color:#cfdedb}
.resultat li b{font-weight:600;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.resultat .mot{margin-top:14px;font-size:13.5px;line-height:1.5;color:#f0d9a8}
.resultat .vide{color:#a9c3bf;font-size:14.5px;margin-top:10px}

/* ── tableaux ──────────────────────────────────────────────────────────── */
.tableau{margin-top:20px;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:14.5px;font-variant-numeric:tabular-nums}
caption{text-align:left;color:var(--encre2);font-size:13px;padding-bottom:8px}
th,td{text-align:right;padding:8px 10px;border-bottom:1px solid var(--bord);white-space:nowrap}
thead th{color:var(--encre2);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
th:first-child,td:first-child,tbody th{text-align:left;font-weight:500;white-space:normal}

/* ── replis ────────────────────────────────────────────────────────────── */
.repli{margin-top:20px;border-top:1px solid var(--bord);padding-top:14px}
.repli summary{cursor:pointer;font-weight:600;font-size:15px;color:var(--lagon-fonce);
  list-style:none;display:flex;align-items:center;gap:8px}
.repli summary::-webkit-details-marker{display:none}
.repli summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.repli[open] summary::before{transform:rotate(45deg)}
.repli p{margin-top:12px;color:var(--encre2);font-size:14.5px;line-height:1.6;max-width:74ch}
.repli p b{color:var(--encre)}

/* ── saisie manuelle du déménagement ───────────────────────────────────── */
.manuel{margin-top:20px;background:var(--alerte-fond);border:1px solid #e3cfa8;
  border-radius:10px;padding:16px 18px}
.manuel-mot{color:var(--alerte);font-size:14.5px;line-height:1.55;font-weight:500}
.manuel .champs{margin-top:14px}
.manuel input{background:var(--bone)}

/* ── pied ──────────────────────────────────────────────────────────────── */
.pied{margin-top:56px;border-top:1px solid var(--bord);background:var(--fond);padding:34px 0 40px}
.mentions p{margin-top:14px;color:var(--encre2);font-size:13.5px;line-height:1.6;max-width:80ch}
.mentions p:first-child{margin-top:0}
.mentions b{color:var(--encre)}
.bas{margin-top:26px;padding-top:18px;border-top:1px solid var(--bord);
  display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.bas span:last-child{color:var(--encre2);font-size:13px;max-width:60ch}

@media (max-width:560px){
  body{font-size:16px}
  .panneau{padding:18px}
  .point{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}