/* ==============================
   Styles généraux du site
   ============================== */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: rgb(244, 241, 235);
  color: #0B2A4A;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.menu-open {
  overflow: hidden;
}

.menu-overlay {
  position: fixed;
  inset: 0;
  /* background: rgba(0, 0, 0, 0.45); */
  background: transparent; /* overlay transparent pour ne pas gêner le clic sur le menu */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 2500;
}

.menu-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

/* Logo de fond stable */
body::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(80vw, 700px);
  height: min(80vw, 700px);
  background: url('../images/Logo_Riplain.png') no-repeat center center;
  background-size: contain;
  opacity: 0.15;
  z-index: -1;
  pointer-events: none;  /* ne gêne pas les clics */
}

/* Réduction du logo de fond en mode desktop */
@media (min-width: 769px) {
  body::before {
    width: min(50vw, 450px);
    height: min(50vw, 450px);
    opacity: 0.12; /* optionnel : un peu plus discret */
  }
}

/* Mobile : on supprime complètement l'image */
@media (max-width: 768px) {
  body::before {
    content: none !important;
    background: none !important;
  }
}

/* ----- HEADER ET NAVIGATION ----- */
header {
  background: #6B4E1F; 
  /* rgba(187, 255, 0, 0.9) vert clair semi-transparent */
  /* #005BBB ancien bleu */
  color: white;
  padding: 0.8em 0;
  position: sticky;  /* fixe le header */
  top: 0;            /* toujours en haut */
  z-index: 1000;     /* au-dessus du contenu */
  width: 100%;
  box-sizing: border-box;
  border-bottom: 2px solid rgba(180, 130, 90, 0.9); /* caramel doux */
}

.nav-link {
  color: #6B4E1F;
  text-decoration: none;
  /* font-weight: bold; */
  transition: 0.3s;
}

.nav-link:hover {
  color: rgba(180, 130, 90, 0.9); /* caramel doux */
}

.nav-link:visited {
  color: #F29A2E; /* caramel vif pour les liens déjà cliqués */
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  font-family: Arial, sans-serif;
  font-size: 1em;
}

/* Partie gauche du header */
.nav-left {
  display: flex;
  align-items: center;
  gap: 25px;
}

/* Logo du header */
.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.3s ease; /* animation de l'image */
}

/* Image du logo */
.logo img {
  height: 40px;
  margin-right: 10px;
  transition: transform 0.3s ease; /* animation de l'image */
}

/* Texte Riplain */
.logo span {
  font-size: 2em;
  font-weight: bold;
  color: white; /* couleur par défaut */
  transition: color 0.3s ease; /* animation de la couleur */
}

/* Effet au survol */
.logo:hover img {
  transform: scale(1.1); /* agrandit légèrement le logo */
}

.logo:hover span {
  color: #F29A2E; /* change la couleur du texte */
}

/* Partie droite du header */
.nav-right {
  display: flex;
  align-items: center;
  gap: 25px;
}

/* Ensure positioned ancestor for absolute-positioned burger menu */
.nav-right { position: relative; }

.nav-center {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* avoid blocking clicks on left/right items */
}

.title-img {
  margin-top: 10px;
}

/* allow links inside nav-center to be clickable */
.nav-center .logo { pointer-events: auto; }

/* Liens du menu */
nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

nav a:hover {
  color: #F29A2E;
  text-decoration: none;
}

/* =========================================================
   BURGER MENU
========================================================= */

/* Bouton burger */
.nav-right .burger {
  font-size: 1em;
  font-weight: bold;
  font-family: inherit;
  background: transparent;
  border: none;
  color: white;

  cursor: pointer;

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

  padding: 10px 14px;

  border-radius: 8px;

  transition:
    background 0.2s ease,
    transform 0.2s ease,
    color 0.2s ease;
}

/* Couleur texte menus */

.burger-menu-normal a {
  color: #0B2A4A;
}

.burger-menu-responsive a {
  color: white;
}

/* Hover bouton */
.nav-right .burger:hover {
  background: rgba(255,255,255,0.08);
  color: #F29A2E;
}

/* Texte bouton */
.burger-text {
  font-weight: bold;
  color: white;
}

/* Desktop */
.burger-text-normal {
  display: inline;
}

/* Mobile */
.burger-text-mobile {
  display: none;
}

/* Accessibilité */
.burger .sr-only {
  position: absolute;
  left: -9999px;
}

/* Wrapper */
.burger-wrap {
  position: relative;
}

/* =========================================================
   BASE COMMUNE
========================================================= */

.burger-menu {
  z-index: 2000;
}

