/**
 * Theme Name:     Thème Enfant Licence-4.com
 * Author:         Stéphane GELY
 * Template:       oceanwp
 * Version:        2.16.0
 * Text Domain:	   theme-enfant-licence-4-com
 * Description:    Ce thème est le thème enfant du site www.licence-4.com. Refonte 2026 : header/footer natifs, tracking GTM, FAQ avec schema, landing SEA sans Elementor, tunnel de paiement natif, pack 2 formations, outils médiathèque.
 */

/* ---------------------------------------------------------------------------
   Échelle d'espacement des blocs — filet de sécurité.

   Gutenberg écrit les marges d'un bloc en styles inline sous la forme
   margin-top: var(--wp--preset--spacing--40). Ces variables sont normalement
   déclarées par WordPress dans <style id="global-styles-inline-css">. Quand
   cette feuille manque, la variable est vide et la marge n'existe tout
   simplement pas — le bloc paraît « sans effet » dans l'éditeur comme au front.

   Valeurs reprises telles quelles de l'échelle par défaut de WordPress
   (relevées sur la page en production), donc aucun décalage par rapport à un
   site où global-styles est bien chargé.

   Sélecteur « html » et non « :root » : c'est volontairement une déclaration
   de repli. Les deux visent le même élément, mais :root (0,1,0) l'emporte sur
   html (0,0,1) — donc dès que global-styles est présent, ce sont ses valeurs
   qui s'appliquent, y compris si l'échelle est un jour personnalisée depuis
   l'éditeur du site. Ces lignes ne servent que quand rien d'autre ne définit
   les variables.

   ⚠️ Ceci ne corrige que l'espacement. Si global-styles disparaît d'une page,
   les presets de couleurs et de tailles de police manquent aussi : chercher la
   cause (voir README) plutôt que de tout redéclarer ici.
   --------------------------------------------------------------------------- */
html {
	--wp--preset--spacing--20: 0.44rem;
	--wp--preset--spacing--30: 0.67rem;
	--wp--preset--spacing--40: 1rem;
	--wp--preset--spacing--50: 1.5rem;
	--wp--preset--spacing--60: 2.25rem;
	--wp--preset--spacing--70: 3.38rem;
	--wp--preset--spacing--80: 5.06rem;
}

/* Articles : liens du corps de texte en bleu souligné (le style venait
   d'Elementor avant la refonte ; on le fixe côté thème). */
.single-page-article a:not(.button):not(.wp-block-button__link):not(.elementor-button) {
	color: #30698C;
}
.single-page-article a:not(.button):not(.wp-block-button__link):not(.elementor-button):hover {
	color: #224A62;
}


.fil-ariane-reservation {
  margin-bottom:20px;
  font-family:sans-serif
}
.fil-ariane-reservation .steps {
  list-style:none;
  display:flex;
  justify-content:space-between;
  padding:0;
  margin:0;
  border-bottom:2px solid #eee
}
.fil-ariane-reservation .steps li {
  position:relative;
  padding:10px 20px;
  color:#999;
  font-weight:500;
  flex-grow:1;
  text-align:center;
  border-bottom:4px solid transparent
}
.fil-ariane-reservation .steps li.active {
  color:#0073aa;
  border-bottom:4px solid #0073aa
}
.fil-ariane-reservation .steps li:not(:last-child)::after {
  content:"→";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  color:#ccc
}
@media (max-width:768px) {
  .fil-ariane-reservation .steps {
    flex-direction:column;
    align-items:flex-start
  }
  .fil-ariane-reservation .steps li {
    flex-direction:column;
    align-items:flex-start
  }
  .fil-ariane-reservation .steps li:not(:last-child)::after {
    content:"↓";
    margin:4px 0 0 2px;
    font-size:16px;
    color:#aaa
  }
}









