/*
Theme Name: Estran Indigo
Theme URI: https://congres-sfls.fr
Description: Habillage enfant GeneratePress pour Bouger sans ordonnance — palette ocean-deep, Inter/Bitter, structure sans colonne latérale.
Author: Bouger sans ordonnance
Template: generatepress
Version: 1.0
Text Domain: estran-indigo
*/

/* ---------------------------------------------------------------------------
   Jeu de variables — palette ocean-deep + rayon 0 + ombre medium + pas compact
   --------------------------------------------------------------------------- */
:root {
    --ei-primaire:        #1A56DB;
    --ei-primaire-fonce:  #1546AE;
    --ei-accent:          #3B82F6;
    --ei-accent-doux:     #E8EEF8;
    --ei-surface:         #EFF6FF;
    --ei-fond:            #FFFFFF;
    --ei-texte:           #1F2937;
    --ei-texte-second:    #4B5563;
    --ei-bordure:         #E5E7EB;
    --ei-rayon:           0px;
    --ei-ombre:           0 4px 12px rgba(0, 0, 0, 0.1);
    --ei-ecart-section:   2rem;
    --ei-ecart-bloc:      1rem;
    --ei-marge-contenu:   1rem;
}

/* ---------------------------------------------------------------------------
   Fontes auto-hébergées — Inter (texte) / Bitter (titres)
   --------------------------------------------------------------------------- */
@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/Inter-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/Inter-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bitter';
    src: url('assets/fonts/Bitter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bitter';
    src: url('assets/fonts/Bitter-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------------------------
   Rayon nul partout — jeton border_radius = none
   --------------------------------------------------------------------------- */
.button,
button,
input,
textarea,
select,
.wp-block-button__link,
.ei-carte,
.ei-univers,
img,
.page-header,
.site-main .post {
    border-radius: var(--ei-rayon);
}

/* ---------------------------------------------------------------------------
   H1 d'accueil — §10 Homepage H1 (visible, jamais screen-reader-text)
   --------------------------------------------------------------------------- */
.site-tagline-heading {
    display: block;
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 1.1rem;
    color: inherit;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Grille des univers — composition d'accueil « category-grid »
   --------------------------------------------------------------------------- */
.ei-univers-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ei-ecart-bloc);
    margin: 0 0 var(--ei-ecart-section);
}
.ei-univers {
    display: flex;
    flex-direction: column;
    background: var(--ei-surface);
    border: 1px solid var(--ei-bordure);
    box-shadow: var(--ei-ombre);
    overflow: hidden;
}
.ei-univers__vignette {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
}
.ei-univers__corps {
    padding: var(--ei-marge-contenu);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}
.ei-univers__titre {
    font-family: 'Bitter', Georgia, serif;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
    margin: 0;
}
.ei-univers__titre a {
    text-decoration: none;
    color: var(--ei-texte);
}
.ei-univers__titre a:hover,
.ei-univers__titre a:focus {
    color: var(--ei-primaire-fonce);
    text-decoration: underline;
}
.ei-univers__resume {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--ei-texte-second);
    margin: 0;
}
.ei-univers__compte {
    font-size: 0.8rem;
    color: var(--ei-texte-second);
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Grille des derniers billets
   --------------------------------------------------------------------------- */
.ei-cartes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ei-ecart-bloc);
    margin: 0 0 var(--ei-ecart-section);
}
.ei-carte {
    display: flex;
    flex-direction: column;
    background: var(--ei-fond);
    border: 1px solid var(--ei-bordure);
    box-shadow: var(--ei-ombre);
    overflow: hidden;
}
.ei-carte__vignette {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.ei-carte__corps {
    padding: var(--ei-marge-contenu);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}
.ei-carte__titre {
    font-family: 'Bitter', Georgia, serif;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.32;
    margin: 0;
}
.ei-carte__titre a {
    text-decoration: none;
    color: var(--ei-texte);
}
.ei-carte__titre a:hover,
.ei-carte__titre a:focus {
    color: var(--ei-primaire-fonce);
    text-decoration: underline;
}
.ei-carte__meta {
    font-size: 0.78rem;
    color: var(--ei-texte-second);
}
.ei-carte__extrait {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--ei-texte-second);
    margin: 0;
}
.ei-carte__lien {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--ei-primaire);
    text-decoration: none;
    margin-top: auto;
}
.ei-carte__lien:hover,
.ei-carte__lien:focus {
    color: var(--ei-primaire-fonce);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Signature d'auteur sous chaque billet + ligne de byline
   --------------------------------------------------------------------------- */
.ei-signature {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    margin-top: var(--ei-ecart-section);
    padding: var(--ei-marge-contenu);
    background: var(--ei-surface);
    border-left: 3px solid var(--ei-primaire);
}
.ei-signature__portrait {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    object-fit: cover;
}
.ei-signature__nom {
    font-family: 'Bitter', Georgia, serif;
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 0.25rem;
}
.ei-signature__nom a {
    color: var(--ei-texte);
    text-decoration: none;
}
.ei-signature__nom a:hover,
.ei-signature__nom a:focus {
    color: var(--ei-primaire-fonce);
    text-decoration: underline;
}
.ei-signature__mot {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ei-texte-second);
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Page « Mon histoire » — structure about-right-float (§10)
   --------------------------------------------------------------------------- */
.ei-portrait-flottant {
    float: right;
    width: 230px;
    max-width: 40%;
    margin: 0 0 var(--ei-ecart-bloc) var(--ei-ecart-bloc);
}
.ei-portrait-flottant img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: var(--ei-ombre);
}
.ei-portrait-flottant figcaption {
    font-size: 0.78rem;
    color: var(--ei-texte-second);
    padding-top: 0.4rem;
    line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Pied de page centré clair — jeton footer_type = centered-light
   --------------------------------------------------------------------------- */
.site-footer {
    background: var(--ei-surface);
    border-top: 1px solid var(--ei-bordure);
}
.site-info {
    text-align: center;
}
.ei-pied {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    text-align: center;
}
.ei-pied__marque img {
    display: block;
    max-height: 44px;
    width: auto;
    height: auto;
}
.ei-pied__liens {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.86rem;
}
.ei-pied__liens a {
    color: var(--ei-primaire);
    text-decoration: none;
}
.ei-pied__liens a:hover,
.ei-pied__liens a:focus {
    color: var(--ei-primaire-fonce);
    text-decoration: underline;
}
.ei-pied__droits {
    font-size: 0.82rem;
    color: var(--ei-texte-second);
}

/* ---------------------------------------------------------------------------
   Page 404 — §10 heading / body
   --------------------------------------------------------------------------- */
.ei-404 {
    max-width: 36rem;
}
.ei-404 p {
    line-height: 1.7;
}

/* ---------------------------------------------------------------------------
   Formulaire de contact — bordures, marges, bouton à la palette (APPENDIX-D 29)
   --------------------------------------------------------------------------- */
.wpcf7-form p {
    margin-bottom: var(--ei-ecart-bloc);
}
.wpcf7-form label {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
    color: var(--ei-texte);
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--ei-bordure);
    background: var(--ei-fond);
    color: var(--ei-texte);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.95rem;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus {
    border-color: var(--ei-primaire);
    outline: 2px solid var(--ei-accent-doux);
}
.wpcf7-form input[type="submit"] {
    background: var(--ei-primaire);
    color: #FFFFFF;
    border: none;
    padding: 0.7rem 1.4rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: var(--ei-ombre);
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:focus {
    background: var(--ei-primaire-fonce);
}

/* ---------------------------------------------------------------------------
   Divers — logo, archives, liens de contenu
   --------------------------------------------------------------------------- */
.site-logo img,
.site-header .site-logo img,
#mobile-header .site-logo img {
    max-width: 100%;
    height: auto;
}
.page-header .page-title,
.archive-description {
    font-family: 'Bitter', Georgia, serif;
}
.archive-description {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--ei-texte-second);
}
.entry-content a {
    color: var(--ei-primaire);
}
.entry-content a:hover,
.entry-content a:focus {
    color: var(--ei-primaire-fonce);
}
.entry-content h2,
.entry-content h3 {
    margin-top: var(--ei-ecart-section);
}

