/* Le Cocon Financier — feuille de style de la charte graphique v1.2 (2026-11-08).
   Sert à l'aperçu de la charte et à la maquette ; point de départ du CSS du site Django.
   Contrastes vérifiés : docs/design/contrastes.json avec socle-commun/outils/contraste.py. */

:root {
  /* Couleurs de marque */
  --sapin: #0B4334;        /* titres, pied de page, survol des boutons */
  --emeraude: #1C6450;     /* boutons principaux, liens */
  --sauge: #AEC6B0;        /* décor, illustrations, filets */
  --sauge-clair: #E3ECDF;  /* fonds de section */
  --creme: #F3EAD3;        /* fonds chaleureux, cartes mises en avant */
  --blanc-casse: #FBF8F2;  /* fond principal */
  --blanc: #FFFFFF;        /* cartes, champs */
  --cannelle: #A7501B;     /* accent : mots soulignés, focus, bouton secondaire */
  --papillon: #D98A6B;     /* décor seulement, jamais pour du texte */
  --or: #B98526;           /* décor seulement, jamais pour du texte */
  /* Texte */
  --encre: #22302B;        /* texte courant */
  --encre-douce: #4D5A54;  /* texte secondaire, légendes */
  --bordure: #7C8A83;      /* bordures de champs */
  --erreur: #A3271F;

  /* Typographie */
  --police-titres: "Lora", Georgia, "Times New Roman", serif;
  --police-texte: "Asap", "Segoe UI", system-ui, sans-serif;
  --t-xs: 0.875rem;   /* 14 px : mentions, légendes */
  --t-s: 1rem;        /* 16 px */
  --t-m: 1.125rem;    /* 18 px : texte courant */
  --t-l: 1.375rem;    /* 22 px : h3 */
  --t-xl: clamp(1.625rem, 1.2rem + 1.8vw, 2.25rem);   /* h2 */
  --t-xxl: clamp(2rem, 1.3rem + 3vw, 3.25rem);         /* h1 */

  /* Espacements (base 8 px) */
  --e-1: 0.5rem; --e-2: 1rem; --e-3: 1.5rem; --e-4: 2rem; --e-6: 3rem; --e-8: 4rem; --e-12: 6rem;

  /* Formes */
  --rayon: 14px;
  --rayon-bouton: 999px;
  --ombre: 0 6px 24px rgba(19, 65, 55, 0.08);
  --largeur-max: 72rem;
  --largeur-texte: 40rem;
}

/* --- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-wrap: break-word;  /* texte agrandi ou espacé : les mots longs passent à la ligne */
  background: var(--blanc-casse);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: var(--t-m);
  line-height: 1.6;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3 {
  font-family: var(--police-titres);
  color: var(--sapin);
  line-height: 1.2;
  font-weight: 600;
  margin: 0 0 var(--e-2);
  text-wrap: balance;
}
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
p { margin: 0 0 var(--e-2); max-width: var(--largeur-texte); }
a { color: var(--emeraude); text-underline-offset: 0.18em; }
a:hover { color: var(--sapin); }
.accent { color: var(--cannelle); }
.surtitre {
  font-family: var(--police-texte);
  font-size: var(--t-s);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cannelle);
  margin-bottom: var(--e-1);
}
.discret { color: var(--encre-douce); font-size: var(--t-s); }

/* Focus toujours visible */
:focus-visible { outline: 3px solid var(--cannelle); outline-offset: 3px; border-radius: 4px; }
.fond-sapin :focus-visible { outline-color: var(--creme); }

.visuellement-cache, .a11y-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.lien-evitement {
  position: absolute; left: var(--e-2); top: -4rem;
  background: var(--sapin); color: var(--blanc); padding: var(--e-1) var(--e-2); border-radius: 8px; z-index: 100;
}
.lien-evitement:focus { top: var(--e-2); color: var(--blanc); }

