/* =============================================================================
   L'art de la Photo — styles des composants éditoriaux
   Chargé par mu-plugin-lap-components.php sur les articles.
   -----------------------------------------------------------------------------
   ⚠️ NE REMPLACE PAS Automatic.css. ACSS reste le framework du thème ; ce fichier
      ne stylise que les composants maison du contenu (blocs rédactionnels).

   ⚠️ SPÉCIFICITÉ DOUBLÉE (`.x.x`) là où ACSS définit déjà le sélecteur.
      LiteSpeed peut recombiner et réordonner les feuilles : on ne peut donc pas
      compter sur l'ordre du document pour l'emporter. La classe doublée (0,2,0)
      gagne quel que soit l'ordre. Ne pas « simplifier » en classe simple.

   ⚠️ GÉOMÉTRIE EN PX, PAS EN EM, pour les débords négatifs : un `em` sur un enfant
      dont la font-size diffère ne compense pas le padding du parent (bug constaté
      le 21/07 — le bandeau n'atteignait pas les bords).
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Bloc « L'essentiel »  —  bandeau jaune + carte, aligné sur les tableaux .tbl
   Markup canonique :
     <div class="essentiel">
       <p class="essentiel__label">L'essentiel</p>
       <p class="essentiel__texte">…</p>
     </div>
   Les 302 articles du parc ont été normalisés à ce markup le 21/07/2026
   (tools/normalize-essentiel.py). Les règles rétrocompatibles visant
   `strong:first-child` ont été RETIRÉES : ce sélecteur positionnel était aveugle
   au sens et transformait un avis de dépréciation en bandeau « L'ESSENTIEL »
   (cas topaz-jpeg-to-raw-ai). Ne pas les réintroduire.
   -------------------------------------------------------------------------- */

.essentiel.essentiel{
  background:#fffdf3;
  border:1px solid #ecebe9;                 /* neutralise le border-left d'ACSS */
  border-radius:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 26px rgba(0,0,0,.06);
  padding:0 20px 18px;
  margin-bottom:25px;
  font-size:.98em;
  line-height:1.55;
  overflow:hidden;                          /* clippe le bandeau aux angles arrondis */
}

