/* ==========================================================================
   SafeYield : design system
   Neutres chauds + un vert profond. Modes clair et sombre.
   Aucune dépendance externe. Aucun appel réseau tiers.
   ========================================================================== */

/* --- Police auto-hébergée -------------------------------------------------
   Dépose Inter-Regular.woff2 et Inter-SemiBold.woff2 dans assets/fonts/.
   Tant qu'ils sont absents, la pile système prend le relais sans casse.
   Ne JAMAIS charger Google Fonts depuis leur CDN : point RGPD réel en Europe.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600 700; font-style: normal; font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */
:root,
[data-sy-theme="light"] {
  /* v3.10.0 : palette relevée. Le reproche etait juste, le site vivait dans une
     plage de luminosite trop etroite : fonds creme, vert peu sature, donc rien
     ne ressortait. On garde le vert profond pour le texte et les fonds sombres,
     et on passe l'interactif sur un emeraude franc. Les fonds s'eclaircissent
     pour que photos et sections teintees gagnent du contraste. */
  --sy-bg: #FFFFFF;
  --sy-surface: #FFFFFF;
  --sy-surface-2: #F5F7F5;
  --sy-surface-3: #E9EFEA;
  --sy-text: #111614;
  --sy-text-2: #55605A;
  --sy-text-3: #8A938D;
  --sy-border: #E2E8E4;
  --sy-border-2: #CBD5CE;
  --sy-accent: #067A57;
  --sy-accent-fill: #00A578;
  --sy-accent-soft: #DFF5EC;
  --sy-warn: #9A5B12;
  --sy-warn-soft: #FBF0DF;
  --sy-danger: #A63A46;
  --sy-danger-soft: #FAEAEB;
  --sy-bg-rgb: 255,255,255;
  --sy-shadow: 0 1px 2px rgba(27,25,23,.04), 0 6px 20px rgba(27,25,23,.05);
}
[data-sy-theme="dark"] {
  --sy-bg: #16140F;
  --sy-surface: #1E1B15;
  --sy-surface-2: #252118;
  --sy-surface-3: #2C271D;
  --sy-text: #F4EFE6;
  --sy-text-2: #A69D91;
  --sy-text-3: #7C7367;
  --sy-border: #332E24;
  --sy-border-2: #443D30;
  --sy-accent: #4FD6A2;
  --sy-accent-fill: #2FA97C;
  --sy-accent-soft: #163026;
  --sy-warn: #E0A657;
  --sy-warn-soft: #2C2214;
  --sy-danger: #E58A93;
  --sy-danger-soft: #2E1B1D;
  --sy-bg-rgb: 22,20,15;
  --sy-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.22);
}
:root {
  --sy-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sy-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sy-r: 12px;
  --sy-r-s: 8px;
  --sy-content: 760px;
  --sy-wide: 1120px;
}

/* --- Base ----------------------------------------------------------------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--sy-bg);
  color: var(--sy-text);
  font-family: var(--sy-sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv02","cv03","cv04","ss01";
  transition: background-color .25s ease, color .25s ease;
}
h1, h2, h3, h4 { color: var(--sy-text); font-family: var(--sy-sans); }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 680; letter-spacing: -.035em; line-height: 1.12; }
h2 { font-size: clamp(1.4rem, 3.2vw, 2rem);  font-weight: 640; letter-spacing: -.028em; line-height: 1.22; }
h3 { font-size: 1.125rem; font-weight: 620; letter-spacing: -.015em; }
a  { color: var(--sy-accent); text-underline-offset: .18em; }
a:hover { color: var(--sy-accent-fill); } : selection { background: var(--sy-accent-soft); color: var(--sy-text); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--sy-accent-fill);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respecte le confort de lecture des utilisateurs sensibles au mouvement. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- Utilitaires de section ----------------------------------------------- */
.sy-section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.sy-section--alt { background: var(--sy-surface-2); }
.sy-eyebrow {
  font-size: .6875rem; font-weight: 650; letter-spacing: .15em;
  text-transform: uppercase; color: var(--sy-accent); margin-bottom: .6rem;
}
.sy-lede { color: var(--sy-text-2); font-size: 1.0625rem; max-width: 62ch; }

/* --- Boutons -------------------------------------------------------------- */
.sy-btn,
.wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: inherit; font-size: .9375rem; font-weight: 600; letter-spacing: -.01em;
  padding: .8rem 1.4rem; border-radius: 999px; border: 1px solid transparent;
  background: var(--sy-accent-fill); color: #fff; text-decoration: none;
  transition: transform .15s ease, filter .15s ease; cursor: pointer;
}
.sy-btn:hover,
.wp-block-button__link:hover { filter: brightness(1.07); transform: translateY(-1px); color: #fff; }
.sy-btn:active { transform: translateY(0); }
.sy-btn--ghost,
.is-style-outline .wp-block-button__link {
  background: transparent; color: var(--sy-text);
  border-color: var(--sy-border-2);
}
.sy-btn--ghost:hover { background: var(--sy-surface-2); color: var(--sy-text); filter: none; }

/* --- Cartes --------------------------------------------------------------- */
.sy-card {
  background: var(--sy-surface); border: 1px solid var(--sy-border);
  border-radius: var(--sy-r); padding: 1.4rem 1.5rem;
}
.sy-card--raised { box-shadow: var(--sy-shadow); }
.sy-card h3 { margin-top: 0; }
.sy-card p:last-child { margin-bottom: 0; }

/* --- Barre de confiance --------------------------------------------------- */
.sy-trustbar {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: center;
  font-size: .875rem; color: var(--sy-text-2); padding: 1rem 0;
}
.sy-trustbar span { display: inline-flex; align-items: center; gap: .45rem; }
.sy-trustbar span::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--sy-accent-fill); flex: none;
}

/* --- Étapes --------------------------------------------------------------- */
.sy-steps { counter-reset: sy-step; display: grid; gap: .75rem; }
.sy-step {
  background: var(--sy-surface); border: 1px solid var(--sy-border);
  border-radius: var(--sy-r); padding: 1.25rem 1.4rem;
  display: grid; grid-template-columns: 34px 1fr; gap: 1rem; align-items: start;
}
.sy-step::before {
  counter-increment: sy-step; content: counter(sy-step);
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--sy-accent-soft); color: var(--sy-accent);
  display: grid; place-items: center; font-weight: 700; font-size: .8125rem;
}
@media (max-width: 640px) { .sy-step { grid-template-columns: 1fr; } }

/* --- Tableau comparatif --------------------------------------------------- */
.sy-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sy-table {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9375rem;
  background: var(--sy-surface); border: 1px solid var(--sy-border);
  border-radius: var(--sy-r); overflow: hidden;
}
.sy-table th, .sy-table td {
  padding: .75rem .9rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--sy-border);
}
.sy-table thead th {
  background: var(--sy-surface-2); font-size: .6875rem; font-weight: 650;
  letter-spacing: .07em; text-transform: uppercase; color: var(--sy-text-2);
}
.sy-table tbody tr:last-child > * { border-bottom: 0; }
.sy-table tbody th { font-weight: 600; color: var(--sy-text); }
.sy-table td { color: var(--sy-text-2); }
.sy-table .sy-win { color: var(--sy-accent); font-weight: 600; }

