/* ============================================================
   Le Laboratoire de Lewel — styles propres à /labo/
   S'appuie sur styles.css et site-v2.css (palette, typographie,
   boutons, en-tête, pied de page). Pensé pour le téléphone d'abord.
   ============================================================ */

/* ---------- 1. En-tête de la page du Laboratoire ---------- */
.labo-hero-marque {
  display: inline-flex;
  margin-bottom: 1.3rem;
}

.labo-hero-marque .spark { width: 22px; height: 22px; fill: var(--copper-500); }

/* ---------- 2. Repères communs ---------- */
.labo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .55rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}

.labo-meta-sep { color: var(--copper-400); }

/* « 1er » : l'ordinal reste en minuscules surélevées dans la ligne en capitales. */
.labo-meta sup {
  font-size: .8em;
  line-height: 0;
  vertical-align: .5em;
  text-transform: none;
  letter-spacing: 0;
}
.labo-meta-categorie { color: var(--copper-600); }
.labo-meta-rubrique { color: var(--navy-800); }

.labo-sans-image {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1200 / 630;
  background:
    radial-gradient(90% 120% at 15% 0%, rgba(198, 139, 98, 0.16), transparent 60%),
    linear-gradient(150deg, var(--navy-700), var(--navy-950));
}

.labo-sans-image .spark { width: 34px; height: 34px; fill: var(--copper-400); }

/* ---------- 3. Le conseil de la semaine ---------- */
.labo-semaine { padding: 72px 0 92px; }

.labo-rubrique {
  margin-bottom: 2.2rem;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  text-align: center;
}

/* L'étoile reste accrochée au premier mot quand le titre passe sur deux lignes. */
.labo-rubrique .spark {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: .6rem;
  vertical-align: .12em;
  fill: var(--copper-500);
}

.labo-une {
  display: grid;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}

.labo-une-visuel { display: block; background: var(--navy-950); }

/* height: auto annule la hauteur écrite dans la balise (630) : sans lui, le
   rapport largeur/hauteur ne s'appliquerait pas. Idem pour les autres images. */
.labo-une-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}

.labo-une-texte {
  display: grid;
  align-content: center;
  gap: .9rem;
  padding: 1.7rem 1.5rem 1.9rem;
}

.labo-une-titre {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.4vw, 2.4rem);
  line-height: 1.16;
}

.labo-une-titre a { transition: color .2s; }
.labo-une-titre a:hover { color: var(--copper-600); }

.labo-une-extrait { color: var(--muted); }

.labo-une .card-link { margin-top: .3rem; }

.labo-vide {
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 500;
  color: var(--muted);
}

/* ---------- 4. Les conseils précédents ---------- */
.labo-precedents { padding: 84px 0 92px; }

.labo-precedents-tete {
  display: grid;
  justify-items: center;
  gap: 1.4rem;
  margin-bottom: 2.6rem;
  text-align: center;
}

.labo-precedents-tete h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); }

.labo-filtres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}

.labo-filtres a {
  padding: .42rem .95rem;
  font-size: .86rem;
  font-weight: 500;
  color: var(--navy-700);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  transition: border-color .2s, background-color .2s, color .2s;
}

.labo-filtres a:hover { border-color: var(--navy-800); }

.labo-filtres a[aria-current="page"] {
  color: var(--white);
  background: var(--navy-800);
  border-color: var(--navy-800);
}

/* ---------- 5. Les cartes ---------- */
.labo-cartes {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem;
}

/* Le script masque les cartes au-delà des douze premières : la règle
   l'emporte sur l'affichage en grille. */
.labo-cartes > [hidden] { display: none; }

.labo-carte { height: 100%; }

.labo-carte-lien {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}

.labo-carte-lien:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--copper-200);
}

.labo-carte-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  background: var(--navy-950);
  border-bottom: 1px solid var(--line);
}

.labo-carte-corps {
  display: grid;
  align-content: start;
  gap: .5rem;
  padding: 1.25rem 1.35rem 1.5rem;
}

.labo-carte-titre {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy-900);
  transition: color .2s;
}