.burger-menu a {
  display: block;
  text-decoration: none;
  font-weight: bold;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

/* =========================================================
   MENU DESKTOP
========================================================= */

.burger-menu-normal {
  position: absolute;

  top: calc(100% + 10px);
  right: 0;

  width: max-content;
  min-width: 260px;

  background: white;
  color: #0B2A4A;

  border-radius: 12px;

  box-shadow:
    0 10px 25px rgba(0,0,0,0.12);

  overflow: hidden;

  opacity: 0;
  visibility: hidden;

  transform: translateY(-10px);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;
}

/* Menu desktop ouvert */
.burger-menu-normal.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.burger-menu-normal a {
  padding: 14px 18px;
}

.burger-menu-normal a:hover {
  background: #f5f5f5;
  color: #6B4E1F;
}

/* =========================================================
   MENU MOBILE
========================================================= */

.burger-menu-responsive {

  position: fixed;

  top: 0;
  right: -280px;

  width: 260px;
  max-width: calc(100vw - 20px);

  height: 100vh;

  background: #6B4E1F;

  display: flex;
  flex-direction: column;

  padding-top: 90px;

  overflow-y: auto;
  overflow-x: hidden;

  box-shadow:
    -5px 0 20px rgba(0,0,0,0.25);

  transition: right 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  z-index: 3000;
}

/* Menu mobile ouvert */
.burger-menu-responsive.show {
  right: 0;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Liens */
.burger-menu-responsive a {

  display: block;

  width: 100%;

  color: white !important;

  padding: 18px 24px;

  border-bottom:
    1px solid rgba(255,255,255,0.08);

  box-sizing: border-box;
}

/* Hover */
.burger-menu-responsive a:hover {

  background: rgba(255,255,255,0.08);

  color: #F29A2E !important;
}

/* Sous-menu mobile */
.burger-link-sub {
  padding-left: 42px !important;
  font-size: 0.95em;
}

/* =========================================================
   RESPONSIVE
========================================================= */

/* Desktop */
@media (min-width: 769px) {

  .burger-text-normal {
    display: inline;
  }

  .burger-text-mobile {
    display: none;
  }

  .burger-menu-responsive {
    display: none;
  }
}

/* Mobile */
@media (max-width: 768px) {

    /* Menu responsive visible */
    .burger-menu-responsive {
        display: flex;
    }

    /* Cache menu gauche */
    .nav-left {
        display: none;
    }

    /* Texte mobile */
    .burger-text-normal {
        display: none;
    }

    .burger-text-mobile {
        display: inline;
    }

    /* Réduction du texte du logo */
    .logo span {
        font-size: 1.5em;
    }

    /* ============================
       Correction du centrage absolu
       ============================ */
    .nav-center {
        position: static;     /* enlève le centrage absolu */
        transform: none;      /* enlève le translate */
        left: auto;
        top: auto;
        text-align: left;     /* aligné à gauche */
        pointer-events: auto; /* clics réactivés */
        display: flex;
        align-items: center;
        gap: 6px;
        order: 1;             /* passe avant le burger */
    }

    .nav-center img {
        height: 32px;
        margin-right: 6px;
    }

    .title-img {
        height: 26px;
        margin-top: 10px;
    }

    /* Le burger reste à droite */
    .nav-right {
        order: 2;
        display: flex;
        align-items: center;
    }

    /* Réduction de la hauteur du header */
    header {
        padding: 0.4em 0;
    }

    nav {
        justify-content: space-between;
        padding: 6px 12px;
    }
}

/* Très petit écran */
@media (max-width: 480px) {

  .burger-menu-responsive {
    width: 260px;
  }

  .logo span {
    font-size: 1.3em;
  }
}

/* ==============================
   COURS
   ============================== */

.course-content {
  width: 100%;
  max-width: 900px;
  margin: 3em auto;
  padding: 0 15px;
  text-align: left;
  line-height: 1.7;
  box-sizing: border-box;
}

.course-content h3 {
  margin-top: 2em;
  color: #6B4E1F;
}

.image-double {
  --left: 50%;
  --right: 50%;

  display: flex;
  gap: 20px;
  width: 100%;
  margin: 20px 0;
  align-items: flex-start;
  box-sizing: border-box;
}

/* Chaque image prend sa proportion */
.image-double > * {
  min-width: 0;
  box-sizing: border-box;
}

.image-double > *:first-child {
  flex: 0 1 var(--left);
}

.image-double > *:last-child {
  flex: 0 1 var(--right);
}

/* Les images ne dépassent jamais leur conteneur */
.image-double img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

@media (max-width: 750px) {

  .image-double {
    flex-direction: column;
    gap: 20px;
  }

  .image-double > * {
    flex: 0 0 auto !important;
    width: 100%;
  }

  .image-double img {
    width: 100%;
  }
}

/* ==========================================
   TABLEAUX MODERNES
========================================== */

.classic-table {
    width: 100%;
    max-width: 500px;

    border-collapse: separate;
    border-spacing: 0;

    margin: 20px auto;

    background: #ffffff;

    border: 1px solid #e6e0d7;
    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.07);
}


/* CELLULES */

.classic-table th,
.classic-table td {
    padding: 12px 16px;

    text-align: center;

    border-bottom: 1px solid #eee8df;

    border-right: 1px solid #e6e0d7;
}

.classic-table th:last-child,
.classic-table td:last-child {
    border-right: none;
}

/* EN-TÊTE */

.classic-table th {
    background: #6B4E1F;

    color: white;

    font-weight: 600;

    letter-spacing: 0.02em;
}


/* LIGNES */

.classic-table tbody tr {
    transition: background-color 0.2s ease;
}

.classic-table tbody tr:nth-child(even) {
    background: #faf8f5;
}

.classic-table tbody tr:hover {
    background: #fff1df;
}


/* Supprime la bordure de la dernière ligne */

.classic-table tbody tr:last-child td {
    border-bottom: none;
}


/* INPUTS DANS LES TABLEAUX */

#table-fx input {
    width: 80px;

    padding: 8px 10px;

    box-sizing: border-box;

    border: 1px solid #d8d0c5;
    border-radius: 8px;

    background: #ffffff;

    text-align: center;

    font-size: 16px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}


/* Input sélectionné */

#table-fx input:focus {
    border-color: #F29A2E;

    background: #fffaf3;

    box-shadow: 0 0 0 3px rgba(242, 154, 46, 0.15);
}


/* MOBILE */

@media (max-width: 600px) {

    .classic-table {
        width: 100%;

        font-size: 0.95rem;
    }

    .classic-table th,
    .classic-table td {
        padding: 10px 8px;
    }

    #table-fx input {
        width: 65px;

        padding: 7px 5px;

        font-size: 15px;
    }
}

/* Encadrés */
.bloc-definition,
.bloc-exemple,
.bloc-important {
  background: #f9f6f2;
  border-left: 6px solid #6B4E1F;
  padding: 1em 1.2em;
  margin: 1.5em 0;
  border-radius: 8px;
}

.bloc-exemple {
  background: #eef6ff;
  border-left-color: #3f7ac2;
}

.bloc-important {
  background: #fff3cd;
  border-left-color: #ff9d00;
}

/* Questions interactives */
.question {
  background: #f1f1f1;
  padding: 1em;
  margin: 1.5em 0;
  border-radius: 10px;
}

.answer {
  display: none;
  margin-top: 0.8em;
  color: #2e7d32;
  font-weight: bold;
}

/* =========================================================
   EXERCICES DE REPÉRAGE
   ========================================================= */

.coordinate-exercise {
    display: grid;

    grid-template-columns:
        minmax(200px, 260px)
        minmax(0, 1fr);

    gap: 35px;

    width: 100%;
    max-width: 950px;

    margin: 30px auto;

    align-items: center;

    box-sizing: border-box;
}


/* ---------------------------------------------------------
   Instructions
   --------------------------------------------------------- */

.coordinate-exercise__instructions {
    width: 100%;
    min-width: 0;

    padding: 20px;

    background: #fff;
    border-radius: 14px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

    box-sizing: border-box;
}

.coordinate-exercise__instructions h3 {
    margin-top: 0;
    margin-bottom: 15px;
}

.coordinate-exercise__points {
    margin: 15px 0;
    padding-left: 25px;

    line-height: 1.8;
}

.coordinate-exercise__points strong {
    color: #F29A2E;
}

