/*
Theme Name: MyDogMastery
Theme URI: https://www.mydogmastery.com/
Author: MyDogMastery
Description: Thème sur mesure de mydogmastery.com. Sans Elementor, sans jQuery, sans constructeur de page : un seul fichier CSS, deux polices variables auto-hébergées, et des gabarits écrits à la main pour un blog d'éducation canine lu au téléphone.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mydogmastery
Tags: blog, custom-colors, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   CONTRAT DE DIRECTION
   THESIS  : la convention de la catégorie, jouée droit et mieux faite. Les
             trois références retenues par l'utilisateur (emmenetonchien,
             blooming-pets, gudog) partagent une grammaire : un primaire froid
             rassurant, un accent chaud pour l'action, une sans humaniste
             arrondie, de la photographie de chiens, des pilules et des cartes
             douces. Exécutée sans ironie et sans excentricité glissée.
   OWN-WORLD : le bleu ciel #6CC9F7 de la marque tient le rôle du teal des
             références, le rose #dd4b70 celui du corail. Nunito et Nunito Sans
             donnent la rondeur du registre. Cartes à 22 px, boutons en pilule,
             ombres à décalage et flou, larges respirations.
   STORY   : le maître reconnaît son problème en trois mots, ouvre le guide,
             repart avec le Programme 30 jours.
   FIRST VIEWPORT : titre à gauche, photo de chien à droite dans un cadre
             arrondi, deux actions dont une pleine rose, et la seule preuve
             honnête disponible : le nombre réel de guides publiés.
   FORM    : convention de la catégorie, choisie par l'utilisateur.
   ========================================================================== */

/* --------------------------------------------------------------- polices */
@font-face{
  font-family:"Nunito";
  src:url("assets/fonts/nunito-var.woff2") format("woff2-variations"),
      url("assets/fonts/nunito-var.woff2") format("woff2");
  font-weight:400 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Nunito Sans";
  src:url("assets/fonts/nunito-sans-var.woff2") format("woff2-variations"),
      url("assets/fonts/nunito-sans-var.woff2") format("woff2");
  font-weight:200 900;
  font-style:normal;
  font-display:swap;
}

/* --------------------------------------------------------------- jetons */
:root{
  --sky:#6CC9F7;            /* couleur de marque */
  --sky-600:#2ba4e0;
  --sky-700:#0b6f9e;        /* texte et liens sur fond clair */
  --sky-50:#eaf7fe;
  --sky-100:#d3eefc;

  --pink:#dd4b70;           /* couleur de marque */
  --pink-btn:#c63b60;       /* variante foncée : 5:1 avec du blanc */
  --pink-700:#a92a4e;
  --pink-50:#fdeff3;

  --ink:#16252e;
  --ink-2:#4d6472;
  --ink-3:#5d7280;          /* 4,96:1 sur blanc — l'ancien #7a8f9b tombait à 3,37 */
  --paper:#ffffff;
  --paper-2:#f5f9fb;
  --line:#dfe9ee;           /* décor uniquement : cartes, séparateurs */
  --line-strong:#7c96a5;    /* 3,11:1 — bordure des champs et boutons */

  --head:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --body:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --r:14px;
  --r-lg:22px;
  --sh:0 2px 4px rgba(22,37,46,.05), 0 8px 20px rgba(22,37,46,.07);
  --sh-lift:0 4px 8px rgba(22,37,46,.07), 0 16px 34px rgba(22,37,46,.11);

  --wrap:min(1160px,calc(100% - 2.5rem));
  --read:min(70ch,calc(100% - 2.5rem));
  --ease:cubic-bezier(.2,.8,.3,1);
}

/* ------------------------------------------------------------ fondations */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:1.0625rem;line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video,iframe{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{
  font-family:var(--head);font-weight:800;letter-spacing:-.015em;
  line-height:1.14;text-wrap:balance;margin:0;
}
button{font:inherit}
:focus-visible{outline:3px solid var(--sky-700);outline-offset:3px;border-radius:6px}

.wrap{width:var(--wrap);margin-inline:auto}
.read{width:var(--read);margin-inline:auto}
/* .screen-reader-text est la classe que WordPress imprime lui-même, notamment
   dans les blocs de pagination. Sans elle, un titre « Pagination des
   publications » s'affiche en gras au milieu des archives. */
.sr-only,
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}
.sr-only:focus,
.screen-reader-text:focus{
  position:static!important;width:auto;height:auto;clip:auto;clip-path:none;
  margin:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;background:var(--pink-btn);
  color:#fff;padding:.8rem 1.2rem;border-radius:0 0 var(--r) 0;font-weight:700;
}
.skip-link:focus{left:0}

