/* ============================================================
   Le Cocon — La Parenthèse des Invisibles
   Feuille de style locale (pas de CDN externe)
   Palette reprise du prototype d'origine (Tailwind config) :
   cocon (terracotta doux) / nature (sauge)
   ============================================================ */

:root {
  /* cocon (terracotta) */
  --cocon-50: #fdfbf9;
  --cocon-100: #f6eee5;
  --cocon-200: #ebdcd0;
  --cocon-300: #dfbeaa;
  --cocon-400: #cc967a;
  --cocon-500: #bf7954;
  --cocon-600: #a65f3b;
  --cocon-700: #85492d;
  --cocon-800: #5c3321;

  /* nature (sauge) */
  --nature-50: #f4f6f4;
  --nature-100: #e3eae4;
  --nature-200: #cbd7cc;
  --nature-300: #a6bfa8;
  --nature-400: #7fa281;
  --nature-500: #5c805e;
  --nature-600: #466248;
  --nature-700: #324633;

  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --radius-lg: 1.25rem;
  --radius-md: 0.75rem;
  --shadow-soft: 0 4px 20px rgba(92, 51, 33, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--cocon-800);
  background-color: var(--cocon-100);
  background-image:
    radial-gradient(at 0% 0%, rgba(203, 215, 204, 0.3) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(223, 190, 170, 0.25) 0px, transparent 50%);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  color: var(--cocon-800);
  margin: 0 0 0.5em;
}

a { color: var(--nature-600); }
a:hover { color: var(--nature-700); }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--cocon-800);
  color: #fff;
  padding: 0.5em 1em;
  border-radius: var(--radius-md);
  z-index: 100;
}
.skip-link:focus { left: 0.5em; top: 0.5em; }

/* ---------- Navigation ---------- */
.site-header {
  background: rgba(253, 251, 249, 0.85);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--cocon-200);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-nav {
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.site-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--cocon-700);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--cocon-700);
  font-size: 0.95rem;
  transition: background-color 0.15s ease;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  background-color: var(--cocon-200);
  color: var(--cocon-800);
}

/* ---------- Layout ---------- */
main {
  max-width: 960px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

.hero {
  text-align: center;
  padding: 2rem 1rem 3rem;
}

.hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.hero p.lead {
  font-size: 1.1rem;
  color: var(--cocon-700);
  max-width: 40em;
  margin: 0.75rem auto 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}

.card {
  background: #fff;
  border: 1px solid var(--cocon-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
}

.card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.card p {
  margin: 0;
  color: #4a4038;
  font-size: 0.95rem;
}

/* Cartes cliquables (ex. "Accès rapide" de l'accueil) */
a.card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.card:hover,
a.card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(92, 51, 33, 0.14);
  border-color: var(--cocon-300);
}

a.card:focus-visible {
  outline: 2px solid var(--nature-500);
  outline-offset: 2px;
}

.card h3 .icon,
h1 .icon {
  margin-right: 0.4rem;
}

.badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  background: var(--nature-100);
  color: var(--nature-700);
  margin-bottom: 0.6rem;
}

.badge--placeholder {
  background: var(--cocon-200);
  color: var(--cocon-700);
}

.section-intro {
  max-width: 42em;
  margin: 0 auto 2rem;
  text-align: center;
  color: var(--cocon-700);
}

.placeholder-note {
  border: 1px dashed var(--cocon-300);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  background: var(--cocon-50);
  color: var(--cocon-700);
  font-size: 0.9rem;
  margin: 1.5rem 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.25rem;
  border-radius: 999px;
  background: var(--nature-600);
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  transition: background-color 0.15s ease;
}
.btn:hover { background: var(--nature-700); color: #fff; }

.icon {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
}

.site-footer {
  text-align: center;
  padding: 2rem 1.25rem;
  color: var(--cocon-700);
  font-size: 0.85rem;
}

.site-footer .icon {
  width: 0.9em;
  height: 0.9em;
  vertical-align: -0.1em;
  margin: 0 0.15em;
}

@media (max-width: 640px) {
  .site-nav { flex-direction: column; align-items: flex-start; }
  .nav-links { width: 100%; }
}

/* ---------- Compte connecté (nav) ---------- */
.nav-account {
  font-size: 0.8rem;
  color: var(--nature-600);
  padding: 0.3rem 0.7rem;
  background: var(--nature-100);
  border-radius: 999px;
}

/* ---------- Formulaires ---------- */
.form-card {
  background: #fff;
  border: 1px solid var(--cocon-200);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-soft);
  max-width: 32em;
  margin: 0 auto;
}

