/*
Theme Name:   Visitadom
Theme URI:    https://visitadom.fr/
Description:  Thème enfant de GeneratePress. Reprend la charte du site statique
              de visitadom.fr pour que le passage du site au blog soit invisible.
              La feuille de style du site est la source unique des couleurs, de
              la typographie et des composants ; ce fichier ne traite que ce qui
              est propre à WordPress.
Author:       Visitadom
Template:     generatepress
Version:      1.0.0
Text Domain:  visitadom
*/

/* ==========================================================================
   Ce fichier suppose /assets/css/style.css déjà chargé : toutes les variables
   (--bleu, --encre, --rayon, --pas…) en proviennent. Ne rien redéfinir ici
   qui existe déjà là-bas, sous peine de faire diverger le blog du site.
   ========================================================================== */

/* --- Barre d'administration ---------------------------------------------
   L'en-tête du site est en position sticky avec top:0. Connecté, la barre
   WordPress occupe déjà ces 32px et masquerait la navigation. */
.admin-bar .entete { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .entete { top: 46px; }
  .admin-bar .avec-js .panneau__voile { top: 106px; }
}

/* --- Navigation : section courante ---------------------------------------
   Sur l'accueil du blog, le lien porte aria-current="page" et la charte le
   met en valeur. Sur un article ou une archive, c'est la section qui est
   courante, pas la page : aria-current vaut alors "location", que la charte
   ne connaît pas puisque le site statique n'a pas de rubriques. On reprend
   ici exactement les mêmes déclarations, aux trois endroits concernés. */
.nav a[aria-current="location"] {
  color: var(--bleu); border-bottom-color: var(--vert);
}
@media (max-width: 899px) {
  .nav a[aria-current="location"] {
    color: var(--bleu); box-shadow: inset 3px 0 0 var(--vert);
    padding-left: .75rem;
  }
  .panneau__groupe a[aria-current="location"] {
    color: var(--bleu); box-shadow: inset 3px 0 0 var(--vert);
    padding-left: .8rem;
  }
}

/* WordPress nomme sa classe de contenu masqué autrement que le site. */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Liste d'articles ----------------------------------------------------- */
.billet { display: flex; flex-direction: column; }
.billet__vignette { margin: -1.8rem -1.8rem 1.3rem; }
.billet__vignette img {
  border-radius: var(--rayon) var(--rayon) 0 0;
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
}
.billet h3 { margin-bottom: .55rem; }
.billet h3 a { color: var(--bleu-fonce); text-decoration: none; }
.billet h3 a:hover { color: var(--bleu); }
.billet__extrait { color: var(--gris); }
.billet .bouton { margin-top: auto; align-self: flex-start; }

@media (max-width: 600px) {
  .billet__vignette { margin: -1.35rem -1.35rem 1.1rem; }
}

