/*
Theme Name: Stratégies Formation
Theme URI: https://agence-strategies.fr/
Description: Thème enfant de Hello Elementor portant la charte « Tech / IA contemporain » d'Agence Stratégies : couleurs, typographies Sora et Manrope, boutons, cartes, sections sombres. Conçu pour Elementor gratuit et pour le plugin Stratégies Formation — Core.
Author: Agence Stratégies
Author URI: https://agence-strategies.fr/
Template: hello-elementor
Version: 1.0.0
Text Domain: strategies-formation-theme
License: GNU General Public License v2 or later
*/

/* ---------------------------------------------------------------------
   1. Jetons de charte
   ------------------------------------------------------------------ */
:root {
	--sf-bleu: #1657C8;
	--sf-bleu-clair: #3B82F6;
	--sf-bleu-profond: #0A1B3D;
	--sf-navy: #0B1733;
	--sf-orange: #FF7A45;
	--sf-rose: #E0529B;
	--sf-violet: #8B4DF0;
	--sf-fond: #F5F7FB;
	--sf-blanc: #FFFFFF;
	--sf-bord: #D8E1F0;
	--sf-texte: #0A1B3D;
	--sf-texte-doux: #5A6B87;
	--sf-degrade: linear-gradient(90deg, #FF7A45 0%, #E0529B 52%, #8B4DF0 100%);
	--sf-radius: 20px;
	--sf-radius-s: 12px;
	--sf-ombre: 0 10px 30px rgba(10, 27, 61, .08);
	--sf-titre: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
	--sf-corps: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
	--sf-largeur: 1200px;
}

/* ---------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------ */
body {
	font-family: var(--sf-corps);
	color: var(--sf-texte);
	background: var(--sf-blanc);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--sf-titre); color: var(--sf-bleu-profond); line-height: 1.18; font-weight: 600; }
