/* Le Cocon Financier — mise en page du site (reprise de docs/design/maquette-accueil.html v0.2).
   Charte, boutons, cartes, champs et onglet Accessibilité : cocon.css, chargé avant. */

/* En-tête */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(251, 248, 242, 0.96); border-bottom: 1px solid var(--sauge-clair); }
.entete .conteneur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); min-height: 4.5rem; }
.entete .logo { min-width: 0; }
.nav { display: none; }
.nav { min-width: 0; }
/* flex-wrap : avec le texte agrandi (200 %), le menu passe sur deux lignes au lieu de déborder (WCAG 1.4.4). */
.nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--e-3); margin: 0; padding: 0; }
.nav a { color: var(--encre); text-decoration: none; font-weight: 600; font-size: var(--t-s); padding-block: 0.75rem; white-space: nowrap; }
.entete .bouton { white-space: nowrap; }
.nav a:hover { color: var(--emeraude); text-decoration: underline; }
.nav a.lien-cgp { color: var(--cannelle); }
.entete .bouton { display: none; }
.menu-mobile summary { white-space: nowrap; list-style: none; min-width: 48px; min-height: 48px; display: grid; place-items: center; cursor: pointer; border-radius: 10px; color: var(--sapin); font-weight: 600; }
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile[open] ul { position: absolute; left: 0; right: 0; top: 100%; background: var(--blanc-casse); list-style: none; margin: 0; padding: var(--e-2); border-bottom: 1px solid var(--sauge); box-shadow: var(--ombre); }
.menu-mobile li a { display: block; padding: 0.8rem 0.5rem; color: var(--encre); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--sauge-clair); }
.libelle-court { display: none; }
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .nav ul { gap: var(--e-2); }
  /* Avec « Blog », le menu ne tient pas sur une ligne : libellé court du bouton */
  .libelle-long { display: none; }
  .libelle-court { display: inline; }
}
@media (min-width: 64rem) {
  .nav { display: block; }
  .entete .bouton { display: inline-flex; }
  .menu-mobile { display: none; }
}

/* Héros */
.heros { padding-block: var(--e-6) var(--e-8); background: linear-gradient(115deg, var(--sauge-clair) 0%, var(--blanc-casse) 55%, var(--creme) 100%); overflow: hidden; }
.heros .conteneur { display: grid; gap: var(--e-6); align-items: center; }
.heros h1 em { font-style: italic; font-weight: 500; color: var(--cannelle); }
.heros .intro { font-size: 1.25rem; color: var(--encre); }
.reassurance ul { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); margin-top: var(--e-3); padding: 0; list-style: none; font-size: var(--t-s); color: var(--encre-douce); }
.reassurance li::before { content: "✓ "; color: var(--emeraude); font-weight: 700; }
.portrait { position: relative; justify-self: center; width: min(100%, 24rem); }
.portrait .photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 48% 48% var(--rayon) var(--rayon); box-shadow: var(--ombre); }
.portrait figcaption { position: absolute; left: -0.5rem; bottom: 1.5rem; background: var(--blanc); border-radius: var(--rayon); padding: 0.6rem 1rem; box-shadow: var(--ombre); font-size: var(--t-s); line-height: 1.35; }
.portrait figcaption strong { color: var(--sapin); font-family: var(--police-titres); font-size: 1.05rem; }
@media (min-width: 56rem) {
  .heros .conteneur { grid-template-columns: 1.25fr 1fr; }
}

/* Trois accès */
.acces { margin-top: calc(-1 * var(--e-6)); position: relative; }
.carte--cgp { border-top-color: var(--papillon); }

/* Deux métiers */
.deux-metiers .carte { border-top: none; border-left: 4px solid var(--emeraude); }
.deux-metiers .carte + .carte { border-left-color: var(--cannelle); }
.deux-metiers ul { margin: 0; padding-left: 1.2rem; }

