@charset "UTF-8";
/**
 * Theme Name:  Astra Child
 * Author:      Brainstorm Force
 * Author URI:  http://wpastra.com/about/
 * Template:    astra
 * Version:     1.0.0
 * License:     GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: astra-child
 *
 * ─────────────────────────────────────────────────────────────
 * Nettoyé, dédoublonné et corrigé — mai 2026
 * Sources fusionnées :
 *   – Thème Astra (CSS personnalisé)
 *   – Extension Simple CSS & JS
 *   – Thème enfant Astra Child (style.css)
 * ─────────────────────────────────────────────────────────────
 * TABLE DES MATIÈRES
 *  1.  Fonts (@font-face)
 *  2.  Mise en page générale
 *  3.  Typographie — classes utilitaires
 *  4.  Marges utilitaires
 *  5.  Césure
 *  6.  Glyphe décoratif bleu
 *  7.  Titres avec filet (.titre-avec-filet)
 *  8.  Citations
 *  9.  Encadré
 * 10.  Listes
 * 11.  Filets de séparation (::after / ::before)
 * 12.  Filet <hr> (.hr-style)
 * 13.  Liens stylisés
 * 14.  Images arrondies
 * 15.  Utilitaires divers
 * 16.  Header mobile
 * 17.  Formulaire de contact
 * ─────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════
   1. FONTS (@font-face)
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/roboto-slab-v34-latin-500.woff2') format('woff2'),
       url('fonts/roboto-slab-v34-latin-500.ttf')   format('truetype');
}

@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-slab-v34-latin-700.woff2') format('woff2'),
       url('fonts/roboto-slab-v34-latin-700.ttf')   format('truetype');
}

@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/roboto-slab-v34-latin-900.woff2') format('woff2'),
       url('fonts/roboto-slab-v34-latin-900.ttf')   format('truetype');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v40-latin-regular.woff2') format('woff2'),
       url('fonts/open-sans-v40-latin-regular.ttf')   format('truetype');
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/open-sans-v40-latin-italic.woff2') format('woff2'),
       url('fonts/open-sans-v40-latin-italic.ttf')   format('truetype');
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/oswald/oswald-v41-latin-regular.eot');
  src: local(''),
       url('fonts/oswald/oswald-v41-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('fonts/oswald/oswald-v41-latin-regular.woff2')      format('woff2'),
       url('fonts/oswald/oswald-v41-latin-regular.woff')       format('woff'),
       url('fonts/oswald/oswald-v41-latin-regular.ttf')        format('truetype'),
       url('fonts/oswald/oswald-v41-latin-regular.svg#Oswald') format('svg');
}


/* ═══════════════════════════════════════════════════════════
   2. MISE EN PAGE GÉNÉRALE
   ═══════════════════════════════════════════════════════════ */

/* Masque la navigation entre articles */
.post-navigation { display: none; }

/* Supprime la marge automatique d'Astra sur les h2 de page */
.page .entry-content h2 { margin: 0 !important; }


/* ═══════════════════════════════════════════════════════════
   3. TYPOGRAPHIE — CLASSES UTILITAIRES
   ═══════════════════════════════════════════════════════════ */

/* Surtitre (catégorie au-dessus d'un titre) */
p.surtitre {
  font-weight: bold;
  font-size: 11px;
  color: #555;
  margin: 20px 0 5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
}

/* Label de page (style lien souligné, aligné à gauche) */
p.page {
  font-weight: 800;
  font-size: 13px;
  color: #555;
  margin: 20px 0 5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: left;
  text-decoration: underline;
}

