/* Rutila, feuille de style du site public.
   Les valeurs viennent de maquette/Main.dc.html et de la charte : couleurs, graisses, tailles et
   espacements repris tels quels, sortis des styles en ligne pour tenir la CSP (style-src 'self').
   Aucun dégradé, aucune lueur, aucune ombre portée, aucun pointillé (interdits de la charte). */

/* ---------- Polices : hébergées ici, jamais chargées depuis Google (aucun traceur) ---------- */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700; /* police variable : un seul fichier couvre 400, 500 et 600 */
  font-display: swap;
  src: url("/static/polices/ibm-plex-sans-variable-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/polices/ibm-plex-mono-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/polices/ibm-plex-mono-500-latin.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  /* Palette figée (RUTILA-BRIEF.md, DECISIONS.md A-33) */
  --encre-tampon: #33363B;      /* marque : cachet, boutons principaux, liens */
  --graphite-profond: #16181C;  /* titres, appuis, état pressé */
  --encre: #16181A;             /* texte courant */
  --copie: #F7F7F6;             /* fond de page */
  --voile: #EBEBEA;             /* encadrés, survol */
  --surface: #FFFFFF;           /* cartes et feuilles posées sur la page */
  --graphite-clair: #A8ADB4;    /* marque sur fond sombre */
  --rouge-radiation: #B3261E;   /* suppression uniquement, jamais en bouton plein */
  --gris-etat: #6A6D72;         /* tampon SUSPENDU / En préparation, mention de pied */
  --lien-souligne: rgba(51, 54, 59, 0.35);
  --cadre-champ: #D3D3D1;          /* bordure des champs de saisie et des cases */
  --gris-inerte: #9A9DA1;          /* texte des liens non encore actifs, champs désactivés */
  --fond-desactive: #F0F0EF;       /* champ désactivé */
  --bouton-desactive: #E3E3E2;     /* bouton principal désactivé */
  --trait-fin: #E1E1E0;            /* séparateurs fins : onglets, lignes d'abonnement */

  /* Typographie */
  --police-texte: "IBM Plex Sans", system-ui, sans-serif;        /* ce qui s'adresse à la personne */
  --police-consigne: "IBM Plex Mono", ui-monospace, monospace;   /* ce qui est consigné */

  /* Espacements de la maquette (desktop) */
  --marge-page: 72px;
}

/* ---------- Base ---------- */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--copie);
  color: var(--encre);
  font-family: var(--police-texte);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--encre-tampon);
  text-decoration: none;
  border-bottom: 1px solid var(--lien-souligne);
}
a:hover, a:focus-visible {
  color: var(--graphite-profond);
  border-bottom-color: var(--graphite-profond);
}
a:focus-visible { outline: 2px solid var(--graphite-profond); outline-offset: 3px; }

.mono { font-family: var(--police-consigne); }

/* Double filet : deux traits de 1 px espacés de 3 px. Jamais de pointillé. */
.filet {
  border-top: 1px solid var(--encre-tampon);
  box-shadow: 0 -3px 0 -2px var(--encre-tampon);
}

/* Tampon d'état : mono 11 px, capitales, cadre 1,5 px currentColor, incliné de -2°. */
.tampon {
  display: inline-block;
  font-family: var(--police-consigne);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  padding: 3px 8px;
  transform: rotate(-2deg);
  white-space: nowrap; /* un tampon ne se coupe jamais en deux lignes */
  color: var(--encre-tampon);
}
.tampon-gris { color: var(--gris-etat); }

/* ---------- Structure de page ---------- */
.page {
  min-height: 100vh;
  min-height: 100dvh;      /* mobile : la hauteur visible, sans la barre d'adresse ; repli 100vh */
  display: flex;
  flex-direction: column;
}

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px var(--marge-page) 22px var(--marge-page);
}
.marque {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: none;
  color: var(--encre-tampon); /* le cachet prend currentColor */
}
.mot-symbole {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--graphite-profond);
}
.entete > .filet, .page > .filet:not(.pied) { margin: 0 var(--marge-page); } /* séparateur nu ; le pied gère sa marge */
.lien-entete { font-size: 15px; font-weight: 500; }

