/*
Theme Name: Foyer PInel Alphabétisation by Loryxa Solutions
Template: loryxa-base
Author: Loryxa Solutions
Version: 2.0.0
Description: Thème enfant de Loryxa Base, identité et pages du Foyer Pinel Alphabétisation.
Text Domain: foyer-pinel-alphabetisation
Requires PHP: 7.4
Requires at least: 6.3
*/

:root {
    --fpa-yellow: #FFEA2C;
    --fpa-gold: #FFC000;
    --fpa-dark: #323432;
    --fpa-text: #1F1F1F;
    --fpa-white: #FFFFFF;
    --fpa-grey: #F4F4F4;
    --fpa-border: #D2D2D2;
    --fpa-radius: 28px;
    --fpa-container: 1580px;
    --fpa-transition: .25s ease;
    --fpa-shadow-hover: 0 20px 50px rgba(31,31,31,.18);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* Supprime la contrainte de largeur Gutenberg */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: none !important;
    width: 100% !important;
}

.entry-content.has-global-padding,
.wp-block-post-content.has-global-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.entry-content,
.wp-block-post-content,
.is-layout-constrained {
    max-width: none !important;
}

/* ======================================
   TYPOGRAPHIE GLOBALE
====================================== */

body {
    font-family: "Bierstadt", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.7;
    color: var(--fpa-text);
    font-weight: 400;
    overflow-x: hidden;
}

/* Titres */

h1, h2, h3, h4, h5, h6 {
    font-family: "Amasis MT Pro Black", Georgia, serif;
    margin: 0 0 20px;
    line-height: 1.08;
    color: #1F1F1F;
}

h1 {
    font-size: clamp(42px, 6vw, 82px);
}

h2 {
    font-size: clamp(32px, 4vw, 54px);
}

h3 {
    font-size: 26px;
}

/* Paragraphes */

p {
    font-size: 18px;
    line-height: 1.7;
    margin: 0 0 22px;
}

/* Liens */

a {
    color: var(--fpa-text);
    text-decoration: none;
    transition: 0.2s ease;
}

a:hover {
    opacity: 0.8;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--fpa-text);
    outline-offset: 3px;
}

/* ======================================
   PAGES
====================================== */

.fpa-page {
    width: 100%;
    max-width: 100%;
}

/* ======================================
   SECTIONS
====================================== */

.fpa-section {
    margin-top: 0;
    padding-top: 50px;
    padding-bottom: 50px;
}

.fpa-dark-section {
    background: var(--fpa-dark);
}

.fpa-dark-section h2,
.fpa-dark-section h3,
.fpa-dark-section p,
.fpa-dark-section li {
    color: #ffffff;
}

.fpa-white-section {
    background: #FFFFFF;
}

.fpa-grey-section {
    background: var(--fpa-grey);
}

.fpa-yellow-section {
    background: var(--fpa-yellow);
}

.fpa-card.fpa-card-yellow {
    background: var(--fpa-yellow);
}

@media (max-width: 980px) {
    .fpa-section {
        padding: 64px 5vw;
    }

    .fpa-inner {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .fpa-section {
        padding: 40px 16px;
    }

    h3 {
        font-size: clamp(22px, 6vw, 26px);
    }

    p {
        font-size: 17px;
        line-height: 1.6;
    }
}

/* ======================================
   CONTENEURS
====================================== */

.fpa-inner {
    width: min(var(--fpa-container), calc(100% - 80px));
    margin: 0 auto;
}

/* ======================================
   IMAGE
====================================== */
.fpa-image {
    min-height: 460px;
    border-radius: var(--fpa-radius);
    box-shadow: 0 24px 60px rgba(31,31,31,.12);
}

img,
video {
    max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}