/* --- Calculateur ---------------------------------------------------------- */
.sy-calc {
  background: var(--sy-surface); border: 1px solid var(--sy-border);
  border-radius: var(--sy-r); padding: 1.75rem; box-shadow: var(--sy-shadow);
}
.sy-calc__row { margin-bottom: 1.4rem; }
.sy-calc__label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .875rem; color: var(--sy-text-2); margin-bottom: .5rem;
}
.sy-calc__label b {
  font-size: 1.0625rem; color: var(--sy-text); font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.sy-calc input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 999px; background: var(--sy-surface-3); outline: none;
}
.sy-calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px;
  border-radius: 999px; background: var(--sy-accent-fill);
  border: 3px solid var(--sy-surface); box-shadow: var(--sy-shadow); cursor: pointer;
}
.sy-calc input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 999px; background: var(--sy-accent-fill);
  border: 3px solid var(--sy-surface); cursor: pointer;
}
.sy-calc__out {
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
  margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--sy-border);
}
@media (max-width: 520px) { .sy-calc__out { grid-template-columns: 1fr; } }
.sy-calc__cell { background: var(--sy-surface-2); border-radius: var(--sy-r-s); padding: .9rem 1rem; }
.sy-calc__cell small {
  display: block; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 650; color: var(--sy-text-3); margin-bottom: .25rem;
}
.sy-calc__cell b { font-size: 1.5rem; font-weight: 680; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sy-calc__cell--win { background: var(--sy-accent-soft); }
.sy-calc__cell--win b { color: var(--sy-accent); }
.sy-calc__note {
  margin-top: 1rem; font-size: .8125rem; color: var(--sy-text-3); line-height: 1.5;
}

/* --- FAQ ------------------------------------------------------------------ */
.sy-faq { display: grid; gap: .5rem; }
.sy-faq details {
  background: var(--sy-surface); border: 1px solid var(--sy-border);
  border-radius: var(--sy-r); padding: 1rem 1.25rem;
}
.sy-faq summary {
  cursor: pointer; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.sy-faq summary::-webkit-details-marker { display: none; }
.sy-faq summary::after {
  content: "+"; font-size: 1.25rem; color: var(--sy-accent); font-weight: 400; flex: none;
}
.sy-faq details[open] summary::after { content: "−"; }
.sy-faq details > p { margin: .75rem 0 0; color: var(--sy-text-2); }

/* --- Bascule de thème ----------------------------------------------------- */
.sy-theme-toggle {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--sy-surface); border: 1px solid var(--sy-border-2);
  color: var(--sy-text-2); border-radius: 999px; padding: .4rem .8rem;
  font: inherit; font-size: .8125rem; font-weight: 500; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.sy-theme-toggle:hover { border-color: var(--sy-accent-fill); color: var(--sy-text); }
.sy-theme-toggle svg { width: 15px; height: 15px; display: block; }

/* --- Sélecteur de langue (Polylang) --------------------------------------- */
/* Jamais de drapeaux : un drapeau désigne un pays, pas une langue. */
.sy-lang .lang-item img,
.pll-switcher-dropdown img { display: none !important; }
.sy-lang ul { list-style: none; display: flex; gap: .75rem; margin: 0; padding: 0; }
.sy-lang a { color: var(--sy-text-2); font-size: .875rem; text-decoration: none; }
.sy-lang .current-lang a { color: var(--sy-text); font-weight: 600; }

/* --- Disclaimer réglementaire --------------------------------------------- */
.sy-disclaimer {
  font-size: .75rem; line-height: 1.55; color: var(--sy-text-3);
  max-width: 68ch; margin-top: 1rem;
}

/* --- Formulaire ----------------------------------------------------------- */
.sy-form input[type="text"], .sy-form input[type="email"],
.sy-form select, .sy-form textarea,
.frm-fluent-form input[type="text"], .frm-fluent-form input[type="email"],
.frm-fluent-form select {
  background: var(--sy-surface); color: var(--sy-text);
  border: 1px solid var(--sy-border-2); border-radius: var(--sy-r-s);
  padding: .7rem .9rem; font: inherit; width: 100%;
}
.sy-form label { font-size: .875rem; font-weight: 600; display: block; margin-bottom: .35rem; }

/* --- Impression ----------------------------------------------------------- */
@media print {
  .sy-theme-toggle, .sy-lang, .sy-calc input { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   v2.6. Hero vivant : grain, lueur, carte de caution, logo
   Ajouté sans rien retirer : les styles v1 restent valables.
   ========================================================================== */

/* Grain : la seule texture. Donne de la matière au fond plat. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-sy-theme="dark"] body::before{opacity:.05}
/* ATTENTION, ne jamais remettre ces trois sélecteurs au même z-index.
   Historique : de la v2.6 à la v3.3.0, la règle était
   `.site-content,.site-header,.site-footer{position:relative;z-index:1}`.
   L'en-tête et le contenu se retrouvaient donc au même niveau, et comme
   `.site-content` vient APRÈS dans le document, c'est lui qui l'emportait.
   Résultat : tout sous-menu déroulant de la navigation était recouvert par
   le contenu de la page, exactement à la limite basse de l'en-tête. Le
   dépliant Solutions et le sélecteur de langue paraissaient tronqués, donc
   inutilisables. Ce n'était ni une largeur ni un comportement tactile :
   c'était un empilement.
   L'en-tête doit rester au-dessus du contenu, et les sous-menus au-dessus
   de l'en-tête. */
.site-header{position:relative;z-index:20}
.site-content,.site-footer{position:relative;z-index:1}
.main-navigation,.main-navigation .main-nav{position:relative;z-index:21}
.main-navigation .main-nav ul ul{z-index:30}

/* Logo */
/* Signature : le mot porte la marque, le symbole l'accompagne. */
.sy-logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--sy-text)}
.sy-logo svg{width:30px;height:30px;display:block;flex:none;color:var(--sy-text)}
.sy-logo span{font-weight:620;font-size:19px;letter-spacing:-.032em}
.sy-logo:hover{color:var(--sy-text)}

/* Hero à deux colonnes */
.sy-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;padding:56px 0 84px;position:relative}
.sy-hero::after{
  content:"";position:absolute;right:-6%;top:2%;width:620px;height:620px;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,var(--sy-accent-glow,rgba(14,122,90,.16)),transparent 68%);filter:blur(18px)
}
@media(max-width:900px){.sy-hero{grid-template-columns:1fr;gap:40px;padding:28px 0 56px}.sy-hero::after{display:none}}
[data-sy-theme="dark"]{--sy-accent-glow:rgba(79,214,162,.13)}
:root{--sy-accent-glow:rgba(14,122,90,.16)}