/* ============================================= LICENCE-4.COM — CSS composants articles SEO À ajouter dans Apparence >Personnaliser >CSS additionnel Version 1.0 — Juillet 2026 ============================================= *//* --- Fil d'Ariane --- */
.l4-bc {
  list-style:none;
  padding:0;
  margin:0 0 1.6rem;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  align-items:center;
  font-size:.84rem;
  color:#555
}
.l4-bc li+li::before {
  content:"›";
  margin-right:4px;
  color:#30698C;
  font-weight:700
}
.l4-bc a {
  color:#30698C;
  text-decoration:none
}
.l4-bc a:hover {
  text-decoration:underline
}
.l4-bc li:last-child {
  color:#444
}
/* --- Tableaux responsives --- */.l4-tw {
  margin:1.8em 0;
  overflow-x:auto
}
.l4-tw table {
  width:100%;
  border-collapse:collapse;
  font-size:15.5px;
  line-height:1.55
}
.l4-tw thead th {
  background:#30698C;
  color:#fff;
  text-align:left;
  padding:11px 14px;
  font-weight:600
}
.l4-tw tbody th {
  background:#ECF9FF;
  color:#224A62;
  text-align:left;
  padding:11px 14px;
  font-weight:600;
  vertical-align:top
}
.l4-tw tbody td {
  padding:11px 14px;
  vertical-align:top;
  border-top:1px solid #e5e5e5
}
.l4-tw tbody tr:nth-child(even) td {
  background:#F7F7F7
}
@media(max-width:640px) {
  .l4-tw thead {
    position:absolute;
    left:-9999px
  }
  .l4-tw table,
  .l4-tw tbody,
  .l4-tw tr,
  .l4-tw td,
  .l4-tw th {
    display:block;
    width:100%;
    box-sizing:border-box
  }
  .l4-tw tr {
    margin-bottom:14px;
    border:1px solid #dfe6ea;
    border-radius:7px;
    overflow:hidden
  }
  .l4-tw tbody th {
    width:auto
  }
  .l4-tw td {
    border-top:1px solid #eee
  }
  .l4-tw td::before {
    content:attr(data-label);
    display:block;
    font-weight:700;
    color:#30698C;
    margin-bottom:3px;
    font-size:.8em;
    text-transform:uppercase;
    letter-spacing:.03em
  }
}
/* --- Encart "À retenir" --- */.l4-retenir {
  background:#ECF9FF;
  border:1px solid #b2f2f5;
  border-radius:8px;
  padding:20px 24px;
  margin:2rem 0
}
.l4-retenir-titre {
  font-weight:700;
  font-size:1rem;
  color:#30698C;
  margin:0 0 12px;
  display:flex;
  align-items:center;
  gap:9px
}
.l4-retenir-titre::before {
  content:"";
  display:inline-block;
  width:18px;
  height:18px;
  min-width:18px;
  background:#30698C;
  border-radius:50%
}
.l4-retenir ul {
  margin:0;
  padding:0 0 0 18px
}
.l4-retenir li {
  font-size:.96rem;
  color:#224A62;
  line-height:1.6;
  margin-bottom:6px
}
/* --- CTA formation --- */.l4-cta {
  background:#30698C;
  border-radius:8px;
  padding:18px 24px;
  margin:1.8rem 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px
}
.l4-cta-titre {
  font-weight:700;
  font-size:.98rem;
  color:#fff;
  margin:0 0 3px
}
.l4-cta-sub {
  font-size:.86rem;
  color:#ECF9FF;
  margin:0
}
.l4-cta a.l4-cta-btn {
  background:#fff;
  color:#30698C;
  font-weight:700;
  font-size:.9rem;
  padding:10px 20px;
  border-radius:6px;
  text-decoration:none;
  white-space:nowrap;
  flex-shrink:0;
  display:inline-block
}
.l4-cta a.l4-cta-btn:hover {
  background:#ECF9FF
}
@media(max-width:560px) {
  .l4-cta {
    flex-direction:column
  }
  .l4-cta a.l4-cta-btn {
    width:100%;
    text-align:center
  }
}
/* --- Aller plus loin --- */.l4-further {
  margin:2rem 0
}
.l4-further-titre {
  font-weight:700;
  font-size:1rem;
  color:#183546;
  border-bottom:2px solid #ECF9FF;
  padding-bottom:7px;
  margin:0 0 14px
}
.l4-further ul {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:9px
}
.l4-further li {
  display:flex;
  align-items:baseline;
  gap:9px
}
.l4-further li::before {
  content:"→";
  color:#30698C;
  font-weight:700;
  flex-shrink:0
}
.l4-further a {
  color:#30698C;
  font-size:.96rem;
  text-decoration:none;
  line-height:1.5
}
.l4-further a:hover {
  text-decoration:underline
}
/* --- FAQ accordion (CSS pur) --- */
/* width:100% — sans elle, l'accordéon se réduit à la largeur du plus long
   libellé quand les questions ET les réponses sont courtes, puis saute à 100 %
   à l'ouverture. Cause : dans un conteneur Elementor réglé sur « Align items :
   start », le widget qui porte la FAQ devient un flex item en shrink-to-fit ;
   sa largeur suit le contenu au lieu de remplir la colonne. La règle :has()
   ci-dessous rattrape le widget lui-même, qui est le vrai flex item — elle est
   isolée dans son propre bloc exprès : un navigateur sans :has() jetterait
   toute la liste de sélecteurs, et donc aussi le width des FAQ. */
