/* LMVI CONSEIL — la feuille propre au site.
 *
 * Chargée APRÈS la feuille commune de la méthode, qu'elle ne remplace pas :
 * elle ne fait qu'y poser les valeurs de la marque, et corriger ce que le thème
 * met en travers.
 *
 * Toutes les valeurs viennent de l'option `et_divi` du dump MariaDB du
 * 2026-09-28 — pas de la feuille CSS servie, qui disait faux sur quatre points
 * (voir 05-analyse/habillage-divi.md). En particulier : aucune police n'était
 * choisie sur le site d'origine, et la largeur de contenu est 1024 px, pas 1080.
 */

:root {
  --td-orange:        #fb5604;  /* accent_color */
  --td-orange-clair:  #e0792a;  /* link_color   */
  --td-orange-sombre: #f75504;  /* footer_bg    */
  --td-largeur:       64rem;    /* content_width = 1024 px */
  --td-rayon:         6px;

  --lmvi-texte:       #0a0a0a;  /* font_color / header_color */
  --lmvi-fond:        #ffffff;  /* background_color */
}

/* ------------------------------------------------------------------ texte */

body {
  color: var(--lmvi-texte);
  background: var(--lmvi-fond);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--lmvi-texte);
}

a {
  color: var(--td-orange-clair);
}

a:hover,
a:focus {
  color: var(--td-orange);
}

/* ------------------------------------------------------- largeur de page */

/* Le site d'origine tenait son contenu à 1024 px. Astra, lui, s'étale :
 * sans cette règle les lignes de texte dépassent 120 caractères, et un
 * article technique devient illisible. */
.ast-container,
.entry-content > *:not(.alignfull):not(.alignwide) {
  max-width: var(--td-largeur);
}

.entry-content > *:not(.alignfull):not(.alignwide) {
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------- en-tête */

.site-title a,
.site-title a:hover {
  color: var(--lmvi-texte);
}

.main-header-menu .current-menu-item > a,
.main-header-menu a:hover {
  color: var(--td-orange);
}

/* ------------------------------------------------------------- boutons */

/* Sur le site d'origine les boutons sont transparents à bordure
 * (all_buttons_bg_color = rgba(0,0,0,0), bordure blanche). Posés sur fond
 * clair ils seraient invisibles : on garde la forme, on prend l'accent. */
.wp-block-button__link,
.ast-button,
button,
input[type="submit"] {
  background: var(--td-orange);
  border: 2px solid var(--td-orange);
  border-radius: var(--td-rayon);
  color: #fff;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--td-orange);
}

.wp-block-button__link:hover,
.ast-button:hover,
button:hover,
input[type="submit"]:hover {
  background: var(--td-orange-sombre);
  border-color: var(--td-orange-sombre);
}

/* ---------------------------------------------------------- pied de page */

.site-footer,
.ast-small-footer {
  background: var(--td-orange-sombre);
  color: #fff;
}

.site-footer a,
.ast-small-footer a {
  color: #fff;
  text-decoration: underline;
}

/* ⚠️ Le site d'origine avait gardé `footer_widget_header_color` au bleu
 * #2ea3f2 par défaut de Divi, jamais changé, qui jurait avec l'orange.
 * Il n'est pas repris. */
.site-footer h2,
.site-footer h3 {
  color: #fff;
}

/* --------------------------------------------------------------- blocs de code */

/* Les 83 articles sont des articles techniques : les blocs de code y sont
 * la matière, pas la décoration. Le site d'origine les colorait avec Prism,
 * chargé par un extrait Code Snippets (01-export/code-snippets/). Tant que
 * cet extrait n'est pas rebranché, au moins qu'ils soient lisibles. */
pre,
.wp-block-code {
  background: #f7f7f7;
  border: 1px solid #e3e3e3;
  border-radius: var(--td-rayon);
  padding: 1rem;
  overflow: auto;
  font-size: .9rem;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ------------------------------------------------------------- cartes */

/* La feuille commune pose `minmax(17rem, 1fr)`, calibré pour une colonne de
 * 48 rem où quatre cartes se rangent 2 × 2. Ici le contenu fait 64 rem (la
 * largeur réelle du site d'origine) : 64 / 17 donne **trois** colonnes, et la
 * quatrième carte reste seule sur sa ligne. On resserre juste assez pour que
 * les quatre services et les quatre membres de l'équipe tiennent sur un rang. */
.td-cartes {
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
}

/* Une image de carte n'a pas à imposer sa taille d'origine : les portraits
 * font 1352 px de côté, les logos de référence vont de 162 à 498 px de large.
 * Sans cadre commun, la grille part en morceaux. */
.td-carte img {
  display: block;
  width: 100%;
  height: 11rem;
  object-fit: cover;
  border-radius: var(--td-rayon);
}

/* Un logo se montre en entier, sur fond blanc : le rogner le mutile. */
.td-carte img[alt="Neovee"],
.td-carte img[alt="RCF Radio"] {
  object-fit: contain;
  height: 5rem;
  background: #fff;
}

/* ------------------------------------------------- la page du blog, en large */

/* 64 rem conviennent à une page de texte, pas à une grille d'articles DOUBLÉE
   d'une colonne de navigation : les cartes s'étranglent et les titres se cassent
   en quatre lignes. Les pages qui portent une liste d'articles prennent donc
   plus de large — et elles seules. */
body:has(.td-articles-bloc) .ast-container,
body.archive .ast-container,
body.search .ast-container,
body.single .ast-container {
  max-width: 88rem;
}

/* Une archive doit être la MÊME page que le blog : même largeur, même fond, même
   colonne de droite. Sans cela, cliquer « par thème » donne l'impression d'avoir
   changé de site. Le thème sert ses archives sur un fond gris-bleu ; le blog, lui,
   est sur une page, donc en blanc. */
body.archive #content,
body.search #content,
body.single #content,
body.archive .site-content,
body.search .site-content,
body.single .site-content {
  background: #fff;
}

/* L'image à la une d'un article, quand le thème l'affiche : même cadre que les
   vignettes de la grille, pour que l'arrivée ressemble au départ. */
body.single .post-thumb img,
body.single .ast-single-post-featured-section img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--td-rayon);
}

body:has(.td-articles-bloc) .td-bloc .td-inner {
  max-width: none;
}

/* --------------------------------------- la colonne « par thème / par date » */

/* Une colonne de navigation se parcourt du regard : elle doit être dense. Par
   défaut le thème lui donne la taille et l'interligne d'un corps de texte, et
   les douze rubriques occupent alors plus de hauteur que trois articles. */
.widget-area.secondary .widget-title {
  font-size: 1rem;
  line-height: 1.2;
  margin-bottom: .5rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--lmvi-texte);
}

.widget-area.secondary .widget {
  margin-bottom: 1.5rem;
}

.widget-area.secondary ul {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.25;
}

.widget-area.secondary li {
  font-size: .78rem;
  line-height: 1.15;
  margin: 0;
  padding: .06rem 0;
  border-bottom: 1px solid #f2f2f2;
}

/* Le thème pose aussi un interligne et une marge sur les liens eux-mêmes :
   resserrer la liste sans les resserrer ne change presque rien à l'œil. */
.widget-area.secondary li a {
  display: block;
  line-height: 1.15;
  padding: 0;
  margin: 0;
}

.widget-area.secondary li:last-child {
  border-bottom: 0;
}

.widget-area.secondary li a {
  color: #444;
  text-decoration: none;
}

.widget-area.secondary li a:hover {
  color: var(--td-orange);
}