.sy-badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:560;color:var(--sy-accent);background:var(--sy-accent-soft);border-radius:999px;padding:6px 14px;margin-bottom:20px}
.sy-badge i{width:6px;height:6px;border-radius:99px;background:var(--sy-accent-fill);animation:sy-pulse 2.4s ease-in-out infinite}
@keyframes sy-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.sy-hero h1{font-size:clamp(2.3rem,4.7vw,3.8rem);letter-spacing:-.042em;line-height:1.05;max-width:14ch;margin-bottom:20px}
.sy-hero h1 .grad{background:linear-gradient(100deg,var(--sy-accent-fill),var(--sy-accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Carte de caution vivante */
.sy-vault{background:var(--sy-surface);border:1px solid var(--sy-border);border-radius:20px;padding:28px;position:relative;overflow:hidden;
  box-shadow:0 2px 4px rgba(27,25,23,.03),0 12px 32px rgba(27,25,23,.07),0 32px 64px rgba(27,25,23,.05)}
[data-sy-theme="dark"] .sy-vault{box-shadow:0 2px 4px rgba(0,0,0,.3),0 16px 40px rgba(0,0,0,.35),0 40px 80px rgba(0,0,0,.25)}
.sy-vault::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,transparent,var(--sy-accent-fill),transparent);opacity:.8}
.sy-vault__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.sy-vault__tag{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--sy-text-3)}
.sy-live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:620;color:var(--sy-accent)}
.sy-live i{width:6px;height:6px;border-radius:99px;background:var(--sy-accent-fill);animation:sy-pulse 1.6s ease-in-out infinite}
.sy-vault__amount{font-size:44px;font-weight:680;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.sy-vault__amount small{font-size:19px;font-weight:600;color:var(--sy-text-3);margin-left:4px}
.sy-vault__sub{font-size:13px;color:var(--sy-text-3);margin-top:7px}
.sy-gain{margin-top:20px;padding:18px 20px;border-radius:14px;background:var(--sy-accent-soft);border:1px solid color-mix(in srgb,var(--sy-accent-fill) 22%,transparent)}
.sy-gain__label{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sy-accent);margin-bottom:5px}
.sy-gain__val{font-size:34px;font-weight:680;letter-spacing:-.035em;color:var(--sy-accent);line-height:1.05;font-variant-numeric:tabular-nums}
.sy-gain__val .dim{opacity:.42;font-size:.62em}
.sy-gain__note{font-size:11.5px;color:var(--sy-text-3);margin-top:8px;line-height:1.45}
.sy-keys{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.sy-key{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--sy-surface-2);border:1px solid var(--sy-border)}
.sy-key__dot{width:24px;height:24px;border-radius:8px;flex:none;display:grid;place-items:center;background:var(--sy-accent-fill)}
.sy-key__dot--wait{background:var(--sy-surface-3)}
.sy-key__dot svg{width:13px;height:13px}
.sy-key b{display:block;font-size:13px;font-weight:600}
.sy-key small{display:block;font-size:11px;color:var(--sy-text-3)}
.sy-lock{margin-top:12px;display:flex;align-items:center;gap:9px;justify-content:center;font-size:12px;color:var(--sy-text-3);padding-top:14px;border-top:1px dashed var(--sy-border-2)}
.sy-lock svg{width:13px;height:13px;flex:none}
.sy-vault__legal{margin-top:14px;font-size:11px;color:var(--sy-text-3);line-height:1.5}

/* Calculateur : même traitement que la carte */
.sy-calc{box-shadow:0 2px 4px rgba(27,25,23,.03),0 12px 32px rgba(27,25,23,.07)}
.sy-calc__cell b{transition:color .2s}
.sy-calc__cell--win{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sy-accent-fill) 20%,transparent)}

/* ==========================================================================
   v2.7.1. Aperçu fidèle dans l'éditeur de blocs
   Le canevas n'a pas d'attribut data-sy-theme : on force la résolution
   des variables sur le jeu clair, et on style les blocs natifs de l'éditeur.
   ========================================================================== */
.editor-styles-wrapper{background:var(--sy-bg);color:var(--sy-text)}
.editor-styles-wrapper .wp-block-button__link{
  background:var(--sy-accent-fill);color:#fff;border-radius:999px;
  padding:.8rem 1.4rem;font-weight:600;font-size:.9375rem
}
.editor-styles-wrapper .is-style-outline .wp-block-button__link{
  background:transparent;color:var(--sy-text);border:1px solid var(--sy-border-2)
}
.editor-styles-wrapper .sy-table{border:1px solid var(--sy-border);border-radius:var(--sy-r)}
.editor-styles-wrapper .sy-table th,
.editor-styles-wrapper .sy-table td{border-bottom:1px solid var(--sy-border)}
.editor-styles-wrapper .sy-section--alt{background:var(--sy-surface-2)}
.editor-styles-wrapper h1,.editor-styles-wrapper h2,.editor-styles-wrapper h3{color:var(--sy-text)}

/* v2.7.2 : le style « contour » du second CTA, éditeur et site public.
   Le bouton plein est défini dans theme.json (elements.button) : c'est la
   seule couche que WordPress ne surcharge pas. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.editor-styles-wrapper .wp-block-button.is-style-outline > .wp-block-button__link{
  background:transparent!important;color:var(--sy-text)!important;
  border:1px solid var(--sy-border-2)!important
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-button.is-style-outline > .wp-block-button__link:hover{
  background:var(--sy-surface-2)!important;color:var(--sy-text)!important
}

/* =========================================================================
   v2.8. Habillage GeneratePress : en-tête, navigation, pied de page.
   Le thème parent ne connaît pas nos modes clair/sombre ; on le raccorde.
   ========================================================================= */

/* En-tête : suit le thème au lieu de rester blanc sur fond sombre. */
.site-header{
  background:var(--sy-bg)!important;
  border-bottom:1px solid var(--sy-border);
}
.site-header .header-image,.site-logo img{max-width:168px;height:auto}
.site-branding .main-title a,.site-title a{color:var(--sy-text)!important;font-weight:620;letter-spacing:-.03em}
.site-description{display:none}

/* Navigation */
.main-navigation,.main-navigation ul ul{background:var(--sy-bg)!important}
.main-navigation .main-nav ul li a{
  color:var(--sy-text-2)!important;font-size:.9375rem;font-weight:500;letter-spacing:-.01em
}
.main-navigation .main-nav ul li:hover>a,
.main-navigation .main-nav ul li.current-menu-item>a{color:var(--sy-text)!important}
.main-navigation .menu-bar-items .menu-bar-item>a{color:var(--sy-text-2)!important}

/* Contenu : pleine largeur, la barre latérale est désactivée côté PHP. */
.site-content .content-area{width:100%;max-width:none}
.separate-containers .site-main{margin:0}
.separate-containers .inside-article,
.separate-containers .paging-navigation,
.separate-containers .comments-area{padding:0;background:transparent}
.entry-content>.sy-hero,
.entry-content>.wp-block-group{max-width:none}

/* Le hero occupe toute la largeur utile. */
.sy-hero{max-width:1120px;margin-inline:auto}

/* Pied de page */
.site-footer,.footer-widgets{background:var(--sy-surface-2)!important;color:var(--sy-text-2)}
.site-info{
  background:var(--sy-surface-2)!important;border-top:1px solid var(--sy-border);
  color:var(--sy-text-3);font-size:.8125rem
}
.sy-copyright{margin:0}

/* Page : plus d'espace vertical entre les sections. */
.entry-content{margin-top:0}

