/* ==================================================================
   Les pages du salon d'Ajmani (hatf, 24/10/2026)
   ==================================================================
   Le même langage que les pages du bureau d'AMN DevSec, valeur pour
   valeur (les jetons ci-dessous sont ceux d'amndevsec.fr) : hatf est
   l'autre côté de la même pièce. Chaque page est un document posé dans
   le salon, la nuit : un papier crème, les titres et les étiquettes en
   lettres de console (Jersey 15), le texte long en Libre Caslon Text.
   La 3D reste sur l'accueil ; ici, des images de console tramées
   (img/nuit.png : le mur du salon, la lueur du feu en bas à gauche, les
   lames du store en haut à droite ; img/grain-papier.png, img/noyer.png,
   affichées au pixel près) et la lumière du feu sur le papier.
   Une page ne modifie pas cette feuille : ce qui lui est propre va dans
   <page>.css, chargée après.
   ================================================================== */

:root {
  /* la nuit (le salon) */
  --nuit: #06080a;
  --nuit-2: #0e1316;                      /* une étiquette posée sur la nuit */
  --nuit-filet: rgba(236, 231, 220, 0.16);
  --craie: #ece7dc;                       /* texte sur la nuit, 16:1 */
  --craie-2: #b9b4a9;                     /* secondaire sur la nuit, 9,7:1 */
  --craie-3: #8f8a80;                     /* mentions sur la nuit, 5,8:1 */

  /* le papier */
  --papier: #ece4cf;
  --papier-clair: #f4eedd;                /* l'étiquette collée sur l'onglet */
  --encre: #1b1812;                       /* 14:1 sur le papier (12,4:1 au plus sombre) */
  --encre-2: #4f473b;                     /* secondaire sur le papier, 7,2:1 (6,4:1 au plus sombre) */
  --pointille: rgba(27, 24, 18, 0.5);     /* les pointillés tapés entre deux lignes */
  --chemise: #c7ad77;                     /* la chemise cartonnée (manille) */
  --chemise-bord: #9c834f;

  /* le bois, le vert de la lampe, la lumière */
  --noyer: #1c110a;
  --vert: #1d5440;                        /* encre de tampon et marque « compris », 6,9:1 sur le papier */
  --alerte: #8a2414;                      /* erreurs de formulaire seulement */
  --signal: #e0a340;                       /* l'orange d'AMN : lumière et accent, jamais du texte sur le papier */
  --sur-signal: #15100a;

  /* les familles (deux, pas une de plus) */
  --f-titre: "Jersey 15", sans-serif;
  --f-texte: "Libre Caslon Text", Georgia, "Times New Roman", serif;

  /* l'échelle. Libre Caslon Text (le texte) : --t-texte, --t-chapeau,
     --t-petit. Jersey 15 (titres, étiquettes) : --t-h1, --t-h2,
     --t-etiquette, sur sa grille : 1350 unités par em, chaque point des
     contours sur un multiple de 50, soit 27 pixels de police dans la
     taille. Un pixel de police reste net quand il fait un nombre entier
     de pixels de l'écran : 27 et 54 px (1 et 2 px CSS) partout ; 18 et
     36 px (2/3 et 4/3 de px CSS) sur un écran à 3 pixels par px CSS
     (iPhone, la plupart des Android), où se font les visites. Jersey 15
     est étroite et son œil plus petit (lettres basses : 41 % de la
     taille, 49 % pour Special Elite, la police d'avant) : 18 px ont l'œil
     des 15 et 16 px d'avant, 27 px celui des 23, 36 px celui des 30.
       --t-h1 : 36 px au téléphone (30 avant), 54 px dès 900 px de large
         (jusqu'à 46 avant), 27 px sous 360 px ;
       --t-h2 : 27 px partout (23 à 30 avant) ;
       --t-etiquette : 18 px partout (14 à 17 avant) : étiquettes, liens
         tapés, boutons, surtitres, tampons, pied. Sur un écran à 1 pixel
         par px CSS, 18 px restent un peu flous : 27 px, nets, y
         pèseraient plus que le texte. */
  --t-texte: clamp(17px, 0.35vw + 15.8px, 19px);
  --t-chapeau: clamp(19px, 0.6vw + 16.5px, 22px);
  --t-h1: 36px;
  --t-h2: 27px;
  --t-etiquette: 18px;
  --t-petit: 15px;

  /* les mesures */
  --marge: clamp(16px, 4.4vw, 64px);      /* la même que l'accueil : le logo ne bouge pas d'une page à l'autre */
  --feuille: 730px;                       /* largeur du papier : la ligne fait 60 à 70 signes */
  --bord-chemise: clamp(6px, 1.4vw, 16px);
  --pad-x: clamp(20px, 5.4vw, 68px);
  --pad-y: clamp(28px, 5vw, 60px);
  color-scheme: dark;
}
@media (min-width: 900px) {
  :root { --t-h1: 54px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--nuit);
  color: var(--craie);
  font-family: var(--f-texte);
  font-size: var(--t-texte);
  line-height: 1.6;
  /* Jersey 15 n'a qu'une graisse, la 400 : jamais de gras simulé (un 700
     demandé s'affiche en 400) ; Libre Caslon Text a son vrai gras et son
     vrai italique */
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  scroll-padding-top: 16px;
}
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }
/* la pièce, la nuit (img/nuit.png, 360 x 225, agrandie au pixel près) :
   une image fixe derrière la page, les stores en haut à droite */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--nuit) url("img/nuit.png") 85% 0 / cover no-repeat;
  image-rendering: pixelated;
}
main { flex: 1 0 auto; }
img { image-rendering: auto; max-width: 100%; height: auto; }   /* les captures restent nettes */
img.pixel { image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; }
[hidden] { display: none !important; }
h1, h2 { font-family: var(--f-titre); font-weight: 400; }
h3, h4 { font-family: var(--f-titre); font-weight: 400; }
p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
b, strong { font-weight: 700; }
sup { line-height: 0; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 1px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* le lien d'évitement : caché jusqu'au clavier, puis une étiquette ambre */
.evitement {
  position: absolute; left: var(--marge); top: 8px; z-index: 10;
  padding: 10px 14px; background: var(--signal); color: var(--sur-signal);
  font-family: var(--f-titre); font-size: var(--t-etiquette); text-decoration: none;
  transform: translateY(-160%);
}
.evitement:focus { transform: none; }

/* ==================================================================
   L'EN-TÊTE : le logo, et le chemin du retour. Rien d'autre.
   ================================================================== */
.entete {
  display: flex; align-items: center;
  padding: max(14px, env(safe-area-inset-top)) var(--marge) 0;
}
.retour {
  display: inline-flex; align-items: center; gap: 16px;
  min-height: 48px;
  color: var(--craie-2); text-decoration: none;
  font-family: var(--f-titre); font-size: var(--t-etiquette); line-height: 1.2;
}
.retour .logo { display: block; width: 92px; height: auto; }
.retour-mot {
  display: inline-flex; align-items: center; gap: 10px;
  padding-left: 16px; border-left: 1px solid var(--nuit-filet);
  min-height: 34px;
}
.retour-mot img { width: 32px; height: 26px; flex: none; }
@media (hover: hover) { .retour:hover .retour-mot { color: var(--signal); } }
.retour:focus-visible { outline-offset: 6px; }

/* ==================================================================
   LE SALON : la zone où l'on pose le document
   ================================================================== */
.salon {
  width: 100%;
  padding: clamp(40px, 7vh, 72px) clamp(8px, 3vw, 32px) 0;
}

/* --- la chemise cartonnée (un dossier) : le papier posé dedans, un
   onglet qui porte le nom du dossier --- */
.chemise {
  position: relative;
  max-width: calc(var(--feuille) + 2 * var(--bord-chemise));
  margin: 0 auto;
  padding: var(--bord-chemise);
}
/* le carton lui-même, dessiné à part (le papier reste au-dessus) */
.chemise::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: var(--chemise) url("img/grain-papier.png") 0 0 / 256px 256px;
  border: 1px solid var(--chemise-bord);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 22px 46px rgba(0, 0, 0, 0.55);
  image-rendering: pixelated;
}
.chemise-onglet {
  position: absolute; z-index: 0; bottom: calc(100% - 1px); left: clamp(14px, 4vw, 40px);
  margin: 0; padding: 7px 12px 4px;
  background: var(--chemise) url("img/grain-papier.png") 0 0 / 256px 256px;
  border: 1px solid var(--chemise-bord); border-bottom: 0;
  border-top-left-radius: 7px; border-top-right-radius: 7px;
  image-rendering: pixelated;
  color: var(--encre);
  font-family: var(--f-titre); font-size: var(--t-etiquette); line-height: 1.2;
  letter-spacing: calc(2em / 27); text-transform: uppercase;   /* deux pixels de police entre les lettres : elles restent sur la grille */
}
.chemise-onglet span { display: block; padding: 4px 10px 3px; background: var(--papier-clair); border: 1px solid rgba(27, 24, 18, 0.18); }
.chemise > .document { position: relative; z-index: 1; }