/* -------------------------------------------------------------- boutons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.6rem;min-height:50px;border-radius:999px;text-decoration:none;
  font-family:var(--head);font-weight:800;font-size:1rem;
  border:2px solid transparent;cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),
             background-color .18s var(--ease),border-color .18s var(--ease);
}
.btn--primary{
  background:var(--pink-btn);color:#fff;
  box-shadow:0 2px 4px rgba(166,42,78,.2),0 8px 18px rgba(166,42,78,.22);
}
.btn--primary:hover{
  background:var(--pink-700);transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(166,42,78,.22),0 14px 28px rgba(166,42,78,.26);
}
.btn--ghost{background:var(--paper);color:var(--sky-700);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--sky);background:var(--sky-50);transform:translateY(-2px)}
.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;
}

.pill{
  display:inline-flex;align-items:center;align-self:flex-start;gap:.35rem;
  background:var(--sky-50);color:var(--sky-700);font-family:var(--head);
  font-weight:800;font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;
  padding:.32rem .7rem;border-radius:999px;text-decoration:none;
  max-width:100%;
}
a.pill:hover{background:var(--sky-100)}
.pill--pink{background:var(--pink-50);color:var(--pink-700)}

/* --------------------------------------------------------------- entête */
.hd{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.hd__in{
  width:var(--wrap);margin-inline:auto;display:flex;align-items:center;
  gap:1.5rem;min-height:72px;
}
.hd__logo{display:flex;align-items:center;text-decoration:none;flex:none}
.hd__logo img{height:36px;width:auto}
.hd__logo .site-name{font-family:var(--head);font-weight:800;font-size:1.15rem}
.hd__nav{margin-left:auto;display:flex;align-items:center;gap:.35rem}
.hd__nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.2rem;align-items:center}
.hd__nav a{
  padding:.6rem .85rem;min-height:44px;display:inline-flex;align-items:center;
  text-decoration:none;font-family:var(--head);font-weight:700;font-size:.98rem;
  color:var(--ink-2);border-radius:999px;
  transition:background .16s,color .16s;
}
.hd__nav a:hover,.hd__nav .current-menu-item>a{background:var(--sky-50);color:var(--sky-700)}
.hd__cta{margin-left:.6rem;padding:.65rem 1.15rem;min-height:46px;font-size:.94rem;flex:none}
.burger{
  display:none;width:46px;height:46px;border-radius:12px;background:var(--sky-50);
  border:1px solid var(--sky-100);align-items:center;justify-content:center;
  cursor:pointer;flex:none;
}
.burger span{
  display:block;width:19px;height:2px;background:var(--sky-700);
  border-radius:2px;position:relative;transition:background .18s;
}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:19px;height:2px;
  background:var(--sky-700);border-radius:2px;transition:transform .22s var(--ease);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.mnav{display:none;border-top:1px solid var(--line);background:var(--paper)}
.mnav.is-open{display:block}
.mnav .searchform{margin:.4rem 0 1rem}
.mnav ul{list-style:none;margin:0;padding:.6rem 0 1.1rem}
.mnav a{
  display:block;padding:.85rem 0;font-family:var(--head);font-weight:700;
  text-decoration:none;border-bottom:1px solid var(--line);
}
.mnav li:last-child a{border-bottom:0}

/* ---------------------------------------------------------------- héros */
.hero{
  padding:clamp(2.2rem,5.5vw,4rem) 0 clamp(2.2rem,5vw,3.4rem);
  background:linear-gradient(180deg,var(--sky-50) 0%,var(--paper) 78%);
}
.hero__in{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(1.8rem,4vw,3.4rem);align-items:center;
}
.hero h1{font-size:clamp(2.1rem,5vw,3.5rem);margin:0 0 1.1rem;max-width:16ch}
.hero__lead{
  font-size:clamp(1.05rem,2.2vw,1.22rem);color:var(--ink-2);
  margin:0 0 1.8rem;max-width:46ch;
}
.hero__acts{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.6rem}
.hero__trust{
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:.93rem;
  color:var(--ink-2);font-weight:600;margin:0;padding:0;list-style:none;
}
.hero__trust li{display:inline-flex;align-items:center;gap:.45rem}
.hero__trust svg{flex:none;color:var(--sky-600)}
.hero__media{position:relative;margin-bottom:22px}
.hero__media img{
  border-radius:var(--r-lg);box-shadow:var(--sh-lift);
  aspect-ratio:4/3;object-fit:cover;width:100%;
}
.hero__badge{
  position:absolute;left:-18px;bottom:-22px;background:var(--paper);
  border-radius:var(--r);padding:.85rem 1.2rem;box-shadow:var(--sh-lift);
  display:flex;align-items:center;gap:.85rem;max-width:17.5rem;
}
.hero__badge b{
  font-family:var(--head);font-size:1.5rem;line-height:1;display:block;
  color:var(--sky-700);
}
.hero__badge small{
  font-size:.83rem;color:var(--ink-2);line-height:1.4;display:block;
  text-wrap:balance;
}