/* =========================================================================
   v2.9 : RESPONSIVE
   Mobile-first assumé. Trois points de rupture seulement, choisis sur des
   contraintes de contenu et non sur des tailles d'appareils.
   ========================================================================= */

/* Marges latérales : jamais de texte collé au bord sur mobile. */
.inside-article,.site-content,.entry-content{padding-inline:0}
.sy-section{padding-inline:clamp(1.15rem,5vw,2rem)}

/* --- Tablette et moins ---------------------------------------------------- */
@media (max-width:900px){
  .sy-hero{grid-template-columns:1fr;gap:2.4rem;padding:2rem 0 3rem}
  .sy-hero::after{display:none}
  .sy-hero h1{max-width:none;font-size:clamp(2rem,7vw,2.9rem)}
  .sy-vault{padding:1.4rem}
  .sy-vault__amount{font-size:36px}
  .sy-gain__val{font-size:28px}
  .sy-keys{grid-template-columns:1fr 1fr}
}

/* --- Mobile --------------------------------------------------------------- */
@media (max-width:640px){
  body{font-size:15.5px}
  h1{font-size:clamp(1.85rem,8vw,2.4rem);letter-spacing:-.03em}
  h2{font-size:clamp(1.3rem,5.5vw,1.7rem)}
  .sy-lede{font-size:1rem}

  /* Boutons : pleine largeur, empilés, cible tactile de 48 px minimum. */
  .wp-block-buttons{flex-direction:column;align-items:stretch;gap:.6rem}
  .wp-block-button,.wp-block-button__link,.sy-btn{width:100%;min-height:48px}

  .sy-vault{padding:1.15rem;border-radius:16px}
  .sy-vault__amount{font-size:31px}
  .sy-gain{padding:14px 15px}
  .sy-gain__val{font-size:25px}
  .sy-keys{grid-template-columns:1fr;gap:.5rem}
  .sy-lock{font-size:11.5px;text-align:center}

  /* Tableau : le défilement horizontal est signalé par une ombre de bord. */
  .sy-table-wrap{
    background:
      linear-gradient(90deg,var(--sy-surface) 30%,transparent),
      linear-gradient(270deg,var(--sy-surface) 30%,transparent) 100% 0,
      radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.12),transparent),
      radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.12),transparent) 100% 0;
    background-repeat:no-repeat;background-size:36px 100%,36px 100%,14px 100%,14px 100%;
    background-attachment:local,local,scroll,scroll;
  }
  .sy-table{font-size:.875rem;min-width:560px}
  .sy-table th,.sy-table td{padding:.6rem .7rem}

  .sy-calc{padding:1.25rem}
  .sy-calc__out{grid-template-columns:1fr}
  .sy-calc input[type="range"]{height:8px}
  .sy-calc input[type="range"]::-webkit-slider-thumb{width:26px;height:26px}

  .sy-step{padding:1rem 1.1rem}
  .sy-steps{gap:.6rem}
  .sy-faq details{padding:.85rem 1rem}
  .sy-trustbar{gap:.5rem 1rem;font-size:.8125rem}
}

/* --- Très petits écrans --------------------------------------------------- */
@media (max-width:380px){
  .sy-vault__amount{font-size:27px}
  .sy-gain__val{font-size:22px}
  .sy-badge{font-size:11.5px;padding:5px 11px}
}

/* --- Bascule clair / sombre dans la barre de navigation -------------------- */
.main-navigation .menu-bar-items .sy-toggle-item{display:flex;align-items:center}
.sy-theme-toggle{
  background:transparent;border:1px solid var(--sy-border-2);color:var(--sy-text-2);
  border-radius:999px;padding:6px;width:34px;height:34px;display:grid;place-items:center;
  cursor:pointer;transition:border-color .2s,color .2s
}
.sy-theme-toggle:hover{border-color:var(--sy-accent-fill);color:var(--sy-text)}
.sy-theme-toggle svg{width:16px;height:16px;display:block}
.sy-theme-toggle [data-sy-label]{display:none}
@media (max-width:768px){
  .sy-theme-toggle{width:40px;height:40px}
}

/* --- Menu déroulant Solutions --------------------------------------------- */
.main-navigation .main-nav ul ul{
  background:var(--sy-surface)!important;border:1px solid var(--sy-border);
  border-radius:var(--sy-r);box-shadow:var(--sy-shadow);padding:.4rem;min-width:265px
}
.main-navigation .main-nav ul ul li a{border-radius:var(--sy-r-s);padding:.6rem .8rem!important}
.main-navigation .main-nav ul ul li a:hover{background:var(--sy-surface-2)!important}