/* Méthode */
.etapes { list-style: none; padding: 0; margin: 0; counter-reset: etape; }
.etapes li { counter-increment: etape; position: relative; padding-top: 3.75rem; }
.etapes li::before { content: counter(etape); position: absolute; top: 0; left: 0; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--emeraude); color: var(--blanc); font: 600 1.25rem var(--police-titres); }
.metamorphose { margin: 0 0 var(--e-6); }
.metamorphose img { display: block; width: 100%; max-width: 56rem; height: auto; margin-inline: auto; }
.metamorphose figcaption { margin-top: var(--e-1); font-size: var(--t-s); font-style: italic; color: var(--encre-douce); text-align: center; }
.metamorphose figcaption small { display: block; font-style: normal; font-size: var(--t-xs); }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1); font-size: var(--t-xs); color: var(--encre-douce); margin-bottom: var(--e-1); }
.pied .saviez-vous { font-size: var(--t-xs); }
.pied .reseaux { display: flex; gap: var(--e-2); margin-top: var(--e-2); }
.pied .reseaux a { display: grid; place-items: center; min-width: 3rem; min-height: 3rem; }
.etapes h3 { font-size: 1.2rem; }
.etapes p { font-size: var(--t-s); }

/* Qui suis-je */
.sophie { display: grid; gap: var(--e-6); align-items: center; }
.sophie img { border-radius: var(--rayon); aspect-ratio: 1; object-fit: cover; width: min(100%, 20rem); }
.citation { font-family: var(--police-titres); font-style: italic; font-size: 1.35rem; color: var(--sapin); border-left: 4px solid var(--papillon); padding-left: var(--e-2); margin: 0 0 var(--e-3); }
/* minmax(0, …) : avec le texte agrandi (200 %), les deux colonnes rétrécissent au lieu de faire déborder la page. */
@media (min-width: 48rem) { .sophie { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); } }
h1, h2, h3 { overflow-wrap: break-word; }

/* Devenir CGP */
.cgp { display: grid; gap: var(--e-4); align-items: center; }
@media (min-width: 48rem) { .cgp { grid-template-columns: 1.4fr 1fr; } }
.cgp ul { padding-left: 1.2rem; }

/* Appel final */
.appel { text-align: center; }
.appel p, .appel h2 { margin-inline: auto; }
.appel .boutons { justify-content: center; }

/* Pied de page */
.pied { padding-block: var(--e-6) var(--e-8); font-size: var(--t-s); }
.pied .grille { gap: var(--e-4); }
.pied h2 { font-size: 1.1rem; font-family: var(--police-texte); letter-spacing: 0.05em; text-transform: uppercase; color: var(--sauge); }
.pied .pied-logo { display: flex; align-items: center; gap: 0.6rem; margin-bottom: var(--e-2); }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 0.35rem; }
.pied .reglementaire { border-top: 1px solid rgba(174, 198, 176, 0.4); margin-top: var(--e-4); padding-top: var(--e-3); color: var(--sauge); max-width: none; }

/* Barre de contact fixe sur mobile */
.barre-contact { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; display: flex; gap: var(--e-1); padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom)); background: var(--blanc-casse); border-top: 1px solid var(--sauge); }
.barre-contact .bouton { flex: 1; padding-inline: 0.75rem; }
body { padding-bottom: 4.5rem; }
/* Élément actif jamais caché par l'en-tête collé (WCAG 2.4.11) : le navigateur garde cette marge en faisant défiler
   vers le champ suivant ou vers une ancre. La marge du bas (barre de contact, onglet) est réglée par accessibilite.js. */
html { scroll-padding-top: 5.5rem; }
@media (min-width: 64rem) { .barre-contact { display: none; } body { padding-bottom: 0; } }

/* --- Ajouts du site Django --------------------------------------------------- */
.nav a[aria-current="page"] { color: var(--emeraude); text-decoration: underline; }
.entete .compte { font-size: var(--t-xs); }
.page-titre { padding-block: var(--e-6) var(--e-4); background: linear-gradient(115deg, var(--sauge-clair) 0%, var(--blanc-casse) 70%); }
.page-titre p { font-size: 1.15rem; }
.prose { max-width: var(--largeur-texte); }
.prose h2 { margin-top: var(--e-6); }
.prose ul, .prose ol { padding-left: 1.2rem; }
.messages { margin-block: var(--e-2); }
.message { background: var(--sauge-clair); border-left: 4px solid var(--emeraude); padding: var(--e-1) var(--e-2); border-radius: 8px; }
.message--error { border-left-color: var(--erreur); }
.erreurs, .erreur { color: var(--erreur); font-weight: 600; }
.provisoire { background: var(--creme); border-left: 4px solid var(--or); padding: var(--e-1) var(--e-2); font-size: var(--t-s); border-radius: 8px; }