/* ------------------------------------------------------------ rubriques */
.sec{padding:clamp(2.8rem,6.5vw,4.8rem) 0}
.sec--tint{background:var(--paper-2)}
.sec__hd{margin-bottom:2rem;max-width:60ch}
.sec__hd .pill{margin-bottom:.85rem}
.sec__hd h2{font-size:clamp(1.6rem,3.6vw,2.35rem);margin:0 0 .6rem}
.sec__hd p{margin:0;color:var(--ink-2);font-size:1.05rem}
.sec__more{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1.6rem;
  font-family:var(--head);font-weight:800;color:var(--sky-700);text-decoration:none;
}
.sec__more:hover{gap:.7rem}
.sec__more span{transition:transform .18s var(--ease)}

/* --------------------------------------------------- par où commencer */
.start{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.1rem}
.start__item{
  display:block;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.6rem 1.5rem 1.5rem;text-decoration:none;
  position:relative;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.start__item:hover{transform:translateY(-4px);box-shadow:var(--sh-lift);border-color:var(--sky-100)}
.start__n{
  width:42px;height:42px;border-radius:999px;background:var(--sky-50);
  color:var(--sky-700);display:grid;place-items:center;font-family:var(--head);
  font-weight:800;font-size:1.1rem;margin-bottom:1rem;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.start__item:hover .start__n{background:var(--sky);color:var(--ink)}
.start__q{
  display:block;font-family:var(--head);font-weight:800;font-size:.84rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--pink-700);
  margin-bottom:.45rem;
}
.start__item h3{font-size:1.22rem;margin:0 0 .55rem;text-wrap:pretty;hyphens:none}
.start__item p{margin:0;color:var(--ink-2);font-size:.97rem;line-height:1.6}

/* --------------------------------------------------- cartes d'articles */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.4rem}
.card{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
.card__media{aspect-ratio:16/9;overflow:hidden;background:var(--sky-50)}
/* Repli pour les articles sans image à la une : la carte garde sa hauteur et
   la grille reste alignée. */
.card__media--empty{
  background:
    radial-gradient(circle at 30% 40%, var(--sky-100) 0 18%, transparent 18%),
    radial-gradient(circle at 68% 62%, var(--sky-100) 0 12%, transparent 12%),
    var(--sky-50);
}
.card__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease);
}
.card:hover .card__media img{transform:scale(1.045)}
.card__body{
  padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;
  gap:.6rem;flex:1;
}
.card h3{font-size:1.14rem;line-height:1.28}
.card h3 a{text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}
.card__meta{margin-top:auto;font-size:.86rem;color:var(--ink-3);font-weight:600}

/* ------------------------------------------------- liste compacte villes */
.mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.7rem}
.mini a{
  display:flex;align-items:center;gap:.9rem;background:var(--paper);
  border:1px solid var(--line);border-radius:999px;padding:.5rem .9rem .5rem .5rem;
  text-decoration:none;font-family:var(--head);font-weight:700;font-size:.98rem;
  transition:border-color .18s,transform .18s var(--ease);
}
.mini a:hover{border-color:var(--sky);transform:translateX(3px)}
.mini img{width:44px;height:44px;border-radius:999px;object-fit:cover;flex:none}
.mini__ph{
  width:44px;height:44px;border-radius:999px;background:var(--sky-50);flex:none;
}