.coordinate-exercise__help {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   Graphique
   --------------------------------------------------------- */

.coordinate-exercise__graph {
    /*
     * Pas de max-width ici.
     * Le graphique doit prendre toute la largeur
     * de sa colonne.
     */
    width: 100%;
    max-width: none;
    min-width: 0;

    margin: 0;

    box-sizing: border-box;

    background: #fff;
    border-radius: 14px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

    overflow: hidden;
}

.coordinate-exercise__canvas {
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;

    box-sizing: border-box;

    background: #fff;

    /*
     * Empêche le navigateur de transformer
     * un mouvement du doigt en scroll.
     */
    touch-action: none;

    cursor: crosshair;
}


/* ---------------------------------------------------------
   Boutons
   --------------------------------------------------------- */

.coordinate-exercise__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: 20px;
}

.coordinate-exercise__actions button {
    width: 100%;
    min-width: 0;

    border: none;
    border-radius: 8px;

    padding: 10px 15px;

    font-size: 0.95rem;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        opacity 0.15s ease;

    box-sizing: border-box;
}

.coordinate-exercise__actions button:hover {
    transform: translateY(-1px);
}

.coordinate-exercise__actions button:active {
    transform: translateY(0);
}

.coordinate-exercise__check {
    background: #F29A2E;
    color: white;
}

.coordinate-exercise__reset {
    background: #eee;
    color: #333;
}


/* ---------------------------------------------------------
   Résultat
   --------------------------------------------------------- */

.coordinate-exercise__result {
    margin-top: 15px;

    min-height: 24px;

    font-weight: 600;
    text-align: center;
}

.coordinate-exercise__result.success {
    color: #278a45;
}

.coordinate-exercise__result.error {
    color: #c0392b;
}


/* =========================================================
   TABLETTE / ÉCRAN ÉTROIT
   ========================================================= */

@media (max-width: 750px) {

    .coordinate-exercise {
        display: grid;

        grid-template-columns: minmax(0, 1fr);

        width: 100%;
        max-width: 100%;

        gap: 20px;

        margin: 20px 0;

        padding: 0;

        box-sizing: border-box;
    }


    .coordinate-exercise__instructions,
    .coordinate-exercise__graph {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        box-sizing: border-box;
    }


    /*
     * Le graphique prend maintenant exactement
     * la même largeur que le bloc supérieur.
     */
    .coordinate-exercise__graph {
        margin: 0;
    }


    .coordinate-exercise__canvas {
        width: 100%;
        max-width: 100%;
    }


    .coordinate-exercise__actions {
        flex-direction: row;
    }


    .coordinate-exercise__actions button {
        flex: 1;
        min-width: 0;
    }
}


/* =========================================================
   PETIT SMARTPHONE
   ========================================================= */

@media (max-width: 450px) {

    .coordinate-exercise {
        gap: 15px;
        margin: 15px 0;
    }


    .coordinate-exercise__instructions {
        padding: 15px;
    }


    .coordinate-exercise__instructions h3 {
        font-size: 1.15rem;
    }


    .coordinate-exercise__points {
        padding-left: 20px;
        margin-right: 0;
    }


    .coordinate-exercise__help {
        font-size: 0.85rem;
    }


    .coordinate-exercise__actions {
        flex-direction: column;
    }


    .coordinate-exercise__actions button {
        width: 100%;
    }
}


/* ---------------------------------------------------------
   Sécurité supplémentaire contre les débordements
   --------------------------------------------------------- */

.coordinate-exercise,
.coordinate-exercise * {
    box-sizing: border-box;
}

.btn-small {
  margin-top: 0.5em;
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: #6B4E1F;
  color: white;
  cursor: pointer;
}

.btn-small:hover {
  background: #543c16;
}

/* Variation */
.variation-list li {
  margin: 0.5em 0;
}

.brahmagupta-left {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 150px;
}

.brahmagupta-right {
  position: absolute;
  right: 0;
  top: 5%;
  /*transform: translateY(+20%);*/
  width: 190px;
}

/* Responsive */
@media (max-width: 1155px) {
    .brahmagupta-left {
      display: none;
    }
    .brahmagupta-right {
      display: none;
    }
  .question {
    padding-left: 0;
  }
}

/* ===== TABLE DES MATIÈRES ===== */
.toc {
  position: fixed;
  top: 120px;
  max-height: calc(100vh - 230px);
  display: flex;
  flex-direction: column;
  right: 20px;
  width: 150px;
  background: #fff;
  border-radius: 10px;
  padding: 15px 3px 15px 20px; /* plus de padding à droite */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 100;
  box-sizing: border-box;
}

#tocList {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding-right: 0px;
    text-align: left;
}

.toc h4 {
  margin-top: 0;
  color: #6B4E1F;
}

.toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc li {
  margin: 8px 0;
}

.toc a {
  text-decoration: none;
  color: #0B2A4A;
  font-weight: 500;
}

.toc a.active {
  color: #F29A2E;
  font-weight: bold;
}

/* Responsive : cacher la TOC sur mobile */
@media (max-width: 900px) {
  .toc {
    display: none;
  }
}

/* ===== Bouton ouverture / fermeture ===== */

.toc-toggle {
  position: absolute;
  top: 10px;
  left: 5px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
}

/* Croix (sommaire ouvert) */
.toc-toggle::before,
.toc-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 3px;
  background: #6B4E1F;
  transform-origin: center;
  transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease;
}

.toc-toggle::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.toc-toggle::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ===== Sommaire réduit ===== */

.toc.collapsed {
  width: 50px;
  padding: 24px 0;
  overflow: hidden;
}

.toc.collapsed h4,
.toc.collapsed ul {
  display: none;
}

/* Bouton centré */
.toc.collapsed .toc-toggle {
  top: 8px;
  left: 50%;
  width: 32px;
  height: 32px;
  transform: translateX(-50%);
}

/* Icône "+" */
.toc.collapsed .toc-toggle::before {
  width: 14px;
  height: 4px;
  transform: translate(-50%, -50%) rotate(0deg);
}

