@font-face {
    font-family: "choses chouettes";
    src: url("choses-chouettes-inclusifve.ttf") format(truetype);
}
:root{--max:1100px;--accent:#1e3a8a;--muted:#1e3a8a;--bg:#ffffff;}
*{box-sizing:border-box}

html {
  font-size: 16px;
}

body{font-family:'choses chouettes',serif;font-variant-ligatures: none;background:var(--bg);color:var(--accent);margin:0;min-height: 100vh;display:flex;flex-direction: column;}
h1 {
    font-family: "choses chouettes", serif;
    font-size: clamp(2rem,6vw,3.8rem);
    font-weight: bold; 
    margin: 0.1em 0 0.05em;
    text-align: center;
}
.header{background:#ffff;border-bottom:0px solid #ffff;}
.header-inner{max-width:var(--max);margin:0 auto;padding:0px;display:flex;align-items:center;justify-content:center;gap:5px;}
.header-inner img{height:40px}
nav{max-width:var(--max);margin:0 auto;padding:0px;background:#ffff;border-bottom:0px solid #ffff;}
nav ul{list-style:none;display:flex;gap:70px;padding:0;margin:0;justify-content:center;}

nav a{text-decoration:none;color:#1e3a8a;font-size:clamp(1.4rem,5vw,3rem);}


/* lien actif selon la page */
body[data-page="jouer"] nav a[data-page="jouer"],
body[data-page="lire"] nav a[data-page="lire"],
body[data-page="ecouter"] nav a[data-page="ecouter"],
body[data-page="regarder"] nav a[data-page="regarder"],
body[data-page="rencontrer"] nav a[data-page="rencontrer"] {
  font-weight: 700;
}



.container{
    max-width:var(--max);
    width:100%;
    flex: 1;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    align-items: center; 
    padding:20px 22px;
    min-height:calc(100vh-220px);
}
.container-homepage {
    max-width: none; /* Supprime la limite de 1100px définie par --max dans container*/
    width: 100vw;    /* Utilise 100% de la largeur de la fenêtre de visualisation */
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center; 
    margin: 0;       /* Supprime les marges automatiques latérales */
    padding: 0;      /* Supprime les espaces intérieurs si vous voulez un plein écran total */
    min-height: 100vh; /* Occupe au minimum 100% de la hauteur de l'écran */
}
/* DESKTOP / TABLETTE */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
    justify-items: center;

    /*min-height: 100vh;   /* hauteur écran */
    align-content: center;  /* centre les lignes verticalement */
}

/* 6 images en 2 lignes de 3 sur desktop */
.grid-2.six-items {
    grid-template-columns:repeat(3, 1fr);
    width:90%;
}

.grid-2-centered {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width:70%;
}

.grid-2-proportion {
  display: grid;
  grid-template-columns: auto auto;
  gap: 26px;
  justify-content:center;
}

.grid-wrapper {
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-items: center;       /* centre horizontalement */
  justify-content: center;   /* centre verticalement */
  width: 75%;
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:26px;
    justify-items:center;
}
.player-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
}

.player-controls img {
    width: 200px;
    height: auto;
    cursor: pointer;
    object-fit: contain;
}

/* cartes uniformes */
.card{
    width:100%;
    background:#fff;
    border: 0px solid #ffff;
    border-radius:10px;
    overflow:hidden;
}

/* normalisation des images - l image prend toute la largeur qui est disponible*/
.card img{
    width:100%;
    height:auto;
    object-fit:contain;
    display:block;
}
/* l affichage de l image est dictée par sa hauteur*/
.imgH{
    max-height:60vh;
    width: auto;
    height:auto;
    display:block;
}

/* cas 3 images dans une grid 2: la dernière est centrée et on force la largeur de l'image à la largeur d'une colonne*/
.grid-2 > .card:last-child:nth-child(odd){
    grid-column:1 / -1;
    justify-self: center;
    width:calc((100% - 26px) / 2);
}


.card h3{
    margin:14px;
    font-size:clamp(1.4rem,4vw,2.8rem);
}

/* Footer */
.footer {
  display: flex;
  flex-direction: column;   /* empile verticalement */
  align-items: flex-end;    /* aligne les mots à droite */
  align-self: flex-end;     /* place le bloc à droite */
  padding: 0 20px 20px 0;   /* padding droite + bas */
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 0.5;           /* espace vertical réduit */
  text-align: right;        /* sécurité pour le texte */
}


/* le style pour le jeu de memory */
.memory-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width:100%;
  max-width: var(--max);
  padding-top:40px 20px;
}

.memory-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  width:100%;
  max-width: 900px;
}