.l4-faq {
  margin:2rem 0;
  width:100%;
  box-sizing:border-box
}
.elementor-widget:has(.l4-faq) {
  width:100%
}
.l4-faq-titre {
  font-weight:700;
  font-size:1.1rem;
  color:#183546;
  margin:0 0 14px
}
.l4-faq-item {
  border:1px solid #d1e8f2;
  border-radius:6px;
  margin-bottom:7px;
  overflow:hidden
}
.l4-faq-item input[type="checkbox"] {
  position:absolute;
  opacity:0;
  pointer-events:none
}
.l4-faq-lbl {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:13px 17px;
  cursor:pointer;
  font-weight:600;
  font-size:.92rem;
  color:#224A62;
  background:#fff;
  user-select:none;
  gap:12px;
  line-height:1.4
}
.l4-faq-lbl:hover {
  background:#ECF9FF
}
/* Le « + » ouvert devient un « − », comme l'accordéon [l4_faq] du thème
   (assets/css/faq.css) : les deux barres sont dessinées en ::before/::after et
   la verticale s'efface à l'ouverture. Avant, le pictogramme pivotait de 45°
   et se lisait comme une croix « fermer », pas comme un « replier ».
   font-size:0 masque le caractère « + » écrit en dur dans le markup des pages
   (<span class="l4-faq-icn">+</span>) : on ne peut pas le retirer sans
   rouvrir chaque widget HTML Elementor de chaque page SEO. */