.form-card--large {
  max-width: 44em;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--cocon-800);
  font-size: 0.95rem;
}

.form-group .hint {
  display: block;
  font-size: 0.8rem;
  color: var(--cocon-700);
  margin-top: 0.3rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="url"],
.form-group textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--cocon-300);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  background: var(--cocon-50);
  color: var(--cocon-800);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: 2px solid var(--nature-500);
  outline-offset: 1px;
}

.form-group textarea {
  min-height: 6rem;
  resize: vertical;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.btn-secondary {
  background: none;
  border: 1px solid var(--nature-500);
  color: var(--nature-600);
}
.btn-secondary:hover { background: var(--nature-100); color: var(--nature-700); }

button.btn {
  border: none;
  font: inherit;
  cursor: pointer;
}

.form-switch {
  text-align: center;
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--cocon-700);
}

.form-switch button {
  background: none;
  border: none;
  color: var(--nature-600);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.message {
  border-radius: var(--radius-md);
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  margin: 1rem 0;
}

.message--erreur {
  background: #fbe9e7;
  color: #8a3324;
  border: 1px solid #e8b8ac;
}

.message--succes {
  background: var(--nature-100);
  color: var(--nature-700);
  border: 1px solid var(--nature-300);
}

.message--info {
  background: var(--cocon-50);
  color: var(--cocon-700);
  border: 1px dashed var(--cocon-300);
}

.photo-apercu {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--cocon-200);
  display: block;
  margin-bottom: 0.75rem;
  background: var(--cocon-100);
}

.membre-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.membre-card .photo-apercu {
  margin-bottom: 0;
  flex-shrink: 0;
}

.membre-card__infos h3 { margin-bottom: 0.15rem; }

.membre-card__meta {
  font-size: 0.8rem;
  color: var(--nature-600);
  margin: 0.2rem 0 0.5rem;
}

.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--cocon-200);
  border-radius: var(--radius-md);
  background: #fff;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.admin-row .btn { font-size: 0.85rem; padding: 0.4rem 0.9rem; }

/* ============================================================
   Page d'accueil — présentation
   ============================================================ */

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nature-600);
  margin-bottom: 1.25rem;
  font-family: var(--font-sans);
}

.eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--cocon-400);
}

.accueil-hero {
  text-align: center;
  padding: 3.5rem 1rem 2rem;
}

.accueil-hero h1 {
  font-size: clamp(2rem, 6vw, 3.6rem);
  line-height: 1.12;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.accueil-hero h1 em {
  font-style: italic;
  color: var(--nature-600);
}

.accueil-hero .lead {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: #5a4c42;
  max-width: 34em;
  margin: 0 auto;
  line-height: 1.75;
}

.section-accueil {
  padding: 3.5rem 0 1rem;
}

.section-accueil h2 {
  text-align: center;
  font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

.section-accueil h2 em {
  font-style: italic;
  color: var(--nature-600);
}

.section-accueil > p.chapeau {
  text-align: center;
  max-width: 38em;
  margin: 0 auto 2.5rem;
  color: #5a4c42;
  line-height: 1.75;
}

.valeurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
}

.valeur {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--cocon-200);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  position: relative;
}

