/*
 * aqua-lowtech / single.css
 * Article (single.php)
 * Genere depuis main.css + style.css - ordre des rules preserve.
 */

/* Barre de progression de lecture : animée par transform (pas de recalcul de mise en page). */
#reading-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--color-primary, #2e7d32);
    z-index: 9999;
    transform: scaleX(0);
    transform-origin: 0 50%;
    will-change: transform;
    pointer-events: none;
}

/* tableau articles  */
.single-post .aqua-table {
  width: 100%;
  margin: 20px 0;
  border-collapse: collapse;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1a4d2e;
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}

.single-post .aqua-table thead {
  background-color: #27ae60;
  color: white;
}

.single-post .aqua-table th, 
.single-post .aqua-table td {
  border: 1px solid #e0e0e0;
  padding: 12px;
  text-align: left;
  line-height: 1.6;
}

.single-post .aqua-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

@media screen and (max-width: 600px) {
  .single-post .aqua-table {
      font-size: 14px;
    }

  .single-post .aqua-table thead {
      display: none;
    }

  .single-post .aqua-table tr {
      display: block;
      margin-bottom: 10px;
      border: 2px solid #27ae60;
    }

  .single-post .aqua-table td {
      display: block;
      text-align: right;
      border-bottom: 1px solid #e0e0e0;
    }

  .single-post .aqua-table td::before {
      content: attr(data-label);
      float: left;
      font-weight: bold;
      color: #1a4d2e;
    }

}

/* ══════════════════════════════════════════════════════════════════════════════
   BOUTONS CTA VERTS DANS LE CORPS D'ARTICLE — couleur du texte
   ══════════════════════════════════════════════════════════════════════════════
   `.article-body a` (plus bas dans ce fichier) colore TOUS les liens de
   l'article en vert foncé. Cette feuille étant chargée après base.css, à
   spécificité égale elle écrasait le `color: #ffffff` de `a.btn-lowtech` :
   les gros boutons verts des anciens articles affichaient un texte sombre,
   illisible sur leur fond vert.

   Deux écritures coexistent dans le contenu historique :
     • le lien PORTE la classe      <a class="btn-lowtech">…</a>
     • le lien est IMBRIQUÉ dedans  <div class="btn-lowtech"><a>…</a></div>
   Les deux sont traitées, dans les cinq états. Les états sont écrits
   explicitement : sans cela, `.article-body a:hover` (0,2,1) l'emportait à
   spécificité égale sur `.article-body a.btn-lowtech`, par ordre de source.

   Pas de !important : les variantes volontairement inversées du bouton
   (fond blanc, texte vert — ex. `.partnership-block .btn-lowtech`) gardent
   ainsi la main sur cette règle.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Le lien EST le bouton */
.single-post a.btn-lowtech,
.single-post a.btn-lowtech:link,
.single-post a.btn-lowtech:visited,
.single-post a.btn-lowtech:hover,
.single-post a.btn-lowtech:focus,
.single-post a.btn-lowtech:active,
.article-body a.btn-lowtech,
.article-body a.btn-lowtech:link,
.article-body a.btn-lowtech:visited,
.article-body a.btn-lowtech:hover,
.article-body a.btn-lowtech:focus,
.article-body a.btn-lowtech:active,
/* Le lien est IMBRIQUÉ dans le bouton */
.single-post .btn-lowtech a,
.single-post .btn-lowtech a:link,
.single-post .btn-lowtech a:visited,
.single-post .btn-lowtech a:hover,
.single-post .btn-lowtech a:focus,
.single-post .btn-lowtech a:active,
.article-body .btn-lowtech a,
.article-body .btn-lowtech a:link,
.article-body .btn-lowtech a:visited,
.article-body .btn-lowtech a:hover,
.article-body .btn-lowtech a:focus,
.article-body .btn-lowtech a:active {
    color: #ffffff;
    text-decoration: none;
}

/* Les éléments de mise en forme collés dans le bouton par l'éditeur
   (<strong>, <em>, <span>) héritent de la même couleur. */
.single-post a.btn-lowtech *,
.article-body a.btn-lowtech *,
.single-post .btn-lowtech a *,
.article-body .btn-lowtech a * {
    color: inherit;
}