.memory-card {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  cursor: pointer;
  perspective: 800px;
}


.memory-card-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.memory-card.flipped .memory-card-inner {
  transform: rotateY(180deg);
}

.memory-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
}

.memory-front {
  background-image: url("./Jouer/Jouer-Memory/images-pour-memory/dos.png");
  background-size: cover;
  background-position: center;
}
.memory-back {
  transform: rotateY(180deg);
  background-size: cover;
  background-position: center;
}

.memory-card.matched {
  visibility: hidden;
}


.restart-btn {
  font-family: inherit;
  font-size: 2rem;
  font-weight: 700;
  padding: 10px 24px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: #1e3a8a;
}

.win-message {
  font-size: 1.6rem;
  text-align: center;
}

.hidden {
  display: none !important;
}


/* la style pour le tournepage */
.bd-page-layout {
  display: block !important;
}

.bd-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 70vh;
  margin-top: 110px;
}

.bd-reader {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position:relative;
    max-width: 450px; 
    margin: 0 auto;
    height:auto;
    max-height: 70vh;
}

.bd-reader-large {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position:relative;
    max-width: 1000px; 
    margin: 0 auto;
    height:auto;
}
.bd-pages {
  display:block;
  width:100%;
  justify-content: center;
  align-items:center;
  margin:0;
  padding:0;
  line-height: 0;
}

.bd-page {
  display: none;
  width:auto;
  vertical-align: bottom;
  height: auto;
  max-width:100%;
  max-height: 70vh;
  object-fit: contain;
  padding:0;
  margin:0;
}

.bd-page.active {
  display: block;
  margin:auto;
}


/* contrôles */
.bd-controls {
  margin-top:10px;
  display: flex;
  justify-content: center;
  gap: 30px;
  align-items: center;
}

.bd-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: auto;
  cursor: pointer;
}
.bd-arrow-left {
  left: -60px;
}

.bd-arrow-right {
  right: -60px;
}


.bd-arrow.hidden {
  visibility: hidden;
}


/* le style pour la page de contact */
/* grille deux colonnes */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 70vh;
  align-items:end;
  gap: 40px;
  width: 100%;
}
/* rectangles */
.panel {
  background: #fff;
  border-radius: 10px;
  padding: 24px;
  min-height: 400px;

  display: flex;
  flex-direction: column;
}

/* image et texte l'un au dessus de l'autre */
.panel-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.panel-left-image {
  width: 40%;
  height: auto;
  max-height: 380px;
  object-fit:cover;
  align-self: flex-end;
}
.panel-left-image-small {
  width: 10%;
  height: auto;
  max-height: 380px;
  object-fit:cover;
  align-self:flex-end;
  margin-bottom: 10px;
}

.panel-left-text {
  margin-top: 16px;
  font-size: 1.4rem;
  line-height: 0.7;
  text-align: right;
}

/* alignement en bas */
.panel-bottom {
  margin-top: auto;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  margin-top: 30px;
  font-family: inherit;
  text-decoration: none;
  cursor:pointer;
  align-self: flex-end;
}

