/* =========================================================
   PHILOSOPHIE — CSS COMMUN
   Terminale générale
   ========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root{
  --ink:#1c1f2e;
  --ink-soft:#43485c;

  --paper:#f3ead6;
  --paper-2:#e9dcb9;
  --paper-3:#faf5e8;

  --wine:#7a2e35;
  --wine-dark:#5c2229;

  --gold:#a97e3b;
  --sage:#5f6f52;
  --blue:#56677d;

  --line:#c9b787;

  --shadow:
    0 8px 24px rgba(28,31,46,0.10);

  --radius:3px;
}


/* =========================================================
   RESET
========================================================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;

  background:
    radial-gradient(
      ellipse at 20% 0%,
      rgba(169,126,59,0.07),
      transparent 55%
    ),
    radial-gradient(
      ellipse at 90% 10%,
      rgba(122,46,53,0.06),
      transparent 50%
    ),
    var(--paper);

  color:var(--ink);

  font-family:'Source Serif 4', serif;

  line-height:1.65;

  -webkit-font-smoothing:antialiased;
}


/* Accessibilité : réduire les animations
   si l'utilisateur le demande */

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

  *{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }

}


/* =========================================================
   CONTENEUR PRINCIPAL
========================================================= */

.wrap{
  max-width:920px;
  margin:0 auto;
  padding:0 28px;
}


/* =========================================================
   BARRE SUPÉRIEURE
========================================================= */

.topbar{

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:18px 0;

  border-bottom:1px solid var(--line);

  font-family:'Space Mono', monospace;

  font-size:11.5px;

  letter-spacing:.06em;

  text-transform:uppercase;

  color:var(--ink-soft);
}


.topbar .dot{
  color:var(--wine);
  margin:0 8px;
}


/* =========================================================
   HERO / GRAND TITRE
========================================================= */

.hero{

  position:relative;

  padding:74px 0 62px;

  overflow:hidden;
}


/* Grand chiffre romain en arrière-plan */

.hero::before{

  content:"IV";

  position:absolute;

  right:-24px;
  top:-42px;

  font-family:'Fraunces', serif;

  font-weight:900;

  font-size:310px;

  color:var(--ink);

  opacity:.035;

  line-height:1;

  pointer-events:none;
}


/* Petit titre au-dessus */

.eyebrow{

  display:inline-flex;

  align-items:center;

  gap:10px;

  font-family:'Space Mono', monospace;

  font-size:12px;

  letter-spacing:.12em;

  text-transform:uppercase;

  color:var(--wine);

  margin-bottom:18px;
}


/* Petit cercle décoratif */

.eyebrow .seal{

  width:28px;
  height:28px;

  border:1.4px solid var(--gold);

  border-radius:50%;

  display:flex;

  align-items:center;
  justify-content:center;

  flex-shrink:0;

  font-family:'Fraunces', serif;

  font-size:12px;

  font-weight:600;

  color:var(--gold);
}


/* Grand titre */

h1{

  font-family:'Fraunces', serif;

  font-weight:700;

  font-size:clamp(
    34px,
    5.4vw,
    57px
  );

  line-height:1.07;

  margin:0 0 20px;

  max-width:19ch;

  letter-spacing:-.015em;
}


/* Partie mise en valeur du titre */

h1 em{

  font-style:italic;

  font-weight:500;

  color:var(--wine);
}


/* Introduction sous le titre */

.hero .lead{

  font-size:19px;

  color:var(--ink-soft);

  max-width:63ch;

  margin:0;
}


/* =========================================================
   SECTIONS
========================================================= */

section{

  padding:54px 0;

  border-top:1px solid var(--line);
}


/* Petit titre de catégorie */

.kicker{

  font-family:'Space Mono', monospace;

  font-size:11.5px;

  letter-spacing:.1em;

  text-transform:uppercase;

  color:var(--gold);

  margin:0 0 10px;

  display:block;
}


/* Titres principaux */