.article-body {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Fil d'Ariane */
.breadcrumbs {
    font-size: 0.9rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumbs a {
    color: var(--color-primary);
}

.breadcrumbs .separator {
    color: var(--color-text-light);
}

.breadcrumbs .current {
    color: var(--color-text);
}

/* En-tête de l'article */
.article-header {
    margin-bottom: var(--spacing-md);
    text-align: center;
}

/* Image mise en avant */
.article-featured-image {
    margin: var(--spacing-md) 0;
    border-radius: 12px;
    overflow: hidden;
}

.article-featured-image img {
    width: 100%;
    height: auto;
}

/* ====================================
   TEMPLATE SINGLE ARTICLE
   ==================================== */
/* BREADCRUMBS */
.breadcrumbs-section {
    background-color: var(--color-bg);
    padding: 1rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    flex-wrap: wrap;
}

.breadcrumbs a {
    color: var(--color-text-light);
    transition: var(--transition-smooth);
}

.breadcrumbs a:hover {
    color: var(--color-primary);
}

.breadcrumbs .separator {
    color: var(--color-text-light);
}

.breadcrumbs .current {
    color: var(--color-dark);
    font-weight: 600;
}

/* HEADER ARTICLE */
.article-header {
    padding: 3rem 0 2rem;
    text-align: center;
    background-color: var(--color-bg);
}

/* Badges d'en-tête : rendu .aq-badge (composants.css), un cran plus grand ici. */
.article-header .article-category-badge {
    font-size: 0.78rem;
    padding: 0.3rem 0.85rem;
    margin-bottom: 1.25rem;
}

.article-meta-header {
    display: flex;
    justify-content: center;
    gap: 2rem;
    color: var(--color-text-light);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.meta-item svg {
    color: var(--color-accent);
}

/* IMAGE MISE EN AVANT */
.article-featured-image {
    background-color: var(--color-bg);
    padding: 0 0 3rem;
}

.article-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* LAYOUT ARTICLE */
.article-content-section {
    padding: 3rem 0;
}

.article-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 3rem;
}

/* CONTENU PRINCIPAL */
.article-main {
    min-width: 0;
}

.article-body {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-text);
}

.article-body h2 {
    font-size: 2rem;
    margin: 2.5rem 0 1.25rem;
    color: var(--color-dark);
    padding-bottom: 0.75rem;
    border-bottom: 3px solid var(--color-accent);
}

.article-body h3 {
    font-size: 1.5rem;
    margin: 2rem 0 1rem;
    color: var(--color-primary);
}

.article-body h4 {
    font-size: 1.25rem;
    margin: 1.5rem 0 0.75rem;
    color: var(--color-primary);
}

.article-body p {
    margin-bottom: 1.5rem;
}

.article-body ul,
.article-body ol {
    margin: 1.5rem 0;
    padding-left: 2rem;
}

.article-body li {
    margin-bottom: 0.75rem;
}

.article-body blockquote {
    background-color: var(--color-bg);
    border-left: 4px solid var(--color-accent);
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    font-style: italic;
    font-size: 1.15rem;
}

.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 2rem 0;
    cursor: zoom-in;
}

/* Une image déjà enveloppée dans un lien garde le curseur du lien : le clic
   doit suivre le lien, pas ouvrir l'agrandissement (le JS l'ignore aussi). */
.article-body a img { cursor: pointer; }

/* ══════════════════════════════════════════════════════════════════════════════
   LIGHTBOX — agrandissement des images d'article
   Le markup est créé à la demande par main.js : tant qu'aucune image n'est
   cliquée, rien n'est ajouté au DOM.
   Le z-index reste SOUS celui de la bannière de consentement (2147483000) :
   un agrandissement ne doit jamais recouvrir le bandeau légal.
   ══════════════════════════════════════════════════════════════════════════════ */

.aqua-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-sizing: border-box;
    background: rgba(8, 28, 21, 0.92);
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 0.22s ease;
}

/* display:flex ci-dessus l'emporterait sur le display:none que le navigateur
   applique à [hidden] : sans cette règle, la lightbox resterait visible. */
.aqua-lightbox[hidden] { display: none !important; }
.aqua-lightbox.is-open { opacity: 1; }

.aqua-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    cursor: zoom-out;
    transform: scale(0.97);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.aqua-lightbox.is-open .aqua-lightbox__img { transform: scale(1); }

.aqua-lightbox__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-size: 1.75rem;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background-color 0.2s ease;
}

.aqua-lightbox__close:hover { background: rgba(0, 0, 0, 0.6); }

.aqua-lightbox__close:focus-visible {
    outline: 3px solid #95d5b2;
    outline-offset: 2px;
}

/* Le fond ne défile pas sous les doigts pendant l'agrandissement. */
body.a-lightbox-ouverte { overflow: hidden; }