/* ----------------------------------------------------------- newsletter */
.news{
  background:var(--sky);border-radius:var(--r-lg);
  padding:clamp(1.8rem,4.5vw,3rem);
  display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center;
  box-shadow:var(--sh);
}
.news h2{font-size:clamp(1.5rem,3.4vw,2.15rem);margin:0 0 .7rem;max-width:18ch}
.news p{margin:0 0 .3rem;color:#0c3d54;font-weight:600;max-width:42ch}
.news__form{
  display:flex;flex-direction:column;gap:.7rem;background:var(--paper);
  padding:1.3rem;border-radius:var(--r);box-shadow:var(--sh);
}
.news label,.news__q{font-family:var(--head);font-weight:800;font-size:.9rem}
.news__q{margin:0 0 .4rem}
.news input[type=email],.news input[type=text]{
  width:100%;min-height:50px;padding:.75rem 1rem;border-radius:999px;
  border:2px solid var(--line-strong);font-size:1rem;font-family:var(--body);
}
/* Ne jamais retirer l'anneau de focus d'un champ : le seul changement de
   bordure ne donnait que 2,80:1, sous le seuil des indicateurs de focus. */
.news input:focus-visible{border-color:var(--sky-700)}
.news small{color:var(--ink-3);font-size:.82rem;line-height:1.45}

/* -------------------------------------------------------------- article */
.crumb{padding:1.1rem 0 0;font-size:.88rem;color:var(--ink-3);font-weight:600}
.crumb a{color:var(--sky-700);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.ahead{padding:1.2rem 0 1.8rem}
.ahead h1{font-size:clamp(1.9rem,4.6vw,3rem);margin:.8rem 0 1rem;max-width:22ch}
.ameta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.3rem;
  color:var(--ink-2);font-size:.93rem;font-weight:600;
}
.ameta .who{display:flex;align-items:center;gap:.6rem}
.avatar{
  width:38px;height:38px;border-radius:999px;background:var(--sky);
  display:grid;place-items:center;font-family:var(--head);font-weight:800;
  color:var(--ink);flex:none;
}
.afig{margin:0 0 2rem}
.afig img{
  border-radius:var(--r-lg);width:100%;aspect-ratio:16/9;object-fit:cover;
  box-shadow:var(--sh);
}
.afig figcaption{
  font-size:.86rem;color:var(--ink-3);margin-top:.6rem;text-align:center;
}

.atoc{
  background:var(--sky-50);border:1px solid var(--sky-100);
  border-radius:var(--r-lg);padding:1.3rem 1.5rem;margin:0 0 2.4rem;
}
.atoc h2{font-size:1.02rem;margin:0 0 .8rem;display:flex;align-items:center;gap:.5rem}
.atoc ol{margin:0;padding-left:1.3rem;font-size:.98rem;color:var(--ink-2)}
.atoc li{margin:.35rem 0}
/* Le sommaire est l'outil de navigation principal dans un guide long lu au
   téléphone : ses entrées doivent atteindre la cible tactile de 44 px. */
.atoc a{
  display:block;min-height:44px;padding:.55rem 0;
  color:var(--sky-700);text-decoration:none;font-weight:600;
}
.atoc a:hover{text-decoration:underline}
.atoc li{margin:0}

/* ------------------------------------------------- corps rédactionnel */
.prose{font-size:1.11rem;line-height:1.8;padding-bottom:2.5rem}
.prose--page{padding-top:2rem}
.prose h2{font-size:clamp(1.4rem,3.4vw,1.9rem);margin:3.2rem 0 1rem;scroll-margin-top:90px}
.prose h3{font-size:1.24rem;margin:2.3rem 0 .7rem;color:var(--sky-700);scroll-margin-top:90px}
.prose h4{font-size:1.08rem;margin:1.8rem 0 .5rem}
.prose p{margin:0 0 1.2rem}
.prose ul,.prose ol{margin:0 0 1.4rem;padding-left:0}
.prose ul{list-style:none}
.prose ul li{position:relative;padding-left:1.85rem;margin:.55rem 0}
.prose ul li::before{
  content:"";position:absolute;left:.15rem;top:.62em;width:9px;height:9px;
  border-radius:999px;background:var(--sky);box-shadow:0 0 0 4px var(--sky-50);
}
.prose ol{padding-left:1.4rem}
.prose ol li{margin:.55rem 0;padding-left:.3rem}
.prose ol li::marker{font-family:var(--head);font-weight:800;color:var(--sky-700)}
.prose strong{font-weight:700;color:var(--ink)}
/* Le soulignement doit être visible : la seule couleur du texte ne donne que
   2,86:1 contre le texte courant, sous le seuil qui autorise la couleur comme
   unique indice. */
.prose a{
  color:var(--sky-700);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;text-decoration-color:currentColor;
}
.prose a:hover{text-decoration-thickness:3px}
.prose blockquote{
  margin:2rem 0;padding:1.3rem 1.5rem;background:var(--sky-50);
  border-radius:var(--r-lg);font-size:1.06rem;
}
.prose blockquote p:last-child{margin-bottom:0}
.prose img{border-radius:var(--r);margin:1.8rem auto}
.prose figure{margin:1.8rem 0}
.prose figcaption{font-size:.86rem;color:var(--ink-3);text-align:center;margin-top:.5rem}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.6rem 0}

/* les tableaux comparatifs, très présents dans les guides hôtels */
.table-scroll{overflow-x:auto;margin:1.8rem 0;-webkit-overflow-scrolling:touch}
.prose table{
  width:100%;border-collapse:separate;border-spacing:0;font-size:.97rem;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  min-width:480px;
}
.prose th{
  background:var(--sky-50);font-family:var(--head);font-weight:800;
  text-align:left;padding:.75rem .9rem;color:var(--sky-700);
}
.prose td{padding:.7rem .9rem;border-top:1px solid var(--line);vertical-align:top}

/* les encarts repris des anciens styles en ligne */
.note{
  border-radius:var(--r-lg);padding:1.4rem 1.5rem;margin:2rem 0;
  background:var(--paper-2);border:1px solid var(--line);
}
.note__label{
  display:inline-flex;align-items:center;gap:.4rem;font-family:var(--head);
  font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:.6rem;color:var(--ink-2);
}
.note>p:last-child{margin-bottom:0}
.note--ok{background:#eefaf2;border-color:#c4e9d3}
.note--ok .note__label{color:#186b39}
.note--info{background:var(--sky-50);border-color:var(--sky-100)}
.note--info .note__label{color:var(--sky-700)}
.note--stop{background:var(--pink-50);border-color:#f6cdd7}
.note--stop .note__label{color:var(--pink-700)}
.note--warn{background:#fdf6e6;border-color:#f0dfb4}
.note--warn .note__label{color:#8a5a00}

.author{
  display:flex;gap:1.1rem;align-items:flex-start;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem 1.5rem;
  margin:0 0 2.5rem;
}
.author .avatar{width:54px;height:54px;font-size:1.25rem}
.author h2{font-size:1.06rem;margin:0 0 .35rem}
.author p{margin:0;color:var(--ink-2);font-size:.97rem;line-height:1.6}

/* ------------------------------------------------ archives et recherche */
.phead{
  padding:clamp(2rem,5vw,3.2rem) 0 clamp(1.4rem,3vw,2rem);
  background:linear-gradient(180deg,var(--sky-50) 0%,var(--paper) 100%);
}
/* Une rubrique qui suit directement un en-tête de page n'a pas besoin de sa
   respiration haute : les deux blocs se lisent comme un seul. */
.phead + .sec{padding-top:clamp(1.2rem,3vw,2rem)}
.phead h1{font-size:clamp(1.8rem,4.4vw,2.8rem);margin:.7rem 0 .7rem;max-width:24ch}
.phead p{margin:0;color:var(--ink-2);max-width:60ch;font-size:1.05rem}

.searchform{display:flex;gap:.6rem;max-width:32rem;margin:1.4rem 0 0}
.searchform input[type=search]{
  flex:1;min-height:50px;padding:.75rem 1.1rem;border-radius:999px;
  border:2px solid var(--line-strong);font-size:1rem;font-family:var(--body);
}
.searchform input[type=search]:focus-visible{border-color:var(--sky-700)}

/* the_posts_pagination() produit <nav class="pager"><h2 …><div class="nav-links">.
   La mise en forme doit viser .nav-links, pas la nav elle-même. */
.pager{margin-top:3rem}
.pager .nav-links{
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;
  list-style:none;padding:0;
}
.pager a,.pager .nav-links span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:46px;min-height:46px;padding:0 .9rem;border-radius:999px;
  border:1px solid var(--line);text-decoration:none;font-family:var(--head);
  font-weight:700;transition:background .16s,border-color .16s;
}
.pager a:hover{background:var(--sky-50);border-color:var(--sky-100)}
.pager .current{background:var(--sky-700);color:#fff;border-color:var(--sky-700)}

.empty{
  text-align:center;padding:3rem 1rem;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r-lg);
}
.empty h2{font-size:1.3rem;margin:0 0 .6rem}
.empty p{color:var(--ink-2);margin:0 0 1.4rem}

/* --------------------------------------------------------------- footer */
.ft{background:#12222c;color:#adc2cd;padding:3.2rem 0 2rem}
.ft a{color:#e4edf2;text-decoration:none}
.ft a:hover{color:var(--sky)}
.ft__grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;
  padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.11);
}
.ft h3{font-size:.92rem;color:#fff;margin:0 0 .9rem;font-family:var(--head)}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{margin:.45rem 0}
.ft p{margin:0;max-width:36ch;font-size:.95rem;line-height:1.65}
/* Le logo est une illustration en couleurs et de format carré : le passer en
   silhouette blanche et l'écraser dans une boîte 4:1 le détruisait. */
.ft__logo{height:auto;width:auto;max-height:56px;margin-bottom:1rem}
.ft__search{padding-top:1.4rem}
.ft__end{padding-top:1.4rem;font-size:.86rem;display:flex;flex-wrap:wrap;gap:1rem}
/* Sur le fond sombre, l'anneau bleu foncé ne donne que 2,95:1 : on passe au
   bleu ciel, qui monte à 8,8:1. */
.ft :focus-visible{outline-color:var(--sky)}
.ft li a{display:inline-block;min-height:44px;padding:.55rem 0}
.ft .searchform{margin:1.2rem 0 0;max-width:22rem}
.ft .searchform input[type=search]{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.35);color:#fff;
}
.ft .searchform input[type=search]::placeholder{color:#9db3bf}

/* ---------------------------------------------------------- adaptations */
@media (max-width:900px){
  .hero__in{grid-template-columns:1fr}
  .hero__media{order:-1}
  .hero__badge{left:auto;right:14px;bottom:-16px}
  .news{grid-template-columns:1fr}
  .ft__grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .hd__nav{display:none}
  .burger{display:flex}
  .hd__in{gap:.6rem}
  .hd__cta{margin-left:auto;padding:.6rem 1rem;font-size:.9rem;min-height:44px}
  .hd__cta-lg{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms!important;animation-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  /* Les durées ne suffisent pas : il faut aussi neutraliser les déplacements
     et l'agrandissement, sinon le mouvement reste, simplement instantané. */
  .btn:hover,.card:hover,.start__item:hover,.mini a:hover,
  .tag:hover,.prob:hover{transform:none!important}
  .card:hover .card__media img{transform:none!important}
  .sec__more:hover{gap:.4rem!important}
}

/* ------------------------------------------------------------ impression */
@media print{
  .hd,.ft,.news,.author,.atoc,.sec--tint,.burger{display:none!important}
  body{font-size:11pt;color:#000}
  .prose a{text-decoration:none;color:#000}
}

/* ==========================================================================
   INDEX FILTRABLE DE CATÉGORIE  (voir mdm_hub_configs())
   Une ligne par article, un verdict à gauche, une famille à droite. C'est
   l'archive qui porte cet index, pas une page à part : deux URL listant les
   mêmes articles se cannibaliseraient.
   Le filtre ne masque que des lignes déjà servies dans le HTML. Aucun lien
   n'est créé en JavaScript, aucune URL à facettes n'est produite.
   ========================================================================== */

/* --------------------------------------------------------- le sélecteur */
.sel{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.1rem,3vw,1.6rem);box-shadow:var(--sh);
}
.sel__search{position:relative;margin-bottom:1.3rem}
.sel__search>svg{
  position:absolute;left:1.05rem;top:50%;transform:translateY(-50%);
  color:var(--ink-2);pointer-events:none;
}
.sel__search input{
  width:100%;min-height:54px;padding:.8rem 3.2rem .8rem 3rem;border-radius:999px;
  border:2px solid var(--line);font-size:1.02rem;font-family:var(--body);
  color:var(--ink);background:var(--paper);
  transition:border-color .18s var(--ease);
}
.sel__search input::placeholder{color:var(--ink-2)}
.sel__search input:focus{border-color:var(--sky-600);outline:none}
.sel__clear{
  position:absolute;right:.55rem;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:999px;border:0;background:var(--paper-2);
  color:var(--ink-2);cursor:pointer;display:none;place-items:center;
}
.sel__clear:hover{background:var(--sky-50);color:var(--sky-700)}
.sel__search.is-filled .sel__clear{display:grid}

.sel__group{margin-bottom:1.1rem}
.sel__group:last-of-type{margin-bottom:0}
.sel__lg{
  display:block;font-family:var(--head);font-weight:800;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);
  margin-bottom:.6rem;
}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0;border:0}
.chip{
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  padding:.45rem 1rem;border-radius:999px;cursor:pointer;
  background:var(--paper);border:1.5px solid var(--line);color:var(--ink-2);
  font-family:var(--head);font-weight:700;font-size:.95rem;
  transition:border-color .16s var(--ease),background-color .16s var(--ease),
             color .16s var(--ease);
}
.chip:hover{border-color:var(--sky);background:var(--sky-50);color:var(--sky-700)}
.chip[aria-pressed="true"]{background:var(--sky-700);border-color:var(--sky-700);color:#fff}
.chip[aria-pressed="true"]:hover{background:var(--sky-700);color:#fff}
.chip .dot{width:9px;height:9px;border-radius:999px;flex:none}
.chip[aria-pressed="true"] .dot{box-shadow:0 0 0 2px rgba(255,255,255,.55)}

/* ------------------------------------------------------ barre de compte */
.count{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1rem;margin:1.8rem 0 .9rem}
.count b{font-family:var(--head);font-weight:800;font-size:1.18rem}
.count span{color:var(--ink-2);font-size:.97rem}
.count button{
  margin-left:auto;background:none;border:0;padding:.5rem .2rem;min-height:44px;
  color:var(--sky-700);font-family:var(--head);font-weight:800;font-size:.95rem;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--sky-100);text-decoration-thickness:2px;
  visibility:hidden;
}
.count button:hover{text-decoration-color:var(--sky-600)}
.count.is-filtered button{visibility:visible}

/* ------------------------------------------------------------ les lignes */
.sx-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sx{
  position:relative;display:grid;align-items:center;gap:0 1.2rem;
  grid-template-columns:12.5rem 1fr 12rem 1.1rem;
  padding:1.05rem .9rem;border-bottom:1px solid var(--line);
  transition:background-color .16s var(--ease);
}
.sx:hover{background:var(--sky-50)}
.sx.is-out{display:none}
.sx__title{
  display:block;font-family:var(--head);font-weight:800;font-size:1.14rem;
  line-height:1.32;color:var(--ink);text-decoration:none;
}
.sx__title::after{content:"";position:absolute;inset:0}
.sx:hover .sx__title{color:var(--sky-700)}
.sx__hint{display:block;margin-top:.18rem;color:var(--ink-2);font-size:.93rem;line-height:1.5}
.sx__zone{font-size:.9rem;color:var(--ink-2);font-weight:600}
.sx__go{color:var(--ink-2);justify-self:end;transition:transform .18s var(--ease)}
.sx:hover .sx__go{transform:translateX(3px);color:var(--sky-700)}

/* Le verdict. Ici l'index ne mène pas à la réponse, il EST la réponse :
   « melon : oui » se lit avant le clic. Les trois teintes sont celles des
   encarts .note--ok / --warn / --stop déjà utilisés dans les articles. */
.vd{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--head);font-weight:800;font-size:.82rem;letter-spacing:.02em;
  padding:.36rem .85rem;border-radius:999px;border:1.5px solid;
  white-space:nowrap;text-align:center;
}
.vd--yes{background:#eefaf2;border-color:#c4e9d3;color:#186b39}
.vd--care{background:#fdf6e6;border-color:#f0dfb4;color:#8a5a00}
.vd--no{background:var(--pink-50);border-color:#f6cdd7;color:var(--pink-700)}
.vd--none{background:var(--paper-2);border-color:var(--line);color:var(--ink-2)}

/* ------------------------------------------------------- geste du filtre */
@media (prefers-reduced-motion:no-preference){
  .sx-list.is-settling .sx:not(.is-out){
    animation:sx-settle .34s var(--ease) both;
    animation-delay:calc(var(--i,0) * 22ms);
  }
}
@keyframes sx-settle{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}

/* ----------------------------------------------------------- rien trouvé */
.sx-none{
  display:none;text-align:center;padding:3rem 1.4rem;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r-lg);margin-top:1.4rem;
}
.sx-none.is-on{display:block}
.sx-none h2{font-size:1.25rem;margin:0 0 .6rem}
.sx-none p{color:var(--ink-2);margin:0 auto 1.4rem;max-width:44ch}

.legal{color:var(--ink-2);font-size:.88rem;line-height:1.6;margin:1.6rem 0 0;max-width:74ch}
.phead .crumb{padding-top:0}

@media (max-width:860px){
  .sx{grid-template-columns:1fr auto;gap:.35rem .8rem;padding:1.1rem .3rem;align-items:start}
  .vd{grid-column:1;grid-row:1;justify-self:start}
  .sx__zone{grid-column:2;grid-row:1;justify-self:end;font-size:.86rem;text-align:right}
  .sx__body{grid-column:1 / -1;grid-row:2}
  .sx__go{display:none}
  .sx__title{font-size:1.06rem}
}

/* ------------------------------------------------------- les rubriques */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem}
.cat{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  text-decoration:none;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.cat:hover{transform:translateY(-4px);box-shadow:var(--sh-lift);border-color:var(--sky-100)}
.cat__media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--sky-50)}
.cat__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.cat:hover .cat__media img{transform:scale(1.05)}
.cat__ph{
  display:block;width:100%;height:100%;
  background:
    radial-gradient(circle at 32% 42%, var(--sky-100) 0 20%, transparent 20%),
    radial-gradient(circle at 70% 60%, var(--sky-100) 0 13%, transparent 13%),
    var(--sky-50);
}
.cat__body{display:flex;flex-direction:column;gap:.25rem;padding:1rem 1.15rem 1.15rem}
.cat__name{font-family:var(--head);font-weight:800;font-size:1.1rem;line-height:1.25;color:var(--ink)}
.cat__n{font-size:.88rem;color:var(--ink-3);font-weight:600}

/* Variante « destinations » de l'index : la pastille de gauche n'est pas un
   verdict mais une simple étiquette, elle réutilise le composant .pill du
   thème. Les lignes n'ont pas de phrase de résumé, la ville se suffit. */
.sx-list--dest .sx{grid-template-columns:10.5rem 1fr 13rem 1.1rem}
.sx>.pill{align-self:center;justify-self:start}
.sx-list--dest .sx__title{font-size:1.1rem}

@media (max-width:860px){
  .sx-list--dest .sx{grid-template-columns:1fr auto}
  .sx>.pill{grid-column:1;grid-row:1}
}

/* Variante « éducation » : étiquette d'intention courte à gauche, phrase de
   résumé conservée, car chaque guide y répond à un problème distinct. */
.sx-list--edu .sx{grid-template-columns:9rem 1fr 13.5rem 1.1rem}

@media (max-width:860px){
  .sx-list--edu .sx{grid-template-columns:1fr auto}
}

/* ==========================================================================
   FAQ EN ACCORDÉON  (voir mdm_faq_accordion())
   <details>/<summary> natifs : ouverture au clavier, aucun JavaScript, et la
   réponse reste dans le HTML servi donc indexable. La question garde son H3.
   ========================================================================== */
.qa-list{margin:1.6rem 0 2.4rem;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}

.qa>summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.2rem;
  padding:1.05rem .2rem;cursor:pointer;list-style:none;
  min-height:44px;
}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary::marker{content:""}
.qa>summary:focus-visible{outline:3px solid var(--sky-700);outline-offset:-3px;border-radius:8px}

/* Le H3 de la FAQ ne prend ni la marge ni la couleur des H3 du corps :
   dans une ligne repliable, c'est une étiquette, pas un intertitre. */
.prose .qa>summary h3{
  margin:0;font-size:1.08rem;line-height:1.42;color:var(--ink);
  text-wrap:pretty;
}
.qa>summary:hover h3{color:var(--sky-700)}

/* Chevron dessiné en CSS : aucun élément en ligne ne traîne dans le
   <summary>, donc rien que wpautop puisse envelopper dans un <p>. */
.qa>summary::after{
  content:"";flex:none;width:9px;height:9px;margin:.5rem .35rem 0 0;
  border-right:2.4px solid var(--sky-700);
  border-bottom:2.4px solid var(--sky-700);
  border-radius:0 0 3px 0;
  transform:rotate(45deg);
  transition:transform .2s var(--ease),margin-top .2s var(--ease);
}
.qa[open]>summary::after{transform:rotate(-135deg);margin-top:.78rem}

.qa__a{padding:0 .2rem 1.3rem;color:var(--ink-2)}
.qa__a>*:last-child{margin-bottom:0}

@media print{
  .qa>summary::after{display:none}
}