/* ============================================================
   BALIMANA — wp.css
   « Glue » WordPress : éléments propres à WP non couverts par le
   design system (admin-bar, accessibilité, blocs Gutenberg, footer
   social, commentaires, pagination cœur). Chargé APRÈS site.css.
   ============================================================ */

/* ---- Accessibilité ---- */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
  height:1px;width:1px;margin:-1px;padding:0;overflow:hidden;position:absolute;word-wrap:normal !important;
}
.screen-reader-text:focus{
  background:var(--navy);color:#fff;clip:auto;clip-path:none;
  display:block;height:auto;width:auto;left:8px;top:8px;padding:10px 16px;
  border-radius:var(--radius-sm);z-index:200;font-size:var(--text-sm);
}

/* ---- Barre d'admin : le header sticky ne doit pas passer dessous ---- */
/* EXCEPTION ASSUMÉE — le 782 px ci-dessous n'est PAS un palier de design et ne
   doit pas être « harmonisé » avec les trois paliers du thème (640/900/1200).
   C'est le seuil codé en dur par WordPress lui-même dans wp-includes/css/
   admin-bar.css : au-delà la barre d'administration mesure 32 px de haut, en
   deçà elle passe en présentation mobile et mesure 46 px. Notre décalage du
   header sticky doit basculer EXACTEMENT au même pixel que le sien, sinon le
   header chevauche la barre (ou flotte sous elle) dans la bande intermédiaire.
   C'est donc une contrainte importée, à faire suivre si WP change ce seuil —
   pas un choix de composition. Elle reste en `max-width` pour cette raison. */
.admin-bar .site-header{top:32px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}
/* La colonne latérale collante des articles (article.css, palier 1000) se cale
   sous le header sticky ; quand la barre d'administration décale ce dernier de
   32 px, elle doit suivre du même décalage, sinon son sommet passe dessous.
   Au-dessus de 782 px la barre mesure toujours 32 px, donc pas de variante
   mobile ici : le palier 1000 est déjà au-delà du seuil de WordPress. */
@media(min-width:1000px){.admin-bar .article-layout--sidebar .sidebar-main{top:124px}}

/* ---- Réseaux sociaux du footer (rangée d'icônes SVG) ---- */
.ds-footer__social{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-2)}
.ds-footer__social a{display:inline-flex;color:#d9d8ea}
.ds-footer__social a:hover{color:var(--orange)}
.ds-footer__social svg{width:18px;height:18px}

/* ---- Logo personnalisé (custom-logo) : tailles cohérentes ---- */
.ds-header .custom-logo-link{display:inline-flex;align-items:center}
.ds-header .custom-logo{max-height:40px;width:auto}
.ds-footer .custom-logo{max-height:44px;width:auto}

/* ---- Images & alignements de blocs Gutenberg ---- */
.entry-content img,.prose img{max-width:100%;height:auto}
.alignwide{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw}
.alignfull{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw;width:100vw}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignleft{float:left;margin:0 var(--space-6) var(--space-4) 0}
.alignright{float:right;margin:0 0 var(--space-4) var(--space-6)}
figure{margin:var(--space-6) 0}
figcaption,.wp-caption-text{font-size:var(--text-sm);color:var(--text-muted);margin-top:var(--space-2);font-family:var(--font-data)}

/* ---- Pagination cœur WP (the_posts_pagination) ---- */
.nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.nav-links .page-numbers{
  min-width:40px;height:40px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-data);font-size:var(--text-sm);font-weight:600;color:var(--neutral-700);
  background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-sm);text-decoration:none;
  transition:all var(--dur-base) var(--ease-out);
}
.nav-links .page-numbers:hover{border-color:var(--navy);color:var(--navy)}
.nav-links .page-numbers.current{background:var(--navy);border-color:var(--navy);color:#fff}
.nav-links .page-numbers.dots{border:none;background:none}

/* ---- Commentaires ---- */
.comments-area{margin-top:var(--space-12)}
.comments-title{font-family:var(--font-display);font-weight:500;font-size:var(--text-2xl);color:var(--navy);letter-spacing:-.01em;margin:0 0 var(--space-6)}

/* Liste des commentaires. wp_list_comments() (format html5, style 'ol') sort
   un <li class="comment depth-N"> par entrée, avec <article class="comment-body">
   à l'intérieur ; les réponses sont nichées dans un <ol class="children"> posé
   DANS le <li> parent (voir wp-includes/class-walker-comment.php::start_lvl). */
.comment-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-6)}
.comment-list .children{list-style:none;margin:var(--space-6) 0 0;padding:0 0 0 var(--space-5);display:flex;flex-direction:column;gap:var(--space-6);border-left:2px solid var(--border)}
@media(min-width:640px){.comment-list .children{padding-left:var(--space-8)}}

