/* v3 */
:root {
    --bleu-navy: #110c54;
    --bleu-navy-rgb: 17, 12, 84;
    --bleu-doux: #8690f6;
    --bleu-doux-rgb: 134, 144, 246;
    --bleu-outremer: #3337ce;
    --bleu-outremer-rgb: 51, 55, 206;
    --blanc: #f3f4f7;
    --blanc-rgb: 243, 244, 247;
    
    --mauve: #b57df0;
    --mauve-rgb: 181, 125, 240;
    --rose-nymphe: #dec6f6;
    --rose-nymphe-rgb: 222, 198, 246;
    --orange-corail: #c85626;
    --orange-corail-rgb: 200, 86, 38;
    --tangerine: #d18a35;
    --tangerine-rgb: 209, 138, 53;
    --beige: #f5e7dc;
    --beige-rgb: 245, 231, 220;

    --bg: var(--beige);

    --bg-alt: var(--blanc);
    --card-bg: var(--beige);
    
    --beige-clair: #f7ede1;

    --section: var(--beige);

    --accent: var(--bleu-navy);
    --accent-rgb: var(--bleu-navy-rgb);
    --accent-soft: var(--bleu-outremer);

    /* --accent: #3b6b8c;
    --accent-rgb: 59, 107, 140;
    --accent-soft: #e3edf5; */
    --text-main: var(--accent);
    --text-soft: var(--accent-soft);
    --text-height: 1.6;
    --delay: 0.6s;
    --nav-height: 60px;
}

:root {
    scroll-padding-top: var(--nav-height); /* hauteur de la navbar */
}

* { box-sizing: border-box; }

/* SCROLL FLUIDE */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    background: var(--section);
    color: var(--text-main);
    line-height: var(--text-height);
    overflow-x: hidden;
}

a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

body {
    padding-top: var(--nav-height); /* hauteur de la navbar */
}

/* ----------------------------- */
/* SECTIONS                      */
/* ----------------------------- */

/* État initial : invisible + décalage */
.section {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    padding: 20px;
}

/* Quand la section devient visible */
.section.visible {
    opacity: 1;
    transform: translateX(0);
    transition-delay: var(--delay);
}

h1, h2, h3 {
    color: var(--tangerine);
}
.section h2 {
    text-align: center;
    font-size: 1.8rem;
    color: var(--tangerine);
    margin-top: 0;
    margin-bottom: 30px;
}

.section h3 {
    font-size: 1.4rem;
    text-align: center;
}

.section p,
.section ul {
    max-width: 820px;
    margin: 0 auto 20px;
    font-size: 1.05rem;
    color: var(--text-main);
}

/*.section > *:last-child {
    margin-bottom: 0;
}*/

/* État initial : invisible */
.section h2,
.section h3,
.section h3,
.section p,
.section li {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity var(--delay) ease-out, transform var(--delay) ease-out;
}

/* Quand la section devient visible */
.section.visible h2,
.section.visible h3,
.section.visible h3,
.section.visible p,
.section.visible li {
    opacity: 1;
    transform: translateY(0);
    transition-delay: var(--delay);
}

.section ul {
    list-style: none;
    padding-left: 0;
}

.section li {
    margin-bottom: 10px;
    padding-left: 28px;
    position: relative;
}

/* ANIMATION DES CLÉS */
@keyframes keyFadeSlide {
    0% { opacity: 0; transform: translateX(-6px); }
    100% { opacity: 1; transform: translateX(0); }
}

/*.section li::before {
    content: "\1F5DD";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.2rem;
    color: var(--accent);
    opacity: 0;
    transform: translateX(-6px);
}*/

.section li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;

    width: 18px;
    height: 18px;

    background-image: url("../img/cle.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    opacity: 0;
    transform: translateX(-6px);
}

.section.visible li::before {
    animation: keyFadeSlide var(--delay) ease-out forwards;
    animation-delay: calc(var(--delay) + (var(--i) * 0.5s));
}

.signature {
  font-family: "Dancing Script", cursive;
  font-size: 1.8em;
  color: var(--accent);
}

.hidden {
  display: none !important;
}