/* --- le papier --- */
.document {
  position: relative;
  max-width: var(--feuille);
  margin: 0 auto;
  padding: var(--pad-y) var(--pad-x) calc(var(--pad-y) + 8px);
  color: var(--encre);
  /* le feu est à gauche : le papier s'éclaire de ce côté, plus chaud que
     sous la lampe du bureau, et s'assombrit à peine vers le bas ; le
     grain par-dessus */
  background:
    url("img/grain-papier.png") 0 0 / 256px 256px,
    radial-gradient(120% 70% at 4% 6%, rgba(255, 208, 150, 0.32), rgba(255, 208, 150, 0) 62%),
    linear-gradient(to bottom, rgba(60, 44, 20, 0) 55%, rgba(60, 44, 20, 0.07)),
    var(--papier);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.22), 0 8px 18px rgba(0, 0, 0, 0.28);
  image-rendering: pixelated;             /* le grain, au pixel près ; les captures se remettent en auto */
}
/* le document seul, sans chemise (pages légales) */
.document-simple { margin-top: 0; }
.document :focus-visible { outline-color: var(--encre); }

/* --- la tête du document --- */
.doc-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: start; }
.doc-tete > * { grid-column: 1; }
.doc-objet {
  grid-column: 2; grid-row: 1 / span 3; justify-self: end;
  width: 54px; height: 90px; margin-top: 6px;
}
/* Les titres en Jersey 15 sont composés pleins (line-height: 1, 27
   pixels de police d'une ligne à l'autre) : sa boîte de ligne fait déjà
   tout l'em (1050 unités au-dessus de la ligne de base, 300 dessous) pour
   des capitales de 750 et des accents qui montent à 1000. À 1,08 ou 1,2,
   un titre sur deux lignes se lisait comme deux lignes séparées
   (« Comment / ça se passe »). Pleins, rien ne se touche : le « ç » du
   dessus (-250) et le « É » du dessous (1000) gardent 100 unités. */