.pied {
  margin: 72px var(--marge-page) 0 var(--marge-page);
  padding: 20px 0 30px 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.liens-pied { display: flex; gap: 26px; font-size: 14px; flex-wrap: wrap; }
.mention-pied { font-size: 12px; letter-spacing: 0.04em; color: var(--gris-etat); }

/* ---------- Échelle d'espacement vertical du site : 24 / 48 / 96 ----------
   Trois crans, chacun avec un rôle, jamais une valeur « qui tombe bien » :
     24 px : à l'intérieur d'une section (titre → texte, surtitre → contenu, entre deux cartes) ;
     48 px : rattachement dans une section (un élément détaché de ce qui précède, mais qui lui
             appartient encore, comme la phrase d'accent sous la promesse) ;
     96 px : changement de section (et haut de page sous l'en-tête).
   Le pied reste la séparation la plus large : sa marge de 72 px s'ajoute au padding bas de la page.
   C'est l'échelle du SITE, pas un réglage de l'accueil. Seul l'accueil la suit pour l'instant :
   les valeurs des autres pages (.page-texte, .presentation, .compte, écrans centrés) lui sont
   antérieures, ce ne sont pas des exceptions voulues. Les ramener sur l'échelle quand on les touche. */

/* ---------- Accueil (Main.dc.html) ---------- */
.accueil {
  flex-grow: 1;
  padding: 96px var(--marge-page) 24px var(--marge-page); /* 96 : haut de page ; 24 + 72 du pied avant le pied */
  display: flex;
  flex-direction: column;
  gap: 96px;               /* changement de section */
}

.promesse {
  display: flex;
  flex-direction: column;
  gap: 24px;               /* interne à la section */
  max-width: 760px;
}
.promesse h1 {
  margin: 0;
  font-size: 52px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--graphite-profond);
  text-wrap: balance;
}
.chapeau {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  max-width: 620px;
  color: var(--encre);
}
.signature {
  margin: 24px 0 0 0;      /* 24 de gap + 24 de marge = 48 : rattachement à la promesse */
  padding-top: 9px;        /* espace sous le double filet (classe .filet) */
  width: fit-content;      /* le filet mesure la phrase, pas la colonne */
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--encre-tampon);
}

.applications { display: flex; flex-direction: column; gap: 24px; } /* interne à la section */
.surtitre {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-tampon);
}
.grille-applications {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;               /* interne à la section, aussi quand les cartes s'empilent */
  max-width: 900px;
}
.carte-application {
  background: var(--surface);
  color: inherit;          /* c'est un lien entier : le texte garde sa couleur */
  border: 1px solid var(--trait-fin); /* arête de la carte ; remplace aussi le soulignement de lien */
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.carte-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.carte-application:hover, .carte-application:focus-visible {
  background: var(--voile);
  border-color: var(--trait-fin); /* 0,2,0 bat a:hover (0,1,1) : l'arête ne s'assombrit pas au survol */
}
.carte-nom { font-size: 22px; font-weight: 600; color: var(--graphite-profond); }
.carte-application p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--encre); }

.principes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
  max-width: 1000px;
}
.principe { display: flex; flex-direction: column; gap: 8px; }
.principe h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--graphite-profond); }
.principe p { margin: 0; font-size: 15px; line-height: 1.55; }

/* ---------- Pages de texte : légales, contact, erreurs ----------
   Hors maquette : valeurs dérivées de l'accueil (mêmes couleurs, échelle réduite).
   Espacements antérieurs à l'échelle 24 / 48 / 96 (voir plus haut) : à y ramener. */