.contact-form {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-drawing-form {
display:flex;
flex-direction: column;
align-items:center;

}
.contact-drawing-form.hidden {
  display: none !important;
}
.drawing-area {
  position:relative;
  width: 300px;
  height: 300px;

  background-image: url("./images/formulaire-de-contact.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;

}

.panel-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height:100%;
  min-height: 400px;
}


.panel-right .contact-drawing-form {
  margin-top: 80px;
  align-items: center;
}

  /* groupe label + champ */
.field {
  width: 80%;
  position:absolute;
  left:13%;
  display:flex;
  align-items:baseline;
  gap:6px;
}
.field-name {
  top: 24px;
}

.field-email {
  top: 74px;
}

.field-message {
  top: 117px;
  height:150px;
  width: 92%;
  flex-direction:column;
  align-items:flex-start;
  display:flex;
}
.field-message textarea {
  flex:1;
  height: auto;
  box-sizing: border-box;

  padding: 4px 6px;
  line-height: 0.5;

  overflow: hidden;
  resize: none;

  font-family: inherit;
  font-size: 1.4rem;
  background: transparent;
  border: none;
}

/* texte "dessiné" */
.drawn-label {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.field,
.drawn-label {
  margin: 0;
  padding: 0;
}

.contact-drawing-form input,
.contact-drawing-form textarea {
  width: 80%;
  font-family: inherit;
  font-size: 1.4rem;

  border: none;
  background: transparent;
  outline: none;
  color: var(--accent);
}



/* nom */
.contact-drawing-form input[type="text"] {
  margin-bottom: 20px;
}

/* email */
.contact-drawing-form input[type="email"] {
  margin-bottom: 20px;
}

/* message */
.contact-drawing-form textarea {
  height: 60px;
  resize: none;
}
/* bouton envoyer */
.send-btn {
  margin-top: -10px;

  font-family: inherit;
  font-size: 1.8rem;
  font-weight: 700;

  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
  align-self:center;
}



.contact-form input,
.contact-form textarea {
  font-family: inherit;
  font-size: 1.1rem;
  padding: 10px 12px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  width: 100%;
}
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 1.1rem;
}
.contact-form button {
  margin-top: 10px;
  font-family: inherit;
  font-size: 1.1rem;
  padding: 10px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.message {
  text-align: center;
  font-size: 3rem;
  /* Ajouts pour le centrage automatique */
  margin: 0; 
  width: 100%;
}

/* Message d'orientation (caché par défaut) */
.orientation-msg {
  display: none;
  text-align: center;
  font-size: 1.2rem;
  color: var(--accent);
  padding: 10px;
  background:transparent;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* ============================================================
   MEDIA QUERY TABLETTE (Portrait & Paysage)
   Cible les écrans entre 701px et 1024px
   ============================================================ */

@media (min-width: 701px) and (max-width: 1024px) {
    
    :root {
        --max: 95%; /* On utilise plus de largeur sur tablette */
    }

    /* 1. Ajustement global du conteneur pour éviter le scroll vertical */
    .container {
        padding: 10px 20px;
        min-height: calc(100vh - 180px); /* Ajusté selon header/nav/footer */
        max-width: var(--max);
    }

    /* 2. Grilles d'images : On réduit l'écart et on adapte la taille */
    .grid-2.six-items, 
    .grid-2-centered, 
    .grid-wrapper {
        width: 90%; /* On passe de 70% à 90% pour mieux remplir l'écran tablette */
        gap: 20px;
    }

    .grid-3 {
        gap: 15px;
        width: 100%;
    }

    /* 3. Adaptation des cartes et images */
    .card h3 {
        font-size: 1.8rem; /* Taille de police plus lisible sur tablette */
        margin: 10px;
    }

    /* 4. Optimisation spécifique pour la BD (Tournepage) */
    .bd-reader {
        max-width: 550px; /* Plus grand que mobile, mais n'étouffe pas l'écran */
        max-height: 65vh;
    }

    .bd-page {
        max-height: 65vh;
        max-width:80%;
        margin:auto; /* Évite de pousser les flèches hors de l'écran */
    }

    /* Correction de l'espace blanc BD sur tablette */
    .bd-pages {
        line-height: 0;
    }
    .bd-page.active {
        display: block;
        margin:auto;
        max-width:80%;
    }
    /* 5. Memory Game : ajustement pour le tactile */
    .memory-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 colonnes au lieu de 6 pour plus de confort */
        gap: 15px;
        max-width: 80%;
    }

    /* 6. Page Contact (Split) */
    .split {
        gap: 20px;
        grid-template-columns: 1fr 1fr; /* On garde les 2 colonnes mais on réduit l'écart */
    }

    .panel {
        padding: 15px;
        min-height: 350px;
    }

    .panel-left-text {
        font-size: 1.2rem;
    }

    /* 7. Footer tablette */
    .footer {
        font-size: 1.2rem;
        padding: 0 30px 15px 0;
    }

    /* 8. Menu de navigation */
    nav ul {
        gap: 30px; /* On resserre un peu le menu pour tablette portrait */
    }
    
    nav a {
        font-size: 1.8rem;
    }
}
/*********************************************************************************
/* Ajustement spécifique pour Tablette en mode Paysage (plus large)
**********************************************************************************/

@media (min-width: 701px) and (max-width: 1024px) and (orientation: landscape) {
    .container {
        padding: 5px 20px;
    }
    
    .grid-3 .card img {
        max-height: 45vh; /* Empêche les images d'être trop hautes */
    }
    
    .bd-page {
        max-height: 55vh; /* On réduit un peu la hauteur pour voir les flèches sans scroller */
        max-width: 70%;
        margin:auto;
    }
    .bd-page.active {
        display: block;
        margin:auto;
        max-width:70%;
    }
    /* Le commentaire */
.nav-comment {
    position:absolute;
    text-align: right;
    right:0;            /* Reste aligné sur la droite du mot "Lire" */
    width: 60vw;         /* Utilise 60% de la largeur de l'écran max au lieu de 250px */
    max-width: 100px;    /* Limite quand même pour ne pas traverser tout l'écran */
    font-size: 1.1rem;   /* Réduire légèrement la taille pour gagner de l'espace */
    line-height: 0.4;
    word-wrap: break-word; /* Force le texte à aller à la ligne s'il est trop long */
    margin-top: 90px;    /* Réduit l'espace pour éviter de trop pousser l'image */
  }
}

/* ============================================================
   MEDIA QUERY : pour ecran 13 pouces
   ============================================================ */

@media (min-width: 1025px) and (max-width: 1440px) {

    /* 1. Élargissement du contenu pour remplir la largeur de l'écran */
    :root {
        --max: 95%; /* On utilise presque toute la largeur disponible */
    }
    /* modifie la taille du titre */
    h1 {
      font-size: 2.7rem !important; /* Réduit la taille par rapport au clamp par défaut */
      margin: 5px 0 0;           /* Réduit l'espace au-dessus et en-dessous */  
    }   
    /* modifie la taille des caractères de la barre de nav */
    nav a {
    font-size: 2.3rem !important; /* Taille plus équilibrée pour un 13" */
    }

    nav ul {
    gap: 50px !important; /* Resserre l'espace entre les mots du menu (actuellement 60px) */
    }
    .container {
        padding: 10px 20px;
        height: calc(100vh - 160px); /* Ajusté pour éviter le scroll vertical */
        min-height:auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
        align-items: center;
    }

    /* 2. Grilles : on passe de 70% à une largeur presque totale */
    .grid-3 .card img, 
    .grid-2 .card img, 
    .grid-2.six-items .card img {
        max-height: 30vh; /* Ajustez entre 35vh et 45vh selon vos préférences */
        width: auto;
        margin:0 auto;
    }

    .grid-2.six-items {
        width: 100%;
        gap: 20px;
    }
    

    /* 1. On s'assure que le wrapper occupe bien toute la largeur pour permettre le centrage */
    .grid-wrapper {
        width: 100% !important;
        display: flex;
        flex-direction: column;
        align-items: center; /* Centre les deux grilles horizontalement */
    }

    /* 2. Correction de la grille du bas */
    .grid-2-centered {
        display: grid !important;
        /* "auto" au lieu de "1fr" pour que les colonnes ne s'étirent pas inutilement */
        grid-template-columns: repeat(2, auto) !important; 
        gap: 26px !important; /* Même écart que la grille du haut */
        width: auto !important; /* La grille ne fait que la largeur de ses images */
        margin: 0 auto;
        justify-content: center;
    }

    /* 3. Normalisation des images pour les deux grilles */
    .grid-3 .card img, 
    .grid-2-centered .card img {
        max-height: 30vh !important;
        width: auto !important; /* Empêche l'image de forcer la largeur de colonne */
        display: block;
    }


    /* On applique la limite de hauteur à TOUTES les images de la page Lire */
    .grid-wrapper .card img {
        max-height: 30vh !important;
        width: auto !important;
        object-fit: contain;
        display: block;
    }

    /* Pour que les 2 images du bas ne soient pas trop géantes par rapport aux 3 du haut */
    .grid-2-centered .card {
        max-width: 300px; /* Ajustez cette valeur pour que l'aspect visuel soit équilibré */
    }
    
    /* pour les containers qui ne contiennent qu'une grid-3 et pour que celle ci prenne de la largeur */
    /* cela permet aux images de stavangerweg de s etaler */
    .container > .grid-3 {
        width: 100% !important;
        /* Réduire cette valeur pour resserrer les images */
        max-width: 850px !important; 
        
        margin: 0 auto; /* Indispensable pour garder le bloc centré */
        gap: 20px !important; /* Vous pouvez maintenant baisser le gap */
        grid-template-columns: repeat(3, 1fr);
    }

    /* On augmente la limite de hauteur des images uniquement pour cette structure */
    .container > .grid-3 .card img {
        max-height: 55vh !important; /* On passe de 30vh à 55vh */
        width: 100% !important;
        object-fit: contain;
    }
    
    /* 3. Adaptation de la liseuse BD (Tournepage) */
    .bd-reader {
        max-width: 480px; /* Taille optimale pour voir l'image entière à 710px de large */
        margin: 0 auto;
    }

    .bd-page {
        max-height: 55vh; /* Primordial pour garder les flèches visibles sans scroller */
        width: auto;
    }

    /* Suppression de l'espace blanc sous l'image */
    .bd-pages {
        line-height: 0;
        display: block;
    }

   
    
    /* 5. Jeu de Memory  */
    /* a. Réduire la taille des cartes */
    .memory-card {
        width: 100% !important;
        height: 18vh !important; /* Contrôle de la hauteur pour 3 lignes */
        max-width: 110px !important;
        max-height: 120px !important;
        margin: 0 auto;
        padding:2px;
        
        /* IMPORTANT : On s'assure que la carte ne coupe rien */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important; 
        background-color: transparent !important; 
        aspect-ratio: 1/1;
    }

    .memory-card img {
        /* On force l'image à tenir dans la boîte sans déborder */
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        
        /* La règle d'or pour voir l'image entière */
        object-fit: contain !important; 
        
        /* On retire les arrondis ou bordures qui pourraient masquer les coins */
        border-radius: 0 !important; 
    }
      /* b. Augmenter l'écart entre les lignes et colonnes */
    .memory-grid {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important;
        /* On augmente le gap vertical et horizontal */
        gap: 20px 15px !important; 
        width: 90% !important;
        max-width: 850px !important;
        margin: 0 auto !important;
    }

      /* c. Ajuster le wrapper pour bien distribuer l'espace */
    .memory-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px; /* Espace entre la grille et le bouton Recommencer */
    }

    /* 6. Page Contact (Split) : on réduit les marges */
    .split {
        gap: 15px;
        grid-template-columns: 1fr 1fr; /* On maintient les 2 colonnes */
    }

    .panel {
        padding: 12px;
        min-height: 300px;
    }

    .panel-left-text {
        font-size: 1.1rem;
        line-height: 1;
    }
    .footer {
        font-size: 1.2rem;
        padding: 0 30px 15px 0;
    }

    /* ajustements pour la page rencontrer*/

    .split {
        min-height: auto; 
        height: 75vh; /* On fixe une hauteur relative stable */
        gap: 20px;
        align-items: stretch;
    } 

    /* compresser le panel et le texte */
    .panel {
        padding: 15px !important;
    }

    /* Optimisation panel left */
    /* image et texte l'un au dessus de l'autre */

.panel-left-image {
  width: 20%;
  height: auto;
  max-height: 150px;
  object-fit:cover;
  align-self: flex-end;
}
.panel-left-image-small {
  width: 8%;
  height: auto;
  max-height: 200px;
  object-fit:cover;
  align-self:flex-end;
  margin-bottom: 8px;
}

.panel-left-text {
  margin-top: 16px;
  font-size: 1.2rem;
  line-height: 0.6;
  text-align: right;
}
    
    /* optimiser la zone de formulaire */
    .contact-drawing-form {
        gap: 10px;
    }

    /* On réduit la taille de la zone de saisie "dessinée" */
    .drawing-area {
        padding: 10px;
        background-size: contain; /* S'assure que le cadre dessiné ne s'étire pas trop */
    }

    .field {
        margin-bottom: 8px;
    }

    .field input, .field textarea {
        font-size: 1rem;
        padding: 5px;
    }

    /* On réduit spécifiquement la hauteur de la zone message */
    .field-message textarea {
        height: 80px !important; 
    }

    .send-btn {
        padding: 8px 20px;
        font-size: 1.2rem;
    }
    /* Le lien "En savoir plus" en bas du panneau */
    .panel-bottom {
        font-size: 1.2rem !important;
        margin-top: auto; /* Le pousse en bas sans forcer de marge fixe */
    }

    /* optimisation spécifique de la page en savoir plus */
    /* On cible uniquement les images de cartes sur la page 'en-savoir-plus' ou "rencontrer" en utilisant le selecteur data-page*/
  
    body[data-page="rencontrer"] .card img {
        max-height: 70vh !important; /* Réduction drastique pour le 13 pouces */
        width: auto !important;
        object-fit: contain;
        margin: 0 auto;
        display: block;
    }

}
/******************************************************************
MOBILE PORTRAIT
*******************************************************************/

@media (max-width:700px) and (orientation: portrait) {

  body {
    overflow-y: auto;
  }

  .split {
    overflow: visible;
  }

  .container {
    flex:1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    padding: 15px 20px;
    margin-top: 10px;
    min-height: calc(100vh-220px);
  }

  h1 {
    font-size: clamp(2rem,6vw,3.8rem);
    font-weight: bold; 
    text-align: center;
  }

  nav {
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
  }

  nav ul {
    display: flex;
    flex-wrap: wrap;        /* Permet de passer à la ligne si besoin */
    justify-content: center; /* Centre les éléments horizontalement */
    padding-left: 0 !important; /* SUPPRIME l'espace vide à gauche */
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
    gap: 10px;               /* Espace égal entre chaque lien */
    list-style: none;
  }

  nav li {
    margin:0px;
  }

  nav a {
    font-size: clamp(1.4rem, 5vw, 3rem);
    white-space: nowrap;
    text-align: center;
  }
 
  /* 3 images en vertical - ne dépasse pas la hauteur d'écran */
  .grid-3 {
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
  }

  .grid-3 .card img {
    max-height: 20vh;
    width: 100%;
    object-fit: contain;
  }

  /* 2 images en horizontal au centre */
  .grid-2 {
    display:flex;
    flex-direction: column;
    gap: 30px;
    width;100%;
    margin: 0 auto;
    align-items:center;
  }
  
  .grid-2 .card {
    width: 85%;
    max-width: 400px;
  }

  /* Annuler la règle de centrage pour 3 images */
  .grid-2 > .card:last-child:nth-child(odd) {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
  }

  /* 6 images en 3 lignes de 2 - ne dépasse pas la hauteur d'écran */
  .grid-2.six-items {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
  }

  .grid-2.six-items .card img {
    max-height: 26vh;
    width: 100%;
    object-fit: contain;
  }

  .container-homepage {
        padding: 10px;
        height: auto; /* Permet à la page de s'allonger verticalement */
    }

    .grid-2-centered {
        display: grid;
        /* Force une seule colonne au lieu de deux */
        grid-template-columns: 1fr !important; 
        gap: 20px; /* Espace vertical entre les deux images */
        width: 60%;
    }

    .grid-2-centered .card img {
        width: 100%;
        height: auto;
        max-height: none; /* Permet à l'image de prendre sa place */
    }

/* lecture de BD en alignement vertical */
    /* 1. On prépare le conteneur principal pour l'empilement */
    .bd-reader {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important; /* Espace entre les éléments empilés */
        height:auto !important;
        max-height:none !important;
    }

    /* 2. On définit l'ordre d'affichage (plus le chiffre est petit, plus c'est haut) */

    /* La flèche DROITE (pour aller à la page suivante) au-dessus de l'image */
    #nextBtn {
      order: 1;
    }

    /* Le conteneur de l'IMAGE (les pages) */
    .bd-pages {
        order: 2;
        width: 100%;
        display: flex;
    }

    .bd-page {
        max-width: 90% !important;
        height: auto !important;
        margin-top: 0px !important;
    }

    /* La flèche GAUCHE (page précédente) en dessous de l'image */
    #prevBtn {
        order: 3;
    }

    /* Suppression des positionnements absolus par défaut qui casseraient l'empilement */
    .bd-arrow {
        position: static !important;
        transform: none !important;
        margin: 5px 0 auto !important;
        width: 50px !important;
        height:auto !important;
    }