/* ---------------------------------------------------------------------------
   Signature mobile — rappel du slogan dans la barre de navigation.
   Élément décoratif distinct du slogan GeneratePress (hide_tagline reste à 1) :
   il s'agit d'un ::before posé sur la barre, à gauche du bouton hamburger.
   Vérifié par reports/audit-harness/mobile-tagline.cjs.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .inside-navigation {
        position: relative;
    }
    /* La barre mobile fusionne logo et navigation (GP Menu Plus) et héritait
       donc du bleu primaire. Le logotype est en encre foncée : sur ce fond le
       rapport de contraste tombait à 1.2. La barre passe en clair ; le menu
       déplié conserve les couleurs de navigation. */
    #mobile-header,
    #mobile-header .inside-navigation {
        background-color: var(--ei-fond);
        border-bottom: 1px solid var(--ei-bordure);
    }
    #mobile-header .menu-toggle,
    #mobile-header .menu-toggle:hover,
    #mobile-header .menu-toggle:focus {
        background-color: transparent;
        color: var(--ei-texte);
    }
    .inside-navigation::before {
        content: "Le corps, le cœur, et ce qu'on apprend";
        position: absolute;
        left: 122px;
        top: 50%;
        transform: translateY(-50%);
        max-width: 33%;
        font-family: 'Inter', system-ui, sans-serif;
        font-style: italic;
        font-size: 10.5px;
        line-height: 1.2;
        color: var(--ei-texte-second);
        pointer-events: none;
    }
    /* Logo mobile lisible : 65 px laissait le second mot illisible. */
    #mobile-header .site-logo img,
    #mobile-header img {
        width: 104px;
        max-width: 104px;
        height: auto;
    }
}

/* ---------------------------------------------------------------------------
   Points de rupture — menu bureau à 1024 px (§10)
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .ei-univers-grille {
        grid-template-columns: repeat(2, 1fr);
    }
    #mobile-header .site-logo img {
        max-height: 40px;
        width: auto;
    }
}
@media (max-width: 768px) {
    .ei-univers-grille,
    .ei-cartes {
        grid-template-columns: 1fr;
    }
    .ei-portrait-flottant {
        float: none;
        width: 100%;
        max-width: 230px;
        margin: 0 0 var(--ei-ecart-bloc);
    }
    .ei-signature {
        flex-direction: column;
    }
}