/* --- markup canonique --- */
.essentiel__label{
  margin:0 -20px 18px;                      /* compense exactement le padding → bord à bord */
  padding:13px 20px;
  background:var(--primary,#feec02);
  color:#1a1a1a;
  font-size:.76em;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.essentiel__texte{margin:0}
.essentiel__texte strong{color:var(--accent-dark,#7e0152)}


@media(max-width:700px){
  .essentiel.essentiel{padding:0 15px 15px}
  .essentiel__label{margin:0 -15px 15px;padding:11px 15px}
}


/* -----------------------------------------------------------------------------
   2. Avis de mise à jour  —  <p class="notice-maj">
   Bloc d'avertissement éditorial (produit abandonné, information périmée…).
   Distinct de « L'essentiel » : il ne résume pas l'article, il l'amende.
   Créé le 21/07/2026 en sortant `topaz-jpeg-to-raw-ai` de la classe `essentiel`,
   où il produisait un bandeau « L'ESSENTIEL » sur un texte de dépréciation.
   -------------------------------------------------------------------------- */

.notice-maj{
  background:#fff8e6;
  border:1px solid #f0e2bb;
  border-left:4px solid #e0a800;
  border-radius:8px;
  padding:14px 18px;
  margin-bottom:25px;
  font-size:.95em;
  line-height:1.55;
}
.notice-maj strong:first-child{color:#8a6100}


/* -----------------------------------------------------------------------------
   3. FAQ maison — accordéon
   Markup : <div class="faq-maison"><details><summary>…</summary><p>…</p></details></div>
   Présent sur 303 des 324 articles (92 %) → chargé sans condition, contrairement
   aux composants occasionnels qui ont leur propre feuille conditionnelle.

   Transposé depuis le CSS additionnel Automatic.css le 21/07/2026, à l'identique,
   pour sortir ce composant du framework du thème et le rendre maintenable ici.
   ⚠️ Le gain n'est PAS la performance (cette CSS était déjà chargée une fois et
      mise en cache) mais la gouvernance : une source de vérité versionnée.
   -------------------------------------------------------------------------- */

.faq-maison{margin:2rem 0;display:flex;flex-direction:column;gap:.75rem}

.faq-maison details{
  border:1px solid #e5e5e5;
  border-radius:8px;
  background:#fafafa;
  padding:0;
  transition:box-shadow .2s ease,border-color .2s ease;
}
.faq-maison details:hover{border-color:#d0d0d0;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.faq-maison details[open]{
  background:#fff;
  border-color:#ec4899;
  box-shadow:0 2px 12px rgba(236,72,153,.08);
}

/* Question */
.faq-maison summary{
  cursor:pointer;
  padding:1rem 1.25rem 1rem 2.75rem;
  position:relative;
  list-style:none;
  line-height:1.4;
  color:#1a1a2e;
  transition:color .2s ease;
  user-select:none;
}
.faq-maison summary::-webkit-details-marker,
.faq-maison summary::marker{display:none;content:""}
.faq-maison summary strong{font-weight:600;color:inherit}
.faq-maison details:hover summary{color:#ec4899}
.faq-maison details[open] summary{color:#ec4899;border-bottom:1px solid #f3e8f0}

/* Chevron en CSS pure */
.faq-maison summary::before{
  content:"";
  position:absolute;
  left:1.15rem;
  top:50%;
  width:0;
  height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:8px solid #ec4899;
  transform:translateY(-50%);
  transition:transform .25s ease;
}
.faq-maison details[open] summary::before{transform:translateY(-50%) rotate(90deg)}

/* Réponse */
.faq-maison details > *:not(summary){
  padding:1rem 1.25rem 1.25rem;
  margin:0;
  color:#333;
  line-height:1.65;
}
.faq-maison details p{margin:0 0 .75rem}
.faq-maison details p:last-child{margin-bottom:0}
.faq-maison details a{color:#ec4899;text-decoration:underline;text-underline-offset:2px}

/* Ouverture/fermeture douce — même technique que le champ FAQ de Super SEO.
   interpolate-size autorise l'animation de block-size vers/depuis `auto` ;
   ::details-content cible la boîte de contenu générée par <details> et s'anime
   à l'OUVERTURE comme à la FERMETURE (content-visibility en allow-discrete),
   y compris quand un frère se referme tout seul (accordéon exclusif via name=).
   Navigateurs sans ::details-content (Firefox, Safari ancien) : la règle est
   ignorée → repli sur l'affichage instantané natif, exactement comme le plugin. */
.faq-maison{interpolate-size:allow-keywords}
.faq-maison details::details-content{
  block-size:0;
  opacity:0;
  overflow:hidden;
  transition:block-size .28s ease, opacity .22s ease, content-visibility .28s allow-discrete;
}
.faq-maison details[open]::details-content{
  block-size:auto;
  opacity:1;
}

/* Ajout à la transposition : respect du réglage système « réduire les animations ».
   Absent de la version d'origine ; sans effet visuel pour les autres utilisateurs. */
@media(prefers-reduced-motion:reduce){
  .faq-maison details,
  .faq-maison summary,
  .faq-maison summary::before{transition:none}
  .faq-maison details::details-content{transition:none}
}

@media(max-width:600px){
  .faq-maison summary{padding:.85rem 1rem .85rem 2.5rem}
  .faq-maison details > *:not(summary){padding:.85rem 1rem 1rem}
  .faq-maison summary::before{left:.95rem;border-top-width:5px;border-bottom-width:5px;border-left-width:7px}
}


/* -----------------------------------------------------------------------------
   4. Sommaire d'article (.article-toc)
   Rapatrié depuis lap-toc.css le 21/07/2026 : la couverture est passée de 36 % à
   **91,4 %** (296/324) après pose des sommaires sur 180 articles. Au-dessus de 90 %,
   un composant rejoint la feuille inconditionnelle — le test conditionnel coûterait
   plus cher que le chargement lui-même, et on économise une requête HTTP.

   ⚠️ La dernière règle vise `html`, pas `.article-toc` : défilement doux + décalage
      d'ancre. Son périmètre s'ÉLARGIT ici à tout le site (avant : seuls les articles
      à sommaire). C'est cohérent — la navigation par ancres sert partout — mais c'est
      un changement de comportement assumé, pas un effet de bord.
   -------------------------------------------------------------------------- */

.article-toc{margin:2em 0;border:1px solid #e5e5e5;border-left:4px solid var(--accent,#1a3a5c);border-radius:8px;background:#f4f4f4;font-size:.95em;overflow:hidden}
.article-toc summary{padding:.85em 1.25em;cursor:pointer;list-style:none;display:flex;align-items:center;gap:.6em;font-size:.85em;letter-spacing:.08em;text-transform:uppercase;color:var(--accent,#3a7bb8);font-weight:600;user-select:none}
.article-toc summary::-webkit-details-marker{display:none}
.article-toc summary::before{content:"\203a";display:inline-block;font-size:1.6em;line-height:1;transform:rotate(0deg);transition:transform .2s;color:var(--accent,#3a7bb8)}
.article-toc[open] summary::before{transform:rotate(90deg)}
.article-toc summary:hover{background:#ebebeb}
.article-toc__count{margin-left:auto;font-size:.85em;color:#888;text-transform:none;letter-spacing:0}
.article-toc ol{margin:0;padding:.4em 1.25em 1.1em 2.6em;line-height:1.7;color:#333}
.article-toc ol li{margin-bottom:.15em}
.article-toc a{color:var(--accent,#1a3a5c);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
.article-toc a:hover{border-bottom-color:currentColor}
@media(max-width:768px){.article-toc summary{padding:.85em 1em}.article-toc ol{padding:.4em 1em 1em 2.2em}}
html{scroll-behavior:smooth;scroll-padding-top:80px}


/* -----------------------------------------------------------------------------
   5. Encadré de liens internes vers des guides connexes (.guides-liens)
      Une liste de liens vers d'autres articles, chacun suivi d'une description
      courte. Sert le maillage interne des pages « meilleur objectif … ».

      Remplace, à l'identique, deux classes qui portaient la MÊME feuille sous
      deux noms — `objectif-guides` (1 article) et `marque-guides` (4) : la CSS
      était strictement identique une fois le nom neutralisé. Un seul nom, donc,
      volontairement générique : tout encadré de liens internes peut le réutiliser
      sans qu'on ait à recréer un composant.

      Volontairement proche d'.article-toc (même bordure, même filet d'accent,
      même rayon) : ce sont deux encadrés de navigation, ils doivent se répondre.
      Mais ils restent distincts — .article-toc pointe DANS la page, celui-ci vers
      d'AUTRES pages, et il n'est pas repliable.
   -------------------------------------------------------------------------- */
/* Spécificité doublée OBLIGATOIRE ici. Le <style> d'origine vivait dans le corps
   de l'article, donc APRÈS Automatic.css dans l'ordre du document, et gagnait les
   égalités. Une feuille en <head> les perd : ACSS est chargé après nos feuilles.
   Mesuré le 21/07 en réinjectant l'état d'origine dans la page live — sans le
   doublement, `& a{font-weight:700}` d'ACSS écrasait le 600, et les marges de
   l'encadré tombaient de 1.5em/2.5em à 17.7px/0. */
.guides-liens.guides-liens{margin:1.5em 0 2.5em;border:1px solid #e5e5e5;border-left:4px solid var(--accent,#1a3a5c);border-radius:8px;background:#f7f9fc;padding:1.5em 1.75em}
.guides-liens .guides-liens__list{margin:0;padding:0;list-style:none}
.guides-liens .guides-liens__list li{margin:0 0 .9em;padding:0 0 .9em;border-bottom:1px solid #e8ecf2;line-height:1.45}
.guides-liens .guides-liens__list li:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.guides-liens .guides-liens__list a{color:var(--accent,#1a3a5c);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
.guides-liens .guides-liens__list a:hover{border-bottom-color:currentColor}
.guides-liens .guides-liens__list span{display:block;font-size:.9em;color:#555;margin-top:.15em}
@media(max-width:768px){.guides-liens.guides-liens{padding:1.25em}}