.l4-faq-icn {
  flex-shrink:0;
  width:23px;
  height:23px;
  min-width:23px;
  border-radius:50%;
  background:#30698C;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  font-size:0;
  line-height:1;
  font-style:normal
}
.l4-faq-icn::before,
.l4-faq-icn::after {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  background:#fff;
  transform:translate(-50%, -50%)
}
.l4-faq-icn::before {
  width:11px;
  height:2px
}
.l4-faq-icn::after {
  width:2px;
  height:11px;
  transition:transform .25s
}
.l4-faq-item input:checked ~ .l4-faq-lbl .l4-faq-icn::after {
  transform:translate(-50%, -50%) scaleY(0)
}
.l4-faq-body {
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease
}
.l4-faq-item input:checked ~ .l4-faq-body {
  max-height:600px
}
.l4-faq-ans {
  padding:4px 17px 15px;
  font-size:.95rem;
  color:#333;
  line-height:1.65;
  border-top:1px solid #ECF9FF
}
/* Citation réglementaire encadrée */.l4-quote {
  background:#ECF9FF;
  border-left:4px solid #30698C;
  border-radius:0 6px 6px 0;
  padding:16px 20px;
  margin:1.6em 0;
  font-style:italic;
  color:#224A62;
  line-height:1.6
}
.l4-quote cite {
  display:block;
  margin-top:8px;
  font-style:normal;
  font-size:.85rem;
  font-weight:700;
  color:#30698C
}
/* Texte justifié dans le contenu article */.l4-content {
  text-align:justify
}
/* CTA bas de page pleine largeur */.l4-cta-final {
  background:#30698C;
  border-radius:10px;
  padding:28px 30px;
  margin:2.5rem 0 1rem;
  text-align:center
}
.l4-cta-final-titre {
  font-weight:700;
  font-size:1.15rem;
  color:#fff;
  margin:0 0 8px;
  line-height:1.35
}
.l4-cta-final-sub {
  font-size:.92rem;
  color:#ECF9FF;
  margin:0 0 18px
}
.l4-cta-final a {
  background:#fff;
  color:#30698C;
  font-weight:700;
  font-size:.95rem;
  padding:13px 30px;
  border-radius:6px;
  text-decoration:none;
  display:inline-block
}
.l4-cta-final a:hover {
  background:#ECF9FF
}
/* Tailles encarts,sélecteurs renforcés */.entry-content .l4-retenir li,
.elementor-widget-html .l4-retenir li {
  font-size:16px !important;
  line-height:1.65 !important
}
.entry-content .l4-retenir-titre,
.elementor-widget-html .l4-retenir-titre {
  font-size:18px !important
}
.entry-content .l4-further a,
.elementor-widget-html .l4-further a {
  font-size:16px !important
}
.entry-content .l4-further-titre,
.elementor-widget-html .l4-further-titre {
  font-size:18px !important
}
.entry-content .l4-faq-lbl,
.elementor-widget-html .l4-faq-lbl {
  font-size:16px !important
}
.entry-content .l4-faq-titre,
.elementor-widget-html .l4-faq-titre {
  font-size:19px !important
}
.entry-content .l4-faq-ans,
.elementor-widget-html .l4-faq-ans {
  font-size:16px !important;
  line-height:1.7 !important
}
.entry-content .l4-cta-titre,
.elementor-widget-html .l4-cta-titre {
  font-size:17px !important
}
.entry-content .l4-cta-sub,
.elementor-widget-html .l4-cta-sub {
  font-size:15px !important
}
.entry-content .l4-cta-final-titre,
.elementor-widget-html .l4-cta-final-titre {
  font-size:19px !important
}
.entry-content .l4-cta-final-sub,
.elementor-widget-html .l4-cta-final-sub {
  font-size:16px !important
}
/* CTA :encadré bleu,bouton orange texte blanc */.l4-cta {
  background:#30698C
}
.l4-cta-titre,
.l4-cta-sub {
  color:#fff
}
.l4-cta a.l4-cta-btn {
  background:#FF8D62 !important;
  color:#fff !important
}
.l4-cta a.l4-cta-btn:hover {
  background:#ff7a49 !important
}
.l4-cta-final {
  background:#30698C
}
.l4-cta-final-titre,
.l4-cta-final-sub {
  color:#fff
}
.l4-cta-final a {
  background:#FF8D62 !important;
  color:#fff !important
}
.l4-cta-final a:hover {
  background:#ff7a49 !important
}
/* Taille texte des boutons CTA */.entry-content .l4-cta a.l4-cta-btn,
.elementor-widget-html .l4-cta a.l4-cta-btn {
  font-size:15px !important
}
.entry-content .l4-cta-final a,
.elementor-widget-html .l4-cta-final a {
  font-size:16px !important
}
/* Encadré information */.l4-encart {
  background:#ECF9FF;
  border-left:4px solid #30698C;
  border-radius:0 6px 6px 0;
  padding:16px 20px;
  margin:1.6em 0;
  color:#224A62;
  line-height:1.65
}
.l4-encart p {
  margin:0 0 10px
}
.l4-encart p:last-child {
  margin-bottom:0
}
.l4-encart strong {
  color:#183546
}
.l4-encart a {
  color:#30698C;
  text-decoration:underline
}
/* Encart exemple concret */
.l4-exemple {
  background:#FFF6F1;
  border-left:4px solid #FF8D62;
  border-radius:0 6px 6px 0;
  padding:14px 18px;
  margin:1.4em 0
}
.l4-exemple .l4-exemple-tag {
  display:block;
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#E8734A;
  margin-bottom:5px
}
.l4-exemple p {
  margin:0;
  color:#333;
  line-height:1.6
}