h1 { font-weight: 700; font-size: clamp(2rem, 4.4vw, 3.2rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

a { color: var(--sf-bleu); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--sf-violet); }
:focus-visible { outline: 3px solid var(--sf-bleu-clair); outline-offset: 3px; }

img { max-width: 100%; height: auto; border-radius: var(--sf-radius); }

/* Lien d'évitement pour la navigation clavier */
.sf-skip {
	position: absolute; left: -9999px; top: 0; z-index: 9999;
	background: var(--sf-bleu-profond); color: #fff; padding: .8rem 1.4rem; border-radius: 0 0 12px 0;
}
.sf-skip:focus { left: 0; color: #fff; }

/* ---------------------------------------------------------------------
   3. Utilitaires de charte, réutilisables dans Elementor
   ------------------------------------------------------------------ */
.sf-surtitre {
	font-family: var(--sf-titre); font-size: .76rem; font-weight: 600;
	letter-spacing: .18em; text-transform: uppercase; color: var(--sf-bleu);
}
.sf-degrade-texte {
	background: var(--sf-degrade);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.sf-fond-doux { background: var(--sf-fond); }
.sf-fond-navy { background: var(--sf-navy); color: #fff; }
.sf-fond-navy h1, .sf-fond-navy h2, .sf-fond-navy h3 { color: #fff; }
.sf-fond-navy p { color: rgba(255,255,255,.82); }
.sf-halo {
	background-image:
		radial-gradient(760px 320px at 12% -10%, rgba(255,122,69,.20), transparent 62%),
		radial-gradient(760px 320px at 88% 8%, rgba(139,77,240,.22), transparent 62%);
}
.sf-arrondi { border-radius: var(--sf-radius); }
.sf-ombre { box-shadow: var(--sf-ombre); }

/* Boutons — s'appliquent aussi aux boutons Elementor et aux formulaires */
.sf-btn,
.elementor-button,
input[type="submit"],
button[type="submit"] {
	font-family: var(--sf-titre);
	font-weight: 600;
	border-radius: 999px;
	padding: .82rem 1.7rem;
	border: 2px solid transparent;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.sf-btn--primaire,
.elementor-button:not(.elementor-button-link),
input[type="submit"],
button[type="submit"] {
	background-image: var(--sf-degrade);
	color: #fff;
}
.sf-btn--primaire:hover,
.elementor-button:not(.elementor-button-link):hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px rgba(224,82,155,.30);
	color: #fff;
}
.sf-btn--secondaire { background: transparent; color: var(--sf-bleu); border-color: var(--sf-bleu); }
.sf-btn--secondaire:hover { background: var(--sf-bleu); color: #fff; }
.sf-btn--fantome { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.sf-btn--fantome:hover { background: #fff; color: var(--sf-bleu-profond); }

/* Cartes */
.sf-carte-site {
	background: #fff; border: 1px solid var(--sf-bord); border-radius: var(--sf-radius);
	padding: 1.8rem; box-shadow: var(--sf-ombre); height: 100%;
}
.sf-carte-site:hover { box-shadow: 0 16px 40px rgba(10,27,61,.12); }

/* Badge */
.sf-etiquette {
	display: inline-block; font-family: var(--sf-titre); font-size: .74rem; font-weight: 600;
	padding: .3rem .8rem; border-radius: 999px; background: var(--sf-fond);
	color: var(--sf-bleu); border: 1px solid var(--sf-bord);
}
.sf-etiquette--accent { background: var(--sf-degrade); color: #fff; border-color: transparent; }

/* Liste à puces cochées */
.sf-liste-check { list-style: none; padding: 0; margin: 0; }
.sf-liste-check li { position: relative; padding-left: 1.9rem; margin-bottom: .6rem; }
.sf-liste-check li::before {
	content: "✓"; position: absolute; left: 0; top: 0;
	font-weight: 700; color: var(--sf-violet);
}

/* Citation */
.sf-citation {
	border-left: 4px solid var(--sf-violet);
	padding: .4rem 0 .4rem 1.4rem;
	font-size: 1.15rem; font-style: italic; color: var(--sf-bleu-profond);
}
.sf-citation cite { display: block; margin-top: .6rem; font-style: normal; font-size: .9rem; color: var(--sf-texte-doux); }

/* Encarts */
.sf-encart { border-radius: var(--sf-radius-s); padding: 1rem 1.3rem; border-left: 4px solid; margin: 1.2rem 0; }
.sf-encart--info { background: #EEF4FF; border-color: var(--sf-bleu); }
.sf-encart--succes { background: #E7F6EE; border-color: #1E9A63; }
.sf-encart--attention { background: #FFF3E0; border-color: var(--sf-orange); }
.sf-encart--important { background: #FDECEC; border-color: #C0392B; }

/* Tableaux éditoriaux */
.entry-content table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.entry-content th, .entry-content td { padding: .8rem; border-bottom: 1px solid var(--sf-bord); text-align: left; }
.entry-content thead th { background: var(--sf-fond); font-family: var(--sf-titre); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }

/* ---------------------------------------------------------------------
   4. En-tête et pied de page (mode sans Theme Builder)
   ------------------------------------------------------------------ */
.site-header { border-bottom: 1px solid var(--sf-bord); background: #fff; }
.site-header .site-branding img { border-radius: 0; }
.site-navigation ul li a { font-family: var(--sf-titre); font-weight: 600; font-size: .95rem; color: var(--sf-bleu-profond); }
.site-navigation ul li a:hover,
.site-navigation .current-menu-item > a { color: var(--sf-bleu); }

.site-footer { background: var(--sf-navy); color: rgba(255,255,255,.8); padding: 2.4rem 0; }
.site-footer a { color: #fff; }

/* ---------------------------------------------------------------------
   5. Accessibilité et confort de lecture
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
	.sf-btn:hover, .elementor-button:hover { transform: none; }
}

@media (max-width: 767px) {
	body { font-size: 15.5px; }
	.sf-carte-site { padding: 1.3rem; }
}

@media print {
	.site-header, .site-footer, .elementor-button, .sf-btn { display: none !important; }
	body { color: #000; background: #fff; }
}