/* Portail client — Philosophale
   Registre : calme, chaleureux, spacieux. Serif pour les titres (intention,
   soin), sans-serif pour l'interface. Aucune dépendance externe. */

:root {
  --paper:      #faf7f1;
  --paper-2:    #fffefb;
  --ink:        #2c2722;
  --ink-soft:   #6f665b;
  --line:       #e8e0d2;
  --line-soft:  #f0eadd;
  --brun:       #7a5c3e;
  --brun-fonce: #5f4630;
  --vert:       #4b7a52;
  --vert-fond:  #ecf3ec;
  --rouge:      #a4442f;
  --rouge-fond: #fbeee9;
  --ambre-fond: #f5efe3;
  --ombre:      0 1px 2px rgba(44,39,34,.04), 0 6px 20px rgba(44,39,34,.06);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

a { color: var(--brun-fonce); text-underline-offset: 2px; }
a:hover { color: var(--brun); }

/* ---------- ossature ---------- */
.entete {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.entete-in {
  max-width: 900px;
  margin: 0 auto;
  padding: .9rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
}
.marque { text-decoration: none; color: var(--ink); line-height: 1.15; }
.marque b { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; display: block; }
.marque span { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-wrap: wrap;
}
.nav a {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: .92rem;
  padding: .35rem .6rem;
  border-radius: 7px;
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); background: var(--ambre-fond); }
.nav a.actif { color: var(--ink); background: var(--ambre-fond); }
.nav form { display: inline; margin: 0; }
.nav .lien-nu {
  background: none; border: none; cursor: pointer;
  color: var(--ink-soft); font: inherit; font-size: .92rem; padding: .35rem .6rem;
}
.nav .lien-nu:hover { color: var(--rouge); }

.pastille {
  display: inline-block; min-width: 1.15rem; text-align: center;
  background: var(--rouge); color: #fff; border-radius: 1rem;
  padding: 0 .35rem; font-size: .72rem; font-weight: 600; margin-left: .15rem;
}

main {
  max-width: 680px;
  margin: 0 auto;
  padding: 2.2rem 1.25rem 5rem;
}
main.large { max-width: 820px; }

.pied {
  text-align: center; color: var(--ink-soft);
  font-size: .8rem; padding: 2.5rem 1rem 3rem;
}

/* ---------- typographie ---------- */
h1 { font-family: var(--serif); font-weight: 600; font-size: 1.8rem; line-height: 1.2; margin: 0 0 .4rem; }
.sous-titre { color: var(--ink-soft); margin: 0 0 2rem; }
h2 { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; margin: 2.4rem 0 .9rem; }
h2:first-of-type { margin-top: .5rem; }
p { margin: .6rem 0; }
.discret { color: var(--ink-soft); font-size: .88rem; }

/* ---------- cartes ---------- */
.carte {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  margin: 1.1rem 0;
  box-shadow: var(--ombre);
}
.carte.compacte { padding: 1rem 1.15rem; }
.carte > :first-child { margin-top: 0; }
.carte > :last-child { margin-bottom: 0; }

/* appel à l'action (contenus à valider en attente) */
.appel {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--ambre-fond);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.1rem 1.35rem;
  margin: 0 0 1.8rem;
}
.appel .txt { flex: 1 1 14rem; }
.appel strong { font-family: var(--serif); font-size: 1.05rem; }

/* ---------- listes ---------- */
.pile { list-style: none; padding: 0; margin: 0; }
.pile > li {
  padding: .95rem 0;
  border-top: 1px solid var(--line);
}
.pile > li:first-child { border-top: none; }
.ligne-titre { display: flex; align-items: baseline; gap: .5rem .7rem; flex-wrap: wrap; }
.ligne-titre a, .ligne-titre .nom { font-weight: 600; text-decoration: none; color: var(--ink); }
.ligne-titre a:hover { color: var(--brun); text-decoration: underline; }