/* Le dernier élément du menu devient le bouton d'appel à l'action. */
.main-navigation .main-nav ul li.sy-cta > a{
  background:var(--sy-accent-fill)!important;color:#fff!important;
  border-radius:999px;padding:.55rem 1.15rem!important;margin-left:.5rem;line-height:1.2
}
.main-navigation .main-nav ul li.sy-cta > a:hover{background:var(--sy-accent)!important;color:#fff!important}

/* =========================================================================
   v3.0 : CORRECTIF MAJEUR. Conteneurs GeneratePress et mode sombre.

   Constat en production : le thème passait en sombre (texte crème) pendant
   que GeneratePress gardait ses conteneurs blancs. Résultat, du texte crème
   sur fond blanc, donc invisible. C'est ce qui faisait croire que le
   formulaire d'inscription avait disparu : il était là, avec ses 638 px et
   ses 15 champs, simplement illisible.

   Règle : AUCUN conteneur du thème parent ne garde une couleur en dur.
   ========================================================================= */
body,
.site,
.site-content,
.content-area,
.site-main,
.inside-article,
.entry-content,
.page-header,
.widget-area,
.inside-page-hero,
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .site-content{
  background-color:var(--sy-bg)!important;
  color:var(--sy-text);
}
.entry-content p,.entry-content li,.entry-content td{color:var(--sy-text)}
.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4{color:var(--sy-text)}

/* Les sections qui doivent vraiment se détacher gardent leur nuance. */
.sy-section--alt{background-color:var(--sy-surface-2)!important}
.sy-card,.sy-step,.sy-vault,.sy-calc,.sy-faq details,.sy-table{background-color:var(--sy-surface)!important}
.sy-table thead th,.sy-calc__cell,.sy-key{background-color:var(--sy-surface-2)!important}
.sy-gain,.sy-calc__cell--win{background-color:var(--sy-accent-soft)!important}

/* --- Formulaires Fluent Forms : les deux modes ---------------------------- */
.fluentform .ff-el-input--label label,
.fluentform label,
.fluentform legend{color:var(--sy-text)!important;font-weight:600;font-size:.9375rem}
.fluentform .ff-el-form-check-label,
.fluentform .ff-el-input--content label{font-weight:450!important}
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform textarea,
.fluentform select{
  background-color:var(--sy-surface)!important;
  color:var(--sy-text)!important;
  border:1px solid var(--sy-border-2)!important;
  border-radius:var(--sy-r-s)!important;
  padding:.7rem .9rem!important;
  font-family:var(--sy-sans)!important;font-size:.9375rem!important;
  min-height:46px;
}
.fluentform input:focus,.fluentform select:focus,.fluentform textarea:focus{
  border-color:var(--sy-accent-fill)!important;
  box-shadow:0 0 0 3px var(--sy-accent-soft)!important;outline:none!important
}
.fluentform ::placeholder{color:var(--sy-text-3)!important;opacity:1}
.fluentform .ff-el-form-check input[type="radio"],
.fluentform .ff-el-form-check input[type="checkbox"]{accent-color:var(--sy-accent-fill);width:18px;height:18px;min-height:0}
.fluentform .ff-btn-submit,
.fluentform button[type="submit"]{
  background-color:var(--sy-accent-fill)!important;color:#fff!important;
  border:1px solid var(--sy-accent-fill)!important;border-radius:999px!important;
  padding:.85rem 1.6rem!important;font-weight:600!important;font-size:.9375rem!important;
  min-height:48px;cursor:pointer
}
.fluentform .ff-btn-submit:hover{background-color:var(--sy-accent)!important}
.fluentform .ff-el-help-message,.fluentform .ff-el-input--content small{color:var(--sy-text-3)!important}
.fluentform .error,.fluentform .ff-el-is-error .text-danger{color:var(--sy-danger)!important}
.fluentform .ff-message-success{
  background-color:var(--sy-accent-soft)!important;color:var(--sy-text)!important;
  border:1px solid var(--sy-accent-fill)!important;border-radius:var(--sy-r)!important;padding:1rem 1.2rem!important
}
.fluentform .ff-step-header .ff-el-progress{background:var(--sy-surface-3)!important}
.fluentform .ff-el-progress-bar{background:var(--sy-accent-fill)!important}

/* --- En-tête : un seul nom de marque -------------------------------------- */
/* Quand un logo est chargé, le titre en texte fait doublon : on le masque. */
.site-header .site-logo ~ .site-branding,
.site-logo + .site-branding .main-title{display:none!important}

/* v3.0 : le badge du hero indique un exemple, pas un flux temps réel.
   Plus de pastille clignotante : elle promettait du direct que nous n'avons pas. */
.sy-live{color:var(--sy-text-3);font-weight:560}
.sy-live i{background:var(--sy-text-3);animation:none;width:5px;height:5px}
.sy-gain__val .dim{display:none}

/* Liens légaux du pied de page (sortis du menu principal, v3.1) */
.sy-footer-legal{
  margin:0 0 .35rem;
  font-size:.8125rem;
  line-height:1.6;
  color:var(--sy-text-2);
}
.sy-footer-legal a{
  color:var(--sy-text-2);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.sy-footer-legal a:hover{
  color:var(--sy-text);
  border-bottom-color:var(--sy-border-2);
}

/* =========================================================================
   v3.2. Sélecteur de langue et sous-menus : correctifs de position et de
   comportement tactile.

   Trois défauts constatés en production :
   1. La règle min-width:265px du dépliant Solutions s'appliquait AUSSI au
      sélecteur de langue, qui n'a besoin que de la largeur de six mots.
      Placé à droite de la barre, ce bloc de 265 px sortait de l'écran.
   2. Les sous-menus des deux derniers éléments s'ouvraient vers la droite,
      donc hors du cadre sur les petites largeurs.
   3. En « dropdown-hover », un écran tactile n'ouvre jamais le sous-menu.
      Le JS pose la classe .sy-open, le CSS ci-dessous la rend visible.
   ====================================================================== */

/* 1. Le sélecteur de langue reprend sa largeur naturelle. */
.main-navigation .main-nav li.pll-parent-menu-item > ul,
.main-navigation .main-nav li[id*="pll"] > ul{
  min-width:0;
  width:auto;
  white-space:nowrap;
}

/* 2. Les deux derniers dépliants s'ouvrent vers la gauche, jamais hors cadre. */
@media (min-width:769px){
  .main-navigation .main-nav > ul > li:nth-last-child(-n+2) > ul{
    left:auto;
    right:0;
  }
}
.main-navigation .main-nav ul ul{max-width:calc(100vw - 2rem)}

/* 3. Ouverture au toucher : premier appui ouvre, second suit le lien. */
.main-navigation .main-nav li.sy-open > ul{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  display:block!important;
  height:auto!important;
  left:auto;
  transform:none!important;
}
@media (hover:none){
  .main-navigation .main-nav li.menu-item-has-children > a{position:relative}
  .main-navigation .main-nav li.menu-item-has-children > a::after{
    content:"";display:inline-block;margin-left:.45em;vertical-align:middle;
    border:solid currentColor;border-width:0 1.5px 1.5px 0;padding:2px;
    transform:rotate(45deg) translateY(-1px);opacity:.65
  }
  .main-navigation .main-nav li.sy-open > a::after{transform:rotate(-135deg) translateY(1px)}
}

/* Disclaimer réglementaire du pied de page : discret mais toujours lisible. */
.sy-disclaimer{
  margin:0 0 .4rem;
  font-size:.75rem;
  line-height:1.55;
  color:var(--sy-text-3);
  max-width:70ch;
}

/* =========================================================================
   v3.3. Composants d'article de blog.

   Cinq blocs, et cinq seulement. Un article qui a besoin d'un sixième
   composant est un article mal découpé : il faut le scinder en deux.
   ====================================================================== */

/* En bref : la réponse avant le développement. C'est ce bloc que Google
   extrait en position zéro, donc il doit contenir la réponse complète,
   compréhensible sans lire la suite. */
.sy-tldr{
  background:var(--sy-accent-soft);
  border:1px solid var(--sy-accent-fill);
  border-left-width:4px;
  border-radius:var(--sy-r);
  padding:1.15rem 1.35rem;
  margin:1.75rem 0 2.25rem;
}
.sy-tldr__label{
  display:block;margin:0 0 .6rem;
  font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sy-accent);
}
.sy-tldr ul{margin:0;padding-left:1.15rem}
.sy-tldr li{margin:.35rem 0;color:var(--sy-text);line-height:1.55}
.sy-tldr p{margin:.35rem 0;color:var(--sy-text)}

/* Chiffre clé : un seul par article, jamais deux. */
.sy-figure{
  display:flex;align-items:baseline;gap:1.1rem;flex-wrap:wrap;
  background:var(--sy-surface-2);
  border-radius:var(--sy-r);
  padding:1.35rem 1.5rem;
  margin:2rem 0;
}
.sy-figure__val{
  font-size:2.5rem;font-weight:700;line-height:1;letter-spacing:-.03em;
  color:var(--sy-accent);flex:none;
}
.sy-figure__txt{flex:1 1 260px;min-width:0}
.sy-figure__txt strong{display:block;color:var(--sy-text);font-size:1rem;margin-bottom:.15rem}
.sy-figure__txt span{color:var(--sy-text-2);font-size:.875rem;line-height:1.5}

/* Modèle de lettre : à copier tel quel, donc rendu comme un document. */
.sy-letter{
  background:var(--sy-surface);
  border:1px solid var(--sy-border-2);
  border-radius:var(--sy-r);
  padding:1.5rem 1.65rem;
  margin:2rem 0;
  font-size:.9375rem;line-height:1.7;color:var(--sy-text);
}
.sy-letter__label{
  display:block;margin:0 0 .9rem;
  font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sy-text-2);
}
.sy-letter p{margin:.6rem 0}

