/* ============================================================
   carnet.css — la mise en page du carnet d'Acabaná
   ------------------------------------------------------------
   Parti pris : un carnet de paysagiste. Papier coquille d'œuf à grain léger, filets fins
   vert forêt, photos numérotées comme des planches (« pl. 05 »). Rien qui brille, rien
   qui flotte. Les jetons, les polices, les boutons et l'échelle vivent dans socle.css,
   partagé avec les maquettes.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--encre);
  background-color: var(--coquille);
  /* grain de papier, très léger */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .15 0 0 0 0 .09 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--foret); text-underline-offset: .18em; text-decoration-thickness: 1px; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--foret); outline-offset: 3px; }
::selection { background: var(--lin); }

/* ---------- typographie ---------- */

.surtitre {
  margin: 0;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sauge);
}
.titre-page, .porche h1 {
  margin: .25em 0 .2em;
  font-family: var(--f-titre); font-weight: 400;
  font-size: clamp(2.5rem, 9vw, 3.9rem); line-height: .98; letter-spacing: -.012em;
}
.titre-page em, .porche h1 em { font-style: italic; color: var(--foret); }
.chapeau { margin: 0 0 1.4em; max-width: 40ch; color: var(--sous-bois); font-size: 1.08rem; }
.intertitre {
  display: flex; align-items: baseline; gap: .7em;
  margin: 2.6rem 0 .6rem; padding-bottom: .5rem; border-bottom: 1px solid var(--trait-fort);
  font-family: var(--f-titre); font-weight: 400; font-size: 1.7rem; line-height: 1.1;
}
.intertitre small { font-family: var(--f-texte); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sauge); font-weight: 700; }
.aide { margin: .3em 0 0; font-size: .95rem; color: var(--sous-bois); }
.note-marge { font-size: .88rem; color: var(--sous-bois); border-left: 2px solid var(--travertin); padding: .1em 0 .1em .9em; margin: 1.2em 0; }
.planche {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sauge);
}

/* ---------- le porche ---------- */

.acb-porche { min-height: 100vh; }
.porche { display: grid; min-height: 100vh; }
.porche-image { margin: 0; height: 34vh; overflow: hidden; }
.porche-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; filter: saturate(.92); }
.porche-corps { padding: 28px var(--marge) 48px; max-width: 520px; width: 100%; }
.porche-form { margin-top: 1.4rem; display: grid; gap: .9rem; }
.etiquette { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sous-bois); }
.suggestions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: -.3rem; }
.suggestions button { border: 1px solid var(--trait-fort); background: transparent; border-radius: 999px; padding: .35em .9em; cursor: pointer; font-size: .92rem; }
.suggestions button:hover { border-color: var(--foret); color: var(--foret); }
.erreur { margin: 0; padding: .6em .9em; border-left: 3px solid var(--tuile-encre); background: var(--papier); color: var(--tuile-encre); font-size: .95rem; }
.porche-note { margin-top: 1.6rem; font-size: .92rem; color: var(--sous-bois); border-top: 1px solid var(--trait); padding-top: 1rem; }
.porche-note summary { cursor: pointer; font-weight: 700; color: var(--foret); }
.porche-note p { margin: .6em 0 0; }
@media (min-width: 900px) {
  .porche { grid-template-columns: 1.05fr 1fr; }
  .porche-image { height: 100vh; position: sticky; top: 0; }
  .porche-corps { align-self: center; padding: 64px clamp(36px, 6vw, 88px); }
}

/* ---------- la page du carnet ---------- */

.carnet { padding-bottom: calc(var(--nav-h) + 28px + env(safe-area-inset-bottom)); }
.page { width: 100%; max-width: 780px; margin: 0 auto; padding: 8px var(--marge) 32px; }

acb-entete { display: block; }
.entete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px var(--marge); border-bottom: 1px solid var(--trait);
  background: color-mix(in srgb, var(--coquille) 92%, transparent);
  position: sticky; top: 0; z-index: 20; backdrop-filter: blur(6px);
}
.marque { display: flex; align-items: baseline; gap: .45em; text-decoration: none; color: var(--encre); }
.marque b { font-family: var(--f-titre); font-weight: 400; font-style: italic; font-size: 1.45rem; color: var(--foret); }
.marque span { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sauge); }
.qui { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .25rem .6rem; min-width: 0; font-size: .92rem; }   /* l'atelier a jusqu'à cinq liens : ils passent à la ligne plutôt que d'élargir la page */
@media (max-width: 400px) { .qui { font-size: .84rem; gap: .2rem .5rem; } .qui-nom { padding: .2em .6em; } }
.qui-nom { display: inline-flex; align-items: center; gap: .45em; padding: .3em .75em; border: 1px solid var(--trait-fort); border-radius: 999px; background: var(--papier); }
.qui-nom::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--foret); }
.qui a { font-size: .88rem; }