.document h1 {
  margin: 0 0 18px;
  font-size: var(--t-h1); line-height: 1;
  text-wrap: balance;
}
.chapeau { font-size: var(--t-chapeau); line-height: 1.45; max-width: 30em; }

/* le sommaire « sur cette page » : un index tapé */
.sommaire { margin-top: 26px; }
.sommaire ol { display: flex; flex-wrap: wrap; gap: 0 26px; }
.sommaire a {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  font-family: var(--f-titre); font-size: var(--t-etiquette);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.sommaire a:hover { text-decoration-thickness: 2px; }
.sommaire .n { color: var(--encre-2); text-decoration: none; }

/* --- une partie du document : un double filet tapé, un numéro, un titre --- */
.partie {
  position: relative;
  margin-top: clamp(44px, 6vw, 64px);
  padding-top: clamp(26px, 3.6vw, 36px);
  border-top: 3px double var(--encre);
}
.partie-titre {
  display: flex; align-items: baseline; gap: 14px;
  margin: 0 0 12px;
  font-size: var(--t-h2); line-height: 1;   /* composé plein, comme le h1 */
}
/* le numéro dans sa case carrée (18 px dans 27) : posé sur la ligne de
   base du titre, il remonte de 2 px pour que son milieu tombe sur celui
   des capitales du titre (2,5 px plus haut ; 2 px restent un nombre entier
   de pixels de l'écran) */
.partie-n {
  flex: none;
  font-size: var(--t-etiquette); line-height: 1; padding: 3px 8px;
  border: 1.5px solid currentColor;
  transform: translateY(-2px);
}
.document h3 {
  margin: 34px 0 10px;
  font-size: var(--t-etiquette); line-height: 1.3;
  letter-spacing: calc(2em / 27); text-transform: uppercase;
}
.document p + p { margin-top: 0.8em; }

/* une petite ligne tapée au-dessus d'un titre (« 404 », une date) */
.surtitre {
  margin: 0 0 10px; color: var(--encre-2);
  font-family: var(--f-titre); font-size: var(--t-etiquette); letter-spacing: calc(2em / 27); text-transform: uppercase;
}

/* le texte long (pages légales) : des titres tapés sous un filet simple,
   des paragraphes, des listes à petits carrés */
.prose { margin-top: clamp(30px, 4.4vw, 44px); }
.prose h2 {
  margin: clamp(34px, 4.6vw, 46px) 0 10px; padding-top: 16px;
  border-top: 1px solid var(--encre);
  font-size: var(--t-h2); line-height: 1;   /* composé plein, comme le h1 */
}
.prose > h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 26px; }
.prose ul, .prose ol { margin: 0.7em 0; }
.prose p + ul, .prose p + ol, .prose ul + p, .prose ol + p { margin-top: 0.8em; }
.prose ul li { position: relative; padding: 3px 0 3px 22px; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: calc(3px + 0.62em); width: 6px; height: 6px; background: var(--encre); }
.prose ol { list-style: decimal; padding-left: 1.5em; }
.prose ol li { padding: 3px 0 3px 4px; }