@media print {

    p, li {
      font-size: 12pt !important;
      line-height: normal !important;
    }

    .dontprint {
        display: none !important;
    }

    .hidden {
      display: inline !important;
    }

    /* Afficher toutes les sections même si non animées */
    section,
    .section {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }

    /* Afficher tout le contenu interne */
    section * {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }

    html, body,
    .section,
    .section h2,
    .section h3,
    .section h3 {
        text-align: left;
        padding-bottom: 0px !important;
        margin-bottom: 0px !important;
        padding-top: 0px !important;
        margin-top: 0px !important;
        background: none !important;
    }

    .section p {
        line-height: var(--text-height);
    }

    /* Désactiver toutes les animations */
    * {
        animation: none !important;
        transition: none !important;
    }

    /* Réactiver les puces */
    
    ul, ol {
        list-style: initial !important;
        margin-left: 40px !important;
    }
    li {
        display: list-item !important;
        padding-left: 0px !important;
        margin-bottom: 0px !important;
    }
    .section li::before {
        content: " ";
        background: none;
    }

    /* Éviter les coupures de section */
    section {
        page-break-inside:auto !important;
    }
}

.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-justify {
  text-align: justify;
}

p {
  margin-bottom: 0.5em !important;
  text-align: justify;
  padding-left: 20px;
  padding-right: 20px;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}

@media (max-width: 720px) {
    p {
        hyphens: auto;
    }
}

.illustration-section {
  padding: 0;
}

.illustration-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30vw;
  max-height: 400px;
  min-height: 200px;
  overflow: visible;
  position: relative;
}

/* État initial : invisibles */
.illustration-right,
.illustration-left {
  opacity: 0;
  filter: drop-shadow(0px 0px 1px var(--mauve));
}

/* Image de droite */
.illustration-right {
  height: 100%;
  width: auto;
  object-fit: contain;
  order: 2;
  z-index: 1;
  padding-right: 2em;
}

/* Image de gauche */
.illustration-left {
  height: 100%;
  width: auto;
  object-fit: contain;
  order: 1;
  z-index: 2;
  padding-left: 2em;
}

.illustration-overflow {
  height: 120% !important;
  max-height: 480px !important;
  align-self: center !important;
}

/* Quand la section devient visible */
.illustration-section.animate .illustration-left {
  animation: slide-in-left 1s ease-out forwards;
}

.illustration-section.animate .illustration-right {
  animation: slide-in-right 1s ease-out forwards;
}

.illustration-section.out .illustration-left {
  animation: slide-out-left 0.6s ease-in forwards;
}

.illustration-section.out .illustration-right {
  animation: slide-out-right 0.6s ease-in forwards;
}

@keyframes slide-out-left {
  0% {
    opacity: 1;
    transform: translateX(5%); /* position finale de l'entrée */
  }
  100% {
    opacity: 0;
    transform: translateX(-20%); /* glisse vers la gauche */
  }
}

@keyframes slide-out-right {
  0% {
    opacity: 1;
    transform: translateX(-10%); /* position finale de l'entrée */
  }
  100% {
    opacity: 0;
    transform: translateX(20%); /* glisse vers la droite */
  }
}

/* Animations */
@keyframes slide-in-left {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }
  100% {
    opacity: 1;
    transform: translateX(5%);
  }
}

@keyframes slide-in-right {
  0% {
    opacity: 0;
    transform: translateX(50%);
  }
  100% {
    opacity: 1;
    transform: translateX(-10%);
  }
}

@media (max-width: 640px) {

  .illustration-container {
    flex-direction: column;     /* images l'une sous l'autre */
    justify-content: center;
    align-items: center;
    height: auto;               /* le fond s'adapte à la hauteur totale */
    padding: 0;            /* espace autour */
  }

  .illustration-left,
  .illustration-right {
    height: auto;
    max-height: none;
    width: 50%;                 /* images bien dimensionnées */
    max-width: 350px;           /* limite visuelle */
    margin: 0;
    opacity: 1;                 /* visible sans animation */
    transform: none;
    animation: none;
    scale: 1.3;
    padding: 0;
  }
}

@media print {
  .illustration-section {
    padding-top: 10mm !important;
    padding-bottom: 10mm !important;
  }
}