/* ============================================================
   MARKET[SELL]ING™ — DIRECTION ARTISTIQUE V2
   TENSION / BASCULE

   Fichier de surcouche.
   Chargé après style.css et pages.css.
   Aucun correctif historique conservé.
   ============================================================ */


/* ============================================================
   1. PALETTE
   ============================================================ */

:root{
  --bg:#FCF8F1;
  --paper:#FCF8F1;
  --paper-light:#F5EEE4;

  --text:#181817;
  --muted:#625D56;
  --line:#D9D0C4;

  --red:#F05445;
  --brand:#F05445;
  --brand-dark:#CF4338;

  --orange:#F28C28;
  --amber:#D8B14A;
  --olive:#7E936A;
  --sage:#6E8572;

  --dark:#171817;
  --dark-soft:#23231F;

  --cream:#FCF8F1;
}


/* ============================================================
   2. BASE
   ============================================================ */

body{
  background:var(--bg);
  color:var(--text);

  font-family:
    "Avenir Next",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
}


/* ============================================================
   3. TYPOGRAPHIE
   ============================================================ */

/* Titres : plus contemporains et plus affirmés */

h1,
h2,
h3,
.article-hero h1,
.gauge-page-hero h1,
.manager-page-hero h1,
.profile-page-hero h1,
.author-page-copy h1,
.insights-hero h1,
.legal-hero h1{
  font-family:
    "Avenir Next",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

  font-weight:700;
  letter-spacing:-.045em;
}


/* Grandes phrases éditoriales */

.article-intro,
.lead,
.big-thought,
.statement p,
blockquote,
.author-thought,
.role-question,
.profile-summary p,
.gauge-scale-caption{
  font-family:
    "Iowan Old Style",
    Baskerville,
    Georgia,
    "Times New Roman",
    serif;
}


/* ============================================================
   4. MARQUE
   ============================================================ */

.brand{
  font-family:
    "Avenir Next",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

  font-weight:800;
  letter-spacing:-.055em;
}

.brand-sell,
.brand sup{
  color:var(--brand);
}


/* ============================================================
   5. HEADER
   ============================================================ */

.site-header{
  background:rgba(252,248,241,.94);

  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);

  border-bottom:1px solid rgba(24,24,23,.08);
}

.desktop-nav a{
  position:relative;

  color:var(--text);

  transition:
    color .2s ease,
    opacity .2s ease;
}

.desktop-nav a:hover{
  color:var(--brand);
}


/* Soulignement animé uniquement sur les liens principaux */

.desktop-nav > a::after{
  content:"";

  position:absolute;

  left:0;
  right:100%;
  bottom:-8px;

  height:2px;

  background:var(--brand);

  transition:right .25s ease;
}

.desktop-nav > a:hover::after{
  right:0;
}


/* ============================================================
   6. EYEBROWS / KICKERS
   ============================================================ */

.eyebrow,
.article-kicker{
  color:var(--brand);

  font-family:
    "Avenir Next",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

  font-weight:800;
  letter-spacing:.11em;
}


/* ============================================================
   7. HERO HOME
   ============================================================ */

.hero{
  position:relative;
  overflow:hidden;
}

.hero::before{
  content:"";

  position:absolute;
  z-index:0;

  width:600px;
  height:600px;

  right:-240px;
  top:-250px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(240,84,69,.16) 0%,
      rgba(242,140,40,.09) 38%,
      rgba(216,177,74,0) 70%
    );

  pointer-events:none;
}

.hero .wrap{
  position:relative;
  z-index:1;
}

.hero h1{
  font-weight:700;
  letter-spacing:-.055em;
}


/* ============================================================
   8. QUESTION VISUELLE HOME
   ============================================================ */

.question-visual{
  position:relative;

  background:
    linear-gradient(
      145deg,
      #191A19 0%,
      #25211D 100%
    );

  box-shadow:
    0 28px 70px rgba(24,24,23,.12);
}