acb-nav { display: block; }
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);   /* 5 ou 6 entrées : le cadrage n'apparaît que publié ; minmax(0, …) sinon les libellés débordent */
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  background: var(--papier); border-top: 1px solid var(--trait-fort);
}
.nav a {
  position: relative; display: grid; justify-items: center; gap: 3px; padding: 6px 2px;
  color: var(--sous-bois); text-decoration: none; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  border-radius: var(--r);
}
.nav a span:first-of-type { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 400px) { .nav a { font-size: .66rem; letter-spacing: 0; } }
.nav svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nav a[aria-current='page'] { color: var(--foret); }
.nav a[aria-current='page']::after { content: ''; position: absolute; top: -7px; left: 30%; right: 30%; height: 2px; background: var(--foret); }
.nav .pastille {
  position: absolute; top: 2px; right: calc(50% - 22px); min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--tuile-encre); color: var(--coquille); font-size: .62rem; line-height: 17px; text-align: center;
}
@media (min-width: 960px) {
  .carnet { padding-bottom: 40px; }
  .carnet-corps { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; max-width: 1120px; margin: 0 auto; }
  .nav { position: sticky; top: 72px; bottom: auto; align-self: start; grid-auto-flow: row; grid-template-columns: 1fr; gap: 2px;
    padding: 24px 0 0 var(--marge); background: transparent; border: 0; }
  .nav a { grid-template-columns: 26px 1fr; justify-items: start; align-items: center; gap: 10px; padding: 10px 12px; font-size: .95rem; }
  .nav a[aria-current='page'] { background: var(--papier); }
  .nav a[aria-current='page']::after { top: 10px; bottom: 10px; left: 0; right: auto; width: 2px; height: auto; }
  .nav .pastille { position: static; }
  /* ⚠️ La grille a déjà centré le corps : seule une page DANS la grille perd sa marge auto.
     La synthèse (admin.php) n'a pas de colonne de navigation — sans cette portée, elle
     restait collée à gauche sur grand écran (vu par Cédrick le 19/09). */
  .carnet-corps .page { margin: 0; padding-top: 26px; }
}

/* ---------- apparition, une fois ---------- */

.revele > * { animation: monter .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes monter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .revele > * { animation: none; } * { scroll-behavior: auto !important; } }

/* ---------- accueil ---------- */

.bandeau-photo { margin: 0 calc(var(--marge) * -1) 1.4rem; height: 190px; overflow: hidden; position: relative; }
.bandeau-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.bandeau-photo figcaption { position: absolute; left: var(--marge); bottom: 10px; color: var(--coquille); text-shadow: 0 1px 8px rgba(0,0,0,.35); }
@media (min-width: 960px) { .bandeau-photo { margin: 0 0 1.6rem; height: 240px; } }