/* la phrase qui ferme une partie, un peu plus grande */
.note { margin-top: clamp(32px, 5vw, 48px); max-width: 28em; font-size: var(--t-chapeau); line-height: 1.45; font-style: italic; }

/* --- un lien qui mène à un autre document : le petit carré des
   étiquettes de l'accueil devant --- */
.renvoi {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-family: var(--f-titre); font-size: var(--t-etiquette);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.ligne-renvoi { margin-top: 14px; }
.renvoi::before { content: ""; flex: none; width: 7px; height: 7px; background: currentColor; }
.renvoi:hover { text-decoration-thickness: 2px; }
/* un lien dans une phrase : souligné fin. 12 px de marge en haut et en
   bas (marge d'un élément en ligne : ni la ligne ni la mise en page ne
   bougent) font une zone de 44 px pour le doigt. Au clavier, un anneau de
   44 px barrerait les lignes voisines : le lien s'imprime en négatif
   (encre pleine, lettres papier) sur la seule hauteur des lettres.
   Harmonisé le 20/10 : chaque page avait sa variante (4, 12 ou 13 px ;
   anneau, anneau décalé ou négatif). Deux liens sur deux lignes qui se
   suivent se partagent quelques pixels de zone : le second l'emporte. */
/* 12 px, un peu plus dans un petit corps (15 px : la boîte des lettres de
   Caslon fait 1,27 em, 19 px ; 12 px n'en donnaient que 43) */
.document p a:not([class]), .document dd a:not([class]) { padding-block: max(12px, calc(23px - 0.64em)); }
.document p a:not([class]), .document dd a:not([class]), .document figcaption a {
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.document p a:not([class]):hover, .document dd a:not([class]):hover, .document figcaption a:hover { text-decoration-thickness: 2px; }
.document p a:not([class]):focus-visible, .document dd a:not([class]):focus-visible {
  outline: none;
  color: var(--papier);
  background: linear-gradient(var(--encre), var(--encre)) 0 50% / 100% calc(100% - 22px) no-repeat;
  text-decoration: none;
}
/* un lien seul dans sa case ou au bout d'une ligne (un numéro de
   téléphone, une adresse) : sa propre zone de 44 px */
.lien-seul {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.lien-seul:hover { text-decoration-thickness: 2px; }
/* un mot composé qui ne se coupe pas à son trait d'union (« vous-même »,
   « Dites-nous », « 2004-575 ») */
.insecable { white-space: nowrap; }

/* --- le bouton : une touche à l'encre ; la lampe l'éclaire au survol --- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 50px; padding: 0 24px 0 20px;
  border: 0; border-radius: 2px;
  background: var(--encre); color: var(--papier);
  font-family: var(--f-titre); font-size: var(--t-etiquette); line-height: 1.2;
  text-decoration: none; cursor: pointer;
}
.bouton::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--signal); }
/* le survol, à la souris seulement (amn-style) : au doigt, l'ambre
   restait collé sur la touche après le toucher (relevé sur prix) */
@media (hover: hover) {
  .bouton:hover { background: var(--signal); color: var(--sur-signal); }
  .bouton:hover::before { background: var(--sur-signal); }
}
.bouton:active { transform: translateY(1px); }
.bouton[disabled] { opacity: 0.6; cursor: progress; }
.boutons { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }

/* ==================================================================
   LES COMPOSANTS DU PAPIER
   ================================================================== */

/* un index tapé, numéroté, en colonnes (les onze modules) */
.index-tape {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px;
  margin-top: 22px;
  border-top: 1px solid var(--encre);
  font-family: var(--f-titre); font-size: var(--t-etiquette);
}
.index-tape li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0 9px; border-bottom: 1px dotted var(--pointille); }
.index-tape .n { flex: none; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.index-tape b { font-weight: 400; }

/* des lignes « fait ........ détail », comme un formulaire tapé. Les
   points de conduite sont un élément de la grille (::before) posé sur la
   ligne de base : le <dt> garde son texte tel quel (1<sup>re</sup> année). */
.lignes { margin-top: 18px; border-top: 1px solid var(--encre); }
.lignes > div {
  display: grid; grid-template-columns: fit-content(14em) minmax(20px, 1fr) minmax(0, 58%);
  align-items: baseline;
  padding: 11px 0 10px; border-bottom: 1px dotted var(--pointille);
}
.lignes > div::before {
  content: ""; grid-column: 2; grid-row: 1; height: 1px; margin: 0 12px;
  border-bottom: 2px dotted var(--pointille); transform: translateY(-4px);
}
.lignes dt { grid-column: 1; grid-row: 1; font-family: var(--f-titre); font-size: var(--t-etiquette); line-height: 1.4; }
/* l'exposant tapé (« 1re année ») : 13,5 px, la moitié de la grille de
   Jersey 15 (un pixel de police par pixel de l'écran à 2 pixels par
   px CSS) ; la seule taille hors de 18, 27, 36 et 54 */
.lignes dt sup { font-size: 13.5px; }
.lignes dd { grid-column: 3; grid-row: 1; margin: 0; line-height: 1.5; }

/* une liste à petits carrés */
.points li { position: relative; padding: 7px 0 7px 22px; }
.points li::before { content: ""; position: absolute; left: 2px; top: calc(7px + 0.62em); width: 7px; height: 7px; background: var(--encre); }

/* deux colonnes côte à côte (une seule au téléphone) */
.deux-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.deux-colonnes h3 { margin-top: 26px; }

/* un relevé : une étiquette tapée à gauche, la chose et son prix à droite */
.releve { margin-top: 16px; border-top: 1px solid var(--encre); }
.releve li {
  display: grid; grid-template-columns: 8.5em minmax(0, 1fr); column-gap: 18px;
  padding: 14px 0 13px; border-bottom: 1px dotted var(--pointille);
}
.releve-quoi { font-weight: 700; }
.releve p + p { margin-top: 2px; }

/* une marque tapée dans un cadre : COMPRIS, EN PLUS. En vert quand elle
   dit « compris » (c'est le seul sens du vert ici). */
.marque {
  justify-self: start; align-self: start;
  display: inline-block; margin-top: 2px;
  padding: 3px 7px 2px;
  border: 1.5px solid currentColor;
  font-family: var(--f-titre); font-size: var(--t-etiquette); line-height: 1.3;
  letter-spacing: calc(2em / 27); text-transform: uppercase;
}
.marque-vert { color: var(--vert); }

/* un tampon : un fait vrai déjà écrit à côté, donc caché aux lecteurs
   d'écran (aria-hidden). L'encre est usée par un masque (img/encre.png). */
.tampon {
  display: inline-block;
  padding: 7px 12px 6px;
  border: 3px double currentColor;
  color: var(--vert);
  font-family: var(--f-titre); font-size: var(--t-etiquette); line-height: 1.25;
  letter-spacing: calc(3em / 27); text-transform: uppercase; text-align: center;
  transform: rotate(-4deg);
  -webkit-mask-image: url("img/encre.png"); mask-image: url("img/encre.png");
  -webkit-mask-size: 64px 64px; mask-size: 64px 64px;
  user-select: none;
}
/* dans une partie : au téléphone, sous le paragraphe qui dit la même
   chose ; plus large, à droite du titre de la partie, sur sa ligne (le
   titre doit être court, le tampon tient sur une ligne) */
.partie > .tampon { margin: 16px 0 4px 4px; }
@media (min-width: 761px) {
  .partie > .tampon {
    position: absolute; right: 6px; margin: 0;
    top: calc(clamp(26px, 3.6vw, 36px) + var(--t-h2) * 0.575);
    transform: translateY(-50%) rotate(-3deg);
    white-space: nowrap;
  }
}

/* une pièce jointe : une capture tirée sur papier photo, tenue par deux coins */
.piece { margin-top: clamp(30px, 4.6vw, 44px); }
.piece-cadre {
  position: relative; display: block;
  padding: 6px; background: #f7f3e8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 6px 14px rgba(40, 28, 10, 0.18);
}
.piece-cadre img { display: block; width: 100%; height: auto; background: #10151a; }
.piece-cadre::before, .piece-cadre::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; }
.piece-cadre::before { left: -3px; top: -3px; border-width: 22px 22px 0 0; border-color: var(--encre) transparent transparent transparent; }
.piece-cadre::after { right: -3px; bottom: -3px; border-width: 0 0 22px 22px; border-color: transparent transparent var(--encre) transparent; }
.piece figcaption { margin-top: 12px; font-size: var(--t-petit); line-height: 1.5; color: var(--encre-2); font-style: italic; }
/* « En ligne : adresse » sur sa propre ligne sous la légende : le lien y
   prend 44 px de haut sans écarter les lignes de la phrase (il en
   faisait 27) */
.piece-adresse { display: block; }
.document .piece-adresse a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }

/* l'appel qui ferme le document */
.suite { margin-top: clamp(48px, 7vw, 72px); padding-top: clamp(26px, 3.6vw, 36px); border-top: 3px double var(--encre); }
.suite h2 { margin: 0 0 10px; font-size: var(--t-h2); line-height: 1; }
/* la petite ligne sous un bouton d'appel (« Devis gratuit, rien à payer
   d'avance. ») : la même partout ; sans lien, le bouton juste au-dessus
   mène déjà à la demande */
.document .mention { margin-top: 18px; max-width: 34em; color: var(--encre-2); font-size: 16px; line-height: 1.5; text-wrap: pretty; }

/* le visa : la date tapée qui ferme un document (rapport, page légale) ;
   un tampon dateur peut la répéter à côté */
.visa {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px;
  margin-top: clamp(36px, 5vw, 48px);
  padding-top: 18px;
  border-top: 1px dotted var(--pointille);
}
.document .visa p + p { margin-top: 0; }
.visa-date { color: var(--encre-2); font-family: var(--f-titre); font-size: var(--t-etiquette); line-height: 1.4; letter-spacing: calc(1em / 27); }
.visa .tampon { margin-right: 4px; }

/* --- la liasse : quelques feuilles l'une sur l'autre (le rapport de
   sécurité, les pages légales). Les deux du dessous dépassent à peine,
   en bas et sur les côtés : décalées, jamais tournées (0,5° sur une page
   de 4 000 px décale le haut de 20 px). isolation : elles restent
   au-dessus de la nuit. Ce qui les tient (agrafe, trombone) est propre à
   la page. --- */
.liasse {
  position: relative; isolation: isolate;
  max-width: var(--feuille);
  margin: 0 auto;
}
.liasse::before, .liasse::after {
  content: ""; position: absolute; inset: 0;
  background: url("img/grain-papier.png") 0 0 / 256px 256px, var(--feuille-dessous, #e1d8c0);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.22), 0 8px 18px rgba(0, 0, 0, 0.3);
  image-rendering: pixelated;
  pointer-events: none;
}
.liasse::before { z-index: 1; transform: translate(5px, 6px); --feuille-dessous: #e2d9c1; }
.liasse::after  { z-index: 0; transform: translate(-3px, 12px); --feuille-dessous: #d3c8ac; }
.liasse > .document { z-index: 2; }

/* ---------- formulaires (contact, la question de /prix) ---------- */
.champs { display: grid; gap: 22px; }
.champ { display: grid; gap: 8px; }
.champ label { font-family: var(--f-titre); font-size: var(--t-etiquette); line-height: 1.35; }
.champ .aide { display: block; margin-top: 3px; font-family: var(--f-texte); font-size: var(--t-petit); line-height: 1.45; color: var(--encre-2); }
.champ input, .champ textarea, .champ select, .document input[type="search"] {
  width: 100%; min-height: 48px; padding: 10px 12px;
  border: 0; border-bottom: 2px solid var(--encre); border-radius: 0;
  background: rgba(255, 252, 242, 0.55); color: var(--encre);
  font-family: var(--f-titre); font-size: var(--t-etiquette); line-height: 1.4;
}
.champ textarea { min-height: 160px; resize: vertical; }
.champ input:focus-visible, .champ textarea:focus-visible, .champ select:focus-visible, .document input[type="search"]:focus-visible {
  outline: 2px solid var(--encre); outline-offset: 2px; background: #fffcf2;
}
.champ [aria-invalid="true"] { border-bottom-color: var(--alerte); }
::placeholder { color: #6f6656; opacity: 1; }
.message { padding: 16px 18px; border: 1.5px solid var(--encre); background: rgba(255, 252, 242, 0.5); }
.message h2 { margin: 0 0 6px; font-size: var(--t-h2); line-height: 1; }
.message-erreur { border-color: var(--alerte); color: var(--alerte); }
.message-erreur a { color: inherit; }
.piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- la bascule mensuel / annuel : deux touches ---------- */
.bascule { display: inline-flex; gap: 0; border: 1.5px solid var(--encre); }
.bascule-opt {
  min-height: 44px; padding: 0 16px; border: 0; background: transparent; color: var(--encre);
  font-family: var(--f-titre); font-size: var(--t-etiquette); cursor: pointer;
}
.bascule-opt + .bascule-opt { border-left: 1.5px solid var(--encre); }
.bascule-opt.is-actif, .bascule-opt[aria-pressed="true"] { background: var(--encre); color: var(--papier); }

/* ---------- questions dépliables : une case vide, pleine une fois ouverte ---------- */
.faq { border-top: 1px solid var(--encre); }
.faq details { border-bottom: 1px dotted var(--pointille); }
.faq summary {
  display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 10px 0;
  font-family: var(--f-titre); font-size: var(--t-etiquette); line-height: 1.35; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: ""; flex: none; width: 11px; height: 11px; border: 1.5px solid var(--encre); }
.faq details[open] summary::before { background: var(--encre); }
.faq details > :not(summary) { padding: 0 0 16px 25px; }

/* ==================================================================
   DANS LE SALON : les autres documents, après le papier
   ================================================================== */
.dans-le-salon {
  width: min(100% - 2 * clamp(8px, 3vw, 32px), var(--feuille) + 2 * var(--bord-chemise));
  margin: clamp(44px, 7vh, 72px) auto 0;
}
.dans-le-salon-titre {
  margin: 0 0 14px;
  color: var(--craie-2);
  font-family: var(--f-titre); font-size: var(--t-etiquette); letter-spacing: calc(2em / 27); text-transform: uppercase;
}
.dans-le-salon ul { display: flex; flex-wrap: wrap; gap: 10px 12px; }
/* l'étiquette d'un objet, comme sur l'accueil : un carré gris, la nuit
   derrière ; désignée, elle s'allume en ambre */
.etiquette {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 8px 16px 9px 13px;
  background: var(--nuit-2); color: var(--craie);
  border: 1px solid var(--nuit-filet);
  font-family: var(--f-titre); font-size: var(--t-etiquette); line-height: 1.25;
  text-decoration: none;
}
.etiquette::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--craie-3); }
/* au-delà du téléphone, des étiquettes un peu serrées : cinq (prix en
   lie cinq) tiennent sur un rang de 762 px, quatre dès 700 px ; les mêmes
   mesures sur toutes les pages */
@media (min-width: 601px) {
  .dans-le-salon ul { column-gap: 8px; }
  .etiquette { padding-left: 11px; padding-right: 13px; }
}
.etiquette:focus-visible { background: var(--signal); border-color: var(--signal); color: var(--sur-signal); }
.etiquette:focus-visible::before { background: var(--sur-signal); }
@media (hover: hover) {
  .etiquette:hover { background: var(--signal); border-color: var(--signal); color: var(--sur-signal); }
  .etiquette:hover::before { background: var(--sur-signal); }
}
/* le chemin du retour, sous les documents, séparé d'eux : la tête
   d'Ajmani et ses mots, comme dans l'en-tête ; puis la porte du bureau
   d'AMN DevSec (img/porte.png), l'autre côté de la pièce */
.dans-le-salon-retour { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 16px; }
.retour-bas.vers-bureau img { width: 24px; height: 36px; margin-block: -6px; }
.vers-bureau-qui { color: var(--craie-3); }
.retour-bas {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--craie-2);
  font-family: var(--f-titre); font-size: var(--t-etiquette); line-height: 1.2;
  text-decoration: underline; text-decoration-color: rgba(236, 231, 220, 0.35); text-underline-offset: 4px;
}
.retour-bas img { width: 32px; height: 26px; flex: none; }
@media (hover: hover) { .retour-bas:hover { color: var(--signal); text-decoration-color: currentColor; } }

/* ==================================================================
   LE PIED : le bord du meuble, en noyer, et sa plaque
   ================================================================== */
.pied {
  margin-top: clamp(48px, 8vh, 80px);
  background: var(--noyer) url("img/noyer.png") 0 0 / 256px 64px repeat;
  image-rendering: pixelated;
  border-top: 1px solid #4a3020;    /* le chant du meuble, un noyer plus clair ; pas d'ambre ici (un filet de couleur qui ne signale rien) */
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.6);
  color: var(--craie-2);
  font-family: var(--f-titre); font-size: var(--t-etiquette);
}
.pied-in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px;
  padding: 20px var(--marge) max(22px, env(safe-area-inset-bottom));
}
.pied nav ul { display: flex; flex-wrap: wrap; gap: 0 24px; }
.pied a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--craie); text-decoration: underline; text-decoration-color: rgba(236, 231, 220, 0.35); text-underline-offset: 4px; }
@media (hover: hover) { .pied a:hover { color: var(--signal); text-decoration-color: currentColor; } }
.pied a[aria-current="page"] { text-decoration: none; color: var(--craie-2); }
@media (hover: hover) { .pied a[aria-current="page"]:hover { color: var(--signal); } }
/* la plaque, comme celle de la porte d'Ajmani : laiton, lettres gravées */
.plaque {
  display: inline-block; padding: 5px 14px 4px;
  background: #a9863f; color: #1a1208;
  border: 1px solid #6e5524; box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.45), 0 1px 0 rgba(0, 0, 0, 0.5);
  letter-spacing: calc(2em / 27); white-space: nowrap;
}

