:root {
  --encre: #14231E;
  --papier: #F3F1EC;
  --carte: #FBFAF7;
  --bord: #D8D3C7;
  --champ: #C9C3B6;
  --texte: #2C3A35;
  --doux: #4F5B56;
  --azur: #1F5FBF;
  --azur-fonce: #174C99;
  --azur-voile: #EEF3FB;
  --feu: #A8502A;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--papier);
  color: var(--encre);
  font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.5;
}
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--azur); outline-offset: 2px; }
#sable { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; pointer-events: none; z-index: 0; }
.entete, .scene, .pied { position: relative; z-index: 1; }
.entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 28px 48px; }
.marque { display: inline-flex; align-items: center; gap: 12px; color: var(--encre); text-decoration: none; }
.sceau-mini { width: 30px; height: 30px; }
.marque-nom { font-family: 'Cormorant Garamond', Garamond, serif; font-size: 22px; font-weight: 600; letter-spacing: 0.16em; }
.langues { display: flex; gap: 4px; }
.langues a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px; border-radius: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--doux); text-decoration: none; }
.langues a:hover { color: var(--encre); }
.langues a[aria-current="page"] { color: var(--encre); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.scene { flex: 1 0 auto; width: 100%; max-width: 760px; margin: 0 auto; padding: 24px 24px 56px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.sceau { width: 132px; height: 132px; }
.nom { margin: 0; font-family: 'Cormorant Garamond', Garamond, serif; font-size: clamp(2.25rem, 8vw, 6rem); font-weight: 500; letter-spacing: 0.16em; padding-left: 0.16em; line-height: 1; }
.signature { margin: 0; font-size: 1.375rem; font-weight: 600; line-height: 1.45; }
.definition { margin: 0; max-width: 600px; font-size: 1.0625rem; font-weight: 500; line-height: 1.65; color: var(--texte); }
.boite { width: 100%; max-width: 640px; margin-top: 8px; padding: 24px; display: flex; flex-direction: column; gap: 14px; text-align: left; background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; }
.boite-titre { font-size: 1rem; font-weight: 700; line-height: 1.45; color: var(--encre); }
.boite textarea, .boite input { width: 100%; font: inherit; font-size: 1rem; color: var(--encre); background: #FFFFFF; border: 1px solid var(--champ); border-radius: 10px; }
.boite textarea { min-height: 104px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.boite input { min-height: 48px; padding: 0 14px; }
.boite textarea:focus, .boite input:focus { border-color: var(--azur); }
.ligne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.champ { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.champ label { font-size: 0.875rem; font-weight: 600; color: var(--texte); }
.envoi { flex: 0 0 auto; min-height: 48px; padding: 0 22px; font: inherit; font-size: 1rem; font-weight: 700; color: #FFFFFF; background: var(--azur); border: 0; border-radius: 10px; cursor: pointer; }
.envoi:hover { background: var(--azur-fonce); }
.note { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--doux); }
.etat-travail { width: 100%; max-width: 640px; margin: 8px 0 0; padding: 28px 24px; font-size: 1.125rem; font-weight: 600; line-height: 1.5; color: var(--azur); }
.etat-attente { width: 100%; max-width: 640px; margin-top: 8px; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; background: var(--carte); border: 1px solid var(--azur); border-radius: 14px; }
.etat-attente p { margin: 0; line-height: 1.5; }
.etat-attente .fort { font-size: 1.125rem; font-weight: 700; color: var(--azur); }
.autre { min-height: 44px; padding: 0 18px; font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--azur); background: transparent; border: 1px solid var(--azur); border-radius: 10px; cursor: pointer; }
.autre:hover { background: var(--azur-voile); }
.pied { padding: 8px 24px 40px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.muse { margin: 0; font-family: 'Cormorant Garamond', Garamond, serif; font-size: 1.125rem; font-style: italic; line-height: 1.5; color: var(--doux); }
.muse cite { font-style: normal; }
.service { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--doux); }
@media (max-width: 600px) {
  .entete { padding: 20px 16px; }
  .scene { padding: 16px 16px 48px; }
  .boite { padding: 18px; }
  .sceau { width: 112px; height: 112px; }
}

/* Ajustements du 4 novembre 2026 */
.signature { text-wrap: balance; }
.definition, .note { text-wrap: pretty; }
.ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: end; }
.ligne .champ { display: contents; }
.ligne .champ label { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .ligne { grid-template-columns: minmax(0, 1fr); }
  .ligne .envoi { margin-top: 6px; }
}

/* Le site a lire */
.site { display: flex; flex-direction: column; gap: 6px; }
.site label { font-size: 0.875rem; font-weight: 600; color: var(--texte); }
.site .facultatif { font-weight: 500; color: var(--doux); }

/* Signature sur une ligne, definition a la mesure du titre */
.scene { max-width: 960px; }
.definition { max-width: 664px; text-wrap: balance; }

/* Le Fonds Patrimonial */
.definition a, .aller a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.definition a:hover, .aller a:hover { color: var(--encre); }
.fonds-titre { margin: 0; font-family: 'Cormorant Garamond', Garamond, serif; font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 500; letter-spacing: 0.04em; line-height: 1.1; }
.aller { margin: -8px 0 0; font-size: 0.9375rem; font-weight: 600; color: var(--texte); }
.liste-fonds { width: 100%; max-width: 860px; display: flex; flex-direction: column; gap: 36px; text-align: left; }
.famille { border-top: 1px solid var(--bord); padding-top: 20px; }
.famille h2, .proposer-titre { margin: 0 0 14px; font-family: 'Cormorant Garamond', Garamond, serif; font-size: 1.75rem; font-weight: 600; line-height: 1.2; }
.compte { margin-left: 10px; font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--doux); }
.liste { margin: 0; padding: 0; list-style: none; columns: 2 320px; column-gap: 40px; }
.liste li { break-inside: avoid; display: flex; gap: 12px; padding: 5px 0; font-size: 0.9375rem; line-height: 1.45; color: var(--texte); }
.annee { flex: 0 0 2.6em; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--doux); }
.auteur { font-weight: 600; color: var(--encre); }
.glose, .pays { display: block; font-size: 0.8125rem; color: var(--doux); }
.proposer { width: 100%; max-width: 640px; margin-top: 12px; display: flex; flex-direction: column; align-items: stretch; text-align: left; }
.proposer .boite { margin-top: 0; }
.boite form { display: flex; flex-direction: column; gap: 14px; }
.boite .actions { display: flex; justify-content: flex-end; }
.message, .connecte { margin: 0; line-height: 1.5; color: var(--texte); }
.connecte { font-size: 0.875rem; }
.lien-discret { padding: 0; font: inherit; color: var(--doux); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.merci { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.merci .fort { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.5; color: var(--azur); }
.erreur { margin: 0; font-size: 0.875rem; color: var(--feu); }

/* Le mot des Breviaires */
.intro-famille { margin: 0 0 18px; max-width: 760px; font-size: 0.9375rem; line-height: 1.7; color: var(--texte); text-wrap: pretty; }