.labo-carte-lien:hover .labo-carte-titre { color: var(--copper-600); }

/* Deux lignes de résumé au plus. */
.labo-carte-resume {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--muted);
}

.labo-plus { margin-top: 2.4rem; text-align: center; }
.labo-plus .btn[hidden] { display: none; }

/* ---------- 6. La page d'un conseil ---------- */
.labo-article-tete {
  padding: calc(var(--header-h) + 52px) 0 2.4rem;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(181, 121, 79, .08), transparent 72%),
    var(--paper);
}

.labo-retour {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--navy-800);
  transition: color .2s;
}

.labo-retour:hover { color: var(--copper-600); }

.labo-article-tete h1 {
  margin-top: .8rem;
  font-size: clamp(2.1rem, 5.4vw, 3.3rem);
  line-height: 1.12;
}

.labo-couverture { margin-bottom: 2.6rem; }

.labo-couverture-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 980px;
  margin-inline: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  background: var(--navy-950);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}

/* Le texte du conseil : confort de lecture d'abord. */
.labo-texte {
  font-size: 1.07rem;
  line-height: 1.78;
}

.labo-texte > * + * { margin-top: 1.15rem; }

.labo-texte h2 {
  margin-top: 2.5rem;
  font-size: clamp(1.6rem, 3.6vw, 2rem);
  line-height: 1.2;
}

.labo-texte h3 { margin-top: 2rem; font-size: 1.18rem; }

.labo-texte > h2:first-child,
.labo-texte > h3:first-child { margin-top: 0; }

.labo-texte strong { font-weight: 600; color: var(--navy-900); }

.labo-texte a {
  color: var(--copper-600);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.labo-texte ul {
  list-style: none;
  display: grid;
  gap: .55rem;
}

.labo-texte ul li {
  position: relative;
  padding-left: 1.4rem;
}

.labo-texte ul li::before {
  content: "";
  position: absolute;
  left: .2rem;
  top: .72em;
  width: 7px;
  height: 7px;
  background: var(--copper-400);
  transform: rotate(45deg);
}

.labo-texte ol {
  display: grid;
  gap: .55rem;
  padding-left: 1.4rem;
}

.labo-texte ol li::marker { color: var(--copper-600); font-weight: 600; }

.labo-texte figure { margin-block: 2rem; }

.labo-texte figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.labo-texte figcaption {
  margin-top: .6rem;
  font-size: .86rem;
  color: var(--muted);
  text-align: center;
}

/* ---------- 7. Sous le conseil ---------- */
.labo-apres {
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
  padding-bottom: 5rem;
}

.labo-partage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.labo-partage-titre {
  margin-right: .2rem;
  font-weight: 600;
  color: var(--navy-900);
}

.labo-partage a,
.labo-copier {
  display: inline-flex;
  align-items: center;
  padding: .48rem 1rem;
  font-family: var(--font-sans);
  font-size: .88rem;
  font-weight: 600;
  color: var(--navy-800);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}

.labo-partage a:hover,
.labo-copier:hover { border-color: var(--navy-800); background: var(--white); }

/* Copier le lien a besoin de JavaScript : sans lui, le bouton ne s'affiche pas. */
.labo-copier { display: none; }
.js .labo-copier { display: inline-flex; }

.labo-copie {
  font-size: .86rem;
  font-weight: 600;
  color: #1F6B4F;
}

.labo-contact {
  display: grid;
  gap: 1.2rem;
  padding: 1.6rem 1.6rem 1.7rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--copper-500);
  border-radius: 12px;
}

.labo-contact-titre {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy-900);
}

.labo-contact-titre + p { margin-top: .3rem; color: var(--muted); }

.labo-contact .btn { justify-self: start; }

.labo-voisins {
  display: grid;
  gap: .9rem;
}

.labo-voisin {
  display: grid;
  gap: .3rem;
  padding: 1.1rem 1.3rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .25s, box-shadow .25s;
}

.labo-voisin:hover { border-color: var(--copper-200); box-shadow: var(--shadow-card); }

.labo-voisin-sens {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--copper-600);
}