.toc.collapsed .toc-toggle::after {
  width: 14px;
  height: 4px;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* ==============================
   VIDEOS
   ============================== */

/* ==================================================
   LECTEUR PRINCIPAL
   ================================================== */

.video-wrapper {
  max-width: 900px;
  margin: 30px auto;
  padding: 2px;
  border-radius: 10px;
  background: #6B4E1F;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.15);
}

.video-wrapper video {
  width: 100%;
  border-radius: 10px;
  display: block;
}

/* ==================================================
   MINI LECTEUR FLOTTANT
   ================================================== */

.mini-player {
  position: fixed;
  bottom: 20px;
  right: 20px;

  width: 220px;
  height: 124px; /* ratio 16:9 stable */
  border-radius: 12px;
  background: #000;
  padding: 0;
  overflow: hidden;

  display: none;
  z-index: 9999;

  /* ❌ SUPPRESSION DU DRAG NATIF */
  cursor: default !important;

  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ❌ suppression du curseur grabbing */
.mini-player:active {
  cursor: default;
}

.mini-player video,
.mini-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;

  /* ✅ garde les contrôles cliquables */
  pointer-events: auto;
}

/* Neutralise les comportements Chrome/Edge */
.mini-player video::-webkit-media-controls {
  cursor: default;
}

/* ----- Bouton retour lecteur principal ----- */
.restore-btn {
  position: absolute;
  top: 6px;
  left: 6px;

  padding: 4px 8px;
  font-size: 0.8em;
  color: white;

  border: none;
  border-radius: 8px;

  /* background: rgba(255,255,255,0.85); */
  background: rgba(0,0,0,0.2);
  cursor: pointer;
  transition: background 0.2s ease;

  z-index: 10;
}

.restore-btn:hover {
  background: rgba(0,0,0,0.6);
}

/* ----- Bouton fermeture mini-lecteur ----- */
.close-mini {
  position: absolute;
  top: 4px;
  right: 4px;

  width: 24px;
  height: 24px;
  font-size: 16px;

  border: none;
  border-radius: 50%;

  /* background: rgba(0,0,0,0.6); */
  background: none;
  color: white;
  cursor: pointer;

  z-index: 10;
}

.close-mini:hover {
  background: rgba(0,0,0,0.6);
}

/* ==================================================
   IMAGE MINIATURE AVEC PLAY
   ================================================== */

.video-trigger-wrapper {
  position: relative;
  display: inline-block;
  margin: 2em auto;
  max-width: 320px;
  cursor: pointer;
  background: rgb(244, 241, 235);
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}

.video-trigger {
  width: 100%;
  border-radius: 12px;
  display: block;
  transition: transform 0.2s ease;
}

.video-trigger-wrapper:hover .video-trigger {
  transform: scale(1.05);
}

.play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  font-size: 3em;
  color: white;
  opacity: 0.9;

  text-shadow: 0 0 8px rgba(0,0,0,0.7);
  pointer-events: none;
}

/* ==============================
   Breadcrumb - Fil d'ariane
   ============================== */

.breadcrumb {
  display: inline-block;    /* reste compact */
  font-size: 0.9em;
  margin-bottom: 10px;
  white-space: nowrap;
  text-align: left;         /* texte aligné à gauche */
}

/* Important : override du text-align du parent */
.breadcrumb-container {
  text-align: left;
}

.breadcrumb a,
.breadcrumb span {
  display: inline;          /* mots sur la même ligne */
  margin: 0;
  padding: 0;
}

.breadcrumb a {
  text-decoration: none;
  color: #6B4E1F;
  transition: color 0.2s;
}

.breadcrumb a:hover {
  color: #F29A2E;
}

.breadcrumb a::after {
  content: " › ";            /* séparateur très proche du texte */
  color: #666;
}

.breadcrumb a:last-child::after {
  content: "";
}

.breadcrumb span {
  color: #555;
}

/* ==============================
   Footer
   ============================== */

.footer {
  background: #6B4E1F;
  color: white;
  text-align: center;
  padding: 1.2em 0;
  margin-top: 3em;
  border-top: 3px solid #6B4E1F;
}

.footer a {
  color: white;
  text-decoration: none;
}

.footer a:hover {
  color: #F29A2E;
}

/* Structure du footer (nouveau) */
.footer-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}

.footer-main {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 300px; /* ton ancien gap conservé */
}

.footer-tagline {
  font-size: 1.2em;
  font-weight: bold;
  margin: 0;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.footer-copy {
  margin-top: 10px;
  font-size: 0.9em;
}

/* 📱 Responsive */
@media (max-width: 768px) {

  .footer-main {
    flex-direction: column;
    gap: 1.5rem;       /* remplace le gap 300px en mobile */
    text-align: center;
  }

  .footer-links {
    align-items: center; /* centrer les liens */
  }

  .footer-tagline {
    font-size: 1.1em;
  }
}

/* Bouton rond flottant avec icône flèche */
#backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: #6B4E1F;
  color: white;
  font-size: 1.5em;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;            /* rond parfait */
  text-decoration: none;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  opacity: 0;                    /* caché par défaut */
  z-index: 1000;
  cursor: pointer;
}

/* Flèche animée */
#backToTop .arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

#backToTop:hover {
  background: #6B4E1F;           /* bleu foncé au survol */
  transform: translateY(-3px);   /* léger flottement */
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

#backToTop:hover .arrow {
  transform: translateY(-3px) scale(1.2); /* effet de flottement + zoom */
}

/* Responsive */
@media (max-width: 480px) {
  #backToTop {
    width: 50px;
    height: 50px;
    bottom: 20px;
  }
}

/* ==============================
   Main content
   ============================== */
main {
  width: 100%;
  padding: 2em;
  text-align: center;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  flex: 1; /* pousse le footer en bas */
}

header,
main,
footer,
.footer {
  width: 100%;
  box-sizing: border-box;
}

/* ==============================
   Animations de l'accueil
   ============================== */
.animation-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 50px 20px 70px;
}

/* Image venant de la gauche */
.slide-in-left {
  width: 210px;
  opacity: 0;
  transform: translateX(-100%);
  transition: transform 1.5s ease-out, opacity 1.5s ease-out;
}

/* Animation venant de la droite */
.slide-in-right {
  opacity: 0;
  transform: translateX(100%) translateY(0px);
  transition: transform 1.5s ease-out, opacity 1.5s ease-out;
}

/* Classe déclenchement */
.slide-in-left.active,
.slide-in-right.active {
  transform: translateX(0) translateY(0);
  opacity: 1;
}

/* ==============================
   BULLE DE DISCUSSION
   ============================== */
.speech-bubble {
  max-width: 420px;
  background: white;
  padding: 20px 24px;
  border-radius: 18px;
  position: relative;

  border: 2px solid rgb(200, 200, 200);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);

  font-size: 1.2em;
  line-height: 1.5;
  
  margin-top: -80px;
}

/* Flèche – bordure */
.speech-bubble::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 25px;

  width: 0;
  height: 0;

  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-right: 16px solid rgb(200, 200, 200);
}

/* Flèche – fond */
.speech-bubble::after {
  content: "";
  position: absolute;
  left: -13px;       /* ← décalage clé */
  top: 27px;         /* ← léger ajustement vertical */

  width: 0;
  height: 0;

  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 14px solid white;
}