/* Code specifique pour alignement vertical des boutons pause, play, next */
    .player-controls {
        display: flex !important;
        flex-direction: column !important; /* Empilement vertical */
        align-items: center !important;    /* Centrage horizontal */
        gap: 20px;                         /* Espace entre les boutons */
        margin: 20px auto;
    }

    /* Ajustement de la taille des boutons pour le tactile */ 
    .player-controls img {
        width: 60px !important;  /* Taille adaptée aux doigts */
        height: auto !important;
        cursor: pointer;
    }




/* specifique pour page rencontrer */


  .split {
    grid-template-columns: 1fr;
    min-height: auto;
    align-items: stretch;
    gap:24px;
  }

  .panel-left,
  .panel-right {
    justify-content: flex-start;
  }

  .panel {
    min-height: auto;
  }

  .panel-top {
    flex-direction: column;
  }

  .panel-top img {
    width: 100%;
  }

  .panel-left-image {
    max-height: none;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .panel-left-image-small {
  max-height:none; 
  width: 20%;
  height: auto;
  object-fit:contain;
}
  .contact-form {
    margin-top: 0;
  }

/* Specifique pour page en savoir plus On force la grille à n'avoir qu'une seule colonne */
    .grid-2-proportion {
        grid-template-columns: 1fr !important; /* Une seule colonne de largeur totale */
        gap: 20px;                             /* Espace entre les images empilées */
        width: 100%;
        padding: 0 10px;
    }

    /* On ajuste les cartes et les images pour qu'elles s'adaptent à la largeur */
    .grid-2-proportion .card {
        width: 100% !important;
        max-width: none !important;
        display: flex;
        justify-content: center;
    }

    .grid-2-proportion .card img {
        width: 100% !important;    /* L'image prend toute la largeur disponible */
        height: auto !important;   /* La hauteur s'adapte pour garder les proportions */
        max-height: none !important; 
    }


  /* memory pour mobile portrait */
  .memory-wrapper {
    width: 100%;
    height:auto;
    padding: 0 30px;
    gap:10px;
    margin-top:24px;
  }

  .memory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    margin:0 auto;
  }

  .memory-card {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .restart-btn {
    font-size: 1rem;
    padding: 8px 16px;
  }

  .win-message {
    font-size: 1.3rem;
  }

  /* pour le tournepage */
  .bd-arrow {
    width: 36px;
  }

.orientation-msg {
    display: block;
  }

}  