.page-texte {
  flex-grow: 1;
  padding: 56px var(--marge-page) 0 var(--marge-page);
  max-width: calc(760px + 2 * var(--marge-page));
}
.page-texte h1 {
  margin: 0 0 8px 0;
  font-size: 36px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--graphite-profond);
  text-wrap: balance;
}
.revision { margin: 0 0 32px 0; font-size: 12px; letter-spacing: 0.04em; color: var(--gris-etat); }
.chapeau-texte { margin: 0 0 12px 0; font-size: 18px; line-height: 1.6; max-width: 620px; }
.page-texte section { margin-top: 36px; }
.page-texte h2 { margin: 0 0 10px 0; font-size: 20px; font-weight: 600; color: var(--graphite-profond); }
.page-texte p { margin: 0 0 12px 0; font-size: 16px; line-height: 1.65; }
.page-texte .note { font-size: 14px; color: var(--gris-etat); }
.adresse-contact { font-family: var(--police-consigne); }
.adresse-contact-grande { font-size: 20px; }
.adresse-contact:empty { display: none; } /* rien à afficher tant que le script n'a pas tourné */

/* ---------- Barre du haut : applications, puis entrée du compte ---------- */
.navigation {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 15px;
  font-weight: 500;
  flex-wrap: wrap;
}
.navigation a { border-bottom-color: var(--lien-souligne); } /* soulignement au repos : le graphite seul ne dit pas « lien » */
.navigation a:hover, .navigation a:focus-visible { border-bottom-color: var(--graphite-profond); }
.navigation a[aria-current="page"] { color: var(--graphite-profond); border-bottom-color: var(--graphite-profond); }
.navigation-compte {
  display: flex;
  gap: 22px;
  margin-left: 14px;
  padding-left: 22px;
  border-left: 1px solid var(--trait-fin); /* sépare les applications de l'entrée du compte */
}