.comment-body{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-5)}
.comment-body .comment-awaiting-moderation{display:block;margin-top:var(--space-3);font-size:var(--text-xs);font-style:normal;color:var(--warning)}

/* En-tête d'un commentaire : avatar + nom sur une ligne, date/lien de
   modification juste dessous (font-data, comme le reste des métadonnées du
   thème — cf. .post__date, .article-byline .meta). */
.comment-meta{display:block;margin-bottom:var(--space-4)}
.comment-author.vcard{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.comment-author.vcard .avatar{width:48px;height:48px;border-radius:50%;flex:none;display:block}
.comment-author .fn{font-family:var(--font-display);font-style:normal;font-size:var(--text-base);color:var(--text-strong)}
/* « dit : » (WP core, déjà traduit par le pack fr_FR) fait doublon avec la
   mise en page : l'avatar et le nom sont déjà groupés visuellement. */
.comment-author .says{display:none}
.comment-metadata{font-family:var(--font-data);font-size:var(--text-xs);color:var(--text-muted);margin-top:2px;display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.comment-metadata a{display:inline-flex;align-items:center;color:inherit;text-decoration:none}
.comment-metadata a:hover{color:var(--blue-500);text-decoration:underline}
.comment-metadata .edit-link a{color:var(--blue-500)}

.comment-content{font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--text)}
.comment-content p{margin:0 0 var(--space-3)}
.comment-content p:last-child{margin-bottom:0}

.reply{margin-top:var(--space-4)}
.comment-reply-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-weight:600;font-size:var(--text-sm);color:var(--blue-500);text-decoration:none;padding:4px 2px}
.comment-reply-link:hover{color:var(--blue-700);text-decoration:underline}

/* Cibles tactiles des liens du fil (date, « répondre », « modifier ») —
   MOTIF UNIQUE DU THÈME déjà en place ailleurs sur la page (.share a,
   .widget-recent-link…) : plancher de hauteur en base mobile, neutralisé au
   palier 900 où le pointeur est précis. `inline-flex` est nécessaire : sur un
   <a> resté `inline`, min-height n'a aucun effet (spécification CSS). */
.comment-metadata a,
.comment-reply-link{min-height:44px}
@media(min-width:900px){
  .comment-metadata a,
  .comment-reply-link{min-height:0}
}

/* Pagination des commentaires (the_comments_navigation()) : balisage propre,
   distinct de celui des articles — <nav class="navigation comment-navigation">
   > <div class="nav-links"> > deux <a> SANS classe (voir
   wp-includes/link-template.php::get_previous_comments_link()/
   get_next_comments_link()). Le sélecteur générique .nav-links .page-numbers
   plus haut ne les couvre donc pas : ce bloc est spécifique. */
.comment-navigation{margin-top:var(--space-8)}
.comment-navigation .nav-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3)}
.comment-navigation .nav-links a{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-data);font-size:var(--text-sm);font-weight:600;color:var(--neutral-700);
  background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  padding:0 var(--space-4);min-height:44px;text-decoration:none;
  transition:all var(--dur-base) var(--ease-out);
}
.comment-navigation .nav-links a:hover{border-color:var(--navy);color:var(--navy)}
@media(min-width:900px){.comment-navigation .nav-links a{min-height:0;padding:9px 15px}}

.no-comments{font-size:var(--text-sm);color:var(--text-muted)}

/* ---- Formulaire de commentaires (comments.php) ----
   comments.php reconstruit intégralement les arguments « fields » et
   « comment_field » de comment_form() sur les classes du design system —
   .field / .field-label / .input / .textarea / .req / .field-error — les
   MÊMES que inc/contact-fallback.php, déjà stylées par balimana-ds.css (y
   compris leur plancher de cible tactile .input,.select{min-height:44px},
   neutralisé à 900px). Il n'y a donc plus de champ NU à rattraper ici : seule
   la case de consentement cookies (balisage core inchangé) reste ci-dessous. */