/************************************************************************** 
/* MOBILE PAYSAGE
***************************************************************************/

@media (max-width: 950px) and (orientation: landscape) {
  
  body {
    overflow-y: auto;
  }

  /* Container : permet le scroll */
  .container {
    margin: 0 auto;
    padding: 10px 5px;
    align-items: flex-start;
    justify-content: center;
    min-height: auto;
    height: auto;
    max-width:100vw;
    width:100%;
    overflow-x:hidden;
  }

  h1 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: bold; 
    text-align: center;
    margin: 0.3em 0 0.1em;
  }

  /* Navigation : compacte */
  nav {
    padding: 5px 0;
    width:100%;
    max-width:100%;
  }

  nav ul {
    gap: 30px; /* distance minimale entre les élements du menu */
    justify-content: space-around; /*répartit les éléments du menu de manière égal*/ 
    width:80%; /* demande à ce que la ligne de menu occupe un certain ratio de l'écran*/
    margin: 0 auto; /* centre la ligne de menu*/
  }

  nav a {
    font-size: clamp(1.2rem, 4vw, 2rem);
  }

  /* 3 images en horizontal */
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 95%;
    margin: 0 auto;
  }
  
  .grid-3 .card {
    max-width: 100%;
  }

  .grid-3 .card img {
    max-height: 50vh;
    width: 100%;
    object-fit: contain;
  }

  /* 2 images en horizontal */
  .grid-2 {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
    padding: 10px;
    margin-top:30px;
  }

  .grid-2 > .card:last-child:nth-child(odd) {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
  }
  
  /* Ajuster la taille des cartes */
  .grid-2 .card {
    max-width: 100%;
  }

  .grid-2 .card img {
    max-height: 70vh;
    object-fit: cover;
  }

  /* 6 images en 2 lignes de 3 */
  .grid-2.six-items {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .grid-2.six-items .card img {
    max-height: 35vh;
  }

.panel-left-image-small {
  max-height:none; 
  width: 20%;
  height: auto;
  object-fit:contain;
}

  /* Memory en paysage - 6 colonnes optimisées */
  .memory-wrapper {
    gap: 6px;
    margin: 10px 0;
    padding: 0 15px;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .memory-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
  }

  .memory-card {
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  /* Bouton : compact */
  .restart-btn {
    font-size: 1rem;
    padding: 3px 10px;
    margin-top: 2px;
  }

  /* Message : petit */
  .win-message {
    font-size: 0.9rem;
    margin: 2px 0;
  }

  /* Footer : discret */
  .footer {
    font-size: 0.7rem;
    margin-bottom: 2px;
    margin-top: 2px;
  }

  /* BD en paysage */
  .bd-arrow {
    width: 36px;
  }
  .bd-page {
        max-height: 65vh;
        max-width:70%;
        margin:auto; /* Évite de pousser les flèches hors de l'écran */
 }
  .bd-page.active {
        display: block;
        margin:auto;
        max-width:70%;
}
/* Le commentaire */
.nav-comment {
    position:absolute;
    text-align: right;
    right:0;            /* Reste aligné sur la droite du mot "Lire" */
    width: 60vw;         /* Utilise 60% de la largeur de l'écran max au lieu de 250px */
    max-width: 100px;    /* Limite quand même pour ne pas traverser tout l'écran */
    font-size: 1.1rem;   /* Réduire légèrement la taille pour gagner de l'espace */
    line-height: 0.4;
    word-wrap: break-word; /* Force le texte à aller à la ligne s'il est trop long */
    margin-top: 90px;    /* Réduit l'espace pour éviter de trop pousser l'image */
  }

}


/* Permettre positionnement relatif du premier item */
.nav-item-with-comment {
  position: relative;
}

/* Le commentaire */
.nav-comment {
    position:absolute;
    text-align: right;
    right:0;            /* Reste aligné sur la droite du mot "Lire" */
    width: 60vw;         /* Utilise 60% de la largeur de l'écran max au lieu de 250px */
    max-width: 200px;    /* Limite quand même pour ne pas traverser tout l'écran */
    font-size: 1.6rem;   /* Réduire légèrement la taille pour gagner de l'espace */
    line-height: 0.6;
    word-wrap: break-word; /* Force le texte à aller à la ligne s'il est trop long */
    margin-top: 50px;    /* Réduit l'espace pour éviter de trop pousser l'image */
  }