/* ==============================================
    Thème enfant : Hello Elementor Child Soeurs
    soeurs.css — CSS spécifiques à soeurs.leprado.org
    Charte : compromis entre la charte du multisite (common.css)
             et la maquette Canva des Sœurs du Prado (oct. 2026)
    v1.0.0
   ============================================== */


/* -----------------------------------------------
   WEBFONTS DU SITE DES SŒURS
   Fichiers : Fontsource (licence SIL Open Font License, usage web autorisé)
   ----------------------------------------------- */

/* Open Sans — texte courant de la maquette Canva */
@font-face {
    font-family:  'Open Sans';
    src:          url('../fonts/open-sans-latin-400-normal.woff2') format('woff2'),
                  url('../fonts/open-sans-latin-400-normal.woff')  format('woff');
    font-weight:  400;
    font-style:   normal;
    font-display: swap;
}
@font-face {
    font-family:  'Open Sans';
    src:          url('../fonts/open-sans-latin-400-italic.woff2') format('woff2'),
                  url('../fonts/open-sans-latin-400-italic.woff')  format('woff');
    font-weight:  400;
    font-style:   italic;
    font-display: swap;
}
@font-face {
    font-family:  'Open Sans';
    src:          url('../fonts/open-sans-latin-700-normal.woff2') format('woff2'),
                  url('../fonts/open-sans-latin-700-normal.woff')  format('woff');
    font-weight:  700;
    font-style:   normal;
    font-display: swap;
}
@font-face {
    font-family:  'Open Sans';
    src:          url('../fonts/open-sans-latin-700-italic.woff2') format('woff2'),
                  url('../fonts/open-sans-latin-700-italic.woff')  format('woff');
    font-weight:  700;
    font-style:   italic;
    font-display: swap;
}

/* Marck Script — titres manuscrits.
   REMPLAÇANT PROVISOIRE de "Gellatio" (police de la maquette Canva), dont la
   version gratuite est réservée à un usage personnel : l'utiliser sur le web
   demande une licence commerciale. Si les Sœurs l'achètent, déposer les
   fichiers dans /assets/fonts/, ajouter le @font-face et changer UNIQUEMENT
   la variable --font-manuscrit ci-dessous. */
@font-face {
    font-family:  'Marck Script';
    src:          url('../fonts/marck-script-latin-400-normal.woff2') format('woff2'),
                  url('../fonts/marck-script-latin-400-normal.woff')  format('woff');
    font-weight:  400;
    font-style:   normal;
    font-display: swap;
}


/* -----------------------------------------------
   VARIABLES — palette relevée sur la maquette Canva
   (bleu, ocre, rouge et vert sont ceux de la charte réseau)
   ----------------------------------------------- */
:root {
    /* Polices */
    --font-soeurs:     'Open Sans', sans-serif;
    --font-manuscrit:  'Marck Script', cursive;

    /* Couleurs propres aux Sœurs */
    --soeurs-turquoise: #0CB4A8;   /* titre "Sœurs du Prado" */
    --soeurs-ciel:      #60A8CC;   /* pastilles de la frise, accents */
    --soeurs-sable:     #F0D878;   /* pastilles de la frise */
    --soeurs-creme:     #FEFDF9;   /* fonds de sections */

    /* Couleurs réseau reprises par la maquette */
    --soeurs-bleu:      var(--bleu-prado-3);   /* #304D9C — titres et texte */
    --soeurs-ocre:      var(--jaune-prado-1);  /* #E1A603 — citations, filets */
    --soeurs-rouge:     var(--rouge-prado-1);  /* #E8443B */
    --soeurs-vert:      var(--vert-prado-1);   /* #1AA085 */

    /* Surcharge des variables communes pour ce site */
    --color-primary:    var(--soeurs-bleu);
    --color-secondary:  var(--soeurs-turquoise);
}


/* -----------------------------------------------
   TYPOGRAPHIE
   ----------------------------------------------- */
body {
    font-family: var(--font-soeurs);
}

/* H1 en manuscrit (comme les grands titres Canva) ;
   H2/H3 gardent RockebyCd du réseau (common.css) — c'est le "compromis". */
h1 {
    font-family: var(--font-manuscrit) !important;
    font-weight: 400;
    color:       var(--soeurs-bleu);
}

/* L'en-tête reste identique à celui des autres sites du réseau */
.elementor-location-header {
    font-family: var(--font-body);   /* National */
}
.elementor-location-header h1,
.elementor-location-header h2,
.elementor-location-header h3 {
    font-family: var(--font-title) !important;  /* RockebyCd */
}


/* -----------------------------------------------
   CLASSES POUR LES RÉDACTRICES
   (champ "Classes CSS" d'un widget Elementor, ou HTML)
   ----------------------------------------------- */

/* Titre manuscrit sur n'importe quel élément : <h2 class="titre-manuscrit"> */
.titre-manuscrit,
.titre-manuscrit .elementor-heading-title {
    font-family: var(--font-manuscrit) !important;
    font-weight: 400 !important;
}

/* Filet ocre sous un titre (maquette page d'accueil) */
.filet-ocre::after {
    content: "";
    display: block;
    width: 260px;
    max-width: 60%;
    height: 4px;
    margin-top: .5em;
    background: var(--soeurs-ocre);
}

/* Citation en ocre italique gras (citations du Père Chevrier) */
.citation,
.citation .elementor-heading-title,
.citation p {
    font-style:  italic;
    font-weight: 700;
    color:       var(--soeurs-ocre);
    text-align:  center;
}

/* Couleurs de texte */
.turquoise { color: var(--soeurs-turquoise); }
.ciel      { color: var(--soeurs-ciel); }
.ocre      { color: var(--soeurs-ocre); }
.sable     { color: var(--soeurs-sable); }

/* Couleurs de fond */
.fond-creme     { background-color: var(--soeurs-creme); }
.fond-ciel      { background-color: var(--soeurs-ciel); }
.fond-sable     { background-color: var(--soeurs-sable); }
.fond-turquoise { background-color: var(--soeurs-turquoise); color: #fff; }

/* Pastille ronde (frise chronologique) : appliquer au conteneur Elementor */
.pastille {
    aspect-ratio:   1 / 1;
    border-radius:  50%;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content:center;
    text-align:     center;
    padding:        1em;
}