/* Animation venant de la droite */
.slide-in-right {
  opacity: 0;
  transform: translateX(100%) translateY(-10px);
  transition: transform 1.5s ease-out, opacity 1.5s ease-out;
}

/* Classe déclenchement */
.slide-in-left.active,
.slide-in-right.active {
  transform: translateX(0) translateY(-10px);
  opacity: 1;
}

/* ==============================
   Brahmagupta - Image et style de la page dédiée
    (page personnage.php)
   ============================== */

.image-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: -63px;
}

.image-container img {
    width: 100%;
    max-width: 800px;
    height: auto;
    display: block;
}

/*=========================================================
                SECTION AVANTAGES
=========================================================*/

.advantages{

    max-width:1250px;

    margin:90px auto;

    padding:70px 35px;

    background:linear-gradient(
        to bottom,
        #ffffff,
        #faf7f2
    );

    border-radius:30px;

    margin-top: -50px;

}

.advantages-header{

    text-align:center;

    margin-bottom:60px;

}

.section-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:#F8E6CC;

    color:#6B4E1F;

    font-weight:600;

    margin-bottom:20px;

}

.advantages h2{

    font-size:2.5rem;

    color:#3f2c12;

    margin-bottom:20px;

    line-height:1.2;

}

.advantages h2 span{

    color:#F29A2E;

}

.advantages-intro{

    max-width:820px;

    margin:auto;

    color:#666;

    line-height:1.9;

    font-size:1.08rem;

}

/*=========================================================
                    STATISTIQUES
=========================================================*/

.stats{

    display:grid;

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

    gap:20px;

    margin:55px 0 70px;

}

.stat-card{

    background:white;

    border-radius:20px;

    padding:25px;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

    text-align:center;

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-5px);

    box-shadow:0 16px 30px rgba(0,0,0,.10);

}

.stat-number{

    display:block;

    font-size:2rem;

    font-weight:700;

    color:#F29A2E;

}

.stat-text{

    display:block;

    margin-top:8px;

    color:#666;

}

/*=========================================================
                    GRILLE
=========================================================*/

.advantages-grid{

    display:grid;

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

    gap:28px;

}

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

.advantage-card{

    position:relative;

    overflow:hidden;

    background:white;

    border-radius:22px;

    padding:35px;

    box-shadow:0 12px 28px rgba(0,0,0,.06);

    transition:
    transform .35s ease,
    box-shadow .35s ease;

}

/* Barre orange */

.advantage-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:0;

    height:5px;

    background:#F29A2E;

    transition:.45s;

}

.advantage-card:hover::before{

    width:100%;

}

.advantage-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 40px rgba(0,0,0,.12);

    background:#fffdf9;

}

.icon{

    font-size:3.2rem;

    color:#F29A2E;

    transition:.4s;

}

.advantage-card:hover .icon{

    transform:scale(1.15) rotate(-6deg);

}

.advantage-card h3{

    margin:18px 0 15px;

    color:#6B4E1F;

    font-size:1.35rem;

}

.advantage-card p{

    color:#666;

    line-height:1.8;

}

.section-divider{

    width:120px;

    height:4px;

    border:none;

    border-radius:10px;

    margin:70px auto;

    background:linear-gradient(
        to right,
        transparent,
        #F29A2E,
        transparent
    );

}

/*=========================================================
                ANIMATION AU SCROLL
=========================================================*/