/* Formulaires */
.formulaire { max-width: var(--largeur-texte); }
.champ--case { display: flex; flex-wrap: wrap; gap: var(--e-1); align-items: flex-start; }
.champ--case label { flex: 1; min-width: 0; }
input[type="file"] { max-width: 100%; }
.champ--case .message-erreur { flex-basis: 100%; }
/* Cases et boutons radio : 24 px au moins (WCAG 2.2, critère 2.5.8, taille de la cible). */
.champ--case input { width: 1.5rem; height: 1.5rem; min-height: 0; margin-top: 0.2rem; flex: none; accent-color: var(--emeraude); }
.champ--case label { font-weight: 400; }
fieldset.champ { border: 0; padding: 0; margin: 0 0 var(--e-3); }
fieldset.champ legend { font-weight: 600; margin-bottom: 0.35rem; }
fieldset.champ ul, fieldset.champ div div { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); }
fieldset.champ label { font-weight: 400; display: inline-flex; gap: 0.5rem; align-items: center; min-height: 48px; }
fieldset.champ input[type="radio"] { width: 1.5rem; height: 1.5rem; min-height: 0; accent-color: var(--emeraude); }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.bouton-lien { font: inherit; background: none; border: 0; padding: 0; color: var(--emeraude); text-decoration: underline; cursor: pointer; }
.en-ligne { display: inline; }

/* Situations : filtre des accompagnements */
.situations { display: flex; flex-wrap: wrap; gap: var(--e-1); list-style: none; padding: 0; margin: 0 0 var(--e-4); }
.situations a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.4rem 1rem; border-radius: var(--rayon-bouton); border: 2px solid var(--emeraude); text-decoration: none; font-weight: 600; font-size: var(--t-s); }
.situations a[aria-current="true"] { background: var(--emeraude); color: var(--blanc); }

/* Blog */
.article-image { border-radius: var(--rayon); margin-bottom: var(--e-4); }
.pagination { display: flex; gap: var(--e-2); align-items: center; margin-top: var(--e-4); }
.faq details { background: var(--blanc); border-radius: var(--rayon); padding: var(--e-2) var(--e-3); margin-bottom: var(--e-1); box-shadow: var(--ombre); }
.faq summary { font-weight: 600; cursor: pointer; min-height: 44px; display: flex; align-items: center; }

