/* ═══════════════════════════════════════════════════════════
   royalformation.com
   Surcharge bleu #1f5a94 · Base : style.css commun au réseau
   Composants propres : accueil, catalogue, cartes de formation, vidéo intégrée
═══════════════════════════════════════════════════════════ */

@import url('style.css');

:root {
  --primaire:       #1f5a94;
  --primaire-dark:  #16416b;
  --primaire-bg:    #eef4fa;
  --primaire-mid:   #a9c4df;
}

body { background: var(--blanc); }

/* Liens dans le contenu (même règle que les autres sites) */
.info-list a, .nav-links a, .content-body a, .bloc-corps a, .ref-bloc a, .offer a, .course h4 a, .catalog a {
  color: var(--primaire-dark); text-decoration: underline; text-underline-offset: 3px; font-weight: 500;
}
.card a { color: var(--primaire-dark); font-weight: 500; }
.nav-links a::before { text-decoration: none; display: inline-block; margin-right: .25rem; }

/* Survol uniforme : couleur du texte inchangée, soulignement or */
a, a:hover, nav a:hover, .topbar a:hover, footer a:hover, .footer-col ul a:hover, .footer-bottom a:hover,
.nav-links a:hover, .content-body a:hover, .bloc-corps a:hover, .ref-bloc a:hover, .card a:hover { color: inherit; }
.info-list a:hover, .nav-links a:hover, .card a:hover, .offer a:hover, .course h4 a:hover, .catalog a:hover { color: var(--primaire-dark); }
nav a:hover { color: var(--primaire); }
nav a.nav-cta:hover { color: var(--blanc) !important; background: var(--or) !important; }
a:hover { text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.btn-secondaire:hover { background: var(--creme); color: var(--primaire); border-color: var(--or); text-decoration: none; }
.btn-principal:hover { background: var(--primaire) !important; color: #fff !important; border-color: var(--or); }
.yt:hover, .ic-social:hover, .ic-mail:hover { text-decoration: none; }
.ic-social:hover rect { fill: none; stroke: #ffffff; }
.ic-social:hover polygon, .ic-social:hover text { fill: #ffffff; }

/* Bandeau : téléphone sans effet de survol ; « Mon espace » à droite */
.topbar a, .topbar a:hover { color: #ffffff; }
.topbar .tel, .topbar .tel:hover { text-decoration: none; cursor: default; }
.topbar .space { text-decoration: underline; text-decoration-color: rgba(255,255,255,.6); text-underline-offset: 3px; margin-left: .4rem; }
.topbar .space:hover { text-decoration-color: var(--or); }

/* Espace réduit entre la présentation et le catalogue */
.page-wrap { padding-bottom: 0.5rem; }
.catalog > .section-rule { margin-top: 1rem; }

/* Traits or optionnels - à ajouter en classe sur un bloc si souhaité
   .trait-or-h : trait horizontal court sous un titre (équivalent .gold-rule)
   .trait-or-v : trait vertical à gauche d'un bloc (équivalent .encadre-or) */
.trait-or-h { width: 48px; height: 2px; background: var(--or); margin: 0 0 1.5rem; border: 0; }
.trait-or-v { border-left: 3px solid var(--or) !important; }

/* Accueil */
.hero { margin-bottom: 1.5rem; }
.hero .sous-titre { font-family: var(--font-titre); font-size: 1.35rem; color: var(--primaire); margin: -1.2rem 0 1rem; }
.hero p { font-size: 0.95rem; line-height: 1.8; }
.actions { margin-top: 1rem; }
.triptych { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0.5rem 0 1rem; }
.triptych > div, .offer { background: var(--creme); border: 1px solid var(--bordure); border-radius: 3px; padding: 1.1rem 1.1rem 0.8rem; }
.triptych h3, .offer h3 { font-family: var(--font-titre); font-size: 1.25rem; font-weight: 600; color: var(--texte); margin-bottom: 0.4rem; }
.triptych p, .offer p { font-size: 0.88rem; color: var(--discret); line-height: 1.65; }
.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.offer-price { color: var(--primaire) !important; font-size: 1rem !important; }

/* Catalogue sur toute la largeur */
.catalog { max-width: 1080px; margin: 0 auto; padding: 0 2rem 4rem; }
.catalog > h2 { margin-top: 0; }
.catalog__intro { font-size: 0.9rem; color: var(--discret); margin-bottom: 0.8rem; }
.matieres { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 1rem; }
.matieres a { display: inline-block; padding: 0.25rem 0.8rem; border: 1px solid var(--bordure); border-radius: 20px; background: var(--creme); font-size: 0.82rem; text-decoration: none !important; }
.course-category { margin: 2rem 0 0; scroll-margin-top: 70px; }
.course-category > h3 { font-family: var(--font-titre); font-size: 1.4rem; font-weight: 600; color: var(--texte); padding-bottom: 0.4rem; border-bottom: 1px solid var(--bordure); margin-bottom: 1rem; }
.courses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.course { background: var(--creme); border: 1px solid var(--bordure); border-radius: 3px; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.course h4 { font-family: var(--font-titre); font-size: 1.15rem; font-weight: 600; line-height: 1.25; margin: 0.2rem 0 0.3rem; }
.course__meta { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.8rem; color: var(--discret); }
.course__price { color: var(--primaire); text-align: right; }

/* Vidéo YouTube lue dans la page (chargée au clic) */
.yt { position: relative; display: block; width: 100%; aspect-ratio: 16/9; border: 0; padding: 0; border-radius: 3px; overflow: hidden; background: #000; cursor: pointer; line-height: 0; }
.yt img { width: 100%; height: 100%; object-fit: cover; }
.yt .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 30px; border-radius: 7px; background: #ff0000; }
.yt .play::after { content: ''; position: absolute; left: 17px; top: 9px; border-style: solid; border-width: 6px 0 6px 11px; border-color: transparent transparent transparent #fff; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Vignette sans vidéo : même format que les vignettes YouTube, lien vers la fiche */
.vignette { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16/9; background: #ffffff; border: 1px solid var(--bordure); border-radius: 3px; text-align: center; text-decoration: none !important; }
.vignette span { font-family: Verdana, Geneva, sans-serif; font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: #c80000; padding: 0 .6rem; }
.vignette:hover { border-color: var(--or); }

/* Pied de page : titres blancs lisibles ; texte maigre, gras réservé aux liens ; liens sans soulignement */
.footer-inner { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
.footer-col h4, .footer-brand .f-logo { font-family: var(--font-titre); font-size: 1.35rem; font-weight: 500; letter-spacing: 0; color: #ffffff; margin-bottom: 0.9rem; }
.footer-brand p, .footer-col p, .footer-bottom { font-size: 0.85rem; font-weight: 300; line-height: 1.7; color: #ffffff; margin-bottom: 0.5rem; }
footer a, .footer-col ul a, .footer-brand .f-contact a { color: #ffffff; font-weight: 500; text-decoration: none; }
footer a:hover, .footer-col ul a:hover { color: #ffffff; text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 3px; }

@media (max-width: 1050px) { .courses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .courses { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-inner { grid-template-columns: 1fr 1fr; } .catalog { padding: 0 1rem 3rem; } }
@media (max-width: 560px) { .triptych, .deux { grid-template-columns: 1fr; } .course__meta { flex-direction: column; gap: 0; } .course__price { text-align: left; } }
@media (max-width: 500px) { .footer-inner { grid-template-columns: 1fr; } }
@media (max-width: 370px) { .courses { grid-template-columns: 1fr; } }

/* Formulaire d'inscription */
.rf-form { margin: 1rem 0 2rem; max-width: 560px; }
.rf-form p { margin: 0 0 .9rem; }
.rf-form label { display: block; font-size: .85rem; color: var(--texte); margin-bottom: .25rem; }
.rf-form input[type=text], .rf-form input[type=email], .rf-form input[type=tel], .rf-form input[type=date] { width: 100%; padding: .5rem .6rem; border: 1px solid var(--bordure); border-radius: 3px; font: inherit; font-size: .9rem; background: var(--blanc); }
.rf-form input:focus { outline: 2px solid var(--or); outline-offset: 1px; }
.rf-form fieldset { border: 1px solid var(--bordure); border-radius: 3px; padding: .6rem .9rem .4rem; margin: 0 0 .9rem; }
.rf-form legend { font-size: .85rem; padding: 0 .3rem; }
.rf-form fieldset label { display: flex; gap: .5rem; align-items: baseline; }
.rf-cgv label { display: block; } .rf-cgv input { margin-right: .4rem; }
.rf-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#rf-form-status { padding: .75rem 1rem; margin-bottom: 1rem; border-radius: 3px; font-size: .9rem; }
.rf-ok { background: #edf6ee; border: 1px solid #8bbd8f; }
.rf-err { background: #fbeeec; border: 1px solid #d99a93; }
.sessions h3 { font-family: var(--font-titre); font-size: 1.1rem; font-weight: 600; color: var(--texte); margin: .4rem 0 .6rem; }
.sessions p { margin-bottom: .45rem; }
.sessions .btn-secondaire { margin: .3rem 0 .8rem; }
.content-body h3 { font-family: var(--font-titre); font-size: 1.2rem; font-weight: 600; color: var(--texte); margin: 1.5rem 0 .6rem; }
.content-body strong { font-weight: 600; color: var(--texte); }
.content-body a.btn-secondaire, .content-body a.btn-secondaire:hover { text-decoration: none; }
.topbar a { white-space: nowrap; }
@media (max-width: 600px) {
  .topbar { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .topbar-right { flex-wrap: wrap; gap: .9rem; }
}

/* Onglets (sans JavaScript) : Programme, Valeur ajoutée, Avis clients */
.onglets { display: flex; flex-wrap: wrap; margin: 2rem 0 1.5rem; }
.onglets > input { position: absolute; opacity: 0; pointer-events: none; }
.onglets > label { order: 1; padding: .55rem 1.1rem; margin: 0 .25rem -1px 0; border: 1px solid var(--bordure); border-bottom: 0; border-radius: 3px 3px 0 0; background: var(--creme); font-size: .88rem; color: var(--discret); cursor: pointer; }
.onglets > label:hover { text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 3px; }
.onglets > input:checked + label { background: var(--blanc); color: var(--primaire-dark); font-weight: 500; position: relative; z-index: 1; }
.onglets > input:focus-visible + label { outline: 2px solid var(--or); outline-offset: 2px; }
.onglet-panneau { order: 2; display: none; width: 100%; border: 1px solid var(--bordure); border-radius: 0 3px 3px 3px; padding: 1.2rem 1.4rem .6rem; background: var(--blanc); }
.onglet-titre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
#onglet-1:checked ~ #programme, #onglet-2:checked ~ #valeur-ajoutee, #onglet-3:checked ~ #avis-clients { display: block; }
.card .yt { margin-top: .4rem; }
@media (max-width: 560px) { .onglets > label { padding: .45rem .7rem; font-size: .82rem; } .onglet-panneau { padding: 1rem .9rem .4rem; } }