/* Sources : chaque affirmation chiffrée est traçable, sinon elle ne sort pas. */
.sy-sources{
  border-top:1px solid var(--sy-border);
  margin:2.75rem 0 0;padding:1.15rem 0 0;
}
.sy-sources__label{
  display:block;margin:0 0 .55rem;
  font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sy-text-2);
}
.sy-sources ol,.sy-sources ul{margin:0;padding-left:1.15rem}
.sy-sources li{margin:.3rem 0;font-size:.8125rem;line-height:1.55;color:var(--sy-text-2)}
.sy-sources a{color:var(--sy-text-2);text-decoration:underline;text-underline-offset:2px}
.sy-sources a:hover{color:var(--sy-accent)}

/* Appel à l'action de fin d'article. Un seul, toujours au même endroit. */
.sy-article-cta{
  background:var(--sy-surface-2);
  border-radius:var(--sy-r);
  padding:1.5rem 1.65rem;
  margin:2.5rem 0 1rem;
}
.sy-article-cta h2,.sy-article-cta h3,.sy-article-cta__t{margin:0 0 .45rem;font-size:1.1875rem;color:var(--sy-text)}
.sy-article-cta p{margin:0 0 1rem;color:var(--sy-text-2);font-size:.9375rem;line-height:1.6}
.sy-article-cta .sy-btn{margin:0}

/* Confort de lecture : un article n'est pas une page d'accueil. */
.single-post .entry-content{max-width:var(--sy-content);margin-inline:auto}
.single-post .entry-content p,
.single-post .entry-content li{font-size:1.0625rem;line-height:1.75}
.single-post .entry-content h2{margin-top:2.5rem;font-size:1.5rem}
.single-post .entry-content h3{margin-top:1.9rem;font-size:1.1875rem}

@media (max-width:640px){
  .sy-figure__val{font-size:2rem}
  .sy-tldr,.sy-figure,.sy-letter,.sy-article-cta{padding:1.05rem 1.15rem}
  .single-post .entry-content p,.single-post .entry-content li{font-size:1rem}
}

/* Description de catégorie, rendue visible par safeyield_term_description(). */
.sy-term-desc{
  max-width:var(--sy-content);
  margin:.6rem 0 0;
  font-size:1rem;
  line-height:1.7;
  color:var(--sy-text-2);
}
.sy-term-desc a{color:var(--sy-accent);text-decoration:underline;text-underline-offset:2px}
.sy-term-desc p:last-child{margin-bottom:0}

/* =========================================================================
   v3.5. Images, comparaison, et signature d'en-tête.

   Trois manques constatés à la revue du 29 juillet :
   le logo était un PNG noir, donc invisible en mode sombre ;
   la comparaison était une table HTML sans style, donc un document Word ;
   et aucune page n'avait de place prévue pour une photo.
   ========================================================================= */

/* --- Filet de sécurité sur le logo image ---------------------------------
   Si le remplacement PHP ne s'applique pas (thème parent modifié, filtre
   absent), le PNG reste lisible en sombre. L'inversion suivie d'une rotation
   de teinte rend le noir blanc sans virer le vert au magenta. */
[data-sy-theme="dark"] .site-logo img.header-image{filter:invert(1) hue-rotate(180deg)}

/* --- Signature vectorielle d'en-tête -------------------------------------
   Reprend .sy-logo, qui suit déjà currentColor, donc les deux modes. */
.site-header .sy-logo{font-size:0}
.site-header .sy-logo svg{width:28px;height:28px}
.site-header .sy-logo span{font-size:20px;line-height:1}

/* --- Photo dans le corps de page ------------------------------------------
   Ratio imposé pour éviter le saut de mise en page au chargement. */
.sy-media{margin:34px 0;border-radius:var(--sy-r);overflow:hidden;border:1px solid var(--sy-border);background:var(--sy-surface-2)}
.sy-media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.sy-media--tall img{aspect-ratio:4/3}
.sy-media figcaption,.sy-media__cap{display:block;padding:10px 14px;font-size:13.5px;line-height:1.5;color:var(--sy-text-2);background:var(--sy-surface-2);border-top:1px solid var(--sy-border)}
[data-sy-theme="dark"] .sy-media img{filter:brightness(.88) saturate(.92)}

/* --- Texte et image côte à côte ------------------------------------------- */
.sy-split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;margin:38px 0}
.sy-split__media{margin:0;border-radius:var(--sy-r);overflow:hidden;border:1px solid var(--sy-border)}
.sy-split__media img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.sy-split h2,.sy-split h3{margin-top:0}
@media (max-width:860px){.sy-split{grid-template-columns:1fr;gap:22px}}

/* --- Fond photographique de hero -----------------------------------------
   L'image reste décorative : le texte ne doit jamais dépendre d'elle pour
   être lisible, d'où le voile plein posé au dessus. */
.sy-hero--media{position:relative;isolation:isolate;border-radius:var(--sy-r);overflow:hidden;min-height:480px;align-content:center}
.sy-hero__bg{position:absolute;inset:0;z-index:-1}
.sy-hero__bg img{width:100%;height:100%;object-fit:cover;display:block}
.sy-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgb(var(--sy-bg-rgb)) 0%,rgba(var(--sy-bg-rgb),.88) 38%,rgba(var(--sy-bg-rgb),.28) 100%)}
[data-sy-theme="dark"] .sy-hero__bg img{filter:brightness(.78) saturate(.9)}
@media (max-width:860px){.sy-hero--media{min-height:0}.sy-hero__bg::after{background:linear-gradient(180deg,rgb(var(--sy-bg-rgb)) 0%,rgba(var(--sy-bg-rgb),.9) 55%,rgba(var(--sy-bg-rgb),.35) 100%)}}

/* --- Comparaison en deux colonnes ----------------------------------------
   Remplace la table. Jamais de nom de concurrent dans ce bloc : on compare
   une situation, pas une société. */