.valeur__puce {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--nature-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.valeur:nth-child(2) .valeur__puce { background: var(--cocon-200); }
.valeur:nth-child(3) .valeur__puce { background: #f3ead9; }

.valeur h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.valeur p {
  font-size: 0.92rem;
  color: #5a4c42;
  margin: 0;
  line-height: 1.7;
}

.cercles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.cercle {
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  border: 1px solid var(--cocon-200);
}

.cercle--premier {
  background: linear-gradient(160deg, rgba(227, 234, 228, 0.75), rgba(253, 251, 249, 0.9));
}

.cercle--second {
  background: linear-gradient(160deg, rgba(246, 238, 229, 0.85), rgba(253, 251, 249, 0.9));
}

.cercle__numero {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nature-600);
  margin-bottom: 0.75rem;
}

.cercle h3 {
  font-size: 1.35rem;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

.cercle p {
  color: #5a4c42;
  font-size: 0.95rem;
  line-height: 1.7;
}

.cercle ul {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
}

.cercle li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: #4a4038;
  margin-bottom: 0.6rem;
  line-height: 1.6;
}

.cercle li::before {
  content: "✓";
  color: var(--nature-500);
  flex-shrink: 0;
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

.citation {
  text-align: center;
  max-width: 32em;
  margin: 3.5rem auto 0;
  padding: 2rem 1.5rem;
  border-top: 1px solid var(--cocon-200);
  border-bottom: 1px solid var(--cocon-200);
}

.citation p {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2.6vw, 1.45rem);
  font-style: italic;
  color: var(--cocon-800);
  line-height: 1.55;
  margin: 0;
}

.appel {
  text-align: center;
  padding: 3.5rem 1rem 1rem;
}

.appel p {
  color: #5a4c42;
  max-width: 30em;
  margin: 0 auto 1.5rem;
  line-height: 1.75;
}

/* ---------- Onglets Connexion / Inscription ---------- */
.onglets {
  display: flex;
  gap: 0.4rem;
  background: var(--cocon-100);
  padding: 0.3rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}

.onglet {
  flex: 1;
  border: none;
  background: none;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  padding: 0.6rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  color: var(--cocon-700);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.onglet:hover { color: var(--cocon-800); }

.onglet--actif {
  background: var(--nature-600);
  color: #fff;
  font-weight: 600;
}
.onglet--actif:hover { color: #fff; }

/* ============================================================
   Le Mur — image facultative d'une publication
   ============================================================ */

.apercu-image {
  margin-top: 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.apercu-image img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--cocon-300);
  background: var(--cocon-50);
}

.mur-figure { margin: 1rem 0; }

.mur-image-bouton {
  display: block;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  width: 100%;
  border-radius: var(--radius-md);
}

.mur-image-bouton:focus-visible {
  outline: 2px solid var(--nature-600);
  outline-offset: 3px;
}

.mur-image {
  display: block;
  width: 100%;
  max-width: 420px;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--cocon-300);
  background: var(--cocon-50);
}

.mur-figure figcaption { margin-top: 0.35rem; }

/* Visionneuse : l'image pleine taille, chargée seulement au clic */

.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(38, 28, 24, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.visionneuse__contenu {
  max-width: min(94vw, 1100px);
  max-height: 88vh;
  text-align: center;
}

.visionneuse__image {
  max-width: 100%;
  max-height: 80vh;
  border-radius: var(--radius-md);
  background: #fff;
}

.visionneuse__etat {
  color: #fff;
  font-size: 0.9rem;
  margin-top: 0.75rem;
}

.visionneuse__fermer {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--cocon-800);
  font-size: 1.1rem;
  cursor: pointer;
}

/* ============================================================
   Admin — sauvegarde
   ============================================================ */

.bloc-sauvegarde {
  border: 1px dashed var(--cocon-300);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  background: var(--cocon-50);
}

.bloc-sauvegarde .form-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
}

@media (max-width: 640px) {
  .mur-image { max-width: 100%; max-height: 260px; }
  .apercu-image img { width: 110px; height: 110px; }
  .bloc-sauvegarde .form-actions .btn { width: 100%; }
}

/* ============================================================
   Nos Univers — fiches repliables
   ============================================================ */

/* Libellé réservé aux lecteurs d'écran. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Chaque carte garde sa propre hauteur : ouvrir une fiche n'étire pas
   ses voisines de la même ligne. Ciblé sur l'annuaire uniquement. */