.labo-voisin-titre {
  font-weight: 600;
  line-height: 1.4;
  color: var(--navy-900);
}

/* ---------- 8. À lire également ---------- */
.labo-a-lire { padding: 84px 0 92px; }

.labo-a-lire h2 {
  margin-bottom: 2.4rem;
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  text-align: center;
}

/* ---------- 9. Pouces et compteurs ---------- */

/* Texte réservé aux lecteurs d'écran. */
.labo-lecteur-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.labo-icone {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.labo-compteurs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  margin-top: .2rem;
  font-size: .84rem;
  font-weight: 600;
  color: var(--muted);
}

.labo-compteur { display: inline-flex; align-items: center; gap: .35rem; }
.labo-compteur .labo-icone { width: 16px; height: 16px; color: var(--copper-600); }

/* Le pouce a besoin du script : sans lui, il ne s'affiche pas. */
.labo-pouce { display: none; }

.js .labo-pouce {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 38px;
  padding: .4rem .85rem;
  font-family: var(--font-sans);
  font-size: .88rem;
  font-weight: 600;
  color: var(--navy-800);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}

.js .labo-pouce:hover { border-color: var(--navy-800); background: var(--white); }

.labo-pouce[aria-pressed="true"] {
  color: var(--copper-600);
  background: var(--copper-100);
  border-color: var(--copper-400);
}

.labo-pouce[aria-pressed="true"] .labo-icone { fill: var(--copper-200); }
.labo-pouce[aria-busy="true"] { cursor: progress; }
.labo-pouce-nombre:empty { display: none; }

.labo-partage .labo-pouce { margin-right: .6rem; }

/* ---------- 10. Commentaires ---------- */
.labo-commentaires { padding: 84px 0 96px; }

.labo-commentaires h2 {
  margin-bottom: 1.8rem;
  font-size: clamp(1.8rem, 3.6vw, 2.5rem);
}

.labo-fil {
  list-style: none;
  display: grid;
  gap: 1.4rem;
}

.labo-fil-element {
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}

.labo-commentaire-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem .5rem;
  font-size: .86rem;
  color: var(--muted);
}

.labo-auteur { font-weight: 600; color: var(--navy-900); }

.labo-badge {
  padding: .1rem .6rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--copper-600);
  background: var(--copper-100);
  border-radius: 99px;
}

.labo-commentaire-texte { margin: .35rem 0 .6rem; }
.labo-commentaire-texte p + p { margin-top: .6rem; }

.labo-commentaire-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
}

.labo-commentaire-actions .labo-pouce { min-height: 34px; padding: .3rem .75rem; font-size: .84rem; }
.labo-commentaire-actions .labo-icone { width: 16px; height: 16px; }

/* Répondre et Annuler : des boutons à l'allure de liens. */
.labo-repondre,
.labo-annuler {
  padding: .35rem .2rem;
  font-family: var(--font-sans);
  font-size: .86rem;
  font-weight: 600;
  color: var(--navy-800);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .2s;
}

.labo-repondre:hover,
.labo-annuler:hover { color: var(--copper-600); }

.labo-repondre { display: none; }
.js .labo-repondre { display: inline-block; }

.labo-commentaire-retire {
  font-style: italic;
  color: var(--muted);
}

.labo-reponses {
  list-style: none;
  display: grid;
  gap: 1.1rem;
  margin-top: 1.1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--copper-100);
}

.labo-repli { margin-top: .9rem; }

.labo-repli summary {
  width: fit-content;
  font-size: .88rem;
  font-weight: 600;
  color: var(--copper-600);
  cursor: pointer;
}

.labo-repli[open] summary { margin-bottom: .2rem; }

.labo-zone-reponse { padding-left: 1rem; }
.labo-zone-reponse:empty { display: none; }

.labo-ecrire { margin-top: 1.8rem; }
.labo-ecrire .btn[hidden] { display: none; }