/* --- Mise en page --------------------------------------------------------- */
.conteneur { width: min(100% - 2rem, var(--largeur-max)); margin-inline: auto; }
.section { padding-block: var(--e-8); }
.section--sauge { background: var(--sauge-clair); }
.section--creme { background: var(--creme); }
.fond-sapin { background: var(--sapin); color: var(--creme); }
.fond-sapin h2, .fond-sapin h3 { color: var(--blanc); }
.fond-sapin a:not(.bouton) { color: var(--creme); }
.entete-section { max-width: var(--largeur-texte); margin-bottom: var(--e-6); }
.grille { display: grid; gap: var(--e-3); }
.grille > * { min-width: 0; }
@media (min-width: 48rem) {
  .grille--2 { grid-template-columns: repeat(2, 1fr); }
  .grille--3 { grid-template-columns: repeat(3, 1fr); }
  .grille--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Logo officiel : écusson + nom, deux images WebP légères (logo/web/) --- */
.logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.logo-embleme { height: 2.75rem; width: auto; }
.logo-nom { height: 2.2rem; width: auto; }
@media (min-width: 22.5rem) { .logo-embleme { height: 3.25rem; } .logo-nom { height: 2.6rem; } }

/* --- Boutons -------------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-1);
  min-height: 48px; padding: 0.75rem 1.5rem;
  border-radius: var(--rayon-bouton); border: 2px solid transparent;
  font: 600 var(--t-s)/1.2 var(--police-texte);
  text-decoration: none; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.bouton--principal { background: var(--emeraude); color: var(--blanc); }
.bouton--principal:hover { background: var(--sapin); color: var(--blanc); }
.bouton--secondaire { background: transparent; color: var(--emeraude); border-color: var(--emeraude); }
.bouton--secondaire:hover { background: var(--emeraude); color: var(--blanc); }
.bouton--accent { background: var(--cannelle); color: var(--blanc); }
.bouton--accent:hover { background: var(--sapin); color: var(--blanc); }
.bouton--clair { background: var(--creme); color: var(--sapin); }
.bouton--clair:hover { background: var(--blanc); color: var(--sapin); }
.bouton--contour-clair { background: transparent; color: var(--creme); border-color: var(--creme); }
.bouton--contour-clair:hover { background: var(--creme); color: var(--sapin); }
.boutons { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }

/* --- Cartes --------------------------------------------------------------- */
.carte {
  background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: var(--e-4); display: flex; flex-direction: column; gap: var(--e-1);
  border-top: 4px solid var(--sauge);
}
.carte--creme { background: var(--creme); }
.carte h3 { margin-bottom: var(--e-1); }
.carte .lien-carte { margin-top: auto; font-weight: 600; }
.carte .lien-carte::after { content: " →"; }
.pastille {
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sauge-clair); color: var(--sapin);
  margin-bottom: var(--e-1);
}
.etiquette {
  display: inline-block; align-self: flex-start; font-size: var(--t-xs); font-weight: 600;
  background: var(--sauge-clair); color: var(--sapin);
  padding: 0.15rem 0.6rem; border-radius: var(--rayon-bouton);
}

/* --- Champs de formulaire ------------------------------------------------- */
.champ { display: grid; gap: 0.35rem; margin-bottom: var(--e-3); }
.champ > * { min-width: 0; }
.champ select { max-width: 100%; }  /* une option longue ne fait plus déborder la page à 320 px (WCAG 1.4.10) */
.champ label { font-weight: 600; }
.champ input, .champ textarea, .champ select {
  font: inherit; color: var(--encre); background: var(--blanc);
  border: 1.5px solid var(--bordure); border-radius: 10px;
  min-height: 48px; padding: 0.6rem 0.9rem;
}
.champ .aide { font-size: var(--t-xs); color: var(--encre-douce); }
.champ--erreur input { border-color: var(--erreur); border-width: 2px; }
.champ .message-erreur { color: var(--erreur); font-size: var(--t-s); font-weight: 600; }
.champ .message-erreur::before { content: "⚠ "; }