.comment-respond{margin-top:var(--space-8)}
.comment-reply-title{font-family:var(--font-display);font-weight:500;font-size:var(--text-2xl);color:var(--navy);letter-spacing:-.01em;margin:10px 0 var(--space-6)}
.comment-reply-title small{font-size:var(--text-sm);font-weight:500;margin-left:var(--space-3)}
.comment-reply-title small a{color:var(--blue-500)}
.comment-form{display:flex;flex-direction:column;gap:var(--space-5)}
.comment-form p{margin:0}
.comment-notes,.logged-in-as,.must-log-in{font-size:var(--text-sm);color:var(--text-muted)}
.logged-in-as a,.must-log-in a{color:var(--blue-500)}
.comment-form-cookies-consent{display:flex;align-items:center;font-size:var(--text-sm);color:var(--text)}
.comment-form-cookies-consent label{cursor:pointer}
.form-submit{display:flex;align-items:center;gap:var(--space-5);margin-top:var(--space-2)}
/* La case à cocher de consentement aux cookies mesure 13 × 13 px (dimension
   native du contrôle) : la plus petite cible du thème, et la dernière à
   corriger. On ne peint pas une case de 44 px — ce serait un objet difforme :
   on veut une case VISIBLE de 20 px, comme le `.choice .box` du design system,
   et une zone TOUCHABLE de 44 px autour d'elle.
   Un simple `padding` ne suffit pas : tant que la case garde son `appearance`
   native, le moteur dessine un contrôle de plateforme et IGNORE le
   remplissage — la boîte mesurée reste 22 px (constaté au harnais). Il faut
   donc `appearance:none`, ce qui oblige à repeindre la case nous-mêmes :
   la bordure est tracée par une image de fond SVG cantonnée à la boîte de
   contenu (`background-clip:content-box` + `background-origin`), le remplissage
   de 12 px porte la boîte à 44 px, et la marge négative annule l'encombrement
   que ce remplissage ajouterait à la ligne — le libellé ne bouge pas.
   L'état coché reprend le bleu et la coche du design system : le bleu vient de
   `background-color` (donc du TOKEN --blue-500, cantonné lui aussi à la boîte de
   contenu) et l'URI de données ne porte plus que la coche blanche. Seule la
   couleur du trait de la case vide reste écrite en dur — une `var()` n'est pas
   interprétée à l'intérieur d'une `url()`. #cfcfd6 = --border-strong. */
