/* ============================================================
   Ysée : calque aquarelle (TEST page d'accueil)
   ------------------------------------------------------------
   Feuille ADDITIVE, chargée après homepage.css sur "/" uniquement.
   Elle ne modifie aucun fichier legacy : retirer le <link> suffit
   à revenir à l'état précédent.

   Principes :
   1. Deux couleurs de marque seulement, corail (encre) + indigo
      du logo (touches). Le reste est du papier.
   2. Le papier est une matière, pas un aplat : grain + fibres.
   3. Pas d'ombre noire ni d'ombre dure. Des halos de pigment.
   4. Les bords se déchirent, ils ne se coupent pas.
   5. Les apparitions infusent, elles ne glissent pas.
   ============================================================ */

:root {
  /* ---------- Encre : corail (inchangé, c'est la marque) ---------- */
  --wc-coral:        #FF6B6B;
  --wc-coral-deep:   #C44536;
  --wc-coral-wash:   #FFC7B4;
  --wc-coral-veil:   #FFE5D9;

  /* ---------- Touche : indigo échantillonné sur le logo ---------- */
  --wc-indigo:       #3E4387;
  --wc-indigo-soft:  #6B70AE;
  --wc-indigo-wash:  rgba(62, 67, 135, 0.10);

  /* ---------- Papier ---------- */
  --wc-paper:        #FDFBF7;  /* fond de page */
  --wc-paper-warm:   #FBF6EF;  /* surfaces posées sur le papier */
  --wc-paper-edge:   #F0E9DE;  /* filets, séparations */

  /* ---------- Texte ---------- */
  --wc-ink:          #2D2D2A;
  --wc-ink-soft:     #57544E;
  --wc-ink-faint:    #8A857D;

  /* ---------- Halos (remplacent toutes les ombres) ----------
     Diffusion large, opacité faible, teinte pigmentée.
     L'aquarelle n'ombre pas, elle irradie. */
  --wc-halo-sm:      0 6px 24px -8px rgba(196, 69, 54, 0.16);
  --wc-halo-md:      0 18px 50px -18px rgba(196, 69, 54, 0.22);
  --wc-halo-lg:      0 34px 90px -30px rgba(196, 69, 54, 0.26);
  --wc-halo-indigo:  0 24px 70px -26px rgba(62, 67, 135, 0.30);

  /* ---------- Rythme d'infusion ---------- */
  --wc-infuse: 900ms cubic-bezier(0.16, 0.84, 0.34, 1);
}

/* ============================================================
   1. LE PAPIER
   ------------------------------------------------------------
   Deux couches superposées : un grain fin (240px) qui donne le
   toucher, des fibres basse fréquence (600px) qui cassent la
   régularité du grain. Sans la seconde, l'oeil lit une trame.
   ============================================================ */

body {
  background-color: var(--wc-paper);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2147483000;      /* au-dessus de la navbar (1000) */
  pointer-events: none;      /* purement décoratif */
  background-image:
    url('/assets/watercolor/paper-grain.svg'),
    url('/assets/watercolor/paper-fibers.svg');
  background-size: 240px 240px, 600px 600px;
  background-repeat: repeat, repeat;
  mix-blend-mode: multiply;
  opacity: 0.30;
}

/* Les sections en blanc pur cassent l'illusion du papier : on les
   réchauffe. Sélecteurs spécifiques + !important car ces règles
   viennent d'un <style> inline plus bas dans le DOM.

   Elles deviennent transparentes plutôt que repeintes en couleur papier.
   La nuance compte : le lavis du hero déborde volontairement sous sa
   propre section, et un aplat opaque, même de la bonne couleur, le
   recouvrait pile à la limite entre les deux blocs. D'où l'arête
   horizontale nette qu'on voyait sous le hero. En laissant voir le
   papier du body, le lavis finit de s'éteindre tout seul. */
.ysee-showcase-section,
.ysee-testimonials-section,
.ysee-human-section,
.ysee-faq-section,
.ysee-founder-section,
.ysee-pricing-pro-section,
.ysee-trust-section { background: transparent !important; }

/* "Notre mission" était un aplat pêche plein cadre : un aplat de
   couleur saturée est exactement ce que l'aquarelle ne fait pas.
   Il devient du papier, avec un lavis posé derrière le logo. */
.ysee-about-section {
  background: transparent !important;
  position: relative;
  isolation: isolate;
}
.ysee-about-title { color: var(--wc-ink) !important; }
.ysee-about-text strong { color: var(--wc-coral-deep) !important; }
.ysee-about-eyebrow { letter-spacing: 0.18em !important; font-size: 12px !important; }