/* ---------- étiquettes de statut ---------- */
.etat {
  display: inline-block;
  font-size: .74rem; font-weight: 600; letter-spacing: .02em;
  padding: .12rem .55rem; border-radius: 1rem;
  background: var(--ambre-fond); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.etat.valide, .etat.publie, .etat.planifie { background: var(--vert-fond); color: var(--vert); border-color: #d7e6d7; }
.etat.en-validation { background: var(--rouge-fond); color: var(--rouge); border-color: #f0d9d1; }

/* ---------- formulaires ---------- */
form { margin: 1rem 0; }
label { display: block; font-weight: 600; font-size: .92rem; margin: 1.1rem 0 .3rem; }
label:first-child, .carte label:first-of-type { margin-top: 0; }
.aide { color: var(--ink-soft); font-size: .84rem; margin: .2rem 0 0; }

input[type=text], input[type=email], input[type=password], input[type=date],
textarea, select {
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  transition: border-color .12s, box-shadow .12s;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brun);
  box-shadow: 0 0 0 3px rgba(122,92,62,.13);
  background: var(--paper-2);
}
textarea { min-height: 6.5rem; resize: vertical; }

input[type=file] {
  width: 100%; font: inherit; font-size: .9rem;
  padding: .8rem; border: 1.5px dashed var(--line); border-radius: 9px;
  background: var(--paper); color: var(--ink-soft); cursor: pointer;
}

.cases { display: flex; flex-wrap: wrap; gap: .5rem .4rem; margin-top: .2rem; }
.cases label {
  font-weight: 400; margin: 0;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); cursor: pointer; font-size: .92rem;
}
.cases input { accent-color: var(--brun); }

/* ---------- boutons ---------- */
.btn {
  display: inline-block; text-decoration: none; text-align: center;
  font: inherit; font-weight: 600; font-size: .95rem;
  padding: .7rem 1.3rem; border-radius: 9px; cursor: pointer;
  border: 1px solid transparent; transition: background .12s, border-color .12s;
}
.btn.primaire   { background: var(--brun); color: #fff; }
.btn.primaire:hover { background: var(--brun-fonce); }
.btn.valider    { background: var(--vert); color: #fff; }
.btn.valider:hover { background: #3f6a46; }
.btn.doux       { background: var(--paper); border-color: var(--line); color: var(--ink); }
.btn.doux:hover { background: var(--ambre-fond); }
.btn.refus      { background: var(--paper-2); border-color: #e4c9c0; color: var(--rouge); }
.btn.refus:hover { background: var(--rouge-fond); }
.btn-rangee { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }

.lien-inline {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--brun-fonce); font: inherit; font-size: .85rem; text-decoration: underline;
}

/* ---------- avis ---------- */
.avis { padding: .8rem 1rem; border-radius: 10px; margin: 1rem 0; font-size: .95rem; border: 1px solid transparent; }
.avis.err { background: var(--rouge-fond); color: var(--rouge); border-color: #f0d9d1; }
.avis.ok  { background: var(--vert-fond); color: var(--vert); border-color: #d7e6d7; }
.avis.info { background: var(--ambre-fond); color: var(--ink-soft); border-color: var(--line); }

/* ---------- aperçu d'une publication ---------- */
.post {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--ombre);
  margin: 1.2rem 0 .4rem;
}
.post-tete {
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem 1rem; border-bottom: 1px solid var(--line-soft);
  font-size: .9rem; color: var(--ink-soft);
}
.post-tete .rond {
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--ambre-fond); display: grid; place-items: center;
  font-family: var(--serif); color: var(--brun); font-size: .95rem;
}
.post-tete b { color: var(--ink); font-weight: 600; }
.post-media { display: block; width: 100%; background: var(--ambre-fond); }
.post-media img, .post-media video { display: block; width: 100%; height: auto; }
.post-carrousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.post-carrousel > * { flex: 0 0 100%; scroll-snap-align: start; }
.post-legende { padding: 1rem 1.15rem 1.2rem; white-space: pre-wrap; line-height: 1.55; }
.post-vide { padding: 2rem 1rem; text-align: center; color: var(--ink-soft); font-size: .9rem; }

.titre-yt {
  padding: .7rem 1.15rem 0; font-family: var(--serif); font-size: 1.05rem; font-weight: 600;
}

/* ---------- divers ---------- */
.notif { display: flex; gap: .7rem; }
.notif .point { flex: 0 0 auto; width: .5rem; height: .5rem; border-radius: 50%; background: var(--brun); margin-top: .55rem; }
.notif.lu .point { background: var(--line); }
.notif .corps { flex: 1; }
.piece { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--ink-soft); }

hr.doux { border: none; border-top: 1px solid var(--line); margin: 1.4rem 0; }

@media (max-width: 560px) {
  main { padding-top: 1.6rem; }
  h1 { font-size: 1.55rem; }
  .entete-in { padding: .8rem 1rem; }
  .nav { width: 100%; margin-left: 0; gap: 0; justify-content: space-between; }
  .nav a, .nav .lien-nu { padding: .4rem .45rem; font-size: .85rem; }
  .carte, .appel { border-radius: 12px; padding: 1.1rem 1.15rem; }
  .btn { display: block; width: 100%; }
  .btn-rangee { flex-direction: column; }
}