.comment-form-cookies-consent input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  /* flex:none — .comment-form-cookies-consent est un conteneur flex (label +
     case) : sans ceci, le flex-shrink par défaut (1) écrase la case sous ses
     20 px déclarés pour laisser la place au long libellé à 360 px (constaté
     au harnais : 33 × 44 px au lieu de 44 × 44). La case doit rester rigide,
     c'est le libellé qui doit passer à la ligne. */
  flex:none;
  box-sizing:content-box;width:20px;height:20px;padding:12px;margin:-12px 6px -12px 0;
  vertical-align:middle;cursor:pointer;border:none;background-color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='.75' y='.75' width='18.5' height='18.5' rx='2' fill='%23fff' stroke='%23cfcfd6' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-origin:content-box;background-clip:content-box;background-size:20px 20px;
}
.comment-form-cookies-consent input[type=checkbox]:checked{
  background-color:var(--blue-500);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M5 10.5l3.5 3.5L15 7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.comment-form-cookies-consent input[type=checkbox]:focus-visible{outline:none;box-shadow:var(--ring)}
@media(min-width:900px){
  /* `revert` et non des valeurs réécrites à la main : ce contrôle est rendu
     par la feuille de style du navigateur, dont les valeurs par défaut ne sont
     pas normalisées (les marges d'une case à cocher diffèrent d'un moteur à
     l'autre). `revert` rend la main à cette feuille, ce qui garantit un
     desktop STRICTEMENT identique à l'avant — vérifié : une réécriture
     approximative décalait le libellé de la case de trois pixels, et la
     comparaison de captures l'a attrapée. */
  /* Au-delà de 900 px la case retrouve son apparence native : la contrainte
     des 44 px ne vise que le doigt, et le contrat de non-régression demande un
     rendu desktop inchangé. La case repeinte reste donc une affaire de mobile. */
  .comment-form-cookies-consent input[type=checkbox]{
    appearance:revert;-webkit-appearance:revert;
    /* `border-box` en dur, et NON `revert` : `revert` remonterait au-delà du
       `*{box-sizing:border-box}` global du design system (une déclaration
       d'auteur, elle aussi révoquée) jusqu'au `content-box` du navigateur —
       la case changeait alors de modèle de boîte et se décalait. */
    box-sizing:border-box;
    width:revert;height:revert;padding:revert;
    /* `margin:0` en dur, et NON `revert` : la marge effective de cette case
       n'est pas celle du navigateur (3px 3px 3px 4px) mais 0 — c'est une
       feuille de WordPress, pas le thème, qui l'annule, et `revert` remonte
       au-delà d'elle. Mesuré, pas supposé. */
    margin:0;
    vertical-align:revert;cursor:revert;border:revert;background:revert;
  }
}

/* ---- Widgets (sidebar / footer) ---- */
.widget{margin-bottom:var(--space-8)}

/* Blocs de liste natifs de WordPress (archives, catégories, derniers articles,
   derniers commentaires) : le cœur les rend en liens de 17 px de haut, très en
   deçà de la cible tactile de 44 px. Les widgets propres au thème
   (.widget-recent-link) ont déjà leur propre gabarit et sont exclus.
   Même stratégie que .share a dans article.css : 44 px en base mobile, retour
   à une liste dense au palier 900 où le pointeur est une souris. */
.sidebar-main li > a,
.sidebar-main .wp-block-latest-comments__comment-link,
.sidebar-main .wp-block-latest-comments__comment-author{display:flex;align-items:center;min-height:44px}
@media(min-width:900px){
  .sidebar-main li > a,
  .sidebar-main .wp-block-latest-comments__comment-link,
  .sidebar-main .wp-block-latest-comments__comment-author{min-height:0;padding:2px 0}
}
.widget-title{font-family:var(--font-data);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-500);margin-bottom:var(--space-4)}

/* ---- Widget « Articles récents » (inc/widgets-balimana.php) ---- */
.widget-recent-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-4)}
.widget-recent-item + .widget-recent-item{padding-top:var(--space-4);border-top:1px solid var(--border)}
.widget-recent-link{display:flex;align-items:flex-start;gap:var(--space-3);text-decoration:none;color:inherit}
.widget-recent-thumb{flex:none;width:64px;height:64px;border-radius:var(--radius-sm);overflow:hidden;background:var(--neutral-100)}
.widget-recent-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.widget-recent-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.widget-recent-title{font-family:var(--font-sans);font-weight:600;font-size:var(--text-sm);line-height:var(--leading-snug);color:var(--text-strong);transition:color var(--dur-base) var(--ease-out)}
.widget-recent-link:hover .widget-recent-title{color:var(--blue-500)}
.widget-recent-date{font-family:var(--font-data);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}

/* ---- Widget « Encart contact » (inc/widgets-balimana.php) ---- */
.widget-contact .widget-title{margin-bottom:var(--space-3)}
.widget-contact__text{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--neutral-600);margin:0 0 var(--space-5)}

/* ---- Widget « Sommaire de l'article » (inc/widgets-balimana.php) ---- */
.widget-toc__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--border);}
.widget-toc__item a{display:block;padding:6px var(--space-4);font-size:var(--text-sm);line-height:var(--leading-snug);color:var(--neutral-600);text-decoration:none;border-left:2px solid transparent;margin-left:-2px;transition:color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.widget-toc__item a:hover{color:var(--blue-500)}
.widget-toc__item--h3 a{padding-left:var(--space-6);font-size:13px}
.widget-toc__item a.is-active{color:var(--navy);border-left-color:var(--orange);font-weight:600}

/* ---- Liste de pages de repli (sécurité, si nav fallback en <ul>) ---- */
.ds-nav ul{display:contents;list-style:none;margin:0;padding:0}

/* ---- Bannières de résultat de formulaire (repli fonctionnel) ---- */
.form-banner{padding:12px 16px;border-radius:var(--radius-sm);font-size:var(--text-sm);margin-bottom:var(--space-5);border:1px solid transparent}
.form-banner--ok{background:#e8f5ee;color:var(--success);border-color:#bfe3cd}
.form-banner--error{background:#fdecea;color:var(--danger);border-color:#f3c6c0}
.cta-form .form-banner{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2)}