/* --- Métadonnées d'article ------------------------------------------------ */
.meta {
  font-size: .86rem; color: var(--gris); font-weight: 600;
  display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center;
  margin: 0 0 .9rem;
}
.meta a { color: var(--gris); text-decoration: none; }
.meta a:hover { color: var(--bleu); text-decoration: underline; }
.meta time { white-space: nowrap; }
.hero .meta { margin-top: 1.1rem; margin-bottom: 0; }
.section--encre .meta, .section--encre .meta a { color: #c9d4e2; }

/* --- Image à la une -------------------------------------------------------
   Elle occupe toute la largeur du conteneur (1160px), pas la largeur de
   lecture. .prose plafonne à 72ch, soit environ 660px : l'appliquer à un
   visuel le bride à la moitié de la page. Cette classe existe pour qu'on
   ne soit plus tenté de réutiliser .prose ailleurs que sur du texte. */
.une { margin: 0 0 clamp(2rem, 4vw, 3rem); }
.une img {
  width: 100%; height: auto;
  border-radius: var(--rayon); box-shadow: var(--ombre);
}

/* --- Écart entre le hero et le corps ---------------------------------------
   .hero--compact porte déjà un rembourrage bas de 3rem, auquel s'ajoutait
   le rembourrage haut de .section (jusqu'à 5,5rem) : près de 140px entre le
   titre et le premier élément. Le rembourrage du hero suffit. */
:is(.single, .page) .hero--compact + .section { padding-top: 0; }

/* --- Largeur du corps de texte --------------------------------------------
   Choix client : le texte occupe toute la largeur du conteneur (1160px),
   comme l'image à la une, et non la largeur de lecture de 72ch héritée de
   la charte. Ne concerne que le blog : les pages statiques sont servies
   hors WordPress et gardent leur .prose d'origine.
   Le bloc .commentaires garde en revanche son propre plafond de 72ch,
   défini plus bas : des champs de saisie de 1160px sont inutilisables. */
:is(.single, .page) .prose { max-width: none; }

/* Le chapô porte son propre plafond de 62ch dans la charte. Sans cette
   ligne, l'introduction resterait plus étroite que le corps qui la suit,
   ce qui se voit immédiatement. Hors du corps d'article, .plomb garde sa
   largeur d'origine : dans un hero, un chapô court est voulu. */
:is(.single, .page) .prose .plomb { max-width: none; }

/* --- Corps d'article -----------------------------------------------------
   Le site fournit déjà .prose. On n'ajoute ici que les blocs WordPress
   qui n'existent nulle part dans les pages statiques. */
.prose > *:first-child { margin-top: 0; }
.prose img { border-radius: var(--rayon); }
.prose figure { margin: 2rem 0; }

/* Visuels dans le corps : plafond de HAUTEUR, pas de largeur.
   La charte ne borne les images qu'à `max-width: 100%`. Dans un corps
   d'article porté à 1160px (voir plus haut), un schéma portrait de
   1024x1536 s'affichait donc à sa taille native : un écran et demi de
   défilement pour une seule figure, texte du schéma à 60px. Le plafond
   porte sur la hauteur parce que c'est elle qui gêne la lecture ; la
   largeur suit par le ratio, et l'image reste centrée dans la colonne.
   Vaut aussi pour les photos Pexels : toutes les figures du corps
   s'alignent ainsi sur la même hauteur maximale. L'image à la une n'est
   pas concernée, elle est hors .prose et garde sa pleine largeur. */
.prose figure img {
  max-height: 560px;
  width: auto;
  margin-inline: auto;
}

.prose figcaption {
  font-size: .84rem; color: var(--gris); margin-top: .6rem; text-align: center;
}
.prose blockquote {
  border-left: 4px solid var(--vert); padding: .4rem 0 .4rem 1.6rem;
  margin: 2rem 0; font-style: italic; color: var(--bleu-fonce);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose blockquote cite {
  display: block; margin-top: .9rem; font-style: normal;
  font-size: .92rem; font-weight: 700; color: var(--gris);
}
.prose :is(code, kbd, samp) {
  font-size: .9em; background: var(--fond); border: 1px solid #e6ecf3;
  border-radius: 6px; padding: .12em .38em;
}
.prose pre {
  background: var(--bleu-fonce); color: #e9edff; border-radius: var(--rayon);
  padding: 1.3rem 1.5rem; overflow-x: auto; font-size: .9rem; line-height: 1.6;
}
.prose pre code { background: none; border: 0; padding: 0; color: inherit; }
.prose hr { border: 0; border-top: 1px solid #e6ecf3; margin: 2.6rem 0; }
.prose table { border-collapse: collapse; width: 100%; margin: 1.8rem 0;
               font-size: .94rem; }
.prose :is(th, td) { border: 1px solid #e6ecf3; padding: .7rem .9rem;
                     text-align: left; }
.prose th { background: var(--fond); font-weight: 700;
            color: var(--bleu-fonce); }

/* Classes d'alignement de l'éditeur de blocs. */
.prose .alignleft  { float: left;  margin: .4rem 1.6rem 1.2rem 0; }
.prose .alignright { float: right; margin: .4rem 0 1.2rem 1.6rem; }
.prose .aligncenter { margin-inline: auto; }
.prose .alignwide, .prose .alignfull { max-width: none; }
.prose .alignfull { width: 100vw; margin-inline: calc(50% - 50vw); }
@media (max-width: 600px) {
  .prose :is(.alignleft, .alignright) { float: none; margin-inline: 0; }
}

/* --- Pagination ----------------------------------------------------------- */
.pagination { margin-top: var(--pas); }
.pagination .nav-links {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  justify-content: center;
}
.pagination :is(a, span.current, span.dots) {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: .5rem .9rem;
  border-radius: 999px; font-weight: 700; font-size: .95rem;
  text-decoration: none; border: 2px solid #e6ecf3; color: var(--bleu);
}
.pagination a:hover { border-color: var(--bleu); }
.pagination span.current {
  background: var(--bleu); border-color: var(--bleu); color: #fff;
}
.pagination span.dots { border-color: transparent; color: var(--gris); }

/* --- Navigation d'article précédent / suivant ----------------------------- */
.bornes {
  display: grid; gap: 1rem; margin-top: var(--pas);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.bornes a {
  display: block; padding: 1.3rem 1.5rem; border: 1px solid #e6ecf3;
  border-radius: var(--rayon); text-decoration: none; background: #fff;
  box-shadow: var(--ombre);
}
.bornes a:hover { border-color: var(--bleu); }
.bornes__sens {
  display: block; font-size: .78rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--vert-fonce); margin-bottom: .35rem;
}
.bornes__titre { font-weight: 700; color: var(--bleu-fonce); line-height: 1.35; }
.bornes--suivant { text-align: right; }

/* --- Commentaires --------------------------------------------------------- */
.commentaires { margin-top: var(--pas); max-width: 72ch; }
.commentaires h2 { font-size: 1.5rem; }
.commentaires ol { list-style: none; margin: 0; padding: 0; }
.commentaires ol ol { margin-left: 1.6rem; padding-left: 1.4rem;
                      border-left: 2px solid #e6ecf3; }
.commentaires li { margin-bottom: 1.4rem; }
.commentaires article {
  background: var(--fond); border: 1px solid #e6ecf3;
  border-radius: var(--rayon); padding: 1.3rem 1.5rem;
}
.commentaires .comment-author { font-weight: 700; color: var(--bleu-fonce); }
.commentaires .comment-author img { border-radius: 50%; margin-right: .6rem; }
.commentaires :is(input[type="text"], input[type="email"], input[type="url"],
                  textarea) {
  width: 100%; font: inherit; font-size: 1rem; color: var(--encre);
  background: #fff; border: 1.5px solid var(--gris-clair);
  border-radius: 12px; padding: .75rem 1rem;
}
.commentaires :is(input, textarea):focus-visible { border-color: var(--bleu); }
.commentaires label { display: block; font-weight: 600; font-size: .92rem;
                      margin-bottom: .35rem; }
.commentaires p { margin-bottom: 1.1rem; }
.commentaires .submit {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1.6rem; border-radius: 999px; font-weight: 700;
  font-size: 1rem; border: 2px solid transparent; cursor: pointer;
  background: var(--bleu); color: #fff; box-shadow: var(--ombre-forte);
}

/* --- Recherche ------------------------------------------------------------ */
.recherche { display: flex; gap: .6rem; flex-wrap: wrap; max-width: 34rem; }
.recherche input[type="search"] {
  flex: 1 1 12rem; font: inherit; font-size: 1rem; color: var(--encre);
  background: #fff; border: 1.5px solid var(--gris-clair);
  border-radius: 999px; padding: .75rem 1.2rem; min-height: 44px;
}
.recherche input[type="search"]:focus-visible { border-color: var(--bleu); }

/* --- Mode sombre ---------------------------------------------------------
   Le site bascule sur prefers-color-scheme ; le blog doit suivre, sinon la
   transition entre les deux se verrait immédiatement. */
@media (prefers-color-scheme: dark) {
  .billet h3 a { color: #eaf1f8; }
  .prose :is(code, kbd, samp) { background: #151c26; border-color: #232c38; }
  .prose :is(th, td) { border-color: #232c38; }
  .prose th { background: #151c26; }
  .prose hr { border-top-color: #232c38; }
  .prose blockquote { color: #d5e2f0; }
  .bornes a { background: #151c26; border-color: #232c38; }
  .bornes__titre { color: #eaf1f8; }
  .pagination :is(a, span.current, span.dots) { border-color: #232c38; }
  .commentaires article { background: #151c26; border-color: #232c38; }
  .commentaires .comment-author { color: #eaf1f8; }
  .commentaires :is(input[type="text"], input[type="email"],
                    input[type="url"], textarea),
  .recherche input[type="search"] {
    background: #0f141a; border-color: #232c38; color: #e6edf3;
  }
}