/* --- Onglet d'accessibilité (accessibilite.js), sur chaque page ------------ */
.a11y-onglet {
  position: fixed; left: 0; bottom: 1rem; z-index: 70;  /* mobile : en bas à gauche ; le script le pose au-dessus de la barre de contact */
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  min-width: 48px; min-height: 48px; padding: 0.6rem 0.5rem;
  background: var(--sapin); color: var(--creme); border: 2px solid var(--creme); border-left: 0;
  border-radius: 0 12px 12px 0; box-shadow: var(--ombre); cursor: pointer; font: inherit;
}
.a11y-onglet[aria-expanded="true"] { background: var(--emeraude); }
.a11y-libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 64rem) {
  .a11y-onglet { bottom: auto; top: 7rem; }  /* ordinateur : onglet latéral sous l'en-tête */
  /* Marge de 4rem : le contenu ne passe pas sous l'onglet (48 px). L'en-tête, au-dessus de l'onglet, garde toute sa largeur. */
  .conteneur:not(.entete .conteneur) { width: min(100% - 8rem, var(--largeur-max)); }
  .a11y-libelle { position: static; width: auto; height: auto; overflow: visible; clip-path: none;
    writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; }
}
.a11y-panneau {
  position: fixed; z-index: 71; bottom: 5.25rem; left: 0.5rem; right: 0.5rem;
  max-height: calc(100vh - 6rem); max-height: calc(100dvh - 6rem); overflow: auto;
  padding: var(--e-3); background: var(--blanc); color: var(--encre);
  border: 2px solid var(--sapin); border-radius: var(--rayon); box-shadow: var(--ombre);
}
.a11y-panneau[hidden] { display: none; }
@media (min-width: 40rem) { .a11y-panneau { left: 4rem; right: auto; width: 22rem; } }
@media (min-width: 64rem) { .a11y-panneau { bottom: auto; top: 7rem; max-height: calc(100vh - 8rem); max-height: calc(100dvh - 8rem); } }
.a11y-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); margin-bottom: var(--e-2); }
.a11y-tete h2 { margin: 0; font-size: var(--t-l); }
.a11y-tete h2:focus { outline: none; }  /* focus posé par le script à l'ouverture, pas un élément actif */
.a11y-panneau button {
  min-height: 48px; padding: 0.5rem 1rem; font: inherit; font-weight: 600; cursor: pointer;
  color: var(--sapin); background: var(--blanc); border: 2px solid var(--emeraude); border-radius: 10px;
}
.a11y-panneau button:disabled { opacity: 0.45; cursor: not-allowed; }
.a11y-groupe { margin: 0 0 var(--e-1); font-weight: 600; }
.a11y-taille { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-3); }
.a11y-taille output { min-width: 4ch; text-align: center; font-weight: 600; }
.a11y-options { list-style: none; margin: 0 0 var(--e-2); padding: 0; display: grid; gap: var(--e-1); }
.a11y-options button { width: 100%; text-align: left; display: flex; justify-content: space-between; gap: var(--e-1); }
.a11y-options button::after { content: "Non"; font-weight: 400; color: var(--encre-douce); }
.a11y-options button[aria-pressed="true"] { background: var(--emeraude); color: var(--blanc); }
.a11y-options button[aria-pressed="true"]::after { content: "Oui"; color: var(--blanc); }
.a11y-panneau .a11y-reinitialiser { width: 100%; border-color: var(--cannelle); color: var(--cannelle); }
.a11y-pied { margin: var(--e-2) 0 0; font-size: var(--t-s); }
@media print { .a11y-onglet, .a11y-panneau { display: none; } }

/* Réglages choisis par le visiteur (classes posées sur <html> par accessibilite.js) */
html.a11y-contraste {
  --encre: #000000; --encre-douce: #1F2A25; --sapin: #06261D; --emeraude: #0B3D2E; --cannelle: #7A3A12;
  --blanc-casse: #FFFFFF; --creme: #FFFFFF; --sauge-clair: #FFFFFF; --bordure: #000000;
}
html.a11y-contraste .fond-sapin { --creme: #FFFFFF; }
html.a11y-gris { filter: grayscale(1); }
html.a11y-liens a, html.a11y-contraste a { text-decoration: underline !important; text-underline-offset: 0.2em; }
html.a11y-police body, html.a11y-police body * {
  font-family: Verdana, "DejaVu Sans", Tahoma, sans-serif !important; font-style: normal !important;
}
html.a11y-espacement body * { line-height: 1.8 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; }
html.a11y-espacement p { margin-bottom: 2em; }
html.a11y-sans-animation *, html.a11y-sans-animation *::before, html.a11y-sans-animation *::after {
  transition: none !important; animation: none !important; scroll-behavior: auto !important;
}

/* --- Mouvement ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}