/* Le halo derrière le logo : un vrai lavis à la place du disque flouté. */
.ysee-blob {
  background-color: transparent !important;
  filter: none !important;
  opacity: 0.5 !important;
  width: 620px !important;
  height: 620px !important;
  background-image: url('/assets/watercolor/wash-blob-coral.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  border-radius: 0 !important;
}

/* ============================================================
   2. TYPOGRAPHIE
   ------------------------------------------------------------
   Fraunces (serif à contraste modéré, axe WONK activé) sur les
   GROS titres uniquement. En dessous de ~28px elle perd en
   lisibilité : tout le reste, y compris les titres de cartes,
   reste en Inter.
   ============================================================ */

.ysee-hero-title,
.ysee-section-title,
.ysee-showcase-title,
.ysee-faq-title,
.ysee-about-title,
.ysee-human-title,
.ysee-testi-title,
.ysee-founder-title,
.ysee-cta-title,
.ysee-view-title,
.ysee-title,
.ysee-header-title,
.ysee-pricing-hero-title {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif !important;
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-weight: 600 !important;
  letter-spacing: -0.012em !important;
  line-height: 1.06 !important;
}

/* Fraunces a une chasse plus large qu'Inter : sans ce recalage,
   les titres de section passaient sur une ligne de plus. */
.ysee-section-title,
.ysee-faq-title,
.ysee-about-title,
.ysee-human-title,
.ysee-testi-title,
.ysee-founder-title,
.ysee-cta-title,
.ysee-view-title,
.ysee-title,
.ysee-pricing-hero-title {
  font-size: clamp(40px, 5vw, 64px) !important;
}

.ysee-showcase-title {
  font-size: clamp(30px, 4vw, 46px) !important;
}

.ysee-hero-title {
  font-size: clamp(38px, 4.6vw, 60px) !important;
  color: var(--wc-ink) !important;
}

/* Le titre "4 étapes..." était corail plein : trop de saturation
   sur un empattement. L'encre reprend la main, le corail se
   réserve au mot souligné. */
.ysee-title { color: var(--wc-ink) !important; }
.ysee-subtitle { color: var(--wc-ink-soft) !important; }

/* Le mot mis en avant du hero : pigment posé au pinceau derrière
   le mot, plutôt qu'une couleur de texte.

   Le trait est porté par le fond de l'élément, pas par un ::before
   en position absolue. La raison : sur certaines pages le fragment
   mis en avant n'est pas un mot mais une phrase entière (Lycées :
   « une orientation qui fait vraiment la différence »). Un ::before
   absolu oblige à empêcher le retour à la ligne, et le titre
   débordait alors de l'écran. Avec box-decoration-break: clone,
   chaque ligne reçoit son propre trait et le titre se coupe
   normalement. */
.ysee-hero-highlight {
  color: var(--wc-coral-deep) !important;
  background-image: url('/assets/watercolor/brush-underline.svg');
  background-repeat: no-repeat;
  background-position: 0 94%;
  background-size: 100% 0.28em;
  padding: 0 0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Titres de cartes : Inter, mais desserrés pour respirer avec
   les empattements des gros titres. */
.ysee-card-title,
.ysee-human-card-title,
.ysee-quote-title,
.ysee-trust-title {
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}

/* ============================================================
   3. HALOS (remplacement des ombres)
   ============================================================ */

/* Ombre dure décalée de la photo fondateur : supprimée. */
.ysee-founder-photo {
  box-shadow: var(--wc-halo-md) !important;
  border-radius: 0 !important;
  /* découpe main : le papier a été coupé aux ciseaux, pas au massicot */
  -webkit-mask-image: url('/assets/watercolor/torn-frame.svg');
  mask-image: url('/assets/watercolor/torn-frame.svg');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.ysee-card,
.ysee-human-card,
.ysee-testi-card,
.ysee-price-card,
.ysee-trust-item,
.ysee-faq-item,
.ysee-doc-card {
  box-shadow: var(--wc-halo-sm) !important;
  background: var(--wc-paper-warm) !important;
  border-color: transparent !important;
}

.ysee-icon-wrapper {
  box-shadow: 0 4px 18px -6px rgba(196, 69, 54, 0.20) !important;
  background: #FFFDFA !important;
}

.ysee-navbar {
  box-shadow: 0 1px 0 rgba(240, 233, 222, 0.9) !important;
  background-color: rgba(253, 251, 247, 0.92) !important;
}

/* Le survol ne translate plus : le pigment monte dans le papier. */
.ysee-card,
.ysee-human-card,
.ysee-testi-card,
.ysee-trust-item {
  transition: box-shadow var(--wc-infuse), background-color var(--wc-infuse) !important;
}
.ysee-card:hover,
.ysee-human-card:hover,
.ysee-testi-card:hover,
.ysee-trust-item:hover {
  transform: none !important;
  box-shadow: var(--wc-halo-md) !important;
  background: #FFF7F1 !important;
}

/* ============================================================
   4. BOUTONS
   ------------------------------------------------------------
   Le corail reste plein et saturé : c'est la seule zone de
   l'écran qui a le droit d'être franche.
   ============================================================ */

.ysee-btn-primary,
.ysee-hero-btn.ysee-btn-primary {
  box-shadow: 0 10px 30px -10px rgba(255, 107, 107, 0.55) !important;
  transition: box-shadow var(--wc-t, 0.35s) ease, background-color 0.35s ease !important;
}
.ysee-btn-primary:hover {
  box-shadow: 0 16px 44px -12px rgba(255, 107, 107, 0.65) !important;
}

/* Le CTA secondaire était noir pur. Il ne peut pas non plus être
   indigo : deux boutons côte à côte dans deux familles de couleur
   se lisent comme deux marques. Il devient donc le MÊME bouton que
   le primaire, en creux : même forme, même famille de pigment,
   simplement dilué. C'est la hiérarchie qui change, pas le ton. */
.ysee-btn-secondary,
.ysee-hero-btn.ysee-btn-secondary {
  background-color: rgba(255, 229, 217, 0.55) !important;
  color: var(--wc-coral-deep) !important;
  border: 1.5px solid rgba(196, 69, 54, 0.22) !important;
  box-shadow: none !important;
  transition: background-color 0.35s ease, border-color 0.35s ease,
              box-shadow 0.35s ease !important;
}
.ysee-btn-secondary:hover {
  background-color: rgba(255, 229, 217, 0.9) !important;
  border-color: rgba(196, 69, 54, 0.38) !important;
  box-shadow: var(--wc-halo-sm) !important;
}

/* Les deux CTA du hero doivent partager exactement la même
   géométrie, sinon ils ne se lisent pas comme une paire. Le legacy
   leur donne deux tailles de police différentes. */
.ysee-cta-wrapper .ysee-hero-btn {
  padding: 18px 35px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  min-width: 260px !important;
}

/* Le bandeau de preuve était collé aux deux boutons : il se lisait
   comme une étiquette accrochée au CTA plutôt que comme une
   respiration entre les deux. On l'isole des deux côtés, et on
   aère la ligne elle-même (interligne + séparateurs). */
.ysee-cta-wrapper {
  gap: 32px !important;
}
.ysee-b2c-action {
  gap: 20px !important;
}
.ysee-hero-rating-badge {
  margin-top: 0 !important;
  gap: 9px !important;
  row-gap: 6px !important;
  line-height: 1.6 !important;
}
.ysee-hero-rating-dot {
  opacity: 0.55;
}

/* Onglets du showcase : le noir #1B1B1B devient indigo. */
.ysee-tab-btn { background: rgba(240, 233, 222, 0.7) !important; }
.ysee-tab-btn.active {
  background: var(--wc-indigo) !important;
  border-color: var(--wc-indigo) !important;
  box-shadow: var(--wc-halo-indigo) !important;
}

/* ============================================================
   5. LA BANDE DE CHIFFRES
   ------------------------------------------------------------
   C'était un dégradé noir : la rupture la plus violente de la
   page. Elle devient un lavis d'indigo, bords déchirés en haut
   et en bas.
   ============================================================ */

.ysee-stats-section {
  /* Lavis, pas aplat : l'indigo reste une touche même sur toute la
     largeur. Le texte repasse en encre, comme sur du papier. */
  background:
    linear-gradient(148deg, #E9EAF4 0%, #DFE1F0 45%, #EAE6EE 100%) !important;
  color: var(--wc-ink) !important;
  position: relative;
  padding: 96px 20px 100px !important;
  /* deux couches de masque : arête déchirée en haut, en bas, plein au milieu */
  -webkit-mask-image:
    url('/assets/watercolor/deckle-top-lg.svg'),
    linear-gradient(#000, #000),
    url('/assets/watercolor/deckle-bottom-lg.svg');
  mask-image:
    url('/assets/watercolor/deckle-top-lg.svg'),
    linear-gradient(#000, #000),
    url('/assets/watercolor/deckle-bottom-lg.svg');
  -webkit-mask-size: 1200px 52px, 100% calc(100% - 104px), 1200px 52px;
  mask-size: 1200px 52px, 100% calc(100% - 104px), 1200px 52px;
  -webkit-mask-position: top left, left 52px, bottom left;
  mask-position: top left, left 52px, bottom left;
  -webkit-mask-repeat: repeat-x, no-repeat, repeat-x;
  mask-repeat: repeat-x, no-repeat, repeat-x;
}

/* Lavis clair posé dans la bande : évite l'aplat mort. */
.ysee-stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Irrégularités du lavis : sans elles, la bande redevient un aplat. */
  background:
    radial-gradient(55% 130% at 16% 28%, rgba(62, 67, 135, 0.14), transparent 62%),
    radial-gradient(45% 120% at 78% 74%, rgba(255, 155, 138, 0.16), transparent 64%),
    radial-gradient(40% 100% at 50% 10%, rgba(255, 255, 255, 0.55), transparent 70%);
  pointer-events: none;
}
.ysee-stats-grid { position: relative; }

.ysee-stat-val {
  font-family: 'Fraunces', Georgia, serif !important;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-weight: 600 !important;
  color: var(--wc-indigo) !important;
  letter-spacing: -0.02em;
}
.ysee-stat-desc {
  opacity: 1 !important;
  color: var(--wc-ink-soft) !important;
}

/* ============================================================
   6. LAVIS DE FOND
   ------------------------------------------------------------
   Des taches hors-champ, jamais un motif identifiable : le fond
   ne doit rien raconter, seulement colorer l'air.
   ============================================================ */

.ysee-showcase-section,
.ysee-steps-section,
.ysee-founder-section {
  position: relative;
  isolation: isolate;
}

.ysee-showcase-section::before,
.ysee-steps-section::before,
.ysee-founder-section::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Opacités volontairement basses : au-dessus de ~0.2 le lavis cesse
   d'être de l'air et devient un fond rose qui mange le texte. */
.ysee-showcase-section::before {
  background-image: url('/assets/watercolor/wash-blob-coral.svg');
  width: 820px; height: 820px;
  top: -300px; right: -420px;
  opacity: 0.16;
}

.ysee-steps-section::before {
  background-image: url('/assets/watercolor/wash-blob-indigo.svg');
  width: 700px; height: 700px;
  bottom: -320px; left: -380px;
  opacity: 0.15;
}

.ysee-founder-section::before {
  background-image: url('/assets/watercolor/wash-blob-coral.svg');
  width: 740px; height: 740px;
  top: -240px; left: -380px;
  opacity: 0.14;
}

/* Le trait pointillé qui relie les 4 étapes : devient un lavis. */
.ysee-grid::before {
  border-top: none !important;
  height: 3px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 155, 138, 0.45) 18%,
    rgba(196, 69, 54, 0.30) 50%,
    rgba(255, 155, 138, 0.45) 82%,
    transparent 100%) !important;
  filter: blur(1.5px);
}

/* ============================================================
   7. SÉPARATEURS LAVIS
   ------------------------------------------------------------
   Classe utilitaire à poser entre deux sections.
   ============================================================ */

.wc-divider {
  display: block;
  width: 100%;
  height: 120px;
  margin: 0;
  border: 0;
  background: url('/assets/watercolor/wash-divider.svg') center / 1400px 180px no-repeat;
  opacity: 0.62;
  pointer-events: none;
}
.wc-divider-flip { transform: scaleX(-1); }

@media (max-width: 720px) {
  .wc-divider { height: 80px; background-size: 900px 120px; }
}

/* ============================================================
   8. HERO
   ------------------------------------------------------------
   L'image de fond EST l'aquarelle : on arrête de la recouvrir
   d'un dégradé pêche et on laisse le papier se fondre dans la
   section suivante.
   ============================================================ */

.ysee-hero-revisited {
  background: var(--wc-paper) !important;
  padding-bottom: 150px !important;
}

/* Voile : lisibilité du texte à gauche, image intacte à droite.
   Un dégradé horizontal plutôt que vertical, parce que le texte
   est calé à gauche et que le sujet du tableau est à droite. */
.ysee-hero-veil {
  background: linear-gradient(100deg,
    rgba(253, 251, 247, 0.92) 0%,
    rgba(253, 251, 247, 0.80) 34%,
    rgba(253, 251, 247, 0.30) 62%,
    rgba(253, 251, 247, 0.10) 100%) !important;
}

/* Le bas du hero se dissout dans le papier au lieu de s'arrêter net. */
.ysee-hero-media::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 220px;
  background: linear-gradient(180deg, rgba(253, 251, 247, 0) 0%, var(--wc-paper) 88%);
  pointer-events: none;
}

.ysee-hero-tagline {
  color: var(--wc-coral-deep) !important;
  letter-spacing: 0.18em !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.ysee-hero-description { color: var(--wc-ink-soft) !important; }

/* ============================================================
   9. INFUSION
   ------------------------------------------------------------
   Les blocs ne montent pas, ils se révèlent : le pigment prend
   dans le papier. Flou qui se résorbe + montée d'opacité longue.
   Le décalage vertical est volontairement minuscule (8px).
   ============================================================ */

.wc-infuse {
  opacity: 0;
  filter: blur(7px);
  transform: translateY(8px) scale(0.995);
  transition:
    opacity var(--wc-infuse),
    filter var(--wc-infuse),
    transform var(--wc-infuse);
  will-change: opacity, filter, transform;
}

.wc-infuse.wc-in {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* Décalages en cascade pour les grilles : l'eau se propage. */
.wc-infuse-d1 { transition-delay: 90ms; }
.wc-infuse-d2 { transition-delay: 180ms; }
.wc-infuse-d3 { transition-delay: 270ms; }
.wc-infuse-d4 { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .wc-infuse {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   10. PIED DE PAGE
   ------------------------------------------------------------
   En attendant l'image de footer aquarelle, on prépare la place :
   arête déchirée en haut + lavis. L'image viendra en background.
   ============================================================ */

.ysee-footer-section {
  position: relative;
  background: linear-gradient(180deg, #FBF6EF 0%, #F6EDE4 100%) !important;
  color: var(--wc-ink) !important;
  padding-top: 100px !important;
  -webkit-mask-image: url('/assets/watercolor/deckle-top.svg'), linear-gradient(#000, #000);
  mask-image: url('/assets/watercolor/deckle-top.svg'), linear-gradient(#000, #000);
  -webkit-mask-size: 1200px 34px, 100% calc(100% - 34px);
  mask-size: 1200px 34px, 100% calc(100% - 34px);
  -webkit-mask-position: top left, left 34px;
  mask-position: top left, left 34px;
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-repeat: repeat-x, no-repeat;
}

.ysee-footer-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/watercolor/wash-blob-coral.svg') right -260px bottom -340px / 720px 720px no-repeat;
  opacity: 0.18;
  pointer-events: none;
}
.ysee-footer-container { position: relative; }

/* Le pied de page était blanc sur charbon. Sur papier clair, tout ce
   qui était blanc devient invisible : on repasse la hiérarchie
   complète en encre. */
.ysee-footer-title,
.ysee-footer-link,
.ysee-footer-list li {
  color: var(--wc-ink) !important;
}
.ysee-footer-tagline,
.ysee-footer-bottom {
  color: var(--wc-ink-faint) !important;
}
.ysee-footer-link { transition: color 0.25s ease !important; }
.ysee-footer-link:hover { color: var(--wc-coral-deep) !important; }

.ysee-footer-container {
  border-bottom-color: rgba(196, 69, 54, 0.14) !important;
}

/* Le pied de page était en flex avec retour à la ligne : la
   cinquième colonne (« Nous contacter ») repassait seule sur une
   deuxième ligne, et l'espacement des colonnes dépendait de la
   longueur des libellés. En grille, les cinq colonnes tiennent leur
   place et le pied de page est le même sur toutes les pages. */
.ysee-footer-container {
  display: grid !important;
  grid-template-columns: 1.5fr repeat(3, 1fr) 1.1fr !important;
  gap: 40px !important;
  align-items: start !important;
}
@media (max-width: 1024px) {
  .ysee-footer-container { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .ysee-footer-container { grid-template-columns: 1fr !important; gap: 28px !important; }
}

.ysee-footer-logo-img {
  filter: none !important;   /* l'inversion blanche n'a plus de sens */
}

.ysee-contact-btn,
.ysee-social-link {
  background-color: rgba(196, 69, 54, 0.08) !important;
  color: var(--wc-coral-deep) !important;
}
.ysee-contact-btn:hover,
.ysee-social-link:hover {
  background-color: var(--wc-coral) !important;
  color: #FFFFFF !important;
}
.ysee-social-link:hover { transform: none !important; }

/* ============================================================
   11. BORDS DÉCOUPÉS
   ------------------------------------------------------------
   Le legacy pose partout le même rayon uniforme (16px, 12px...) :
   des rectangles arrondis parfaitement réguliers, qui sont ce qui
   "casse" le plus l'illusion du papier.

   On ne peut pas masquer chaque carte (le masque coupe les ombres
   et coûte cher au scroll). On utilise donc la forme elliptique du
   border-radius : quatre coins de rayons différents, horizontaux
   et verticaux dissociés. Le résultat est une découpe à la main,
   pas un arrondi de gabarit.

   Trois variantes en rotation : avec une seule, l'oeil retrouve
   immédiatement la répétition et le gain disparaît.
   ============================================================ */

.ysee-card,
.ysee-testi-card,
.ysee-human-card,
.ysee-trust-item,
.ysee-faq-item,
.ysee-price-card,
.ysee-doc-card,
.ysee-showcase-visual {
  border-radius: 26px 20px 30px 22px / 22px 30px 20px 28px !important;
}

.ysee-grid > *:nth-child(3n + 2),
.ysee-testi-grid > *:nth-child(3n + 2),
.ysee-human-grid > *:nth-child(3n + 2),
.ysee-trust-grid > *:nth-child(3n + 2) {
  border-radius: 20px 30px 22px 28px / 30px 22px 28px 20px !important;
}

.ysee-grid > *:nth-child(3n),
.ysee-testi-grid > *:nth-child(3n),
.ysee-human-grid > *:nth-child(3n),
.ysee-trust-grid > *:nth-child(3n) {
  border-radius: 30px 24px 20px 32px / 24px 28px 32px 22px !important;
}

/* Le cadre navigateur du showcase garde ses angles : c'est un
   objet technique, l'arrondir le rendrait faux. Seule son ombre
   noire devient un halo. */
.ysee-browser {
  box-shadow: var(--wc-halo-md) !important;
  border-color: rgba(196, 69, 54, 0.10) !important;
}

/* ============================================================
   12. SECTION "4 ÉTAPES"
   ------------------------------------------------------------
   Trois défauts dans le legacy :
   - la pastille de durée est une pilule qui passe sur deux lignes
     quand le texte est long ("30 MIN"), ce qui décale le titre de
     cette carte et casse l'alignement des quatre colonnes ;
   - le corail plein de la pastille en fait le point le plus fort
     de la carte, avant le titre ;
   - le texte centré sur une colonne étroite produit des lignes
     très déchiquetées.
   ============================================================ */

/* Pastille : une seule ligne, toujours, et un pigment dilué.
   Deux feuilles legacy la stylent en même temps, l'une en pilule
   (homepage.css), l'autre en disque de 45px (common.css) : d'où le
   rond rose qui dépassait derrière le texte. On tranche. */
.ysee-step-number {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  background-color: rgba(255, 229, 217, 0.75) !important;
  color: var(--wc-coral-deep) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  padding: 5px 13px !important;
  margin-bottom: 18px !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
}

/* Hauteur commune : c'est ce qui fait que les quatre titres
   démarrent sur la même ligne, quel que soit leur contenu. */
.ysee-steps-section .ysee-card-title {
  font-size: 21px !important;
  line-height: 1.3 !important;
  margin-bottom: 14px !important;
  min-height: calc(2 * 1.3em);
  display: flex;
  align-items: flex-start;   /* les quatre titres démarrent sur la même ligne */
  justify-content: center;
  text-wrap: balance;
}

.ysee-steps-section .ysee-card-text {
  font-size: 14.5px !important;
  color: var(--wc-ink-soft) !important;
  line-height: 1.62 !important;
  max-width: 30ch;
  margin: 0 auto !important;
  text-wrap: pretty;
}

.ysee-steps-section .ysee-card {
  padding: 36px 22px 34px !important;
  justify-content: flex-start;
}

.ysee-steps-section .ysee-icon-wrapper {
  margin-bottom: 18px !important;
}

/* Le trait de liaison passait derrière les icônes ET derrière les
   pastilles. On le recale sur le centre exact des icônes. */
.ysee-steps-section .ysee-grid::before {
  top: 76px !important;
}

/* ============================================================
   13. TÉMOIGNAGES
   ------------------------------------------------------------
   Le legacy empile le contenu sans structure : étoiles, titre,
   bloc de texte brut, auteur. Rien n'aligne les trois cartes
   entre elles. On pose une vraie grille interne.
   ============================================================ */

.ysee-testi-card {
  padding: 32px 28px 28px !important;
  gap: 0;
}

/* Étoiles + logo de la plateforme sur une ligne alignée. */
.ysee-stars {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 16px !important;
  letter-spacing: 1px;
  margin-bottom: 14px !important;
}
.ysee-stars img {
  height: 16px !important;
  width: auto !important;
  opacity: 0.85;
}

/* Le titre de citation portait un min-height de 56px, insuffisant
   dès qu'il passe sur deux lignes. Trois lignes réservées : les
   trois citations démarrent alors au même endroit, quelle que soit
   la longueur du titre. */
.ysee-quote-title {
  font-size: 18px !important;
  line-height: 1.4 !important;
  min-height: calc(3 * 1.4em) !important;
  display: flex;
  align-items: flex-start;   /* les trois titres démarrent sur la même ligne */
  margin-bottom: 14px !important;
  color: var(--wc-coral-deep) !important;
  text-wrap: balance;
}
.ysee-quote-title a { color: inherit !important; text-decoration: none !important; }

/* Une citation se lit mieux avec une marque d'entrée qu'avec des
   guillemets droits noyés dans le texte. */
.ysee-quote-text {
  position: relative;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  color: var(--wc-ink-soft) !important;
  padding-left: 16px !important;
  margin-bottom: 24px !important;
  border-left: 2px solid rgba(196, 69, 54, 0.18);
  text-wrap: pretty;
}

.ysee-author {
  border-top: 1px solid rgba(196, 69, 54, 0.14) !important;
  padding-top: 18px !important;
  margin-top: auto !important;   /* colle le bloc auteur en bas */
}
.ysee-avatar {
  overflow: hidden;
  box-shadow: 0 3px 12px -4px rgba(196, 69, 54, 0.30);
  background-color: var(--wc-coral-veil) !important;
}
.ysee-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
.ysee-author-info h4 { font-size: 15px !important; }
.ysee-author-info p { color: var(--wc-ink-faint) !important; font-size: 12.5px !important; }

/* En-tête de section : la note et les sources étaient posées en
   styles inline, sans alignement. */
.ysee-testi-score {
  color: #E0A11B;
  font-size: 22px;
  letter-spacing: 2px;
  margin-top: 8px;
}
.ysee-testi-sources {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  font-size: 14px;
  color: var(--wc-ink-faint);
}
.ysee-testi-sources a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--wc-ink-soft);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(196, 69, 54, 0.25);
  padding-bottom: 1px;
}
.ysee-testi-sources a:hover { color: var(--wc-coral-deep); }
.ysee-testi-sources img { height: 16px; width: auto; display: block; }

/* ============================================================
   14. BANDEAU DE CONFIANCE
   ------------------------------------------------------------
   Les deux filets gris 1px du legacy (border-top / border-bottom)
   traversaient toute la largeur : c'est la "ligne bizarre". Un
   filet net est exactement ce que le reste de la page évite.
   ============================================================ */

.ysee-trust-section {
  border-top: none !important;
  border-bottom: none !important;
}

/* Les cinq blocs ne s'alignaient pas : la grille est en
   flex-start, et le logo RGPD ne porte pas la classe .ysee-trust-icon
   (donc pas de hauteur imposée). On étire les colonnes et on
   réserve la même zone d'image partout. */
.ysee-trust-grid {
  align-items: stretch !important;
}
.ysee-trust-item {
  padding: 26px 18px !important;
  justify-content: flex-start !important;
}
.ysee-trust-item img {
  height: 40px !important;
  margin-top: 0 !important;   /* .ysee-icon-stripe décalait le seul logo Stripe */
  width: auto !important;
  max-width: 90% !important;
  object-fit: contain !important;
  margin-bottom: 15px !important;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.ysee-trust-item:hover img { filter: grayscale(0%); opacity: 1; }
.ysee-trust-name { margin-bottom: 6px !important; }
.ysee-trust-desc {
  color: var(--wc-ink-faint) !important;
  text-wrap: pretty;
}
.ysee-trust-title { color: var(--wc-coral-deep) !important; }

/* ============================================================
   15. GARDE-FOUS
   ============================================================ */

/* Sur petit écran, le grain fixe coûte cher au scroll et les
   masques déchirés se lisent mal : on allège. */
@media (max-width: 720px) {
  body::after { opacity: 0.20; }
  .ysee-stats-section {
    -webkit-mask-size: 900px 38px, 100% calc(100% - 76px), 900px 38px;
    mask-size: 900px 38px, 100% calc(100% - 76px), 900px 38px;
    -webkit-mask-position: top left, left 38px, bottom left;
    mask-position: top left, left 38px, bottom left;
  }
  .ysee-showcase-section::before,
  .ysee-steps-section::before,
  .ysee-founder-section::before { opacity: 0.28; }
}

/* ============================================================
   14. LES PAGES SECONDAIRES
   ------------------------------------------------------------
   Lycéens, étudiants, conseillers, lycées, organismes, entreprises,
   enseignement supérieur, coachs partenaires, tarifs, organisations.

   Ces pages partagent la quasi-totalité de leurs organes avec
   l'accueil (titres, cartes, boutons, FAQ, pied de page) : tout
   cela est déjà repeint par les sections précédentes. Ce qui suit
   ne traite que ce qui leur est propre.

   Règle inchangée : la géométrie et les cibles de clic ne bougent
   pas, seule la matière change.
   ============================================================ */

/* L'ouverture des pages secondaires était un dégradé radial pêche
   vers blanc, plein cadre. Un dégradé plein cadre n'est pas un
   lavis : il n'a ni bord ni densité, il tourne juste autour du
   blanc. On le remplace par le papier, avec deux vraies flaques de
   pigment posées hors cadre pour qu'on ne voie pas où elles
   commencent. */
.ysee-premium-hero,
.ysee-coaches-hero {
  /* Transparent et non « papier » : certaines pages posent leur
     propre dégradé sur un conteneur plus large que le hero. Un
     papier opaque ici dessinerait un rectangle plus clair au milieu
     de ce dégradé, avec deux arêtes verticales bien visibles. On
     laisse simplement voir le papier du body. */
  background: transparent !important;
  position: relative;
  isolation: isolate;
}

/* Les conteneurs de page qui peignent leur propre fond (dégradé
   blanc vers gris) recouvraient le papier. */
.ysee-coaches-page,
.contact-page-bg,
.ysee-page-wrapper,
.ysee-pro-page,
.ysee-esr-page,
.ysee-corp-page,
.ysee-etudiant-page,
.ysee-lycee-page,
.ysee-asso-page,
.ysee-pricing-page { background: transparent !important; }

/* Les titres de ces heros n'ont pas de classe : ils sont ciblés par
   le sélecteur de leur section. Sans cette règle, ils restent en
   Inter alors que tout le reste de la page passe en Fraunces. */
.ysee-coaches-hero h1,
.ysee-premium-hero h1,
.ysee-coaches-infobox h2 {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif !important;
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-weight: 600 !important;
  letter-spacing: -0.012em !important;
  line-height: 1.06 !important;
  color: var(--wc-ink) !important;
}
/* Le calque de lavis prend toute la largeur de la fenêtre, pas
   celle du hero. Ces heros sont centrés et étroits (800 à 1000px) :
   un calque à leur largeur coupait le lavis net sur ses deux bords
   verticaux, et l'indigo dessinait une colonne froide au milieu du
   papier. Un lavis n'a pas d'arête : il doit sortir du cadre. */
.ysee-premium-hero::before,
.ysee-coaches-hero::before {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -30%;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: -1;
  pointer-events: none;
  background-image:
    url('/assets/watercolor/wash-blob-coral.svg'),
    url('/assets/watercolor/wash-blob-indigo.svg');
  background-position: right -180px top -220px, left -260px bottom -180px;
  background-size: 820px 820px, 640px 640px;
  background-repeat: no-repeat;
  opacity: 0.42;
  /* Une flaque plus grande que son calque est coupée net par le bord
     du calque : c'est l'arête horizontale qu'on voyait sous le hero,
     à la jonction avec la section suivante. Le calque se dissout donc
     sur son dernier tiers, pour que le lavis n'ait plus de fin. */
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%, #000 58%, rgba(0, 0, 0, 0.55) 78%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    #000 0%, #000 58%, rgba(0, 0, 0, 0.55) 78%, transparent 100%);
}

/* Les calques en 100vw ci-dessus ne doivent jamais provoquer de
   barre de défilement horizontale. clip (et non hidden) n'ouvre pas
   de contexte de défilement : les ancres #faq continuent de marcher. */
html,
body { overflow-x: clip; }

/* Les bandes de section alternaient blanc pur et pêche très clair
   pour se séparer les unes des autres. Sur du papier, cette
   alternance redevient une suite de rectangles. Les sections
   passent en papier, et la séparation est portée par le lavis
   (.wc-divider) et par l'espacement, comme sur l'accueil. */
.ysee-full-section,
.ysee-full-section[style*="#FFF8F0"],
.ysee-full-section[style*="#FFFFFF"],
.ysee-full-section[style*="#ffffff"],
.ysee-full-section[style*="#fff"],
.ysee-full-section[style*="#FDFCF9"],
.ysee-bg-light {
  background: transparent !important;
}

/* Une section sur deux garde une différence de valeur, sinon la
   page devient une seule coulée sans respiration. Mais le lavis ne
   peut pas être posé sur le fond de la section : il s'arrêterait
   net sur ses deux bords horizontaux, et un lavis à bord droit est
   exactement le bandeau qu'on cherche à supprimer. On le porte donc
   sur un calque en dessous du contenu, avec un masque qui l'éteint
   en haut et en bas : on ne peut plus dire où la section commence. */
.ysee-full-section:nth-of-type(even) {
  position: relative;
  isolation: isolate;
}
.ysee-full-section:nth-of-type(even)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(70% 90% at 12% 0%, rgba(255, 229, 217, 0.55) 0%, rgba(255, 229, 217, 0) 68%),
    radial-gradient(60% 80% at 92% 100%, rgba(62, 67, 135, 0.07) 0%, rgba(62, 67, 135, 0) 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}

/* Cartes de bénéfice et de fonctionnalité : papier chaud, halo de
   pigment à la place de l'ombre grise, bord qui se réchauffe au
   survol. Mêmes dimensions, même rayon.

   Attention : .ysee-feature est une LIGNE de liste sur la page
   Tarifs, pas une carte. Elle n'est donc pas dans ce groupe. */
.ysee-benefit-card,
.ysee-lycee-feature,
.ysee-coaches-infobox {
  background: var(--wc-paper-warm) !important;
  border-color: var(--wc-paper-edge) !important;
  box-shadow: var(--wc-halo-sm) !important;
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Le panneau de capture d'écran avait reçu ce même traitement de
   carte. C'était une erreur : il contient déjà une carte (le cadre
   navigateur), et sa grille n'a aucun rembourrage, donc le texte
   venait buter contre l'arête. Deux cartes emboîtées, un texte
   collé au bord. Le panneau redevient donc ce qu'il est : du texte
   et une capture posés sur le papier de la section. */
.ysee-tab-panel,
.ysee-panel-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* La colonne de texte respire, et la ligne de lecture s'arrête
   avant la capture au lieu de courir jusqu'à elle. */
.ysee-panel-content {
  gap: clamp(36px, 5vw, 72px) !important;
  align-items: center !important;
}
.ysee-panel-text { max-width: 46ch; }
.ysee-panel-text h3 {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif !important;
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-weight: 600 !important;
  font-size: clamp(26px, 2.6vw, 34px) !important;
  letter-spacing: -0.012em !important;
  line-height: 1.12 !important;
  color: var(--wc-ink) !important;
  margin-bottom: 16px !important;
}
.ysee-panel-text > p {
  color: var(--wc-ink-soft) !important;
  line-height: 1.7 !important;
  margin-bottom: 28px !important;
}
.ysee-panel-list li {
  align-items: flex-start !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
  line-height: 1.65 !important;
  color: var(--wc-ink-soft) !important;
}
.ysee-panel-list li strong { color: var(--wc-ink) !important; }
.ysee-benefit-card:hover,
.ysee-lycee-feature:hover {
  box-shadow: var(--wc-halo-md) !important;
  border-color: rgba(196, 69, 54, 0.24) !important;
}

/* Le bloc du fondateur était une carte blanc pur posée sur une
   bande pêche : deux rectangles empilés. Il passe en papier chaud
   avec un halo de pigment, comme toutes les autres cartes. */
.ysee-founder-container,
.ysee-founder-grid,
.ysee-quote-card,
.ysee-testi-card {
  background: var(--wc-paper-warm) !important;
  border: 1px solid var(--wc-paper-edge) !important;
  box-shadow: var(--wc-halo-md) !important;
}

/* Les pastilles d'icônes étaient des carrés parfaitement arrondis,
   c'est-à-dire la forme la moins aquarelle qui soit. Elles
   deviennent des touches irrégulières, sans changer de taille ni
   déplacer l'icône. Une sur deux penche dans l'autre sens : deux
   formes identiques côte à côte se reliraient comme un motif. */
.ysee-benefit-icon,
.ysee-lycee-feature-icon,
.ysee-price-card:not(.ysee-card-featured) .ysee-plan-icon,
.ysee-step-number {
  background-color: transparent !important;
  background-image: radial-gradient(circle at 34% 28%, rgba(255, 155, 138, 0.55) 0%, rgba(255, 229, 217, 0.9) 58%, rgba(255, 229, 217, 0.35) 100%) !important;
  border-radius: 58% 42% 49% 51% / 47% 56% 44% 53% !important;
  color: var(--wc-coral-deep) !important;
}
.ysee-benefit-card:nth-child(even) .ysee-benefit-icon,
.ysee-feature:nth-child(even) .ysee-lycee-feature-icon {
  border-radius: 44% 56% 53% 47% / 55% 45% 55% 45% !important;
}

/* La capture d'écran dans son cadre de navigateur : le chrome gris
   et les trois pastilles rouge, jaune et verte étaient les seules
   couleurs de la page à ne rien vouloir dire. Le cadre devient du
   papier, et les pastilles trois touches de la même encre, de plus
   en plus diluées. La capture, elle, n'est pas touchée. */
.ysee-browser {
  background: var(--wc-paper-warm) !important;
  border-color: var(--wc-paper-edge) !important;
  box-shadow: var(--wc-halo-md) !important;
}
.ysee-browser-bar {
  background: rgba(240, 233, 222, 0.8) !important;
  border-bottom-color: var(--wc-paper-edge) !important;
}
.ysee-url-bar {
  background: var(--wc-paper-warm) !important;
  color: var(--wc-ink-soft) !important;
}
.ysee-dot { background: rgba(196, 69, 54, 0.55) !important; }
.ysee-dot:nth-child(2) { background: rgba(196, 69, 54, 0.34) !important; }
.ysee-dot:nth-child(3) { background: rgba(196, 69, 54, 0.18) !important; }

/* Les onglets d'audience (Tarifs) et de fonctionnalités. Le bouton
   actif garde un contraste plein : c'est lui qui dit où on est. */
.ysee-tab-btn {
  border-color: var(--wc-paper-edge) !important;
  color: var(--wc-ink-soft) !important;
}
.ysee-tab-btn.active {
  color: #FFFFFF !important;
  border-color: transparent !important;
}

/* Les coches des listes de fonctionnalités : le vert était une
   troisième couleur, présente 142 fois sur ces pages. */
.ysee-check { color: var(--wc-coral-deep) !important; }

/* Les titres de section des pages secondaires étaient composés en
   corail plein, à 60px. À cette taille, le corail cesse d'être un
   accent et devient un aplat : le titre crie au lieu de porter. On
   revient à l'encre, et l'accent reste réservé aux fragments mis en
   valeur dans le titre (.ysee-hero-highlight), comme sur l'accueil. */
.ysee-section-title,
.ysee-view-title,
.ysee-showcase-title { color: var(--wc-ink) !important; }

/* Le sous-titre de vue et la description de hero suivent l'encre
   du texte secondaire, comme sur l'accueil. */
.ysee-view-subtitle,
.ysee-section-subtitle,
.ysee-panel-text,
.ysee-plan-desc { color: var(--wc-ink-soft) !important; }

/* Cartes de prix : le prix lui-même reste l'information la plus
   contrastée de la page, on n'y touche pas. */
.ysee-price { color: var(--wc-ink) !important; }
.ysee-price-period { color: var(--wc-ink-soft) !important; }
.ysee-plan-name { color: var(--wc-ink) !important; }

/* Les boutons des cartes de prix étaient un dégradé corail vers
   orange. L'orange est une troisième couleur, et un dégradé sur un
   bouton se lit comme une bande, pas comme un pigment. Ils prennent
   le même traitement que les autres boutons pleins : corail de
   marque avec le grain du papier posé en soft-light. */
.ysee-price-card .ysee-btn-primary {
  background-color: var(--wc-coral-deep) !important;
  background-image:
    url('/assets/watercolor/paper-grain.svg'),
    radial-gradient(110% 260% at 8% 0%, #FF7E70 0%, rgba(255, 126, 112, 0) 74%) !important;
  background-size: 240px 240px, auto !important;
  background-blend-mode: soft-light, normal !important;
}

/* La carte « Meilleur choix » était un dégradé corail vers orange :
   l'orange est une troisième couleur, et le corail est déjà partout
   sur la page, donc la carte censée se détacher se détachait mal.
   Elle prend l'indigo du logo, la seconde encre de la marque, avec
   le grain du papier posé par dessus en soft-light. C'est le seul
   endroit de la page qui porte cette couleur : on ne peut plus la
   rater, et on n'a ajouté aucune teinte au système.

   Tout ce qu'elle contient est en blanc et doit le rester : les
   règles de couleur ci-dessus s'arrêtent à sa porte. */
.ysee-featured,
.ysee-card-featured {
  background-color: var(--wc-indigo) !important;
  background-image:
    url('/assets/watercolor/paper-grain.svg'),
    radial-gradient(95% 70% at 14% 0%, #575DB4 0%, rgba(87, 93, 180, 0) 72%) !important;
  background-size: 240px 240px, auto !important;
  background-blend-mode: soft-light, normal !important;
  box-shadow: 0 22px 60px -20px rgba(62, 67, 135, 0.48) !important;
}
.ysee-card-featured:hover {
  box-shadow: 0 32px 80px -22px rgba(62, 67, 135, 0.56) !important;
}
.ysee-card-featured .ysee-badge {
  color: var(--wc-indigo-deep) !important;
}
.ysee-card-featured .ysee-check { color: rgba(255, 255, 255, 0.85) !important; }
.ysee-card-featured .ysee-plan-name,
.ysee-card-featured .ysee-price { color: #FFFFFF !important; }
.ysee-card-featured .ysee-plan-desc,
.ysee-card-featured .ysee-price-period { color: rgba(255, 255, 255, 0.78) !important; }
.ysee-card-featured .ysee-btn-primary {
  background-color: #FFFFFF !important;
  background-image: none !important;
  color: var(--wc-indigo-deep) !important;
}
.ysee-card-featured .ysee-btn-primary:hover {
  background-color: var(--wc-paper) !important;
}

/* ============================================================
   15. LE BLOG
   ------------------------------------------------------------
   Le blog a son propre jeu de classes (blog-*, article-*), sans
   rapport avec le reste de la vitrine. Il ouvrait sur un bandeau
   en dégradé corail plein, avec du texte blanc dessus : le seul
   aplat de couleur saturée pleine largeur de tout le site.

   Ici on est en mode LECTURE : la matière habille, elle ne doit
   jamais entrer en concurrence avec le texte de l'article. Aucun
   lavis ne passe derrière un paragraphe.
   ============================================================ */

.blog-hero,
.article-hero {
  background: transparent !important;
  color: var(--wc-ink) !important;
  position: relative;
  isolation: isolate;
}
.blog-hero::before,
.article-hero::before {
  content: '';
  position: absolute;
  inset: -30% -8% -40% -8%;
  z-index: -1;
  pointer-events: none;
  background-image: url('/assets/watercolor/wash-blob-coral.svg');
  background-position: right -200px top -260px;
  background-size: 780px 780px;
  background-repeat: no-repeat;
  opacity: 0.4;
}

.blog-hero h1,
.article-title {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif !important;
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.08 !important;
  color: var(--wc-ink) !important;
}
.blog-hero p,
.article-description { color: var(--wc-ink-soft) !important; opacity: 1 !important; }

/* Les vignettes d'article : papier chaud, halo de pigment à la
   place de l'ombre, et un bord qui se réchauffe au survol. La
   montée de 4px est conservée, c'est elle qui dit « cliquable ». */
.blog-card {
  background: var(--wc-paper-warm) !important;
  border: 1px solid var(--wc-paper-edge) !important;
  box-shadow: var(--wc-halo-sm) !important;
}
.blog-card:hover {
  box-shadow: var(--wc-halo-md) !important;
  border-color: rgba(196, 69, 54, 0.24) !important;
}
.blog-card h2 { color: var(--wc-ink) !important; }
.blog-card p { color: var(--wc-ink-soft) !important; }
.blog-card-date,
.article-date,
.article-author { color: var(--wc-ink-faint) !important; }
.blog-card-category,
.article-category {
  background: rgba(255, 229, 217, 0.85) !important;
  color: var(--wc-coral-deep) !important;
}
.blog-card-image,
.blog-card-image-placeholder {
  background: var(--wc-coral-veil) !important;
  background-image: none !important;
}

/* Le corps de l'article reste sur du papier nu : c'est du texte
   long, il n'a besoin d'aucune matière supplémentaire. */
.article-body { color: var(--wc-ink) !important; }
.article-body h2,
.article-body h3 {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif !important;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  font-weight: 600 !important;
  color: var(--wc-ink) !important;
}

/* Le pavé d'appel à l'action en fin d'article : même traitement
   que les boutons pleins, corail avec le grain du papier. */
.article-cta {
  background-color: var(--wc-coral-deep) !important;
  background-image:
    url('/assets/watercolor/paper-grain.svg'),
    radial-gradient(90% 160% at 10% 0%, #FF7E70 0%, rgba(255, 126, 112, 0) 74%) !important;
  background-size: 240px 240px, auto !important;
  background-blend-mode: soft-light, normal !important;
  box-shadow: var(--wc-halo-md) !important;
}

/* ============================================================
   16. LE MOT DU FONDATEUR, HOMOGÈNE
   ------------------------------------------------------------
   Le même bloc existe sur sept pages, et chaque page en avait sa
   propre version : citation à 64px ici et 28px là, signature à
   42px sur une page et 18px sur l'autre, carte sans marge
   intérieure sur Conseillers (le texte touchait le bas du papier)
   et à 50px sur Étudiants.

   La citation redescend nettement : ce n'est pas un titre de page,
   c'est une parole rapportée. À 64px elle écrasait le titre de la
   section au-dessus d'elle.
   ============================================================ */

.ysee-founder-container,
.ysee-founder-grid {
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: clamp(30px, 3.6vw, 52px) !important;
  gap: clamp(28px, 3.6vw, 52px) !important;
  align-items: center !important;
  /* inerte sur les pages qui composent ce bloc en flex */
  grid-template-columns: 260px 1fr;
  border-radius: 26px 20px 30px 22px / 22px 30px 20px 28px !important;
}

/* Les pages qui composaient ce bloc en grille gardent la grille,
   celles qui le composaient en flex gardent le flex : on ne touche
   qu'aux dimensions, pas au mode de mise en page. */
.ysee-founder-image-wrapper {
  max-width: 260px;
  margin-inline: auto;
}

.ysee-founder-title {
  font-size: clamp(26px, 2.7vw, 38px) !important;
  line-height: 1.18 !important;
  margin-bottom: 22px !important;
}

.ysee-founder-text {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--wc-ink-soft) !important;
  margin-bottom: 16px !important;
}

.ysee-founder-signature {
  margin-top: 26px !important;
  border-left: 2px solid rgba(196, 69, 54, 0.35);
  padding-left: 14px;
}

/* La signature suit la fonte du corps de texte, pas celle du titre :
   c'est une mention, pas un titre. On hérite au lieu de renommer la
   police, pour que la vitrine n'ait qu'un seul endroit qui la décide. */
.ysee-founder-name {
  display: block !important;
  font-family: inherit !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--wc-ink) !important;
  line-height: 1.3 !important;
}

.ysee-founder-role {
  display: block !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  color: var(--wc-ink-faint) !important;
  margin-top: 3px !important;
}

/* Le gros guillemet décoratif : il faisait double emploi avec les
   chevrons déjà présents dans la citation elle-même. */
.ysee-founder-quote-mark { display: none !important; }

/* ============================================================
   17. LES BANDES SOMBRES DEVENUES CLAIRES
   ------------------------------------------------------------
   Les pages secondaires alternaient des bandes charbon et des
   bandes corail pleines. Ces aplats sont devenus du papier (section
   14), mais le texte qu'ils portaient est resté blanc, ou dans les
   gris froids qui allaient avec le charbon : invisible.

   Une partie de ces couleurs est posée en style inline dans le JSX.
   Un style inline ne se bat qu'avec un !important, d'où les
   sélecteurs d'attribut : c'est le seul moyen de les rattraper sans
   réécrire les pages une par une.
   ============================================================ */

[style*="color: white"],
[style*="color:white"],
[style*="color: #fff"],
[style*="color:#fff"],
[style*="color: #FFF"],
[style*="color:#FFF"],
[style*="color: rgba(255"],
[style*="color:rgba(255"] {
  color: var(--wc-ink) !important;
}

/* Les gris froids d'accompagnement du charbon. */
[style*="#B2BEC3"],
[style*="#94A3B8"],
[style*="#DFE6E9"],
[style*="#636E72"] {
  color: var(--wc-ink-soft) !important;
}

/* Les blocs qui étaient des voiles translucides posés sur le
   charbon : un blanc à 5% ne se voit plus sur du papier. Ils
   redeviennent des cartes de papier, comme partout ailleurs. */
[style*="rgba(255,255,255,0.05)"] {
  background: var(--wc-paper-warm) !important;
  border-color: var(--wc-paper-edge) !important;
  box-shadow: var(--wc-halo-sm) !important;
}
[style*="rgba(255,107,107,0.1)"] {
  background: var(--wc-coral-veil) !important;
  border-color: rgba(196, 69, 54, 0.22) !important;
  box-shadow: var(--wc-halo-sm) !important;
}

/* La carte « Meilleur choix » est le seul fond resté sombre : son
   contenu doit redevenir blanc après la règle ci-dessus. */
.ysee-card-featured [style*="color: white"],
.ysee-card-featured [style*="color:white"],
.ysee-card-featured [style*="color: #fff"],
.ysee-card-featured [style*="color:#fff"] {
  color: #FFFFFF !important;
}

/* Lycées, bloc « Un outil pensé pour vos équipes » : la bande était
   charbon, ses cartes translucides blanches et leurs intitulés en
   blanc plein. */
.ysee-showcase-subtitle { color: var(--wc-ink-soft) !important; }
.ysee-lycee-feature strong { color: var(--wc-ink) !important; }
.ysee-lycee-feature p { color: var(--wc-ink-soft) !important; }

/* Les icônes de ces deux blocs n'ont ni largeur ni hauteur : ce
   sont de simples émojis. La touche de pigment de la section 14 se
   dessinait donc sur toute la largeur de la carte, en une ellipse
   corail posée au-dessus de chaque intitulé. On lui donne une
   vraie taille pour qu'elle redevienne une pastille. */
.ysee-benefit-icon,
.ysee-lycee-feature-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  font-size: 26px !important;
  line-height: 1 !important;
}
.ysee-benefit-icon { margin-bottom: 16px; }

/* Le dernier appel à l'action de chaque page était un aplat corail
   plein cadre, avec son texte en blanc. La bande est devenue du
   papier : le texte repasse en encre et le bouton principal reprend
   le corail, qui n'est plus en concurrence avec le fond. */
.ysee-cta-section { background: transparent !important; }
.ysee-cta-title { color: var(--wc-ink) !important; }
.ysee-cta-subtitle { color: var(--wc-ink-soft) !important; }
.ysee-cta-section .ysee-btn-primary {
  background-color: var(--wc-coral-deep) !important;
  background-image:
    url('/assets/watercolor/paper-grain.svg'),
    radial-gradient(90% 160% at 10% 0%, #FF7E70 0%, rgba(255, 126, 112, 0) 74%) !important;
  background-size: 240px 240px, auto !important;
  background-blend-mode: soft-light, normal !important;
  color: #FFFFFF !important;
}
.ysee-cta-section .ysee-btn-secondary {
  border-color: rgba(196, 69, 54, 0.22) !important;
  color: var(--wc-coral-deep) !important;
}

/* Coachs partenaires : même bascule pour l'encadré de bas de page,
   qui était un dégradé corail vers orange avec du texte blanc. */
.ysee-coaches-infobox,
.ysee-coaches-infobox h2 { color: var(--wc-ink) !important; }
.ysee-coaches-infobox p { color: var(--wc-ink-soft) !important; opacity: 1 !important; }
.ysee-coaches-infobox a {
  background-color: var(--wc-coral-deep) !important;
  background-image:
    url('/assets/watercolor/paper-grain.svg'),
    radial-gradient(90% 160% at 10% 0%, #FF7E70 0%, rgba(255, 126, 112, 0) 74%) !important;
  background-size: 240px 240px, auto !important;
  background-blend-mode: soft-light, normal !important;
  color: #FFFFFF !important;
  box-shadow: var(--wc-halo-sm) !important;
}
.ysee-coaches-teaser {
  background: transparent !important;
  border-color: rgba(196, 69, 54, 0.22) !important;
  color: var(--wc-ink-faint) !important;
}

/* ============================================================
   18. LE BOUTON SECONDAIRE, PARTOUT LE MÊME
   ------------------------------------------------------------
   Sur la page Tarifs, « Nous écrire » n'héritait d'aucune règle de
   forme : ni rayon, ni marge intérieure. Il s'affichait en
   rectangle rose à angles droits, seul objet de la page à ne pas
   être une pastille. La géométrie est donnée ici, sans !important
   sur display et padding pour que les variantes plus précises
   (la colonne des cartes de prix) gardent la main.
   ============================================================ */

.ysee-btn-secondary {
  display: inline-block;
  padding: 14px 28px;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  line-height: 1.25;
  border-radius: 50px !important;
}

.ysee-b2b-cta-label { color: var(--wc-ink-faint) !important; }

/* Impression : ni grain, ni lavis, ni masque. */
@media print {
  .ysee-premium-hero::before,
  .ysee-coaches-hero::before,
  .blog-hero::before,
  .article-hero::before { display: none !important; }
  body::after,
  .ysee-showcase-section::before,
  .ysee-steps-section::before,
  .ysee-founder-section::before,
  .wc-divider { display: none !important; }
  .ysee-stats-section,
  .ysee-footer-section {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}