.fade-card{

    opacity:0;

    transform:translateY(50px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.fade-card.visible{

    opacity:1;

    transform:translateY(0);

}

/*=========================================================
                RESPONSIVE
=========================================================*/

@media (max-width:950px){

    .stats{

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

    }

    .advantages-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width: 768px) {
    .advantages{
        margin-top: 200px;
    }
}

@media (max-width:650px){

    .advantages{

        padding:45px 20px;

        border-radius:20px;

    }

    .advantages h2{

        font-size:2rem;

    }

    .advantages-intro{

        font-size:1rem;

    }

    .stats{

        grid-template-columns:1fr;

    }

    .advantage-card{

        padding:28px;

    }

    .advantages{
        margin-top: 110px;
    }

}

/* Mobiles petits */
@media (max-width: 480px) {
    .advantages{
        margin-top: 80px;
    }
}

/* Mobiles trsè petits */
@media (max-width: 425px) {
    .advantages{
        margin-top: 0px;
    }
}

/* ==============================
   Conteneur du bouton avec main pointeuse
   ============================== */
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 0.5em;
}

.pointing-hand {
  width: 120px;
  height: auto;
  position: relative;
  top: -3cm;
  animation: point-bounce 2s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
  transform: rotate(45deg);
}

@keyframes point-bounce {
  0% {
    transform: rotate(315deg) translateX(0) translateY(0);
  }
  50% {
    transform: rotate(315deg) translateX(-25px) translateY(0px);
  }
  100% {
    transform: rotate(315deg) translateX(0) translateY(0);
  }
}

/* ==============================
   Boutons (sans animation)
   ============================== */
.btn {
  display: inline-block;
  margin-top: 2em;
  padding: 12px 24px;
  background: #6B4E1F;
  color: white;
  border-radius: 8px;
  border: none;
  text-decoration: none;
  font-weight: bold;
}

.btn:hover {
  background: #543c16;
  /* color: #ff9d00;*/
  transform: scale(1.05);
  transition: 0.3s ease;
}

/* ============================================================
   ACCESSIBILITÉ — Focus visible (navigation clavier)
   Style doux beige / caramel
   ============================================================ */

/* Réinitialise le focus par défaut */
:focus {
    outline: none;
}

/* Applique un focus visible personnalisé à tous les éléments interactifs */
button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus {
    outline: 3px solid rgba(180, 130, 90, 0.9); /* caramel doux */
    outline-offset: 4px;
    border-radius: 6px;
    transition: outline-color 0.2s ease-in-out;
}

/* Focus sur les boutons style "btn" */
.btn:focus {
    outline: 3px solid rgba(200, 150, 110, 0.95);
    outline-offset: 4px;
}

/* Focus sur les exo-box pour plus de confort visuel */
.exo-box:focus-within {
    box-shadow: 0 0 0 4px rgba(200, 160, 120, 0.25);
    border-radius: 12px;
    transition: box-shadow 0.2s ease-in-out;
}

/* ==============================
   RESPONSIVE DESIGN
   ============================== */

/* Tablettes et mobiles */
@media (max-width: 768px) {
  /* Navigation */
  nav {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    padding: 6px 8px;
    white-space: nowrap;
    overflow: visible;
  }

  .nav-left {
    display: none;
  }

  .nav-right {
    flex: 0;
    text-align: right;
    gap: 4px;
  }

  .nav-center {
    flex: 0;               /* important : sinon il se recentre */
    position: static;
    transform: none;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
    order: 1;
    min-width: 140px; /* empêche la compression */
    flex-shrink: 0;   /* interdit au bloc de se réduire */
  }

  .nav-left a,
  .nav-right .burger {
    font-size: 0.9em;
    padding: 8px 10px;
    white-space: nowrap;
  }

  .logo img {
    height: 32px;
    margin-right: 8px;
  }

  .logo span {
    display: inline-block;
    font-size: 1.3em;
  }

  .burger-text-normal { display: none; }
  .burger-text-mobile { display: inline; }

  .burger-menu-normal {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: calc(100vw - 32px);
    min-width: unset;
    top: calc(100% + 8px);
    max-height: 320px;
  }

  .burger-menu-responsive {
    left: auto;
    right: -280px;
    top: 0;
    transform: none;
    width: 260px;
    max-width: calc(100vw - 20px);
    height: 100vh;
    max-height: none;
    padding-top: 90px;
  }

  .burger-menu-responsive.show {
    right: 0;
  }

/* Sous-menu mobile */
.burger-submenu {
  display: none;
  flex-direction: column;

  /* fond plus clair que le menu mobile */
  background: rgba(180, 130, 90, 0.9); /* caramel doux */
}

.burger-submenu.show {
  display: flex;
}

/* Bouton parent "Outils" */
.burger-link-parent {
  cursor: pointer;
  /* même apparence que .burger-menu a */
  display: block;
  width: 100%;
  padding: 12px 16px; /* identique aux autres */
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
  color: inherit;
  text-decoration: none;
  background: none;
  border: none;
  /* même séparateur */
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: right;
  }

/* Sous-liens (ex: Calculatrice) */
.burger-link-sub {
  padding-left: 42px !important; /* déjà dans ton CSS */
  font-size: 0.95em;
}

  .burger-menu a {
    padding: 12px 16px;
  }

  /* Fix speech bubble overflow */
  .speech-bubble {
    max-width: calc(100% - 20px);
    margin: 0 10px;
  }

  /* Animation container accueil */
  .animation-container {
    flex-direction: column;
    gap: 20px;
    /*min-height: 50vh; */
  }

  .slide-in-left {
    margin-right: 150px;
  }

  .slide-in-left, .slide-in-right {
    width: 100%;
    max-width: 300px;
  }

  .speech-bubble {
    max-width: 50%;
    margin-top: -470px;
    font-size: 1em;
    margin-left: 160px; /* décale légèrement vers la droite */
  }

  /* Flèche – bordure (triangle gris) */
  .speech-bubble::before {
    display: none; /* on supprime la flèche pour mobile */
    /*top: -30px; */                /* place la flèche au-dessus */
    /*left:9%;  */                /* centre horizontalement */
    /*transform: translateX(-50%);*/
    
    /*border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 16px solid rgb(200, 200, 200);*/ /* flèche vers le bas */
  }

  /* Flèche – fond (triangle blanc) */
  .speech-bubble::after {
    display: none; /* on supprime la flèche pour mobile */
    /*top: -26px;    */             /* légèrement plus bas que ::before */
    /*left: 9%;
    transform: translateX(-50%);

    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 14px solid white; */ /* flèche vers le bas */
  }

  /* Bouton container */
  .button-container {
    flex-direction: column;
    gap: 10px;
    margin-top: 25px;   /* ou 60px, à ajuster selon le rendu */
  }

  .pointing-hand {
    width: 80px;
    top: 0;
  }

  /* Main content */
  main {
    padding: 1em;
  }

  /* Cours content */
  .course-content {
    margin: 1em auto;
    padding: 0 10px;
  }

  .contact-image {
    display: none;
  }

}

/* Mobiles petits */
@media (max-width: 480px) {
  .logo span {
    font-size: 1.5em;
  }

  .slide-in-left {
    margin-right: 100px;
  }

  .slide-in-left, .slide-in-right {
    max-width: 250px;
  }

  .speech-bubble {
    padding: 15px 20px;
    margin-top: -400px;
    max-width: 65%;
    margin-left: 100px; /* décale légèrement vers la droite */
  }

  /* Flèche – bordure (triangle gris) */
  /*.speech-bubble::before { */
  /*  left:15%;  */                /* centre horizontalement */
  /*} */
  /* Flèche – fond (triangle blanc) */
  /*.speech-bubble::after {
    left: 15%;
  }*/

  .button-container {
    margin-top: 5px;   /* à ajuster selon le rendu */
  }

  .btn {
    padding: 10px 20px;
    font-size: 0.9em;
  }
}

/* ==============================
   Classes pour exercices et résultats
   ============================== */
.exo {
  margin: 1.5em 0;
  text-align: left;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
  font-size: 1.05em;
  line-height: 1.6;
}

.exo h3 {
  font-size: 1.4em;
  margin-bottom: 0.8em;
}

.exo p {
  font-size: 1.1em;
  margin: 0.8em 0;
}

.exo label {
  display: block;
  font-size: 1.08em;
  margin: 0.8em 0 0.4em 0;
  font-weight: 500;
}

.exo input[type="number"],
.exo input[type="text"] {
  font-size: 1em;
  padding: 12px;
}

.exo-box {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.resultat {
  margin-top: 2em;
  padding: 1em 1em 2em 1em; /* un peu plus de padding en bas */
  background: #e8f5e9;
  border-radius: 8px;
}

.champ {
  margin: 1em 0;
  text-align: left;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.champ input, 
.champ textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.confirmation {
  margin-top: 1em;
  padding: 1em;
  background: #e8f5e9;
  border: 1px solid #4caf50;
  border-radius: 8px;
  color: #2e7d32;
}

.erreur {
  margin-top: 1em;
  padding: 1em;
  background: #ffebee;
  border: 1px solid #f44336;
  border-radius: 8px;
  color: #c62828;
}

#result1, #result2, #result3, #result4 {
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

.exo-box:nth-child(odd) {
    background: rgb(252, 250, 247);
}
.exo-box:nth-child(even) {
    background: white;
}

.exo-box {
    background: white;
    border: 2px solid rgb(200, 200, 200);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 35px;
    /*box-shadow: 0px 3px 6px rgba(0,0,0,0.08);*/
    box-shadow: 0px 6px 12px rgba(0,0,0,0.10);
}

.exo h3 {
    margin-top: 0;
}

.exo-box input[type="number"] {
    padding: 8px 12px;
    width: 120px;
    font-size: 1.1em;
    border-radius: 8px;
    border: 1px solid #bbb;
    margin-top: 5px;
}

.exo-box h3 {
    background: #6B4E1F;
    /* background: linear-gradient(to bottom, #6B4E1F 0%, rgba(107, 78, 31, 0) 280%); */
    color: white;
    padding: 12px 18px;
    margin: -20px -20px 20px -20px;
    border-radius: 12px 12px 0 0;
}

.new-exo-btn {
    text-align: right;
    margin-top: 10px;
}

.new-exo-btn .btn {
    background-color: #2d6a4f;
    color: white;
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

.new-exo-btn .btn:hover {
    background-color: #1b4332;
}

.badge-number {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #6B4E1F;
    color: #fff;
    font-weight: bold;
    font-size: 1rem;
    margin-right: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.btn-refresh {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background-color: #6B4E1F; /* couleur demandée */
  color: #ffffff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transition: transform 0.12s ease, background-color 0.12s ease;
  text-decoration: none; /* pour les <a> */
}

.btn-refresh .icon { font-size: 1.1rem; line-height: 1; }

.btn-refresh:hover { background-color: #583f17; }
.btn-refresh:active { transform: translateY(1px) scale(0.995); }

/* focus accessible (reprend ton style beige) */
.btn-refresh:focus {
  outline: 3px solid rgba(200,160,120,0.95);
  outline-offset: 3px;
}

/* PAGE COURS — STYLE MODERNE */

/* Section de recherche */
.search-section {
  text-align: center;
  padding: 40px 20px;
}

.search-section h2 {
  font-size: 2.2em;
  margin-bottom: 10px;
}

.search-section input {
  margin-top: 10px;
  padding: 12px 16px;
  width: 60%;
  max-width: 450px;
  border: 2px solid #0B2A4A;
  border-radius: 8px;
  font-size: 1em;
  outline: none;
  transition: 0.3s;
}

.search-section input:focus {
  border-color: #0B2A4A;
}

/* Grille des cours */
.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
  padding: 40px;
  max-width: 1200px;
  margin: auto;
}

/* Cartes de cours */
.course-card {
  background: white;
  padding: 25px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  text-decoration: none;
  color: #222;
  transition: 0.3s ease;
  display: block;
}

.course-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

.course-icon {
  font-size: 2.3em;
  margin-bottom: 10px;
}

.course-card h3 {
  margin: 8px 0;
  font-size: 1.4em;
  color: #0B2A4A;
}

.course-card p {
  font-size: 0.95em;
  line-height: 1.4em;
  color: #444;
}

/* ==============================
   PAGE D'ERREUR 404
   ============================== */

.error-404 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  min-height: 70vh;
}

.error-container {
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  background: white;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  text-align: center;
}

.error-image {
  flex: 0 0 auto;
  min-width: 200px;
}

.error-image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
}

.error-content {
  flex: 1;
  text-align: center;
  width: 100%;
}

.error-code {
  font-size: 5em;
  font-weight: bold;
  color: #6B4E1F;
  margin: 0;
  line-height: 1;
}

.error-title {
  font-size: 2em;
  color: #0B2A4A;
  margin: 15px 0;
}

.error-message {
  font-size: 1.1em;
  color: #555;
  margin: 20px 0 30px;
  line-height: 1.6;
}

.error-buttons {
  display: flex;
  gap: 15px;
  margin: 30px 0;
  flex-wrap: wrap;
}

.btn-primary, .btn-secondary {
  padding: 12px 25px;
  border: none;
  border-radius: 8px;
  font-size: 1em;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  transition: 0.3s ease;
  display: inline-block;
}

.btn-primary {
  background: #6B4E1F;
  color: white;
}

.btn-primary:hover {
  background: #543c16;
  transform: translateY(-2px);
}

.btn-secondary {
  background: #F29A2E;
  color: white;
}

.btn-secondary:hover {
  background: #E68620;
  transform: translateY(-2px);
}

.error-suggestions {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 2px solid #e0e0e0;
}

.error-suggestions h3 {
  color: #0B2A4A;
  margin-bottom: 15px;
}

.error-suggestions ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.error-suggestions li {
  margin: 10px 0;
}

.error-suggestions a {
  color: #6B4E1F;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
}

.error-suggestions a:hover {
  color: #F29A2E;
  text-decoration: underline;
}

/* ==============================
   RÈGLES RESPONSIVES (TABLETTE / MOBILE)
   ============================== */

/* Tablettes et petits écrans (≤ 768px) */
@media (max-width: 768px) {
  header {
    width: 100%;
  }

  .nav-left, .nav-right, .nav-center {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 12px;
  }

  header nav {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  header nav .nav-left {
    display: none !important;
  }

  header nav .nav-center,
  header nav .nav-right {
    width: auto;
  }

  header nav .nav-right {
    justify-content: flex-end;
  }

  .logo span { font-size: 1.4em; }

  main { padding: 1.2em; }

  .search-section input { width: 100%; max-width: 100%; }

  .courses-grid { padding: 20px; gap: 18px; }

  .course-card { padding: 18px; }

  .video-trigger-wrapper { max-width: 100%; margin: 1.5em auto; }

  .video-wrapper { margin: 18px auto; }

  .course-content { padding: 0 12px; max-width: 100%; }

  .exo { max-width: 100%; padding: 0 8px; }

  .exo-box { margin-bottom: 22px; }
}

/* Petits téléphones (≤ 480px) — optimisation mobile */
@media (max-width: 480px) {
  nav { padding: 8px 12px; }

  .nav-left, .nav-right { gap: 8px; }

  .logo img { height: 34px; }
  .logo span { font-size: 1.1em; }

  .search-section h2 { font-size: 1.6em; }
  .search-section { padding: 24px 12px; }

  .courses-grid { grid-template-columns: 1fr; padding: 12px; gap: 12px; }

  .video-trigger-wrapper { max-width: 100%; border-radius: 10px; }

  .video-wrapper { padding: 0 6px; }

  .mini-player { width: 180px; height: 102px; right: 12px; bottom: 12px; }

  .exo-box input[type="number"] { width: 100%; max-width: 100%; }

  .btn { width: 100%; box-sizing: border-box; }

  /* Page 404 responsive */
  .error-container {
    gap: 20px;
    padding: 20px;
  }

  .error-image {
    min-width: 150px;
  }

  .error-code {
    font-size: 3em;
  }

  .error-title {
    font-size: 1.5em;
  }

  .error-content {
    text-align: center;
  }

  .error-buttons {
    justify-content: center;
  }

  .btn-primary, .btn-secondary {
    flex: 1;
    min-width: 140px;
  }
}

/* ==============================
   PAGE FAQ
   ============================== */
.faq-page {
  max-width: 900px;
  margin: 1rem auto;
  padding: 0 20px;
}

.faq-page h1 {
  text-align: center;
  color: #0B2A4A;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.faq-intro {
  text-align: center;
  color: #555;
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.faq-container {
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.faq-item {
  margin: 0;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  background: white;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.faq-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  border-color: #6B4E1F;
}

.faq-question {
  width: 100%;
  padding: 1.5rem 1.8rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 600;
  color: #0B2A4A;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
}

.faq-question:hover {
  background: linear-gradient(135deg, #6B4E1F 0%, #8B6B3F 100%);
  color: white;
  transform: translateY(-1px);
}

.faq-question:focus {
  outline: 2px solid #6B4E1F;
  outline-offset: 2px;
}

.faq-icon {
  font-size: 1.8rem;
  font-weight: bold;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.faq-item:hover .faq-icon {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.faq-answer {
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 1.2rem !important;
  transition: max-height 0.3s ease, padding 0.3s ease !important;
}

.faq-item.open .faq-answer {
  max-height: 1000px !important;
  padding: 1.2rem !important;
}

.faq-answer p {
  color: #555;
  line-height: 1.6;
  margin: 0;
}

.faq-answer a {
  color: #6B4E1F;
  text-decoration: none;
  font-weight: bold;
}

.faq-answer a:hover {
  text-decoration: underline;
}

.faq-contact {
  background: #f9f9f9;
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  margin-top: 3rem;
}

.faq-contact h2 {
  color: #0B2A4A;
  margin-bottom: 0.5rem;
}

.faq-contact p {
  color: #555;
  margin-bottom: 1.5rem;
}

.faq-contact .btn {
  display: inline-block;
  background: #6B4E1F;
  color: white;
  padding: 0.75rem 2rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.faq-contact .btn:hover {
  background: #5a4018;
}

/* Responsive */
@media (max-width: 768px) {
  .faq-page h1 {
    font-size: 2rem;
  }

.faq-question {
    font-size: 1rem;
    padding: 1.2rem 1.5rem;
  }

  .faq-icon {
    font-size: 1.6rem;
    width: 28px;
    height: 28px;
  }

  .faq-answer {
    padding: 0 1rem !important;
  }

  .faq-item.open .faq-answer {
    padding: 1rem !important;
  }
}
/* ==============================
   CALCULATRICE FLOTTANTE
   ============================== */

.calc-float-btn {
  position: fixed;
  bottom: 30px;
  left: 30px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #032f63;
  border: 3px solid white;   /* bordure blanche fine */
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(107, 78, 31, 0.4);
  transition: all 0.3s ease;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calc-float-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(107, 78, 31, 0.5);
}

.calc-float-btn:active {
  transform: scale(0.95);
}

/* Modal */
.calc-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.calc-modal-content {
  background-color: white;
  margin: auto;
  padding: 0;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    transform: translate(-50%, -60%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

.calc-modal-header {
  background: linear-gradient(135deg, #0B2A4A 0%, #1e3a5f 100%);
  color: white;
  padding: 1.2rem;
  border-radius: 16px 16px 0 0;
  position: relative;
}

.calc-modal-header h3 {
  margin: 0;
  font-size: 1.3rem;
}

.calc-close {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 2rem;
  font-weight: bold;
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calc-close:hover {
  color: #F29A2E;
  transform: rotate(90deg);
}

/* Affichage */
.calculator-display {
  background: linear-gradient(135deg, #0B2A4A 0%, #1e3a5f 100%);
  border-radius: 0;
  padding: 1.2rem;
  margin-bottom: 1rem;
  text-align: right;
}

.calc-display-input {
  width: 100%;
  background: transparent;
  border: none;
  font-size: 2rem;
  font-weight: bold;
  color: white;
  text-align: right;
  padding: 0;
  font-family: 'Courier New', monospace;
}

.calc-display-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.calc-display-input:focus {
  outline: none;
}

/* Grille de boutons */
.calculator-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  padding: 0 1.2rem 1.2rem;
}

.calculator-buttons button {
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.calc-icon {
  width: 80px;
  display: block;
  /* filter: invert(1); utile si ton bouton est sombre */
  border-radius: 50%;
}

.btn-number {
  background: #f5f5f5;
  color: #0B2A4A;
  border: 2px solid #e0e0e0;
}

.btn-number:hover {
  background: #e8e8e8;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.btn-number:active {
  transform: translateY(0);
}

.btn-zero {
  grid-column: span 2;
}

.btn-operator {
  background: #6B4E1F;
  color: white;
  font-weight: bold;
}

.btn-operator:hover {
  background: #5a4018;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(107, 78, 31, 0.3);
}

.btn-operator:active {
  transform: translateY(0);
}

.btn-equals {
  grid-column: span 1;
  background: linear-gradient(135deg, #6B4E1F 0%, #8B6B3F 100%);
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
}

.btn-equals:hover {
  box-shadow: 0 2px 8px rgba(107, 78, 31, 0.3);
  transform: translateY(-2px);
}

.btn-equals:active {
  transform: translateY(0);
}

.btn-function {
  background: #F29A2E;
  color: white;
  font-weight: bold;
  font-size: 0.95rem;
}

.btn-function:hover {
  background: #e08a1e;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(242, 154, 46, 0.3);
}

.btn-function:active {
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 480px) {
  .calc-float-btn {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    bottom: 20px;
    left: 20px;
  }

  .calc-modal-content {
    width: 95%;
    max-width: none;
  }

  .calculator-buttons {
    gap: 0.5rem;
    padding: 0 1rem 1rem;
  }

  .calculator-buttons button {
    padding: 0.9rem;
    font-size: 1rem;
  }

  .calc-display-input {
    font-size: 1.6rem;
  }
}

/* =====================================
   CORRECTION RESPONSIVE GLOBALE
===================================== */

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

body,
main,
section,
div {
  max-width: 100%;
}

/* =====================================
   CORRECTION RESPONSIVE FINALE
===================================== */

@media (max-width: 768px) {

  body {
    width: 100%;
    overflow-x: hidden;
  }

  main {
    width: 100%;
    margin: 0 auto;
    padding: 1em;
    box-sizing: border-box;
  }

  header,
  footer,
  .footer {
    width: 100%;
  }

  nav {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .course-content,
  .exo,
  .exo-box,
  .faq-page,
  .error-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .image-container img,
  img {
    max-width: 100%;
    height: auto;
  }
}