/* ==========================================================================
   Correctifs propres à Ghost.
   Le rendu des pages vient intégralement du CSS repris de Divi. Ce fichier ne
   traite que ce que Divi ne pouvait pas connaître : les écrans que WordPress
   n'avait pas (liste d'articles, archives, erreur 404) et les éléments
   injectés par Ghost (formulaire membres). Il est chargé en dernier et reste
   volontairement court — toute règle ajoutée ici est un écart au site d'origine.
   ========================================================================== */

/* --- Liste d'articles et archives ------------------------------------------
   Ces pages n'existaient pas sous cette forme sur le site WordPress : le blog
   y était affiché par un module Divi. On réemploie les classes de Divi pour
   hériter de sa typographie, en ajoutant seulement la grille. */

#main-content .abe-archive {
    padding: 60px 0;
}

#main-content .abe-archive__title {
    margin-bottom: 40px;
    text-align: center;
}

#main-content .abe-archive__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 40px;
}

#main-content .abe-archive__card {
    display: block;
    color: inherit;
    text-decoration: none;
}

#main-content .abe-archive__thumb {
    aspect-ratio: 3 / 2;
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: 8px;
    background: #f5f5f5;
}

#main-content .abe-archive__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#main-content .abe-archive__meta {
    color: #666;
    font-size: 14px;
}

#main-content .abe-archive__empty {
    padding: 80px 0;
    text-align: center;
    color: #666;
}

/* --- Article ---------------------------------------------------------------
   Colonne de lecture alignée sur la largeur de contenu de Divi. */

#main-content .abe-single {
    padding: 60px 0;
}

#main-content .abe-single__header {
    margin-bottom: 40px;
    text-align: center;
}

#main-content .abe-single__feature {
    margin-bottom: 40px;
    border-radius: 8px;
    overflow: hidden;
}

#main-content .abe-single__feature img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Page d'erreur --------------------------------------------------------- */

#main-content .abe-error {
    padding: 120px 0;
    text-align: center;
}

/* --- Cartes de l'éditeur Ghost (Koenig) ------------------------------------
   Les pages reprises de WordPress sont du balisage Divi et n'utilisent aucune
   de ces classes. Les articles du blog, eux, sont rédigés dans l'éditeur de
   Ghost : sans ces règles, une image « large » ou « pleine largeur » resterait
   à la taille de la colonne de texte. .kg-width-wide et .kg-width-full sont
   exigées par le validateur de thèmes. */

.kg-card {
    margin: 0 0 1.6em;
}

.kg-image {
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

/* Le site est en mise en page « en boîte » (body.et_boxed_layout) : une image
   pleine largeur qui déborderait jusqu'aux bords de la fenêtre casserait le
   cadre. Les deux largeurs restent donc contenues dans la colonne de contenu.
   Elles se ressemblent de ce fait beaucoup — c'est voulu. */
.kg-width-wide,
.kg-width-full {
    position: static;
    width: 100%;
    max-width: 100%;
    left: auto;
    transform: none;
    margin-inline: auto;
}

.kg-width-wide img,
.kg-width-full img {
    width: 100%;
    height: auto;
}

.kg-image-card figcaption,
.kg-embed-card figcaption,
.kg-gallery-card figcaption {
    margin-top: 0.6em;
    color: #666;
    font-size: 14px;
    text-align: center;
}

.kg-gallery-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kg-gallery-row {
    display: flex;
    gap: 10px;
}

.kg-gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kg-bookmark-card a {
    display: flex;
    color: inherit;
    text-decoration: none;
    border: 1px solid #e4e7ec;
    border-radius: 4px;
    overflow: hidden;
}

.kg-bookmark-content { padding: 20px; flex: 1 1 auto; }
.kg-bookmark-title { font-weight: 600; }
.kg-bookmark-description { color: #666; font-size: 14px; }
.kg-bookmark-thumbnail img { width: 180px; height: 100%; object-fit: cover; }

.kg-callout-card {
    display: flex;
    gap: 12px;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 4px;
}

.kg-toggle-card {
    padding: 16px 20px;
    border: 1px solid #e4e7ec;
    border-radius: 4px;
}

.kg-button-card { text-align: center; }

.kg-embed-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Page « Tarifs » : grilles tarifaires empilées --------------------------
   ÉCART VOLONTAIRE au rendu d'origine, demandé après recette.

   Divi plaçait les trois grilles tarifaires sur une même rangée, en colonnes
   d'un tiers. Ce sont des images au format portrait (1080 × 1920) : côte à
   côte, chacune ne fait qu'un tiers de la largeur et le texte y devient
   illisible. Elles sont donc empilées et centrées, à une largeur qui préserve
   leur lisibilité.

   Le ciblage passe par la classe de page de Ghost (body.page-tarifs) et par la
   largeur de colonne Divi, et non par un numéro de rangée : une nouvelle
   capture du site source renumérote les modules, pas les proportions. */

body.page-tarifs .et_pb_row .et_pb_column_1_3 {
    width: 100% !important;
    max-width: 520px;
    /* Divi pose des marges de gouttière en pourcentage, avec !important. */
    margin: 0 auto 40px !important;
    float: none !important;
}

body.page-tarifs .et_pb_row .et_pb_column_1_3:last-child {
    margin-bottom: 0 !important;
}

body.page-tarifs .et_pb_row .et_pb_column_1_3 .et_pb_image {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

body.page-tarifs .et_pb_row .et_pb_column_1_3 .et_pb_image img {
    width: 100%;
    height: auto;
}

/* --- Formulaire d'inscription aux membres Ghost -----------------------------
   Remplace le formulaire Brevo du site WordPress. Repris à l'identique du
   bouton Divi pour ne pas jurer avec le reste. */

.abe-members-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

.abe-members-form input[type="email"] {
    flex: 1 1 260px;
    max-width: 340px;
    padding: 14px 18px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font: inherit;
}

body.members-form-success .abe-members-form { display: none; }
.abe-members-success { display: none; }
body.members-form-success .abe-members-success { display: block; }