/* ---------- Écrans centrés : connexion, vérification, inscription (base_centre.html) ---------- */
.page-centree {
  min-height: 100vh;
  min-height: 100dvh;      /* mobile : la hauteur visible, sans la barre d'adresse ; repli 100vh */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 72px 24px 40px 24px;
}
.marque-centree { flex-direction: column; gap: 14px; margin-top: auto; } /* auto 1/2 : au-dessus du groupe marque + message */
.mot-symbole-centre { font-size: 17px; }
.bloc-centre {
  width: 100%;
  max-width: 420px;
  margin-bottom: auto;     /* auto 2/2 : sous le groupe marque + message, qui se centre d'un bloc */
  padding-top: 44px;       /* écart minimal garanti sous le cachet, même sans espace libre */
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.bloc-centre-large { max-width: 440px; padding-top: 40px; gap: 24px; } /* padding : une marge écraserait l'auto */
.titre-centre { margin: 0; font-size: 27px; font-weight: 600; color: var(--graphite-profond); text-wrap: balance; }
.entete-centre { display: flex; flex-direction: column; gap: 10px; }
.texte-centre { margin: 0; font-size: 15px; line-height: 1.6; }
.entete-tampon {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.entete-tampon .tampon { margin-top: 6px; }
.liens-centre { display: flex; gap: 24px; font-size: 13px; padding-top: 32px; flex-wrap: wrap; justify-content: center; }
.bloc-filet { padding-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.bloc-filet p { margin: 0; }
.bloc-filet a { font-size: 14px; align-self: flex-start; }

/* Encadré d'information : fond voile, filet gauche graphite (maquette Inscription). */
.encadre { background: var(--voile); padding: 16px 18px; border-left: 3px solid var(--encre-tampon); }
.encadre p { margin: 0; font-size: 14px; line-height: 1.6; }

/* Texte consigné en bas de page : mono 12 px, capitales déjà dans le texte. */
.bandeau-mono { margin: 0; font-size: 12px; line-height: 1.6; letter-spacing: 0.04em; color: var(--gris-etat); }
.surtitre-mini { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }

/* Liens dont la cible n'existe pas encore : texte gris, jamais un lien mort. */
.texte-grise { color: var(--gris-inerte); font-size: 14px; }
.texte-grise a { font-size: inherit; }
.petit { font-size: 13px; }
.souligne-gris { border-bottom: 1px solid var(--cadre-champ); }

/* ---------- Formulaires ---------- */
.formulaire { display: flex; flex-direction: column; }
.champs { margin: 0; padding: 0; border: none; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.champ-groupe { display: flex; flex-direction: column; gap: 7px; }
.ligne-etiquette { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.etiquette { font-size: 14px; font-weight: 500; color: var(--graphite-profond); }
.aide { font-size: 13px; line-height: 1.5; color: var(--gris-etat); }
.champ {
  width: 100%;
  padding: 13px 14px;
  font-size: 16px;
  font-family: var(--police-texte);
  color: var(--encre);
  background: var(--surface);
  border: 1.5px solid var(--cadre-champ);
  border-radius: 3px;
}
.champ-compact { padding: 12px 14px; font-size: 15px; }
.champ:focus-visible { outline: 2px solid var(--graphite-profond); outline-offset: 2px; }
/* Champ fermé : fond voilé, texte gris, curseur explicite. Ce n'est pas une protection (le serveur refuse). */
.champs:disabled .champ, .champ:disabled { color: var(--gris-inerte); background: var(--fond-desactive); cursor: not-allowed; }
.ligne-case { display: flex; gap: 10px; align-items: flex-start; }
.case-a-cocher { width: 18px; height: 18px; flex-shrink: 0; margin: 2px 0 0 0; accent-color: var(--encre-tampon); }
.champs:disabled .case-a-cocher { cursor: not-allowed; }

/* Cases du code à six chiffres (maquette Verification). */
.cases { display: flex; gap: 10px; }
.case {
  width: 52px;
  height: 62px;
  padding: 0;
  text-align: center;
  font-family: var(--police-consigne);
  font-size: 24px;
  color: var(--encre);
  background: var(--surface);
  border: 1.5px solid var(--cadre-champ);
  border-radius: 3px;
}
.champs:disabled .case { background: var(--fond-desactive); cursor: not-allowed; }

/* Boutons : principal plein graphite, secondaire au trait, radiation au trait rouge (jamais plein). */
.bouton-principal, .bouton-secondaire, .bouton-radiation {
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--police-texte);
  border-radius: 3px;
  cursor: pointer;
}
.bouton-principal { color: var(--copie); background: var(--encre-tampon); border: none; }
.bouton-principal:hover { background: var(--graphite-profond); }
.bouton-compact, .bouton-secondaire, .bouton-radiation { padding: 11px 20px; font-size: 15px; }
.bouton-secondaire { color: var(--encre-tampon); background: transparent; border: 1.5px solid var(--encre-tampon); }
.bouton-radiation { color: var(--rouge-radiation); background: transparent; border: 1.5px solid var(--rouge-radiation); }
.bouton-principal:disabled, .champs:disabled .bouton-principal {
  color: var(--gris-inerte);
  background: var(--bouton-desactive);
  cursor: not-allowed;
}
.bouton-secondaire:disabled, .bouton-radiation:disabled,
.champs:disabled .bouton-secondaire, .champs:disabled .bouton-radiation { opacity: 0.55; cursor: not-allowed; }
.boutons { display: flex; gap: 12px; padding-top: 4px; flex-wrap: wrap; }

/* ---------- Page de compte (maquette Compte.dc.html, développement seulement) ---------- */
.compte {
  flex-grow: 1;
  padding: 40px var(--marge-page) 0 var(--marge-page);
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.compte-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.compte-entete h1 { margin: 0; font-size: 32px; font-weight: 600; color: var(--graphite-profond); }
.numero-compte { font-size: 13px; letter-spacing: 0.06em; color: var(--gris-etat); }
.onglets { display: flex; gap: 30px; border-bottom: 1px solid var(--trait-fin); flex-wrap: wrap; }
.onglet { padding: 11px 2px; font-size: 15px; color: var(--gris-etat); }
.onglet-actif { font-weight: 600; color: var(--graphite-profond); border-bottom: 2px solid var(--encre-tampon); }
.section-compte { display: flex; flex-direction: column; gap: 18px; max-width: 620px; }
.section-compte.filet { padding-top: 26px; gap: 16px; }
.section-large { max-width: 820px; }
.titre-section {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-tampon);
}
.grille-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.liste-abonnements { display: flex; flex-direction: column; }
.ligne-abonnement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--trait-fin);
  flex-wrap: wrap;
}
.ligne-abonnement:last-child { border-bottom: none; }
.abonnement-nom { display: flex; flex-direction: column; gap: 3px; }
.abonnement-titre { font-size: 16px; font-weight: 600; color: var(--graphite-profond); }
.abonnement-detail { font-size: 12px; letter-spacing: 0.05em; color: var(--gris-etat); }
.abonnement-actions { display: flex; align-items: center; gap: 18px; }
.ligne-donnees { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ligne-donnees p { margin: 0; font-size: 15px; line-height: 1.55; max-width: 480px; }

/* ---------- Pages de présentation des applications (/budget, /nutrition) ---------- */
.presentation {
  flex-grow: 1;
  padding: 56px var(--marge-page) 0 var(--marge-page);
  display: flex;
  flex-direction: column;
  gap: 52px;
  max-width: calc(760px + 2 * var(--marge-page));
}
.presentation .promesse { gap: 16px; }
.presentation .surtitre { margin: 0; }
.presentation h1 {
  margin: 0;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--graphite-profond);
  text-wrap: balance;
}
.presentation .chapeau { font-size: 18px; }
.bloc-presentation { display: flex; flex-direction: column; gap: 18px; }
.liste-points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
.liste-points li { font-size: 16px; line-height: 1.6; padding-left: 18px; border-left: 2px solid var(--voile); }
.liste-points strong { font-weight: 600; color: var(--graphite-profond); }
.cloture { padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.cloture p { margin: 0; }

/* ---------- Écrans intermédiaires : les grilles se replient avant la marge mobile ----------
   Avec la marge desktop de 72 px, trois colonnes sous 960 px ne laissent que 160 à 240 px par
   principe, et deux cartes sous 800 px ne laissent pas la place au nom et à son tampon. */
@media (max-width: 960px) {
  .principes { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 800px) {
  .grille-applications { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Petits écrans : la maquette fixe le desktop, on replie sans changer les valeurs ---------- */
@media (max-width: 720px) {
  :root { --marge-page: 24px; }
  .accueil { padding-top: 48px; gap: 48px; }
  .promesse h1 { font-size: 36px; }
  .pied { margin-top: 48px; }
  .entete { flex-wrap: wrap; gap: 16px; }        /* la barre passe sous le mot-symbole */
  .navigation { gap: 18px; font-size: 14px; }
  .navigation-compte { margin-left: 0; padding-left: 0; border-left: none; gap: 18px; }
  .presentation h1 { font-size: 32px; }
  /* Le tampon passe au-dessus du titre : côte à côte, il lui volait la moitié de la largeur. */
  .presentation .entete-tampon { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
  .presentation .entete-tampon .tampon { margin-top: 0; }
  .grille-deux { grid-template-columns: minmax(0, 1fr); }
  .onglets { gap: 14px; }                          /* les quatre onglets tiennent sur une ligne */
  .onglet { font-size: 14px; padding: 11px 0; }
  .cases { gap: 8px; }
  .case { width: 44px; height: 56px; font-size: 22px; }
  .page-centree { padding-top: 48px; }
}