#grilleMembres { align-items: start; }

.membre-card { flex-wrap: wrap; }

.membre-card__infos {
  flex: 1 1 12rem;
  min-width: 0;
}

.photo-apercu--vide {
  padding: 1.5rem;
  background: var(--cocon-100);
}

/* Les liens, juste sous l'activité. */
.membre-card__liens {
  margin: 0 0 0.25rem;
  font-size: 0.9rem;
}

.membre-card__liens a { font-weight: 600; }

/* --- Le dépli --- */

.depli {
  margin-top: 0.5rem;
  border-top: 1px solid var(--cocon-200);
  padding-top: 0.5rem;
}

.depli__bouton {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--nature-700);
  list-style: none;
  padding: 0.35rem 0;
  border-radius: var(--radius-md);
}

/* Masque le triangle par défaut des navigateurs. */
.depli__bouton::-webkit-details-marker { display: none; }
.depli__bouton::marker { content: ""; }

.depli__bouton:hover { color: var(--nature-600); }

.depli__bouton:focus-visible {
  outline: 2px solid var(--nature-600);
  outline-offset: 2px;
}

/* La flèche : un chevron dessiné en CSS, qui pivote à l'ouverture. */
.depli__fleche {
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
  margin-left: 0.15rem;
}

.depli[open] .depli__fleche { transform: rotate(45deg); }

/* Un seul des deux libellés est visible à la fois. */
.depli__texte--fermer { display: none; }
.depli[open] .depli__texte--ouvrir { display: none; }
.depli[open] .depli__texte--fermer { display: inline; }

.depli__contenu { padding-top: 0.35rem; }

.depli__presentation {
  white-space: pre-wrap;
  line-height: 1.65;
  margin: 0 0 0.5rem;
}

/* Sur téléphone : une seule colonne, photo au-dessus, texte confortable. */
@media (max-width: 640px) {
  #grilleMembres { grid-template-columns: 1fr; }
  .membre-card { gap: 0.9rem; }
  .membre-card__infos { flex-basis: 100%; }
  .depli__bouton { padding: 0.5rem 0; font-size: 0.9rem; }
}

/* ============================================================
   Nos Univers — rubriques de la fiche dépliée
   ============================================================ */

.rubrique + .rubrique {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--cocon-200);
}

.rubrique__titre {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nature-700);
}

/* Sélecteur porté à deux classes : sinon « .card p » (plus spécifique)
   imposerait sa taille de texte et la variante téléphone n'arriverait pas. */
.membre-card .rubrique__texte {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.65;
  font-size: 0.95rem;
}

@media (max-width: 640px) {
  .rubrique + .rubrique { margin-top: 1rem; padding-top: 1rem; }
  .membre-card .rubrique__texte { font-size: 0.92rem; }
}

/* ============================================================
   Le Mur — « Lire la suite » sur les publications longues
   ============================================================
   Le texte reprend exactement la mise en forme qu'il avait en style
   en ligne (pre-wrap, interligne 1.7) : rien ne change pour un
   partage court. Replié, il est limité à cinq lignes — la hauteur
   est exprimée en em pour rester juste quelle que soit la taille de
   police héritée, et vaut un nombre entier d'interlignes afin que la
   coupe tombe entre deux lignes, jamais au milieu de l'une d'elles.
   ============================================================ */

.mur-texte {
  white-space: pre-wrap;
  line-height: 1.7;
  max-height: 8.5em; /* 5 × 1.7em */
  overflow: hidden;
}

.mur-texte--deplie {
  max-height: none;
  overflow: visible;
}

.mur-deplier { margin: 0.5rem 0 0; }

.mur-deplier__bouton {
  background: none;
  border: 0;
  padding: 0.2rem 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--nature-700);
  border-radius: var(--radius-md);
}

.mur-deplier__bouton:hover { color: var(--nature-600); text-decoration: underline; }

.mur-deplier__bouton:focus-visible {
  outline: 2px solid var(--nature-600);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .mur-deplier__bouton { font-size: 0.9rem; padding: 0.4rem 0; }
}