.progres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--trait-fort); border: 1px solid var(--trait-fort); margin: 1.6rem 0; }
.progres a { display: grid; gap: .1rem; padding: 18px 16px 16px; background: var(--papier); color: var(--encre); text-decoration: none; transition: background-color .18s; }
.progres a:hover { background: var(--coquille); }
.progres .chiffre { font-family: var(--f-titre); font-size: 2.6rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.progres .chiffre small { font-size: 1.1rem; color: var(--sauge); }
.progres .libelle { font-weight: 700; font-size: .95rem; }
.progres .sous { font-size: .85rem; color: var(--sous-bois); }
@media (min-width: 700px) { .progres { grid-template-columns: repeat(4, 1fr); } }

.etapes { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .9rem; counter-reset: etape; }
.etapes li { display: grid; grid-template-columns: 2.2rem 1fr; gap: .6rem; align-items: baseline; }
.etapes li::before { counter-increment: etape; content: counter(etape); font-family: var(--f-titre); font-size: 1.6rem; color: var(--toile); }

/* ---------- affirmations ---------- */

.affirmation { padding: 1.3rem 0 1.2rem; border-bottom: 1px solid var(--trait); }
.affirmation-num { font-size: .7rem; font-weight: 700; letter-spacing: .12em; color: var(--sauge); }
.affirmation-texte { margin: .25rem 0 .9rem; font-family: var(--f-titre); font-size: clamp(1.35rem, 5vw, 1.6rem); line-height: 1.22; }
.choix-3 { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--trait-fort); border-radius: var(--r); overflow: hidden; background: var(--papier); }
.choix-3 button { min-height: 48px; border: 0; border-right: 1px solid var(--trait-fort); background: transparent; cursor: pointer; font-weight: 700; font-size: .95rem; color: var(--sous-bois); transition: background-color .15s, color .15s; }
.choix-3 button:last-child { border-right: 0; }
.choix-3 button:hover { background: var(--coquille); color: var(--encre); }
.choix-3 button[aria-pressed='true'][data-v='juste'] { background: var(--foret); color: var(--coquille); }
.choix-3 button[aria-pressed='true'][data-v='nuancer'] { background: var(--toile); color: #fff; }
.choix-3 button[aria-pressed='true'][data-v='faux'] { background: var(--tuile-encre); color: var(--coquille); }

/* ---------- maquettes ---------- */

.maquette-fiche { display: grid; gap: 0; margin: 1.6rem 0 2.4rem; border: 1px solid var(--trait-fort); background: var(--papier); }
.maquette-fiche figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.maquette-fiche figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.maquette-fiche:hover figure img { transform: scale(1.025); }
.maquette-fiche .lettre { position: absolute; left: 14px; top: 8px; font-family: var(--f-titre); font-size: 4.2rem; line-height: 1; color: var(--coquille); text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.maquette-corps { padding: 18px 18px 20px; }
.maquette-corps h3 { margin: 0; font-family: var(--f-titre); font-weight: 400; font-size: 1.9rem; line-height: 1.05; }
.maquette-corps .polices { font-size: .8rem; color: var(--sauge); letter-spacing: .04em; margin: .2rem 0 .7rem; }
.maquette-corps p { margin: 0 0 1rem; }
@media (min-width: 700px) {
  .maquette-fiche { grid-template-columns: 1fr 1.1fr; }
  .maquette-fiche figure { aspect-ratio: auto; min-height: 100%; }
}

/* ---------- questions ---------- */

.question { margin: 0 0 2.2rem; padding-bottom: 1.8rem; border-bottom: 1px solid var(--trait); }
.question figure { margin: 0 0 .9rem; }
.question figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); }
.question figure.logo img { width: 112px; aspect-ratio: 1; border-radius: 50%; }
.question figcaption { margin-top: .35rem; }
.question h3 { margin: .1rem 0 .2rem; font-family: var(--f-titre); font-weight: 400; font-size: clamp(1.45rem, 5.5vw, 1.75rem); line-height: 1.15; }
.options { display: grid; gap: .45rem; margin: .9rem 0 .6rem; }
.options button {
  display: grid; grid-template-columns: 22px 1fr; gap: .7rem; align-items: center; text-align: left;
  min-height: 50px; padding: .55em .9em; border: 1px solid var(--trait-fort); border-radius: var(--r);
  background: var(--papier); cursor: pointer; transition: border-color .15s, background-color .15s;
}
.options button:hover { border-color: var(--foret); }
.options .coche { width: 20px; height: 20px; border: 1.5px solid var(--sauge); border-radius: 50%; display: grid; place-items: center; }
.options[data-multi] .coche { border-radius: 3px; }
.options button[aria-pressed='true'] { border-color: var(--foret); background: var(--coquille); }
.options button[aria-pressed='true'] .coche { background: var(--foret); border-color: var(--foret); }
.options button[aria-pressed='true'] .coche::after { content: ''; width: 8px; height: 8px; background: var(--coquille); border-radius: 50%; }
.options[data-multi] button[aria-pressed='true'] .coche::after { width: 10px; height: 6px; border-radius: 0; background: none; border-left: 2px solid var(--coquille); border-bottom: 2px solid var(--coquille); transform: rotate(-45deg) translate(1px, -1px); }

/* ---------- dépôts ---------- */