/* Sous-titre h2 générique */
.subh2 {
  color: #333;
  font-size: 25px;
  font-weight: normal;
  margin: 0 0 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

/* Titre principal d'article */
.title,
.titre-avec-filet {
  font-size: 1.6rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.1px;
}

/* Semi-gras (ex. mise en relief inline) */
.sg { font-weight: 500; }

/* Rotation */
.rotate { transform: rotate(90deg); }


/* ═══════════════════════════════════════════════════════════
   4. MARGES UTILITAIRES
   ═══════════════════════════════════════════════════════════ */

.mrg23  { margin-top: 2.3rem; }
.mrgb1  { margin-bottom: 1rem; }

/* Supprime les marges verticales — avec césure automatique */
.mrg2,
p.mrg2 {
  margin-top: 0;
  margin-bottom: 0 !important;
  word-break: break-word;
  hyphens: auto;
}

/* Supprime les marges verticales — sans césure */
.mrg,
p.mrg {
  margin-top: 0;
  margin-bottom: 0 !important;
}

/* Légère marge haute */
.top8,
p.top8 {
  margin-top: 0.8em;
  margin-bottom: 0;
}


/* ═══════════════════════════════════════════════════════════
   5. CÉSURE
   ═══════════════════════════════════════════════════════════ */

.hyphen {
  word-break: break-word;
  hyphens: auto;
}

.nohyphen {
  hyphens: none;
}

/* Césure fine (contrôle avancé du nombre de lignes et de caractères) */
.cesures {
  word-break: break-word;
  hyphens: auto;
  hyphenate-limit-lines: 2;
  hyphenate-limit-chars: 6 3 2;
  hyphenate-limit-zone: 40px;
}


/* ═══════════════════════════════════════════════════════════
   6. GLYPHE DÉCORATIF BLEU
   ═══════════════════════════════════════════════════════════ */

/* Carré bleu après le paragraphe concerné */
.glyphe-bleu::after,
p.glyphe-bleu::after {
  position: relative;
  bottom: -0.047em;
  left: 4px;
  content: '\0025A0';
  font-family: "Courier New", Courier, monospace;
  color: #183C51;
}


/* ═══════════════════════════════════════════════════════════
   7. TITRES AVEC FILET (.titre-avec-filet)
   ═══════════════════════════════════════════════════════════ */

/*
 * Règle générique (h3, etc.) :
 * filet bleu de 7 px, pleine largeur 17 %
 */
.titre-avec-filet::after {
  content: "";
  display: block;
  width: 17%;
  height: 7px;
  background-color: #233575;
  margin: 25px 0;
}

@media screen and (max-width: 767px) {
  .titre-avec-filet::after {
    width: 25%;
  }
}

/*
 * Variante h2 (article de blog) :
 * titre bleu, filet 8 px aligné à gauche
 */
h2.titre-avec-filet {
  position: relative;
  font-weight: 400;
  margin: 15px 0;
  color: #233575;
  font-size: 1.8rem;
  line-height: 1em;
}

h2.titre-avec-filet::after {
  content: "";
  display: block;
  width: 17%;
  height: 8px;
  background-color: #233575;
  margin-top: 18px;
  margin-left: 0;
  margin-bottom: 1em;
}

@media screen and (max-width: 767px) {
  h2.titre-avec-filet::after {
    width: 45%;
  }
}


/* ═══════════════════════════════════════════════════════════
   8. CITATIONS
   ═══════════════════════════════════════════════════════════ */

/* Base commune */
.cit,
.cit2 {
  font-style: italic;
  margin: 18px 0;
  padding-left: 10px;
  border-left: 1px solid #5E5AB3;
}

/* Variante agrandie */
.cit2 {
  font-size: 1.1rem;
}


/* ═══════════════════════════════════════════════════════════
   9. ENCADRÉ
   ═══════════════════════════════════════════════════════════ */

.encadre {
  padding: 20px;
  border-radius: 16px;
  background-color: rgba(187, 197, 221, 0.42);
}


/* ═══════════════════════════════════════════════════════════
   10. LISTES
   ═══════════════════════════════════════════════════════════ */

/* Fonctionne avec ou sans balise ul explicite */
ul.liste-carree,
.liste-carree {
  margin: 0;
  padding-left: 15px;
  list-style-type: square;
  text-align: left;
}


/* ═══════════════════════════════════════════════════════════
   11. FILETS DE SÉPARATION (pseudo-éléments ::after / ::before)
   ═══════════════════════════════════════════════════════════ */

/*
 * Nomenclature :
 *   .sep--gris      / .bb-my20-gris  / .bb-my20-grey   → gris, 1 px, centré
 *   .sep--bleu      / .bb-my20-bleu  / .bb-my20-blue   → bleu, 1 px, gauche
 *   .sep--bleu-e    / .bb-my20-bleu-gras                → bleu, 4 px (épais), gauche
 *   .bt-my20-bleu                                        → filet bleu AU-DESSUS (::before)
 *   .bb-my20-green                                       → vert, 1 px, gauche
 */

/* Filet gris — centré */
.sep--gris::after,
.bb-my20-gris::after,
.bb-my20-grey::after {
  content: "";
  display: block;
  width: 12%;
  height: 1px;
  background-color: rgb(112, 112, 112);
  margin: 20px auto;
}

/* Filet bleu fin — gauche */
.sep--bleu::after,
.bb-my20-bleu::after,
.bb-my20-blue::after {
  content: "";
  display: block;
  width: 12%;
  height: 1px;
  background-color: #233575;
  margin: 20px 0;
}

@media (max-width: 767px) {
  .sep--bleu::after,
  .bb-my20-bleu::after,
  .bb-my20-blue::after {
    width: 15%;
    margin: 20px auto;
  }
}

/* Filet bleu épais — gauche */
.sep--bleu-e::after,
.bb-my20-bleu-gras::after {
  content: "";
  display: block;
  width: 12%;
  height: 4px;
  background-color: #233575;
  margin: 20px 0;
}

/* Filet vert — gauche */
.bb-my20-green::after {
  content: "";
  display: block;
  width: 12%;
  height: 1px;
  background-color: rgb(92, 188, 172);
  margin: 20px 0;
}

/* Filet bleu AU-DESSUS du paragraphe (::before) */
.bt-my20-bleu::before {
  content: "";
  display: block;
  width: 12%;
  height: 1px;
  background-color: #233575;
  margin: 20px 0;
}

@media (max-width: 767px) {
  .bt-my20-bleu::before {
    width: 15%;
    height: 3px;
    margin: 20px auto;
  }
}


/* ═══════════════════════════════════════════════════════════
   12. FILET <hr> (.hr-style)
   ═══════════════════════════════════════════════════════════ */

.hr-style {
  border: none;
  height: 1px;
  width: 15%;
  background-color: #233575;
  margin: 10px 0 25px;
}


/* ═══════════════════════════════════════════════════════════
   13. LIENS STYLISÉS
   ═══════════════════════════════════════════════════════════ */

/* Lien blanc avec soulignement turquoise */
a.link-white {
  text-decoration: none;
  color: #ffffff;
  border-bottom: 1px solid #5CBCAC;
}
a.link-white:hover {
  color: #ddd;
}

/* Lien mauve (texte sombre + soulignement rose) */
a.link-mauve {
  text-decoration: none;
  color: #363636;
  border-bottom: 2px solid #F4B2CB;
}
a.link-mauve:hover {
  text-decoration: none;
  color: #666;
  border-bottom-color: #666;
}

/* Lien footer (blanc + soulignement rose) */
a.link-footer {
  text-decoration: none;
  color: white;
  border-bottom: 2px solid #F4B2CB;
}
a.link-footer:hover {
  text-decoration: none;
  color: #666 !important;
  border-bottom-color: #666;
  cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════
   14. IMAGES ARRONDIES
   ═══════════════════════════════════════════════════════════ */

.image-arrondie img {
  border-radius: 16px;
}


/* ═══════════════════════════════════════════════════════════
   15. UTILITAIRES DIVERS
   ═══════════════════════════════════════════════════════════ */

/* Masque un élément */
.cache { display: none; }


/* ═══════════════════════════════════════════════════════════
   16. HEADER MOBILE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .elementor-element-970d99e {
    display: flex;
    justify-content: right;
  }
  .elementor-element-970d99e p {
    max-width: 170px;
  }
}


/* ═══════════════════════════════════════════════════════════
   17. FORMULAIRE DE CONTACT
   ═══════════════════════════════════════════════════════════ */

#fluentform_3 .bt-envoyer {
  background-color: #233575 !important;
  border: none;
}