/* Le formulaire, pour un commentaire comme pour une réponse. */
.labo-formulaire {
  display: grid;
  gap: .2rem;
  margin-top: 1rem;
  padding: 1.4rem 1.3rem 1.3rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.labo-compte-caracteres {
  margin-top: .3rem;
  font-size: .8rem;
  color: var(--muted);
  text-align: right;
}

.labo-compte-caracteres.labo-depasse { color: #9A3D32; font-weight: 600; }

.labo-charte { font-size: .85rem; color: var(--muted); }

.labo-formulaire-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  margin-top: .8rem;
}

.labo-formulaire[aria-busy="true"] { cursor: progress; }
.labo-formulaire .btn:disabled { cursor: wait; opacity: .68; }

.labo-retour-envoi {
  margin-top: .6rem;
  font-size: .9rem;
  font-weight: 500;
  color: #9A3D32;
}

.labo-merci {
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  font-weight: 600;
  color: #1F6B4F;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid #1F6B4F;
  border-radius: 10px;
}

/* ---------- 11. Pages réservées à Alex ---------- */
.labo-privee { padding: calc(var(--header-h) + 60px) 0 90px; }

.labo-privee h1 {
  margin-bottom: 1.4rem;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.15;
}

.labo-apercu {
  padding: 1.3rem 1.4rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.labo-apercu-fil {
  margin-top: .4rem;
  font-size: .92rem;
  font-style: italic;
  color: var(--muted);
}

.labo-apercu-conseil { margin-top: 1.1rem; color: var(--muted); }
.labo-apercu-conseil a { color: var(--copper-600); font-weight: 600; }

.labo-moderation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.8rem;
}

.labo-moderation-suite { margin-top: 1.6rem; }

.labo-boite {
  list-style: none;
  display: grid;
  gap: 1.4rem;
  margin-top: 2rem;
}

.labo-courriel {
  padding: 1.4rem 1.4rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.labo-courriel h2 { font-size: 1.45rem; line-height: 1.25; }

.labo-courriel-date { margin-top: .3rem; font-size: .85rem; color: var(--muted); }

.labo-courriel-texte {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  font-family: var(--font-sans);
  font-size: .9rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--paper);
  border-radius: 8px;
}

.labo-courriel-liens {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.1rem;
}

/* ---------- 12. Images agrandies et aperçu ---------- */
.labo-agrandissable { cursor: zoom-in; }

.labo-loupe {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 4rem 1rem 1.5rem;
  background: rgba(18, 28, 49, .92);
  cursor: zoom-out;
}

.labo-loupe img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}

.labo-loupe-fermer {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: .5rem 1.1rem;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  color: var(--white);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 99px;
  cursor: pointer;
}

.labo-loupe-ouverte { overflow: hidden; }

/* L'aperçu de l'administration : un bandeau toujours visible, en bas. */
.labo-bandeau-apercu {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 150;
  padding: .75rem 1rem;
  font-size: .92rem;
  font-weight: 600;
  text-align: center;
  color: var(--white);
  background: var(--copper-600);
}

.labo-bandeau-apercu a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; margin-left: .6rem; }

/* ---------- 13. Écrans plus larges ---------- */
@media (min-width: 640px) {
  .labo-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }

  .labo-contact {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 1.8rem 2rem;
  }

  .labo-voisins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .labo-voisin-precedent { grid-column: 1; }
  .labo-voisin-suivant { grid-column: 2; text-align: right; }

  .labo-reponses, .labo-zone-reponse { padding-left: 1.5rem; }
  .labo-formulaire { padding: 1.6rem 1.7rem 1.5rem; }
}

@media (min-width: 900px) {
  .labo-une { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }

  .labo-une-visuel {
    position: relative;
    min-height: 360px;
  }

  .labo-une-visuel > .labo-une-image {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }

  .labo-une-texte { padding: 2.6rem 2.6rem 2.8rem; }
}

@media (min-width: 1000px) {
  .labo-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .labo-semaine { padding: 56px 0 72px; }
  .labo-precedents, .labo-a-lire, .labo-commentaires { padding: 64px 0 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .labo-carte-lien, .labo-voisin, .labo-pouce { transition: none; }
  .labo-carte-lien:hover { transform: none; }
}