.question-visual::before{
  content:"";

  position:absolute;

  left:0;
  top:0;

  width:5px;
  height:100%;

  background:
    linear-gradient(
      180deg,
      var(--brand),
      var(--orange),
      var(--amber),
      var(--olive)
    );
}

.question-main strong{
  color:#FF7568;
}

.question-tags span{
  border-color:rgba(255,255,255,.17);
}


/* ============================================================
   9. CTA — RÈGLE UNIQUE
   ============================================================ */

/*
   Tous les CTA sont désormais pleins.
   Cela garantit le contraste sur fond clair comme sur fond sombre.
   Plus aucune règle CTA spécifique à une section n'est nécessaire.
*/

a.cta{
  color:var(--cream);
  -webkit-text-fill-color:var(--cream);

  background:var(--brand);
  border-color:var(--brand);

  font-weight:800;
  text-decoration:none;

  box-shadow:
    0 8px 20px rgba(240,84,69,.12);

  transition:
    color .2s ease,
    background .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

a.cta:hover{
  color:#fff;
  -webkit-text-fill-color:#fff;

  background:var(--brand-dark);
  border-color:var(--brand-dark);

  transform:translateY(-2px);

  box-shadow:
    0 12px 26px rgba(207,67,56,.20);
}

a.cta:focus-visible{
  outline:3px solid rgba(242,140,40,.48);
  outline-offset:3px;
}


/* ============================================================
   10. CARTES — MOUVEMENT LÉGER
   ============================================================ */

.function,
.comparison-card,
.gauge-level,
.signal-card,
.role-principle,
.role-action,
.role-moment,
.profile-pillar,
.profile-posture,
.profile-origin,
.insight-topic{
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.function:hover,
.comparison-card:hover,
.gauge-level:hover,
.signal-card:hover,
.role-principle:hover,
.role-action:hover,
.role-moment:hover,
.profile-pillar:hover,
.profile-posture:hover,
.profile-origin:hover,
.insight-topic:hover{
  transform:translateY(-3px);

  border-color:rgba(240,84,69,.42);

  box-shadow:
    0 16px 36px rgba(24,24,23,.065);
}


/* ============================================================
   11. NUMÉROS ÉDITORIAUX
   ============================================================ */

.editorial-number{
  color:var(--brand);

  font-family:
    "Avenir Next",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

  font-weight:700;
  letter-spacing:-.06em;
}


/* ============================================================
   12. JAUGE™
   ============================================================ */

.gauge-scale-card{
  background:
    linear-gradient(
      145deg,
      #171817 0%,
      #24231F 100%
    );

  box-shadow:
    0 28px 70px rgba(24,24,23,.15);
}

.gauge-scale-gradient{
  background:
    linear-gradient(
      90deg,
      #F05445 0%,
      #F28C28 27%,
      #D8B14A 52%,
      #9AA36E 75%,
      #6E8572 100%
    );
}


/* Les trois zones portent chacune une couleur */

.gauge-level:nth-child(1){
  border-top:4px solid var(--brand);
}

.gauge-level:nth-child(2){
  border-top:4px solid var(--amber);
}

.gauge-level:nth-child(3){
  border-top:4px solid var(--olive);
}

.gauge-level:nth-child(1) .level-number{
  color:var(--brand);
}

.gauge-level:nth-child(2) .level-number{
  color:#B68A23;
}

.gauge-level:nth-child(3) .level-number{
  color:var(--olive);
}


/* Home : arc de Jauge */

.gauge-section .gauge-arc{
  filter:
    drop-shadow(0 12px 28px rgba(0,0,0,.18));
}


/* ============================================================
   13. ENVIE / RÉSISTANCE
   ============================================================ */

.tension-side.desire{
  border-top-color:var(--olive);
}

.tension-side.resistance{
  border-top-color:var(--brand);
}


/* ============================================================
   14. MARKET[SELL]ING MANAGER
   ============================================================ */

.role-center{
  background:
    linear-gradient(
      145deg,
      var(--brand),
      #D94336
    );

  box-shadow:
    0 24px 50px rgba(240,84,69,.22);
}


/* Les lignes gardent leur fonction, sans devenir décoratives */

.manager-role-map::before,
.manager-role-map::after{
  background:rgba(240,84,69,.22);
}


/* ============================================================
   15. STATEMENTS / BANDES FORTES
   ============================================================ */

.statement{
  position:relative;
  overflow:hidden;

  background:
    linear-gradient(
      115deg,
      #F05445 0%,
      #E45B38 55%,
      #F28C28 125%
    );
}

.statement::after{
  content:"";

  position:absolute;

  width:420px;
  height:420px;

  right:-180px;
  bottom:-240px;

  border-radius:50%;

  background:rgba(255,255,255,.08);

  pointer-events:none;
}

.statement .wrap{
  position:relative;
  z-index:1;
}


/* ============================================================
   16. SECTIONS SOMBRES
   ============================================================ */

.editorial-section.dark,
.insights-manifesto{
  background:
    linear-gradient(
      145deg,
      #181918 0%,
      #22221F 100%
    );
}


/* ============================================================
   17. LIENS ÉDITORIAUX
   ============================================================ */

.editorial-copy a:not(.cta),
.legal-content a:not(.cta){
  text-decoration-color:rgba(240,84,69,.45);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.editorial-copy a:not(.cta):hover,
.legal-content a:not(.cta):hover{
  color:var(--brand);
}


/* ============================================================
   18. BLOCS D'AVERTISSEMENT / NOTES
   ============================================================ */

.model-warning,
.profile-intro-note,
.insight-note,
.legal-note,
.author-thought{
  border-left-color:var(--brand);
}

.model-warning,
.profile-intro-note,
.insight-note,
.legal-note{
  background:var(--paper-light);
}


/* ============================================================
   19. FOOTER
   ============================================================ */

.site-footer{
  background:var(--dark);
  color:#F8F3EB;
}

.site-footer .brand{
  color:#fff;
}

.site-footer a{
  color:#CBC4BA;

  transition:color .2s ease;
}

.site-footer a:hover{
  color:#FF7568;
}

.site-footer h3{
  color:var(--orange);
}


/* ============================================================
   20. SÉLECTION DE TEXTE
   ============================================================ */

::selection{
  background:var(--brand);
  color:#fff;
}


/* ============================================================
   21. MOBILE
   ============================================================ */

@media(max-width:760px){

  .hero::before{
    width:390px;
    height:390px;

    right:-210px;
    top:-150px;
  }

  .question-visual{
    box-shadow:
      0 18px 45px rgba(24,24,23,.10);
  }

}


/* ============================================================
   22. ACCESSIBILITÉ
   ============================================================ */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition:none !important;
    animation:none !important;
  }

}

/* ============================================================
   ARTICLES — ÉTAT PUBLIÉ
   ============================================================ */

/* ARTICLES — ÉTAT PUBLIÉ */

a.article-card.published{
  color:inherit;
  text-decoration:none;

  border-color:rgba(240,84,69,.28);

  background:
    linear-gradient(
      135deg,
      rgba(240,84,69,.055),
      rgba(242,140,40,.025)
    );

  cursor:pointer;

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

a.article-card.published:hover{
  transform:translateY(-3px);

  border-color:rgba(240,84,69,.55);

  box-shadow:
    0 18px 40px rgba(24,24,23,.07);

  background:
    linear-gradient(
      135deg,
      rgba(240,84,69,.085),
      rgba(242,140,40,.04)
    );
}

a.article-card.published .article-meta{
  color:var(--brand);
}

a.article-card.published .article-arrow{
  color:var(--brand);

  transition:
    transform .22s ease,
    color .22s ease;
}

a.article-card.published:hover .article-arrow{
  transform:translateX(5px);
  color:var(--orange);
}