.prise { margin: 0 0 1.6rem; padding: 18px 16px; border: 1px solid var(--trait-fort); background: var(--papier); border-radius: var(--r); }
.prise h3 { margin: 0; font-family: var(--f-titre); font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
.prise.libre { background: transparent; border-style: dashed; }

/* ---------- traces ---------- */

.traces { list-style: none; margin: 1rem 0; padding: 0; border-left: 1px solid var(--trait-fort); }
.traces li { position: relative; padding: .35rem 0 .35rem 1.1rem; font-size: .93rem; }
.traces li::before { content: ''; position: absolute; left: -4px; top: .85rem; width: 7px; height: 7px; border-radius: 50%; background: var(--coquille); border: 1.5px solid var(--sauge); }
.traces time { color: var(--sauge); font-variant-numeric: tabular-nums; margin-right: .5em; }

/* ---------- inspirations, sous les maquettes ---------- */

.inspirations { display: grid; gap: 1.2rem; margin: 1rem 0 2.4rem; }
.inspiration-fiche { display: grid; border: 1px solid var(--trait-fort); background: var(--papier); }
.inspiration-lien { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--coquille); border-bottom: 1px solid var(--trait); }
.inspiration-motif svg { width: min(200px, 60%); height: auto; fill: none; stroke: var(--foret); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 400; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s ease; }
.inspiration-fiche:hover .inspiration-motif svg { animation: trace-motif 1.6s ease both; }
@keyframes trace-motif { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .inspiration-fiche:hover .inspiration-motif svg { animation: none; } }
@media (min-width: 700px) {
  .inspiration-fiche { grid-template-columns: 1fr 1.1fr; }
  .inspiration-lien { aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 1px solid var(--trait); }
}

/* ---------- le temps échangé ---------- */

.t-brouillon { margin: 1rem 0; padding: .7rem .9rem; border: 1px dashed var(--tuile-encre); border-radius: var(--r); color: var(--tuile-encre); font-size: .92rem; background: var(--papier); }
.t-totaux { grid-template-columns: repeat(2, 1fr) !important; }
.t-total { display: grid; gap: .1rem; padding: 18px 16px 16px; background: var(--papier); }
.t-formulaire { display: grid; gap: .9rem; margin: 1.4rem 0 2rem; }
.t-formulaire .options { margin: .2rem 0 0; }
.t-duree-saisie { display: flex; align-items: center; gap: .5rem; }
.t-duree-saisie input { width: 5.2rem; text-align: center; }
.t-raccourcis, .t-amorces { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .45rem; }
.t-amorces { padding-top: .8rem; border-top: 1px solid var(--trait); }
.t-amorces .aide { flex-basis: 100%; margin: 0 0 .2rem; }
.t-petit { min-height: 36px; padding: 0 .85em; border: 1px solid var(--trait-fort); border-radius: 999px; background: transparent; cursor: pointer; font-size: .84rem; font-weight: 700; color: var(--sous-bois); }
.t-petit:hover { border-color: var(--foret); color: var(--foret); }
.t-mois { margin: 1.6rem 0 .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sauge); }
.t-ligne { padding: .8rem 0 .7rem; border-bottom: 1px solid var(--trait); }
.t-ligne-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.t-ligne-tete time { font-size: .85rem; color: var(--sous-bois); }
.t-duree { font-family: var(--f-titre); font-weight: 400; font-size: 1.5rem; color: var(--foret); white-space: nowrap; }
.t-quoi { margin: .1rem 0 0; font-family: var(--f-titre); font-size: 1.3rem; line-height: 1.2; }
.t-sens { margin: .15rem 0 0; font-size: .85rem; color: var(--toile); font-weight: 700; }
.t-note { margin: .3rem 0 0; font-size: .92rem; color: var(--sous-bois); white-space: pre-wrap; }
.t-actions { display: flex; flex-wrap: wrap; gap: .2rem .8rem; align-items: center; margin-top: .2rem; }
.t-auteur { font-size: .78rem; color: var(--sauge); margin-right: auto; }
.rien-encore { color: var(--sauge); font-style: italic; }

/* ---------- accueil : du nouveau ---------- */

.nouveautes { display: grid; gap: .6rem; margin: .8rem 0 1.4rem; }
.nouveaute { display: grid; gap: .25rem; padding: 14px 16px; border: 1px solid var(--trait-fort); border-left: 3px solid var(--travertin); background: var(--papier); color: var(--encre); text-decoration: none; transition: background-color .18s; }
.nouveaute:hover { background: var(--coquille); }
.nouveaute b { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; font-family: var(--f-titre); font-weight: 400; font-size: 1.4rem; line-height: 1.15; color: var(--foret); }
.nouveaute span { font-size: .95rem; color: var(--sous-bois); }
.nouveaute .statut { font-family: var(--f-texte); font-size: .68rem; }