.sy-compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:32px 0}
.sy-compare__col{border:1px solid var(--sy-border);border-radius:var(--sy-r);padding:22px;background:var(--sy-surface)}
.sy-compare__col--now{background:var(--sy-surface-2)}
.sy-compare__col--sy{border-color:var(--sy-accent);box-shadow:var(--sy-shadow)}
.sy-compare__label{display:inline-block;font-size:12px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;margin-bottom:14px}
.sy-compare__col--now .sy-compare__label{background:var(--sy-surface-3);color:var(--sy-text-2)}
.sy-compare__col--sy .sy-compare__label{background:var(--sy-accent-soft);color:var(--sy-accent)}
.sy-compare ul{list-style:none;margin:0;padding:0}
.sy-compare li{position:relative;padding:9px 0 9px 26px;font-size:15.5px;line-height:1.55;border-bottom:1px solid var(--sy-border)}
.sy-compare li:last-child{border-bottom:0}
.sy-compare__col--now li::before{content:"";position:absolute;left:2px;top:16px;width:11px;height:2px;background:var(--sy-text-3);border-radius:2px}
.sy-compare__col--sy li::before{content:"";position:absolute;left:3px;top:14px;width:5px;height:10px;border:solid var(--sy-accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
@media (max-width:760px){.sy-compare{grid-template-columns:1fr;gap:14px}}

/* --- Rattrapage de la table de comparaison existante ----------------------
   Tant que les pages emploient encore .sy-compare-table, elle doit au moins
   ressembler au reste du site. */
.sy-compare-table{width:100%;border-collapse:separate;border-spacing:0;margin:30px 0;font-size:15.5px;border:1px solid var(--sy-border);border-radius:var(--sy-r);overflow:hidden;background:var(--sy-surface)}
.sy-compare-table th,.sy-compare-table td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--sy-border)}
.sy-compare-table thead th{background:var(--sy-surface-2);font-weight:650;font-size:13.5px;letter-spacing:.02em;color:var(--sy-text-2)}
.sy-compare-table tbody tr:last-child th,.sy-compare-table tbody tr:last-child td{border-bottom:0}
.sy-compare-table tbody th{font-weight:600;color:var(--sy-text)}
.sy-compare-table td:last-child{color:var(--sy-accent);font-weight:600}
@media (max-width:640px){.sy-compare-table{display:block;overflow-x:auto;white-space:nowrap}}

/* --- Mention de site en construction, pied de page ------------------------ */
.sy-construction{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 0 14px;padding:9px 14px;border:1px dashed var(--sy-border-2);border-radius:999px;font-size:13px;line-height:1.4;color:var(--sy-text-2);text-align:center}
.sy-construction::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sy-warn);flex:none}

/* --- v3.5.1. Le titre du bloc d'appel a l'action n'est plus un H2 ---------
   Signale par la machine a articles le 29 juillet, et le constat est juste :
   ce bloc est identique sur tous les articles. En faire un H2 ajoutait a
   chaque article un sous-titre de boilerplate qui comptait dans le quota et
   polluait le plan de la page. Il garde son poids visuel, il perd son rang. */
.sy-article-cta__t{display:block;font-size:21px;line-height:1.3;font-weight:650;letter-spacing:-.02em;margin:0 0 10px}

/* --- v3.6.0. Le voile du hero etait trop opaque -------------------------
   Constate a la revue du 29 juillet, en mode sombre : la photo etait la,
   correctement chargee et dimensionnee, mais le voile plein plus le
   brightness(.55) la ramenaient a un rectangle noir. Une photo qu'on ne
   voit pas ne sert a rien. Le voile est desormais degressif et le hero a
   une hauteur minimale, pour que l'image ait la place d'exister. */

/* =========================================================================
   v3.7. En-tete d'article de blog.

   Modele retenu apres la revue du 31 juillet : image mise en avant large,
   titre, puis une ligne de service (date et temps de lecture). Les sections
   se numerotent a la main dans le contenu, ce qui reste lisible meme si le
   texte est repris ailleurs.
   ========================================================================= */

/* --- Image mise en avant --------------------------------------------------
   Ratio impose pour que la page ne saute pas, coins arrondis comme le reste. */
.single-post .featured-image,.single-post .post-image{margin:0 0 26px}
.single-post .featured-image img,.single-post .post-image img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--sy-r);display:block}
[data-sy-theme="dark"] .single-post .featured-image img,[data-sy-theme="dark"] .single-post .post-image img{filter:brightness(.9) saturate(.94)}

/* --- Ligne de service sous le titre --------------------------------------- */
.sy-post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:-6px 0 28px;font-size:14px;color:var(--sy-text-2)}
.sy-post-meta span{display:inline-flex;align-items:center;gap:8px}
.sy-post-meta span + span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--sy-border-2)}

/* --- Le gras porte le sens, il ne decore pas ------------------------------ */
.single-post .entry-content p strong{font-weight:650;color:var(--sy-text)}

/* --- Sections numerotees a la main ---------------------------------------- */
.single-post .entry-content h2{margin-top:2.1em}

/* =========================================================================
   v3.8. Compartimenter, et empecher les images geantes.

   Revue du 6 aout : la page professionnels servait une photo de 1067 par
   1600, donc un portrait plein ecran, et 3 025 mots pour seulement quatre
   types de blocs. Trop de texte, pas assez de respiration.
   ========================================================================= */

/* --- Filet de securite sur les images de contenu --------------------------
   Aucune image posee a la main dans une page ne peut plus occuper toute la
   hauteur de l'ecran. Les composants dedies gardent leur propre reglage. */
.entry-content img{max-height:520px;width:auto;max-width:100%;display:block;margin-inline:auto;border-radius:var(--sy-r)}
.entry-content .sy-media img,.entry-content .sy-split__media img,.entry-content .sy-hero__bg img,.entry-content .sy-personas img{max-height:none;width:100%;border-radius:0}
.entry-content .sy-media img{border-radius:0}

/* --- Selecteur de profil, en tete de page --------------------------------
   Trois portes d'entree, une par situation. Le lecteur se reconnait en deux
   secondes et va directement a ce qui le concerne. */
.sy-personas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:30px 0 40px}
.sy-persona{display:flex;flex-direction:column;gap:8px;padding:22px;border:1px solid var(--sy-border);border-radius:var(--sy-r);background:var(--sy-surface);text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.sy-persona:hover,.sy-persona:focus-visible{border-color:var(--sy-accent);transform:translateY(-2px);color:inherit}
.sy-persona__tag{font-size:12px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--sy-accent)}
.sy-persona__t{font-size:18px;font-weight:640;line-height:1.3;letter-spacing:-.015em}
.sy-persona__d{font-size:14.5px;line-height:1.55;color:var(--sy-text-2);margin:0}
.sy-persona__go{margin-top:auto;padding-top:12px;font-size:14px;font-weight:600;color:var(--sy-accent)}
@media (max-width:860px){.sy-personas{grid-template-columns:1fr}}

/* --- Bandeau de chiffres -------------------------------------------------- */
.sy-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:32px 0;background:var(--sy-border);border:1px solid var(--sy-border);border-radius:var(--sy-r);overflow:hidden}
.sy-stat{background:var(--sy-surface);padding:22px 20px;text-align:center}
.sy-stat__v{display:block;font-size:30px;font-weight:660;letter-spacing:-.03em;line-height:1.1;color:var(--sy-text)}
.sy-stat__l{display:block;margin-top:6px;font-size:13.5px;line-height:1.45;color:var(--sy-text-2)}
@media (max-width:760px){.sy-stats{grid-template-columns:1fr}}

/* --- Encadre de mise en garde ou de precision ----------------------------- */
.sy-callout{margin:28px 0;padding:18px 20px;border-left:3px solid var(--sy-accent);background:var(--sy-surface-2);border-radius:0 var(--sy-r-s) var(--sy-r-s) 0}
.sy-callout p{margin:0;font-size:15.5px;line-height:1.6}
.sy-callout p + p{margin-top:10px}
.sy-callout strong{font-weight:650}
.sy-callout--warn{border-left-color:var(--sy-warn);background:var(--sy-warn-soft)}