/* ==================================================================
   TÉLÉPHONE
   ================================================================== */
@media (max-width: 760px) {
  .index-tape { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .deux-colonnes { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .retour { gap: 12px; }
  .retour .logo { width: 80px; }
  .retour-mot { padding-left: 12px; }
  .doc-objet { width: 36px; height: 60px; margin-top: 2px; }
  .lignes > div { grid-template-columns: 1fr; row-gap: 2px; }
  .lignes > div::before { display: none; }
  .lignes dt, .lignes dd { grid-column: 1; grid-row: auto; }
  .partie { margin-top: 40px; }
  .sommaire { margin-top: 18px; }
  .tampon { padding: 5px 9px 4px; }
  .releve li { grid-template-columns: 1fr; row-gap: 8px; }
  /* au téléphone, les documents deviennent un index tapé sur la nuit : une
     ligne de 52 px chacun, un filet entre deux (cinq boîtes pleine largeur
     pesaient comme une pile de boutons) ; l'ambre reste au doigt et au
     clavier */
  .dans-le-salon ul { flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--nuit-filet); }
  .etiquette { width: 100%; min-height: 52px; padding: 10px 6px; background: transparent; border: 0; border-bottom: 1px solid var(--nuit-filet); }
  .pied-in { flex-direction: column; align-items: flex-start; }
  .pied nav ul { flex-direction: column; }
  .chemise-onglet { padding: 6px 9px 3px; }
  .liasse::before { transform: translate(3px, 5px); }
  .liasse::after  { transform: translate(-2px, 9px); }
}
@media (max-width: 359px) {
  :root { --t-h1: 27px; }
  .index-tape { grid-template-columns: 1fr; }
  .retour-mot img { display: none; }
}

/* ==================================================================
   MOUVEMENT RÉDUIT, IMPRESSION
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .bouton:active { transform: none; }
}
@media print {
  html { background: none; color: #000; }
  .entete .retour-mot, .dans-le-salon, .pied nav, .evitement { display: none; }
  .chemise::before, .chemise-onglet, .liasse::before, .liasse::after { display: none; }
  .document { background: none; box-shadow: none; padding: 0; }
  .pied { background: none; border: 0; color: #000; }
}

/* Installer le site comme une application (assets/installer.js) */
.touche-installer { min-height: 44px; padding: 0 14px; font: inherit; color: var(--craie); background: transparent; border: 1px solid rgba(236, 231, 220, 0.35); cursor: pointer; }
.touche-installer[hidden] { display: none; }
@media (hover: hover) { .touche-installer:hover { color: var(--signal); border-color: var(--signal); } }
.touche-installer:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }