/* AyoPlus Blog — le gabarit d'article.
   Deux portées seulement : .ayo-heros pour la bannière pleine largeur et
   .ayo-article pour la colonne de texte. La feuille ne part que sur les
   articles, mais l'en-tête et le pied de page d'Astra vivent dans la même page
   et n'ont rien demandé.

   Les couleurs sont dans assets/ayo-tokens.css, chargé en dépendance : la
   liste des articles lit exactement les mêmes. */

.ayo-article {
  max-width: 860px;
  margin: 0 auto;
  padding: 34px 20px 72px;
  color: var(--ayo-texte);
  font-size: 16.5px;
  line-height: 1.75;
  box-sizing: border-box;
}

.ayo-heros,
.ayo-heros *,
.ayo-heros *::before,
.ayo-article *,
.ayo-article *::before,
.ayo-article *::after { box-sizing: border-box; }

/* Astra encadre son propre contenu : une largeur maximale, des marges
   intérieures et le fond gris de « ast-separate-container ». Le gabarit
   n'imprime plus ce contenu-là, mais les deux boîtes qui l'entouraient, elles,
   viennent de header.php et de post_class() - elles restent en place, et la
   bannière ne toucherait jamais les bords sans les défaire.

   La seconde ligne du sélecteur n'est pas une redite : la largeur du conteneur
   vient du réglage « narrow » d'Astra, servi en CSS dynamique après cette
   feuille et à spécificité égale. La classe du body en ajoute une, ce qui
   tranche sans dépendre de l'ordre de chargement. */
body.ayo-blog-single .site-content > .ast-container,
body.ayo-blog-single.ast-narrow-container .site-content > .ast-container {
  max-width: none;
  padding: 0;
}

/* Le cadre blanc qu'Astra dessine autour de chaque article : fond, filet du bas
   et 6.67em de gouttière. La colonne de texte pose déjà la sienne.

   La largeur est reprise explicitement : le conteneur d'Astra est une boîte
   flexible, où un enfant se réduit à la largeur de son contenu - ici les 860 px
   de la colonne de texte. La bannière n'aurait jamais dépassé cette laisse.
   « flex » et « width » se couvrent l'un l'autre selon que le conteneur soit
   flexible ou non, sans qu'il faille parier sur la version d'Astra.

   La classe visée est la nôtre, posée par le gabarit, plutôt que la
   ast-article-single d'Astra qui dépend de ses réglages. */
body.ayo-blog-single .ayo-article__corps {
  flex: 1 1 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

body.ayo-blog-single .site-content {
  background: #fff;
}

/* -- La bannière -------------------------------------------------------- */

/* Pleine largeur sans recourir à 100vw : <article> est un enfant direct du
   conteneur d'Astra, dont la largeur maximale et les marges intérieures sont
   déjà neutralisées plus haut. La colonne de texte, elle, se reforme à
   l'intérieur de .ayo-heros__contenu. */
.ayo-heros {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(300px, 52vh, 520px);
  padding: 48px 0 44px;
  background: var(--ayo-encre);
  color: #fff;
  /* Ouvre un contexte d'empilement local : sans lui, l'image et le voile en
     z-index négatif passeraient derrière le fond de la bannière, et derrière
     la page elle-même. */
  isolation: isolate;
  overflow: hidden;
}

.ayo-heros__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le voile. Un titre blanc sur une photo claire ne se lit pas ; il est plus
   dense en bas, là où le texte se pose, et s'efface vers le haut pour ne pas
   éteindre l'image. */
.ayo-heros::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(8, 13, 22, 0.9) 0%,
    rgba(8, 13, 22, 0.62) 42%,
    rgba(8, 13, 22, 0.28) 100%);
}

/* Aligné sur .ayo-article, aux mêmes 860 px et à la même gouttière : le titre
   tombe ainsi exactement au-dessus de la première ligne du texte. */
.ayo-heros__contenu {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
}

.ayo-heros .ayo-article__titre {
  margin-bottom: 16px;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}

.ayo-heros .ayo-article__meta {
  margin-bottom: 0;
}

.ayo-heros .ayo-article__date {
  color: rgba(255, 255, 255, 0.82);
}

/* -- Le titre et sa ligne de service ------------------------------------- */

.ayo-article__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.ayo-article__categorie {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  background: var(--ayo-chaud);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
}

.ayo-article__categorie:hover,
.ayo-article__categorie:focus {
  background: #d94f16;
  color: #fff;
}

.ayo-article__titre {
  margin: 0 0 18px;
  color: var(--ayo-encre);
  font-size: clamp(27px, 4.2vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.ayo-article__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 32px;
}

.ayo-article__date {
  margin: 0;
  color: var(--ayo-doux);
  font-size: 13px;
  line-height: 1.45;
}

/* « posté le » au-dessus de la date, comme sur la maquette. */
.ayo-article__date span {
  display: block;
}

.ayo-article__date time {
  font-weight: 600;
}

.ayo-article__compte {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  border-radius: 7px;
  background: var(--ayo-chaud);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.ayo-article__compte:hover,
.ayo-article__compte:focus {
  background: #d94f16;
  color: #fff;
}

/* -- Le corps de l'article ----------------------------------------------- */

/* Ce bloc met en forme du contenu écrit dans l'éditeur : on ne sait pas
   d'avance quelles balises il porte, donc chacune est reprise à la main plutôt
   que laissée aux styles du thème, qui varient d'un écran à l'autre. */

.ayo-article__contenu > *:first-child { margin-top: 0; }
.ayo-article__contenu > *:last-child { margin-bottom: 0; }

.ayo-article__contenu p {
  margin: 0 0 20px;
}

.ayo-article__contenu h2 {
  margin: 44px 0 16px;
  color: var(--ayo-encre);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.ayo-article__contenu h3 {
  margin: 34px 0 12px;
  color: var(--ayo-encre);
  font-size: 19.5px;
  font-weight: 700;
  line-height: 1.3;
}

.ayo-article__contenu h4 {
  margin: 28px 0 10px;
  color: var(--ayo-encre);
  font-size: 17px;
  font-weight: 700;
}

.ayo-article__contenu a {
  color: var(--ayo-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ayo-article__contenu a:hover,
.ayo-article__contenu a:focus {
  color: var(--ayo-accent-fonce);
}

.ayo-article__contenu strong { color: var(--ayo-encre); font-weight: 700; }

.ayo-article__contenu ul,
.ayo-article__contenu ol {
  margin: 0 0 20px;
  padding-left: 22px;
}

.ayo-article__contenu ul { list-style: disc; }
.ayo-article__contenu ol { list-style: decimal; }

.ayo-article__contenu li {
  margin: 0 0 8px;
  padding-left: 4px;
}

.ayo-article__contenu li::marker { color: var(--ayo-accent); }

.ayo-article__contenu img,
.ayo-article__contenu iframe {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.ayo-article__contenu figure { margin: 26px 0; }

.ayo-article__contenu figcaption {
  margin-top: 8px;
  color: var(--ayo-doux);
  font-size: 13.5px;
  text-align: center;
}

.ayo-article__contenu blockquote {
  margin: 26px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--ayo-accent);
  color: var(--ayo-encre);
  font-size: 17.5px;
  font-style: italic;
}

.ayo-article__contenu code {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--ayo-fond-doux);
  font-size: 0.92em;
}

.ayo-article__contenu pre {
  margin: 24px 0;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--ayo-encre);
  color: #e8edf5;
  font-size: 14px;
  line-height: 1.6;
  overflow-x: auto;
}

.ayo-article__contenu hr {
  margin: 34px 0;
  border: 0;
  border-top: 1px solid var(--ayo-ligne);
}

/* Un tableau large ne se plie pas : il défile dans sa propre boîte plutôt que
   de pousser la page entière vers la droite. La marge négative laisse le
   défilement démarrer au bord du texte. */
.ayo-article__contenu .wp-block-table,
.ayo-article__contenu figure.wp-block-table {
  margin: 26px 0;
  overflow-x: auto;
}

.ayo-article__contenu table {
  width: 100%;
  margin: 26px 0;
  border-collapse: collapse;
  font-size: 15px;
}

.ayo-article__contenu .wp-block-table table { margin: 0; }

.ayo-article__contenu th,
.ayo-article__contenu td {
  padding: 12px 15px;
  border: 1px solid var(--ayo-ligne);
  text-align: left;
  vertical-align: top;
}

.ayo-article__contenu td p {
  margin: 0 !important;
}

.ayo-article__contenu th {
  background: var(--ayo-fond-doux);
  color: var(--ayo-encre);
  font-weight: 700;
}

.ayo-article__pages {
  margin: 26px 0 0;
  color: var(--ayo-doux);
  font-size: 14px;
}

/* -- Précédent / suivant ------------------------------------------------- */

.ayo-fil {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 48px 0 0;
  padding: 30px 0 0;
  border-top: 1px solid var(--ayo-ligne);
}

.ayo-fil__carte {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--ayo-ligne);
  border-radius: var(--ayo-rayon);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.ayo-fil__carte:hover,
.ayo-fil__carte:focus {
  border-color: var(--ayo-accent);
  transform: translateY(-2px);
}

/* La carte « suivant » se lit de droite à gauche : la vignette passe après le
   texte, comme la flèche qu'elle remplace. */
.ayo-fil__carte--suivant {
  flex-direction: row-reverse;
  text-align: right;
}

.ayo-fil__vignette {
  flex: 0 0 84px;
  height: 62px;
  border-radius: 9px;
  background-color: var(--ayo-fond-doux);
  background-position: center;
  background-size: cover;
  /* Repli quand l'article n'a pas d'image à la une : un aplat aux couleurs de
     la marque vaut mieux qu'un rectangle vide. */
  background-image: linear-gradient(135deg, #ffd9c2, #ffb4a4);
}

.ayo-fil__texte {
  min-width: 0;
}

.ayo-fil__label {
  display: block;
  margin-bottom: 4px;
  color: var(--ayo-doux);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ayo-fil__titre {
  display: block;
  color: var(--ayo-encre);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.ayo-fil__vide {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--ayo-ligne);
  border-radius: var(--ayo-rayon);
  color: var(--ayo-doux);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

/* -- « Vous pouvez également aimer » ------------------------------------- */

.ayo-lies {
  margin: 46px 0 0;
}

.ayo-lies__titre,
.ayo-commentaires__titre {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  color: var(--ayo-encre);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.ayo-lies__titre svg,
.ayo-commentaires__titre svg {
  flex: 0 0 auto;
  color: var(--ayo-accent);
}

.ayo-lies__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ayo-lies__element { margin: 0; }

/* Un blog jeune n'a parfois qu'un seul article à proposer : seule dans une
   grille à deux colonnes, la carte laisse un vide à sa droite qu'on lit comme
   un chargement raté. Elle prend alors toute la largeur. */
.ayo-lies__element:only-child { grid-column: 1 / -1; }

.ayo-lies__carte {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100%;
  min-height: 168px;
  padding: 18px;
  border-radius: var(--ayo-rayon);
  background-color: var(--ayo-encre);
  background-position: center;
  background-size: cover;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}

/* Sans image à la une, la carte garde un fond lisible plutôt qu'un aplat sombre
   nu — le titre s'y détache aussi bien. */
.ayo-lies__carte:not([style]) {
  background-image: linear-gradient(140deg, #2a3a55, #16202f);
}

/* Le voile : un titre clair sur une photo claire ne se lit pas. Il est plus
   dense en bas, là où le texte se pose. */
.ayo-lies__carte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(10, 16, 26, 0.82) 0%, rgba(10, 16, 26, 0.3) 55%, rgba(10, 16, 26, 0.12) 100%);
  transition: background 0.2s ease;
}

.ayo-lies__carte:hover::before,
.ayo-lies__carte:focus::before {
  background: linear-gradient(to top, rgba(10, 16, 26, 0.9) 0%, rgba(10, 16, 26, 0.5) 60%, rgba(10, 16, 26, 0.3) 100%);
}

.ayo-lies__carte-titre {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* -- Les commentaires ---------------------------------------------------- */

.ayo-commentaires {
  margin: 50px 0 0;
  padding: 34px 0 0;
  border-top: 1px solid var(--ayo-ligne);
}

.ayo-commentaires__liste {
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}

/* Les réponses imbriquées, que wp_list_comments range dans une liste fille. */
.ayo-commentaires__liste .children {
  margin: 16px 0 0 26px;
  padding: 0 0 0 20px;
  border-left: 2px solid var(--ayo-ligne);
  list-style: none;
}

.ayo-commentaire { margin: 0 0 18px; }

.ayo-commentaire__corps {
  display: flex;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--ayo-ligne);
  border-radius: var(--ayo-rayon);
  background: #fff;
}

.ayo-commentaire__avatar { flex: 0 0 auto; }

.ayo-commentaire__avatar img {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.ayo-commentaire__texte { min-width: 0; flex: 1 1 auto; }

.ayo-commentaire__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 6px;
}

.ayo-commentaire__auteur {
  color: var(--ayo-encre);
  font-size: 15px;
  font-weight: 700;
}

.ayo-commentaire__auteur a {
  color: inherit;
  text-decoration: none;
}

.ayo-commentaire__date {
  color: var(--ayo-doux);
  font-size: 12.5px;
}

.ayo-commentaire__attente {
  margin: 0 0 8px;
  color: var(--ayo-chaud);
  font-size: 13.5px;
  font-style: italic;
}

.ayo-commentaire__contenu { font-size: 15px; line-height: 1.7; }
.ayo-commentaire__contenu p { margin: 0 0 12px; }
.ayo-commentaire__contenu > *:last-child { margin-bottom: 0; }

.ayo-commentaire__repondre a {
  display: inline-block;
  margin-top: 10px;
  color: var(--ayo-accent);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.ayo-commentaire__repondre a:hover { text-decoration: underline; }

.ayo-commentaires__pagination { margin: 0 0 30px; font-size: 14px; }
.ayo-commentaires__pagination a { color: var(--ayo-accent); }

.ayo-commentaires__ferme {
  margin: 0 0 24px;
  color: var(--ayo-doux);
  font-size: 14.5px;
  font-style: italic;
}

/* -- Le formulaire ------------------------------------------------------- */

.ayo-formulaire__cadre {
  padding: 26px;
  border: 1px solid var(--ayo-ligne);
  border-radius: 16px;
  background: var(--ayo-fond-doux);
}

.ayo-formulaire__titre {
  margin: 0 0 6px;
  color: var(--ayo-encre);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ayo-formulaire__annuler {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.ayo-formulaire__annuler a { color: var(--ayo-accent); }

.ayo-formulaire__note {
  margin: 0 0 20px;
  color: var(--ayo-doux);
  font-size: 13.5px;
  line-height: 1.6;
}

.ayo-formulaire__note a { color: var(--ayo-accent); }

.ayo-formulaire__requis { color: var(--ayo-accent); }

/* Les trois champs d'identité tiennent sur une ligne, le grand cadre de saisie
   prend la largeur entière : la grille se charge des deux cas sans qu'aucun
   champ n'ait à connaître sa place. */
.ayo-formulaire {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.ayo-formulaire > * { grid-column: 1 / -1; }

.ayo-formulaire__champ { margin: 0; }

.ayo-formulaire__champ:not(.ayo-formulaire__champ--large) {
  grid-column: auto;
}

.ayo-formulaire__champ label {
  display: block;
  margin: 0 0 6px;
  color: var(--ayo-encre);
  font-size: 13px;
  font-weight: 700;
}

.ayo-formulaire__champ input,
.ayo-formulaire__champ textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #dfe4ec;
  border-radius: 9px;
  background: #fff;
  color: var(--ayo-texte);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
}

.ayo-formulaire__champ textarea {
  min-height: 150px;
  resize: vertical;
}

.ayo-formulaire__champ input:focus,
.ayo-formulaire__champ textarea:focus {
  outline: none;
  border-color: var(--ayo-accent);
  box-shadow: 0 0 0 3px rgba(253, 87, 87, 0.16);
}

.ayo-formulaire__consentement {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  color: var(--ayo-doux);
  font-size: 13.5px;
  line-height: 1.55;
}

.ayo-formulaire__consentement input {
  flex: 0 0 auto;
  margin-top: 3px;
}

.ayo-formulaire__actions { margin: 0; }

.ayo-formulaire__envoyer {
  padding: 12px 24px;
  border: 0;
  border-radius: 9px;
  background: var(--ayo-accent);
  color: #fff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.ayo-formulaire__envoyer:hover,
.ayo-formulaire__envoyer:focus {
  background: var(--ayo-accent-fonce);
  transform: translateY(-1px);
}

/* -- Écrans étroits ------------------------------------------------------ */

@media (max-width: 720px) {
  .ayo-article { padding: 22px 16px 56px; font-size: 16px; }

  /* Une bannière à mi-hauteur d'écran mange tout un téléphone avant que la
     première phrase n'apparaisse. */
  .ayo-heros {
    min-height: 240px;
    padding: 34px 0 28px;
  }

  .ayo-heros__contenu { padding: 0 16px; }

  .ayo-fil,
  .ayo-lies__grille,
  .ayo-formulaire { grid-template-columns: minmax(0, 1fr); }

  /* La carte « suivant » reprend le sens de lecture courant : retournée, elle
     n'a plus de voisine à qui faire face. */
  .ayo-fil__carte--suivant {
    flex-direction: row;
    text-align: left;
  }

  .ayo-formulaire__champ:not(.ayo-formulaire__champ--large) {
    grid-column: 1 / -1;
  }

  .ayo-formulaire__cadre { padding: 20px; }

  .ayo-commentaire__corps { padding: 15px; }

  .ayo-commentaires__liste .children {
    margin-left: 12px;
    padding-left: 14px;
  }
}