@media (max-width: 768px) {
    .aqua-lightbox { padding: 0.75rem; }
    .aqua-lightbox__close { top: 0.5rem; right: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .aqua-lightbox,
    .aqua-lightbox__img { transition: none; }
}

.article-body a {
    color: var(--color-primary);
    text-decoration: underline;
}

.article-body a:hover {
    color: var(--color-secondary);
}

/* Les encarts d'affiliation du corps d'article sont des composants, pas du texte
   courant : leur bouton est un pavé orange et leur titre un intertitre. La règle
   ci-dessus les rattrapait — même spécificité que « .affiliation-title a » de
   base.css, mais single.css est chargée après, donc elle gagnait. Le soulignement
   barrait le libellé des six boutons du guide débutant. */
.article-body .affiliation-title a,
.article-body a.affiliation-cta {
    text-decoration: none;
}

.article-body .affiliation-title a {
    color: var(--vert-fonce, #1a3d2a);
}

.article-body .affiliation-title a:hover {
    color: var(--vert-principal, #2d5a3d);
}

.article-body a.affiliation-cta,
.article-body a.affiliation-cta:hover {
    color: #1a1a1a;
}

.article-body strong {
    font-weight: 700;
    color: var(--color-dark);
}

/* ══════════════════════════════════════════════════════════════════════════════
   BLOCS DE FIN D'ARTICLE — FAQ, partage, notation, mots-clés
   Même contenant pour tous : carte blanche bordée, titre .aq-titre (composants.css).
   ══════════════════════════════════════════════════════════════════════════════ */

.article-faq,
.article-share,
.article-rating,
.article-tags {
    margin: 2.5rem 0;
}

.article-share,
.article-rating,
.article-tags {
    padding: 1.25rem 1.5rem;
    background-color: #fff;
    border: 1px solid #d4e8d0;
    border-radius: 12px;
}

/* FAQ */
.article-faq__cta {
    margin-top: 1.5rem;
    text-align: center;
}

.article-faq__bonus {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    color: var(--color-text-light);
}

/* Partage : boutons discrets, le logo garde la couleur de la marque. */
.share-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.share-btn--facebook svg { color: #1877f2; }
.share-btn--pinterest svg { color: #e60023; }

/* Notation */
.rating-stars {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

/* Cible tactile de 44 × 44 px minimum (WCAG 2.5.5). */
.star-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: none;
    border-radius: var(--aq-rayon);
    cursor: pointer;
    padding: 0.25rem;
    transition: transform 0.15s ease;
    color: var(--color-text-light);
}

.star-btn:hover,
.star-btn:focus-visible {
    transform: scale(1.2);
}

.star-btn:focus-visible {
    outline: 2px solid #2d7d46;
    outline-offset: 1px;
}

.rating-result:empty {
    display: none;
}

.rating-result:focus {
    outline: none;
}

.star-btn svg {
    display: block;
}

.rating-result {
    font-weight: 600;
    color: var(--color-primary);
    font-size: 1rem;
    margin: 0;
}

/* Mots-clés : pastilles de la famille .aqua-tag des fiches. */
.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.article-tags .tag-item {
    display: inline-block;
    background-color: #e8f4ec;
    border: 1px solid #d4e8d0;
    color: #276e3d;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.article-tags .tag-item:hover,
.article-tags .tag-item:focus-visible {
    background-color: #2d7d46;
    border-color: #2d7d46;
    color: #fff;
}

/* NAVIGATION PREV/NEXT */
.article-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 3rem 0;
}

.nav-prev,
.nav-next {
    padding: 1.5rem;
    background-color: var(--color-bg);
    border-radius: 12px;
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-prev:hover,
.nav-next:hover {
    background-color: var(--color-accent);
    color: white;
    transform: translateY(-3px);
}

.nav-label {
    font-size: 0.85rem;
    color: var(--color-text-light);
    font-weight: 600;
}

.nav-prev:hover .nav-label,
.nav-next:hover .nav-label {
    color: rgba(255, 255, 255, 0.8);
}

.nav-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-dark);
}

.nav-prev:hover .nav-title,
.nav-next:hover .nav-title {
    color: white;
}

.nav-next {
    text-align: right;
}

/* SIDEBAR ARTICLE */
.article-sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
}

.toc-widget {
    background-color: #fffbeb;
    border: 2px solid #fbbf24;
}

/* ARTICLES SIMILAIRES */
.related-articles {
    padding: 4rem 0;
    background-color: var(--color-bg);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Cartes calquées sur .hub-card (Hub poissons) : bordure verte, photo 4/3. */
.related-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #d4e8d0;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.related-card:hover,
.related-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 4px 20px rgba(45, 125, 70, 0.12);
    border-color: #a8d5b5;
}

.related-image {
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #e8f4ec;
}

.related-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.related-card:hover .related-image img {
    transform: scale(1.05);
}

.related-content {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
    padding: 1rem 1.1rem 1.1rem;
}

.related-card-title {
    font-size: 1.05rem;
    line-height: 1.35;
    margin: 0;
}

.related-card-title a {
    color: #1a1a1a;
    text-decoration: none;
}

/* Toute la carte est cliquable, sans dupliquer le lien. */
.related-card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.related-card-title a:hover {
    color: #2d7d46;
}

.related-meta {
    margin-top: auto;
    color: #56675b;
    font-size: 0.82rem;
}

.related-cta {
    text-align: center;
    margin-top: 2rem;
}

@media (max-width: 1024px) {
  .article-layout {
          grid-template-columns: 1fr;
      }

  /* static : le « top » posé par le script de la sidebar collante est ignoré. */
  .article-sidebar {
          position: static;
      }

  .related-grid {
          grid-template-columns: 1fr;
      }

}

@media (max-width: 768px) {
  .article-meta-header {
          flex-direction: column;
          gap: 0.75rem;
      }

  .article-body {
          font-size: 1rem;
      }

  .article-body h2 {
          font-size: 1.5rem;
      }

  .article-navigation {
          grid-template-columns: 1fr;
      }

  .breadcrumbs {
          font-size: 0.8rem;
      }

}

/* ====================================
   SOMMAIRE MOBILE - VISIBILITÉ
   ==================================== */
/* Caché par défaut sur desktop */
.toc-mobile {
    display: none;
}

@media (max-width: 1024px) {
  /* Afficher le sommaire mobile */
  .toc-mobile {
          display: block;
          margin-bottom: 2rem;
      }

  /* Bouton toggle */
  .toc-mobile-toggle {
          display: flex;
          align-items: center;
          gap: 0.75rem;
          width: 100%;
          padding: 1rem 1.25rem;
          background-color: #fffbeb;
          border: 2px solid #fbbf24;
          border-radius: 12px;
          font-size: 1rem;
          font-weight: 600;
          color: var(--color-dark);
          cursor: pointer;
          transition: var(--transition-smooth);
      }

  .toc-mobile-toggle:hover,
    .toc-mobile-toggle:active {
          background-color: #fef3c7;
      }

  .toc-mobile-toggle .chevron {
          margin-left: auto;
          transition: transform 0.3s ease;
      }

  .toc-mobile-toggle.active .chevron {
          transform: rotate(180deg);
      }

  /* Contenu déroulant */
  .toc-mobile-content {
          max-height: 0;
          overflow: hidden;
          opacity: 0;
          /* visibility : fermé, ses liens sortent de la tabulation clavier. */
          visibility: hidden;
          transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s;
          background-color: #fffbeb;
          border: 2px solid #fbbf24;
          border-top: none;
          border-radius: 0 0 12px 12px;
          margin-top: -2px;
      }

  .toc-mobile-content.active {
          max-height: 500px;
          opacity: 1;
          visibility: visible;
          transition-delay: 0s;
          padding: 1rem 1.25rem;
      }

  /* Cacher le widget sidebar sur mobile */
  .toc-widget {
          display: none !important;
      }

}

/* --- ENCART ARTICLE VÉRIFIÉ (E-E-A-T) : rendu .aq-badge --- */
.article-verified-badge {
    margin-top: 1rem;
    font-weight: 500;
    font-size: 0.82rem;
    padding: 0.4rem 0.9rem;
}

.article-verified-badge svg {
    flex-shrink: 0;
}

.article-verified-badge a {
    color: inherit;
    text-decoration: underline;
}

/* --- WIDGET SOS SIDEBAR --- */
.sos-widget {
    background-color: #fff5f5;
    border: 2px solid #e53e3e;
    padding: 1rem !important;
}

.sos-link {
    display: block;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    color: #c53030;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.sos-link:hover {
    color: #9b2c2c;
    text-decoration: underline;
}

/* --- WIDGET OUTIL SIDEBAR --- */
.tool-widget {
    background-color: var(--color-bg);
}

.tool-widget p {
    font-size: 0.9rem;
    color: var(--color-text);
    margin-bottom: 1rem;
    line-height: 1.6;
}

@media (max-width: 768px) {
  .article-verified-badge {
          font-size: 0.8rem;
          padding: 0.4rem 0.75rem;
      }

  .share-btn {
          flex: 1 1 0;
      }

  .article-share,
  .article-rating,
  .article-tags {
          padding: 1rem 1.1rem;
      }

  .rating-stars {
          gap: 0.5rem;
      }

  .star-btn svg {
          width: 32px;
          height: 32px;
      }

}

/* ====================================
   SOMMAIRE DE L'ARTICLE — hiérarchie visuelle
   Ces trois règles vivaient dans legacy.css, où elles étaient les seules encore
   actives sur le site : elles stylent le sommaire de chaque article publié.
   Déplacées ici, dans la feuille qui possède déjà le sommaire (.toc-mobile-toggle,
   .toc-mobile-content), ce qui a permis de cesser de charger legacy.css.
   Hors media query : elles s'appliquent à toutes les largeurs, comme avant.
   ==================================== */
.toc-h2 a {
    font-weight: 600;
}

.toc-h3 a {
    padding-left: 1.5rem;
    font-size: 0.95rem;
    color: var(--color-text-light);
}

.toc-h3 a:hover {
    padding-left: 1.75rem;
}