/* =====================================================================
   LES PAGES DU PIED DE PAGE : conditions d'utilisation (hub/cgu.html), confidentialité (hub/confidentialite.html),
   contact (hub/contact.html). Chargée après hub/charte.css et hub/hub.css (feuille de papier, polices, boutons).
   Le formulaire de contact a une taille fixe : rien ne bouge quand un message s'affiche.
   ===================================================================== */
body.page{padding:24px max(12px,env(safe-area-inset-right,0px)) 60px max(12px,env(safe-area-inset-left,0px))}
.page .sheet{width:min(820px,100%);gap:14px;padding:22px 28px 22px}
.pTete{display:grid;gap:10px}
.pRetour{display:inline-flex;align-items:center;gap:6px;justify-self:start;height:34px;padding:0 14px;border:2px solid var(--c-ink);border-radius:9px 12px 8px 13px/12px 8px 13px 9px;
  background:rgba(255,250,235,.8);box-shadow:2px 3px 0 rgba(30,18,8,.45);font-weight:700;font-size:14px;text-decoration:none;color:var(--c-ink)}
.pRetour:hover{background:#ffe3a0}
.page h1{font-size:clamp(30px,6vw,44px)}
.pNav{display:flex;flex-wrap:wrap;gap:8px}
.pNav a{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:2px solid var(--c-ink);border-radius:16px;background:rgba(255,250,235,.6);font-weight:700;font-size:13.5px;text-decoration:none;color:var(--c-ink)}
.pNav a[aria-current="page"]{background:linear-gradient(180deg,#4C8C5C,var(--c-vert));color:var(--c-creme);box-shadow:2px 3px 0 var(--c-ink)}
.pAvis{margin:0;padding:10px 14px;border:2px dashed var(--c-brun);border-radius:10px;background:rgba(255,248,226,.55);font-size:14px;font-weight:700;color:#5a4128}
.pTexte{display:grid;gap:4px;font-size:15.5px;line-height:1.55;color:#3a2410}
.pTexte h2{margin:16px 0 4px;font-size:23px}
.pTexte h3{margin:10px 0 0;font-size:16px;font-weight:700;color:#8a4318}
.pTexte p,.pTexte ul{margin:0 0 6px}
.pTexte ul{padding-left:22px}
.pTexte li{margin:2px 0}
.pTexte code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em;background:rgba(255,248,226,.8);border:1px solid rgba(73,53,38,.25);border-radius:4px;padding:0 4px;overflow-wrap:anywhere}
.pTexte table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px;margin:4px 0 8px}
.pTexte th,.pTexte td{text-align:left;vertical-align:top;padding:6px 8px;border-bottom:1.5px dashed rgba(73,53,38,.3);overflow-wrap:anywhere}
.pTexte th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--t2);border-bottom:2px solid rgba(73,53,38,.45)}
.pTexte a{color:#8a4318;font-weight:700}
.pMaj{margin:8px 0 0;font-size:12.5px;color:var(--t2);font-weight:700}

/* ---- le formulaire de contact (taille fixe) ---- */
.cForm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 14px;margin:0}
.cChamp{display:grid;grid-template-rows:20px 40px 16px;gap:2px;min-width:0}
.cChamp.large{grid-column:1/-1}
.cChamp>span{font-size:13px;font-weight:700;color:#5a4128;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}
.cChamp small{font-size:11.5px;line-height:16px;color:var(--t2);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cForm input,.cForm select,.cForm textarea{width:100%;min-width:0;height:40px;padding:6px 10px;font:inherit;font-size:15px;color:var(--c-ink);
  background:#fffaf0;border:2px solid var(--c-ink);border-radius:8px 10px 7px 11px/10px 7px 11px 8px;box-shadow:inset 0 2px 0 rgba(73,53,38,.12)}
.cForm textarea{height:180px;resize:none;line-height:1.4}
.cChamp.msg{grid-template-rows:20px 180px 16px}
.cForm input:focus-visible,.cForm select:focus-visible,.cForm textarea:focus-visible{outline:3px solid var(--ochre);outline-offset:1px}
.cQuestion{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:4px 14px;align-items:end;padding:10px 12px;border:2px dashed var(--c-brun);border-radius:10px;background:rgba(255,248,226,.5)}
.cQuestion .cQ{grid-column:1/-1;height:40px;font-size:14px;font-weight:700;color:#3a2410;line-height:20px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.cQuestion small{font-size:11.5px;color:var(--t2);font-weight:700;line-height:16px;height:32px;overflow:hidden}
/* le champ piège : invisible pour les humains (et pour les lecteurs d'écran), mais présent dans la page */
.cPiege{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
.cBas{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:12px;align-items:center}
.cEtat{height:44px;font-size:13.5px;font-weight:700;line-height:22px;color:#5a4128;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.cEtat.ok{color:var(--c-vert)}.cEtat.ko{color:var(--c-rouge)}
.cEnvoyer{height:44px;width:100%;font-size:19px}
.cEnvoyer[disabled]{opacity:.55;cursor:default}

@media (max-width:640px){
  body.page{padding:12px 8px 40px}
  .page .sheet{padding:16px 14px 16px}
  html body.nuitUI.page .sheet{padding:17px 15px 17px}
  .pTexte{font-size:15px}
  .pTexte table{font-size:13px}
  .pTexte th,.pTexte td{padding:5px 4px}
  .pTexte td code{font-size:.78em}
  .cForm{grid-template-columns:minmax(0,1fr)}
  .cQuestion{grid-template-columns:minmax(0,1fr)}
  .cQuestion small{height:16px;white-space:nowrap;text-overflow:ellipsis}
  .cBas{grid-template-columns:minmax(0,1fr)}
  .cEnvoyer{order:-1}
}
.page h1{color:#c4601a;-webkit-text-stroke:1.6px var(--c-ink);paint-order:stroke fill;text-shadow:2px 3px 0 rgba(73,53,38,.35)}

/* =====================================================================
   DA « CARTE À LA LANTERNE » (oct. 2026) : les trois pages passent en nuit, comme le hub.
   ../socle/nuit-menus.css est chargé en DERNIER (variables --n-*, champs, .big crème) ; ici les retouches
   propres à ces pages. Mêmes tailles qu'avant : seules les couleurs, bordures et ombres changent.
   ===================================================================== */
html body.nuitUI.page{background:radial-gradient(ellipse 70% 40% at 50% 0%,rgba(243,198,107,.07),transparent 70%),var(--n-fond);color:var(--n-texte)}
html body.nuitUI.page .sheet{background:rgba(16,21,31,.94)!important;background-image:none!important;border:1.5px solid #252E40!important;border-radius:20px!important;
  box-shadow:0 20px 60px rgba(0,0,0,.45)!important;color:var(--n-texte);padding:23px 29px 23px}
/* (les bordures passent de 2,5 px à 1,5 px : le rembourrage compense, l'intérieur garde sa largeur) */
html body.nuitUI.page .sheet h1{font-size:clamp(30px,6vw,44px);color:var(--n-creme)!important;-webkit-text-stroke:0!important;paint-order:normal!important;text-shadow:none!important}
html body.nuitUI.page button:focus-visible,html body.nuitUI.page a:focus-visible,html body.nuitUI.page input:focus-visible,
html body.nuitUI.page select:focus-visible,html body.nuitUI.page textarea:focus-visible{outline:3px solid var(--n-lant);outline-offset:2px}
/* en-tête : retour en contour, onglets en pastilles (celui de la page en crème) */
html body.nuitUI.page .pRetour{background:rgba(16,21,31,.45)!important;color:var(--n-texte)!important;border:1.5px solid var(--n-trait2)!important;border-radius:999px!important;box-shadow:none!important}
html body.nuitUI.page .pRetour:hover{background:var(--n-case)!important}
html body.nuitUI.page .pNav a{background:var(--n-case)!important;color:var(--n-doux)!important;border:0!important;border-radius:999px!important;box-shadow:none!important}
html body.nuitUI.page .pNav a:hover{background:var(--n-case2)!important;color:var(--n-creme)!important}
html body.nuitUI.page .pNav a[aria-current="page"]{background:var(--n-creme)!important;color:#10151F!important}
html body.nuitUI.page .pAvis{background:transparent;border:1.5px dashed var(--n-trait2);border-radius:14px;color:var(--n-terre);padding:10.5px 14.5px}
/* le texte */
html body.nuitUI.page .pTexte{color:var(--n-doux)}
html body.nuitUI.page .pTexte h2{color:var(--n-creme)!important;-webkit-text-stroke:0!important;paint-order:normal!important;text-shadow:none!important}
html body.nuitUI.page .pTexte h3{color:var(--n-terre)!important}
html body.nuitUI.page .pTexte b{color:var(--n-creme)}
html body.nuitUI.page .pTexte a{color:var(--n-lant)}
html body.nuitUI.page .pTexte a:hover{color:var(--n-creme)}
html body.nuitUI.page .pTexte code{background:var(--n-case);border-color:var(--n-trait);color:var(--n-creme)}
html body.nuitUI.page .pTexte th{color:var(--n-gris);border-bottom-color:var(--n-trait2)}
html body.nuitUI.page .pTexte td{border-bottom-color:var(--n-trait)}
html body.nuitUI.page .pMaj{color:var(--n-gris)}
/* le formulaire : cases de nuit, bouton d'envoi crème (posé par le socle) */
html body.nuitUI.page .cChamp>span{color:var(--n-texte)}
html body.nuitUI.page .cChamp small,html body.nuitUI.page .cQuestion small{color:var(--n-gris)}
html body.nuitUI.page .cForm input,html body.nuitUI.page .cForm select,html body.nuitUI.page .cForm textarea{background:var(--n-case)!important;color:var(--n-creme)!important;
  border:1.5px solid var(--n-trait2)!important;border-radius:12px!important;box-shadow:none!important}
html body.nuitUI.page .cForm input::placeholder,html body.nuitUI.page .cForm textarea::placeholder{color:var(--n-sourd)}
html body.nuitUI.page .cForm select option{background:var(--n-case);color:var(--n-creme)}
html body.nuitUI.page .cQuestion{background:var(--n-pan);border:1.5px solid transparent;border-radius:14px;padding:10.5px 12.5px}
html body.nuitUI.page .cQuestion .cQ{color:var(--n-creme)}
html body.nuitUI.page .cEtat{color:var(--n-doux)}
html body.nuitUI.page .cEtat.ok{color:var(--n-vert)}
html body.nuitUI.page .cEtat.ko{color:#E8878B}
html body.nuitUI.page .cEnvoyer{font-size:19px!important}