h2{

  font-family:'Fraunces', serif;

  font-weight:600;

  font-size:clamp(
    25px,
    3.5vw,
    34px
  );

  line-height:1.15;

  margin:0 0 10px;

  letter-spacing:-.01em;
}


/* Titres secondaires */

h3{

  font-family:'Fraunces', serif;
}


/* Introduction d'une section */

.section-intro{

  color:var(--ink-soft);

  max-width:67ch;

  margin:0 0 32px;

  font-size:16.5px;
}


/* =========================================================
   CARTE DE QUESTION PHILOSOPHIQUE
========================================================= */

.question-card{

  position:relative;

  background:var(--ink);

  color:var(--paper);

  border-radius:var(--radius);

  padding:34px 36px;

  margin-top:34px;

  overflow:hidden;

  box-shadow:var(--shadow);
}


/* Grand point d'interrogation décoratif */

.question-card::after{

  content:"?";

  position:absolute;

  right:25px;

  bottom:-55px;

  font-family:'Fraunces', serif;

  font-size:190px;

  font-weight:900;

  color:var(--paper);

  opacity:.035;

  line-height:1;
}


/* Petit label */

.question-card .label{

  font-family:'Space Mono', monospace;

  font-size:11px;

  letter-spacing:.1em;

  text-transform:uppercase;

  color:var(--gold);

  display:block;

  margin-bottom:9px;
}


/* Titre de la question */

.question-card h3{

  position:relative;

  z-index:1;

  margin:0 0 10px;

  font-size:25px;

  font-weight:600;

  max-width:30ch;
}


/* Texte */

.question-card p{

  position:relative;

  z-index:1;

  margin:0;

  color:#d0d2dc;

  max-width:62ch;

  font-size:15.5px;
}


/* =========================================================
   BLOC DE DÉFINITION
========================================================= */

.definition{

  display:grid;

  grid-template-columns:150px 1fr;

  gap:28px;

  align-items:start;

  margin-top:35px;
}


.definition-word{

  font-family:'Fraunces', serif;

  font-style:italic;

  font-weight:600;

  font-size:30px;

  color:var(--wine);

  border-right:1px solid var(--line);

  padding-right:20px;
}


.definition-content p{

  margin:0 0 12px;

  font-size:16px;
}


.definition-content p:last-child{

  margin-bottom:0;
}


.definition-content strong{

  color:var(--wine-dark);
}


/* =========================================================
   CARTES
========================================================= */

.cards{

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:15px;

  margin-top:34px;
}