/* =========================================================================
   v3.9. Plus de vie, et un formulaire qui donne envie.

   Revue du 6 aout. Le site est juste et il est froid : neutres chauds sur
   toute la hauteur, un seul accent, des angles de 12 px, et des sections
   qui se ressemblent toutes. On garde la sobriete, qui est notre credibilite,
   et on ajoute du rythme : un second accent chaud, des angles plus genereux,
   et des sections pleine largeur qui alternent vraiment.
   ========================================================================= */

:root,[data-sy-theme="light"]{
  --sy-accent-2: #C2701A;          /* ambre chaud, second accent */
  --sy-accent-2-soft: #FBEEDC;
  --sy-tint: #EDF5F0;              /* voile vert tres clair */
  --sy-r: 16px;                    /* on ouvre les angles */
  --sy-r-s: 10px;
  --sy-r-pill: 999px;
}
[data-sy-theme="dark"]{
  --sy-accent-2: #E8A33D;
  --sy-accent-2-soft: #2E2214;
  --sy-tint: #1A231E;
}

/* --- Sections : trois fonds au lieu d'un, en pleine largeur ---------------- */
.sy-section--tint{background:var(--sy-tint)}
.sy-section--full{width:100vw;margin-left:calc(50% - 50vw);padding-left:24px;padding-right:24px}
.sy-section--full > *{max-width:var(--sy-wide);margin-inline:auto}

/* --- Boutons en pastille, plus francs -------------------------------------- */
.sy-btn,.sy-cta,.wp-block-button__link{border-radius:var(--sy-r-pill)}
.sy-btn{padding:13px 26px;font-weight:620;letter-spacing:-.005em}
.sy-btn--accent2{background:var(--sy-accent-2);color:#fff;border-color:transparent}
.sy-btn--accent2:hover{filter:brightness(1.06);color:#fff}

/* --- Le second accent, a doser ---------------------------------------------
   Il sert au chiffre qui compte et au libelle de rappel, jamais au corps. */
.sy-figure__val,.sy-stat__v{color:var(--sy-accent)}
.sy-eyebrow{color:var(--sy-accent-2);font-weight:650;letter-spacing:.07em}
.sy-badge{border-radius:var(--sy-r-pill)}

/* --- Selecteur de profil dans un formulaire : trois grandes cartes ---------
   C'est la premiere question posee, et elle se repond en un clic. */
.sy-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:8px 0 26px}
.sy-choice__item{position:relative}
.sy-choice__item input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;width:100%;height:100%}
.sy-choice__box{display:flex;flex-direction:column;gap:6px;height:100%;padding:20px 18px;border:1.5px solid var(--sy-border);border-radius:var(--sy-r);background:var(--sy-surface);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.sy-choice__item input:hover + .sy-choice__box{border-color:var(--sy-border-2);transform:translateY(-2px)}
.sy-choice__item input:checked + .sy-choice__box{border-color:var(--sy-accent);box-shadow:0 0 0 3px var(--sy-accent-soft)}
.sy-choice__item input:focus-visible + .sy-choice__box{outline:2px solid var(--sy-accent);outline-offset:2px}
.sy-choice__t{font-size:16px;font-weight:640;line-height:1.3}
.sy-choice__d{font-size:13.5px;line-height:1.5;color:var(--sy-text-2)}
@media (max-width:760px){.sy-choice{grid-template-columns:1fr;gap:10px}}

/* --- Le formulaire, version large et respirante ---------------------------- */
.sy-formcard{padding:30px;border:1px solid var(--sy-border);border-radius:var(--sy-r);background:var(--sy-surface);box-shadow:var(--sy-shadow)}
.sy-formcard > h2:first-child,.sy-formcard > h3:first-child{margin-top:0}
.fluentform .ff-el-group{margin-bottom:18px}
.fluentform input[type="text"],.fluentform input[type="email"],.fluentform input[type="tel"],
.fluentform input[type="number"],.fluentform textarea,.fluentform select{
  border-radius:var(--sy-r-s)!important;padding:13px 15px!important;font-size:16px!important;
  border:1.5px solid var(--sy-border)!important;background:var(--sy-surface)!important
}
.fluentform .ff-btn-submit{
  border-radius:var(--sy-r-pill)!important;padding:14px 30px!important;font-size:16px!important;
  font-weight:620!important;background:var(--sy-accent-fill)!important;color:#fff!important;
  border:0!important;width:100%!important;cursor:pointer
}
.fluentform .ff-btn-submit:hover{filter:brightness(1.06)}
.fluentform .ff-el-progress-bar{background:var(--sy-accent-fill)!important}
.fluentform .ff-el-progress{background:var(--sy-surface-3)!important;border-radius:var(--sy-r-pill)!important}
.fluentform .ff-message-success{border-radius:var(--sy-r)!important;background:var(--sy-accent-soft)!important;color:var(--sy-accent)!important;border:1px solid var(--sy-accent)!important;padding:18px 20px!important;font-weight:550}

/* --- Rappel sous le formulaire : ce que ca engage, en une ligne ------------- */
.sy-formnote{margin:14px 0 0;font-size:13.5px;line-height:1.5;color:var(--sy-text-2);text-align:center}


/* ==========================================================================
   v3.10.0 : en-tete fixe, rythme typographique, en-tete de page des articles
   ========================================================================== */

/* --- En-tete fixe ---------------------------------------------------------
   Le menu suivait la page et disparaissait des le premier defilement, donc le
   bouton principal n'etait visible qu'en haut. Il reste desormais accessible
   partout. Le fond est translucide et se densifie au defilement, la hauteur se
   reduit, et une ombre apparait pour detacher l'en-tete du contenu.
   `position: sticky` plutot que `fixed` : aucun calcul de decalage, aucun
   contenu masque sous l'en-tete, et rien a corriger sur mobile.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(var(--sy-bg-rgb), .82);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.site-header.sy-scrolled {
  background: rgba(var(--sy-bg-rgb), .96);
  border-bottom-color: var(--sy-border);
  box-shadow: 0 1px 12px rgba(17, 22, 20, .06);
}
.site-header.sy-scrolled .main-navigation .main-nav > ul > li > a,
.site-header.sy-scrolled .site-logo img {
  transition: padding .2s ease, height .2s ease;
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* Une ancre interne ne doit pas atterrir sous l'en-tete fixe. */
:target { scroll-margin-top: 96px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header { transition: none; }
}

/* --- Rythme typographique -------------------------------------------------
   Une hierarchie molle fait « fade » autant qu'une couleur molle. On creuse
   l'ecart entre les niveaux, sans toucher au corps de texte.
   -------------------------------------------------------------------------- */
.entry-content h2,
.page-title { letter-spacing: -.015em; }
.entry-content h2 { font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.35rem); line-height: 1.18; margin-top: 2.4em; }
.entry-content h3 { font-size: clamp(1.18rem, 1.02rem + .55vw, 1.45rem); line-height: 1.28; margin-top: 1.9em; }
.entry-content p  { line-height: 1.72; }

/* --- En-tete de la page des articles (voir safeyield_blog_index_title) ----- */
.sy-blog-header { margin-bottom: 2rem; }
.sy-blog-header .page-title { margin-bottom: .4rem; }
.sy-blog-header .sy-term-desc p { color: var(--sy-text-2); margin: 0; max-width: 62ch; }