/* Double authentification (pages d'allauth) */
.qr-code svg { background: #fff; padding: .5rem; max-width: 100%; height: auto; }
.cle, .codes-secours code { font-family: ui-monospace, monospace; font-size: 1.1rem; word-break: break-all; }
.codes-secours { columns: 2; list-style: none; padding: 0; }
.etapes h2.h3 { font-size: 1.2rem; }

/* --- Espace éditrice ------------------------------------------------------ */
.espace-nav ul { list-style: none; padding: 0; margin: 0 0 var(--e-4); display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); border-bottom: 1px solid var(--sauge); }
.espace-nav a { display: inline-block; padding: var(--e-1) 0; font-weight: 600; text-decoration: none; color: var(--encre); }
.espace-nav a[aria-current="page"] { color: var(--emeraude); box-shadow: inset 0 -3px var(--emeraude); }
.compteurs .carte { text-decoration: none; color: var(--encre); }
.compteur { display: block; font: 600 var(--t-xl) var(--police-titres); color: var(--sapin); }
.tableau-defilant { overflow-x: auto; max-width: 100%; min-width: 0; margin-bottom: var(--e-4); }  /* le tableau défile, pas la page (WCAG 1.4.10) */
.tableau { width: 100%; border-collapse: collapse; background: var(--blanc); font-size: var(--t-s); }
.tableau th, .tableau td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--sauge-clair); }
.tableau th { background: var(--sauge-clair); color: var(--sapin); }
.statut { font-weight: 600; }
.statut--nouvelle { color: var(--cannelle); }
.statut--traitee { color: var(--encre-douce); }
.filtres { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: flex-end; margin-bottom: var(--e-2); }
.filtres .champ { margin-bottom: 0; }
.grille--demande { display: grid; gap: var(--e-4); }
@media (min-width: 56rem) { .grille--demande { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.details { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem var(--e-2); }
.details dt { font-weight: 600; }
/* Rédaction d'un article (maquette-editrice-article.html) : mobile d'abord, le rappel passe avant le formulaire */
.redaction { display: grid; gap: var(--e-4); }
.redaction > * { min-width: 0; }
@media (min-width: 64rem) {
  .redaction { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
  .rappel-seo { position: sticky; top: var(--e-3); grid-column: 2; grid-row: 1; }
  .redaction .formulaire { grid-column: 1; grid-row: 1; }
}
.rappel-seo { background: var(--creme); border-left: 6px solid var(--or); border-radius: var(--rayon); padding: var(--e-3); }
.rappel-seo h2 { font-size: 1.15rem; margin-bottom: var(--e-1); }
.rappel-seo ol { padding-left: 1.25rem; margin: 0 0 var(--e-2); }
.rappel-seo li { margin-bottom: var(--e-1); }
.rappel-seo .pourquoi { font-size: var(--t-s); color: var(--encre-douce); margin: 0; }
.redaction fieldset:not(.champ), .formulaire--offre fieldset:not(.champ) { min-width: 0; border: 1px solid var(--sauge-clair); border-radius: var(--rayon); padding: var(--e-3); margin: 0 0 var(--e-4); }
.redaction fieldset:not(.champ) > legend, .formulaire--offre fieldset:not(.champ) > legend { font-weight: 700; padding-inline: var(--e-1); }
.avertissement, .bandeau-apercu { background: var(--creme); border: 2px solid var(--or); border-radius: var(--rayon); padding: var(--e-2) var(--e-3); margin-bottom: var(--e-4); }
.avertissement strong:first-child::before { content: "⚠ "; }
.vignette { margin: 0 0 var(--e-2); }
.vignette img { max-width: 16rem; height: auto; border-radius: var(--rayon); }
.vignette figcaption { font-size: var(--t-xs); color: var(--encre-douce); }
.details dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }  /* une longue adresse e-mail passe à la ligne */
.message-recu { margin: 0; padding: var(--e-2); background: var(--blanc); border-left: 4px solid var(--sauge); }
.reponses .reponse { padding: var(--e-1) 0; border-bottom: 1px solid var(--sauge-clair); }
.reponses dt { font-weight: 600; }
.reponses dd { margin: 0.2rem 0 0; }
.reponse--attention { background: var(--creme); padding-inline: var(--e-1); border-left: 4px solid var(--cannelle); }
.etiquette--attention { background: var(--cannelle); color: var(--blanc); }

/* Accompagnements et situations : boutons compacts dans le tableau (44 px de haut, cible tactile suffisante) */
.actions-offre { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.bouton--petit { min-height: 44px; padding: 0.4rem 0.9rem; white-space: nowrap; }
.sans-coupure { white-space: nowrap; }
fieldset.champ input[type="checkbox"] { width: 1.5rem; height: 1.5rem; min-height: 0; accent-color: var(--emeraude); }
/* Petit écran : chaque ligne devient une fiche, sans défilement de côté (le libellé de colonne précède la valeur). */
@media (max-width: 40rem) {
  .tableau--empile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tableau--empile tr { display: block; padding: var(--e-1) 0; border-bottom: 2px solid var(--sauge); }
  .tableau--empile th, .tableau--empile td { display: block; border: 0; padding: 0.3rem 0.8rem; }
  .tableau--empile th[scope="row"] { background: none; font-size: var(--t-m, 1rem); }
  .tableau--empile td[data-libelle]::before { content: attr(data-libelle) " : "; font-weight: 600; }
  .tableau--empile td[data-libelle="Actions"]::before { content: none; }
}
.section-offres { margin-bottom: var(--e-6); }

/* Fiche imprimable */
.fiche { background: var(--blanc); padding-block: var(--e-4); }
.fiche-entete { display: flex; gap: var(--e-2); align-items: center; margin-bottom: var(--e-3); }
@media print {
  .pas-imprime, .a11y-onglet, .a11y-panneau { display: none !important; }
  .fiche { padding: 0; font-size: 11pt; }
  .fiche .conteneur { width: 100%; }
  .reponse { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}
.champ textarea { width: 100%; max-width: 100%; }
.fond-sapin .bouton-lien { color: var(--creme); }

/* --- Guide « Comment faire ? » (format des fiches « Follow — Pas à pas » du wiki) -------------- */
.aide { max-width: 52rem; }
.aide p { max-width: none; }
.encadre-follow { border-left: 4px solid var(--sauge); background: var(--blanc); padding: var(--e-2) var(--e-3); margin-bottom: var(--e-4); font-size: var(--t-s); }
.sommaire ol { padding-left: 1.6rem; columns: 2 18rem; column-gap: var(--e-4); }
.sommaire li { margin-bottom: 0.3rem; break-inside: avoid; }
.fiche-aide { border-top: 1px solid var(--sauge); padding-top: var(--e-4); margin-top: var(--e-6); scroll-margin-top: 6rem; }
.fiche-aide--info { background: var(--sauge-clair); border-radius: var(--rayon); padding: var(--e-3) var(--e-4); border-top: 0; }
.fiche-aide .tableau { margin-block: var(--e-2) var(--e-3); }
.fiche-aide caption { text-align: left; font-weight: 600; color: var(--sapin); padding-bottom: var(--e-1); }
.etape { margin: var(--e-3) 0 var(--e-1); }
.resultat { margin: 0 0 var(--e-1); padding: var(--e-1) var(--e-2); background: var(--sauge-clair); border-left: 4px solid var(--emeraude); border-radius: 0 8px 8px 0; font-size: var(--t-s); }
.piege { padding: var(--e-1) var(--e-2); background: var(--creme); border-left: 4px solid var(--cannelle); border-radius: 0 8px 8px 0; font-size: var(--t-s); }
.tableau--depannage td:first-child { font-weight: 600; }
.voir-aussi { margin-top: var(--e-6); }
kbd { font: 600 0.9em var(--police-texte); padding: 0.05rem 0.4rem; border: 1px solid var(--bordure); border-radius: 4px; background: var(--blanc-casse); }
@media print {
  .entete, .pied, .barre-contact, .espace-nav { display: none; }
  .fiche-aide { break-inside: avoid-page; }
}

/* --- Questionnaire (US-08) ------------------------------------------------ */
.liste-nue { list-style: none; padding: 0; margin: 0; }
.questionnaire .question[hidden] { display: none; }
.progression { margin-bottom: var(--e-3); }
.progression p { font-weight: 600; font-size: var(--t-s); margin-bottom: 0.35rem; }
.progression progress { width: 100%; height: 0.75rem; accent-color: var(--emeraude); }
.questionnaire .introduction { margin-bottom: var(--e-4); }
.questionnaire .erreurs { border-left: 4px solid var(--erreur); padding-left: var(--e-2); margin-bottom: var(--e-3); }
fieldset.champ .options { display: flex; flex-direction: column; }
fieldset.champ .options--echelle { flex-direction: row; flex-wrap: wrap; gap: 0 var(--e-3); }
fieldset.champ label.option { display: flex; gap: 0.6rem; align-items: center; min-height: 44px; font-weight: 400; }
fieldset.champ input[type="checkbox"] { width: 1.5rem; height: 1.5rem; min-height: 0; padding: 0; flex: none; accent-color: var(--emeraude); }
fieldset.champ input[type="radio"] { padding: 0; flex: none; }
.questionnaire .plus-tard { margin-top: var(--e-3); }

/* --- Espace éditrice : en-tête et pied réduits, sans barre de contact (contenus/contexte.py, espace_prive) --- */
.nav-prive { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-3); }
.nav-prive a { color: var(--encre); font-weight: 600; font-size: var(--t-s); }
.entete .nav-prive .bouton { display: inline-flex; }  /* « Se déconnecter » reste visible sur mobile */
body.espace-prive { padding-bottom: 0; }
.pied--prive { padding-block: var(--e-3); }
.pied--prive .liens-pied { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); margin: 0; padding: 0; }
/* Espace éditrice, questionnaires (US-16) : position des réponses proposées, conditions repliables. */
.options-reponse input[type="number"] { width: 5em; }
.options-reponse input[type="text"] { width: 100%; min-width: 12em; }
.conditions { margin-bottom: var(--e-4); }
.conditions summary { cursor: pointer; font-weight: 600; margin-bottom: var(--e-2); }