.card{

  background:var(--paper-3);

  border:1px solid var(--line);

  border-radius:var(--radius);

  padding:23px 20px;

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


/* Animation au survol */

.card:hover{

  transform:translateY(-3px);

  box-shadow:var(--shadow);

  border-color:var(--gold);
}


/* Petit numéro / catégorie */

.card .mini{

  font-family:'Space Mono', monospace;

  font-size:10.5px;

  color:var(--gold);

  letter-spacing:.08em;

  text-transform:uppercase;

  display:block;

  margin-bottom:8px;
}


/* Titre */

.card h3{

  margin:0 0 8px;

  font-size:19px;

  font-weight:600;

  font-style:italic;
}


/* Texte */

.card p{

  margin:0;

  font-size:14.5px;

  color:var(--ink-soft);
}


/* =========================================================
   DISTINCTIONS PHILOSOPHIQUES
========================================================= */

.distinction-list{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:1px;

  background:var(--line);

  border:1px solid var(--line);

  border-radius:var(--radius);

  overflow:hidden;

  margin-top:30px;
}


.distinction{

  background:var(--paper-3);

  padding:22px 23px;
}


.distinction .pair{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:15px;

  margin-bottom:8px;
}


.distinction .term{

  font-family:'Fraunces', serif;

  font-size:18px;

  font-weight:600;

  color:var(--wine);

  font-style:italic;
}


.distinction .arrow{

  color:var(--gold);

  font-family:'Space Mono', monospace;

  font-size:12px;
}


.distinction p{

  margin:0;

  font-size:14px;

  color:var(--ink-soft);
}


/* =========================================================
   EXEMPLES
========================================================= */

.example{

  display:grid;

  grid-template-columns:90px 1fr;

  gap:22px;

  padding:21px 0;

  border-bottom:1px dashed var(--line);
}


.example:last-child{

  border-bottom:0;
}


.example-number{

  font-family:'Space Mono', monospace;

  color:var(--wine);

  font-size:12px;

  padding-top:4px;
}


.example h3{

  margin:0 0 5px;

  font-size:18px;

  font-weight:600;
}


.example p{

  margin:0;

  font-size:15px;

  color:var(--ink-soft);
}


/* =========================================================
   VOCABULAIRE INTERACTIF
========================================================= */

.vocab{

  display:flex;

  flex-wrap:wrap;

  gap:9px;

  margin-top:24px;
}


.vocab button{

  border:1px solid var(--line);

  background:var(--paper-3);

  color:var(--ink);

  padding:9px 13px;

  border-radius:30px;

  font-family:'Space Mono', monospace;

  font-size:11px;

  cursor:pointer;

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


.vocab button:hover,
.vocab button.active{

  background:var(--wine);

  color:var(--paper-3);

  border-color:var(--wine);
}


/* Définition cachée */

.vocab-definition{

  display:none;

  margin-top:18px;

  background:
    rgba(169,126,59,.09);

  border-left:2px solid var(--gold);

  padding:16px 18px;

  font-size:14.5px;

  color:var(--ink-soft);
}


/* Définition visible */

.vocab-definition.show{

  display:block;
}


.vocab-definition strong{

  color:var(--wine);
}


/* =========================================================
   BLOC « BAC »
========================================================= */

.bac-box{

  margin-top:35px;

  background:var(--paper-2);

  border:1px solid var(--line);

  border-radius:var(--radius);

  padding:27px 29px;
}


.bac-box .label{

  font-family:'Space Mono', monospace;

  font-size:11px;

  color:var(--wine);

  letter-spacing:.1em;

  text-transform:uppercase;

  display:block;

  margin-bottom:7px;
}


.bac-box h3{

  margin:0 0 8px;

  font-size:21px;
}


.bac-box p{

  margin:0;

  color:var(--ink-soft);

  font-size:15px;
}


/* =========================================================
   BLOCS DE SYNTHÈSE
========================================================= */

.recap{

  margin-top:32px;

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:20px;
}


.recap-col{

  background:var(--paper-3);

  border:1px solid var(--line);

  padding:23px 22px;

  border-radius:var(--radius);
}


.recap-col h3{

  margin:0 0 12px;

  color:var(--wine);

  font-size:18px;

  font-style:italic;
}


.recap-col ul{

  margin:0;

  padding-left:19px;

  color:var(--ink-soft);

  font-size:14.5px;
}


.recap-col li{

  margin-bottom:7px;
}


.recap-col li:last-child{

  margin-bottom:0;
}


/* =========================================================
   BLOC « PROCHAINE PARTIE »
========================================================= */

.next{

  margin-top:38px;

  background:var(--ink);

  color:var(--paper);

  border-radius:var(--radius);

  padding:27px 30px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:20px;

  flex-wrap:wrap;
}


.next .kicker{

  color:var(--gold);
}


.next h3{

  margin:0;

  font-size:20px;

  font-weight:600;
}


.next p{

  margin:5px 0 0;

  color:#c9cbd8;

  font-size:14px;

  max-width:55ch;
}


/* =========================================================
   FOOTER
========================================================= */

footer{

  padding:28px 0 50px;

  font-family:'Space Mono', monospace;

  font-size:11px;

  color:var(--ink-soft);

  text-align:center;
}


/* =========================================================
   ANIMATION D'APPARITION
========================================================= */

.reveal{
  opacity:1;
  transform:none;
}



/* =========================================================
   RESPONSIVE — TABLETTE / MOBILE
========================================================= */

@media (max-width:760px){

  .wrap{

    padding:0 20px;
  }


  .topbar{

    flex-direction:column;

    align-items:flex-start;

    gap:7px;

    line-height:1.5;
  }


  .hero{

    padding:55px 0 48px;
  }


  .hero::before{

    font-size:190px;

    right:-18px;

    top:-18px;
  }


  .hero .lead{

    font-size:17px;
  }


  .cards{

    grid-template-columns:1fr;
  }


  .definition{

    grid-template-columns:1fr;

    gap:8px;
  }


  .definition-word{

    border-right:0;

    border-bottom:1px solid var(--line);

    padding:0 0 10px;
  }


  .distinction-list{

    grid-template-columns:1fr;
  }


  .example{

    grid-template-columns:1fr;

    gap:3px;
  }


  .recap{

    grid-template-columns:1fr;
  }


  .question-card{

    padding:28px 25px;
  }


  .bac-box{

    padding:23px 21px;
  }

}


/* =========================================================
   TRÈS PETITS ÉCRANS
========================================================= */

@media (max-width:430px){

  .wrap{

    padding:0 16px;
  }


  h1{

    font-size:34px;
  }


  h2{

    font-size:27px;
  }


  .hero{

    padding-top:45px;
  }


  .question-card h3{

    font-size:22px;
  }


  .card{

    padding:20px 18px;
  }


  .distinction{

    padding:20px 18px;
  }

}


/* ================================
   QUIZ INTERACTIF
   ================================ */

.quiz-question{
  margin:0 0 26px;
  padding:22px 24px;
  background:var(--paper-3);
  border:1px solid var(--line);
  border-radius:var(--radius);
}

.quiz-question h3{
  font-family:'Fraunces', serif;
  font-size:18px;
  font-weight:600;
  line-height:1.35;
  margin:0 0 16px;
  color:var(--ink);
}

.quiz-option{
  display:block;
  width:100%;
  padding:13px 16px;
  margin:9px 0;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-family:'Source Serif 4', serif;
  font-size:15px;
  text-align:left;
  cursor:pointer;
  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .15s ease;
}

.quiz-option:hover{
  background:var(--paper-2);
  border-color:var(--gold);
  transform:translateX(2px);
}

.quiz-option:focus-visible{
  outline:2px solid var(--wine);
  outline-offset:2px;
}

/* Bonne réponse */
.quiz-option.correct{
  background:rgba(95,111,82,.16);
  border-color:var(--sage);
  color:#3f5135;
}

/* Mauvaise réponse */
.quiz-option.wrong{
  background:rgba(122,46,53,.13);
  border-color:var(--wine);
  color:var(--wine-dark);
}

/* Bouton "Voir mon score" */
.quiz-score-button{
  display:block;
  margin:30px auto 0;
  padding:13px 24px;
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--ink);
  border-radius:var(--radius);
  font-family:'Space Mono', monospace;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:
    background .2s ease,
    color .2s ease,
    transform .15s ease;
}

.quiz-score-button:hover{
  background:var(--wine);
  border-color:var(--wine);
  transform:translateY(-2px);
}

.quiz-score-button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* Zone du résultat */
.quiz-result{
  display:none;
  margin-top:24px;
  padding:20px 22px;
  border-left:3px solid var(--gold);
  background:var(--paper-3);
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.6;
}

.quiz-result.warning{
  display:block;
  border-left-color:var(--gold);
  background:rgba(169,126,59,.10);
  color:#66502a;
}

.quiz-result.success{
  display:block;
  border-left-color:var(--sage);
  background:rgba(95,111,82,.12);
  color:#3f5135;
}

/* Score mis en valeur */
.quiz-result strong{
  font-family:'Fraunces', serif;
  font-size:20px;
  color:var(--ink);
}

/* Responsive téléphone */
@media (max-width:760px){
  .quiz-question{
    padding:18px 16px;
  }

  .quiz-option{
    padding:12px 14px;
    font-size:14.5px;
  }

  .quiz-score-button{
    width:100%;
    margin-top:24px;
  }
}