/* Import de la police Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand:wght@400&display=swap');

/* ============================ */
/*         FOND GENERAL         */
/* ============================ */
body {
  background-color: #a7c6d9;
  background-image: url('../assets/textures/papiertexture.png');
  background-repeat: repeat;
  background-size: auto;
  font-family: 'Patrick Hand', cursive;
  margin: 0;
  padding: 0;
}

.page-container {
  display: grid;
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  gap: 40px;
  padding: 40px;
  max-width: 1280px;
  margin: 0 auto;
  min-height: 100vh;
  box-sizing: border-box;
}

/* Styles communs pour toutes les pages */
.page-index,
.page-criee,
.page-compagnie,
.page-histoire,
.page-boiteamot,
.page-gallerie,
.page-contact,
.page-mentions-legales {
  display: grid;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
  max-width: 1280px;
  margin: 0 auto;
}

.page-index {
  display: grid;
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  grid-template-areas:
    "logo1 bandeau bandeau bandeau logo2"
    "slogan slogan slogan date date"
    "boiteamotvan crieequoi crieequoi crieequoi crieequoi"
    "motcriee motcriee motcriee motcriee boiteamot"
    "histoire histoire histoire contact contact"
    "histoire histoire histoire slogan1 slogan1"
    "compagnie compagnie compagnie compagnie compagnie"
    "footer footer footer footer footer";
 } 

.page-criee {
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  grid-template-areas:
    "logo1 bandeau bandeau bandeau logo2"
    "menu slogan slogan slogan date"
    "menu criee criee criee criee"
    "deambule deambule spectacle spectacle spectacle"
    "recolte recolte spectacle spectacle spectacle"
    "footer footer footer footer footer";
}

.page-compagnie {
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  grid-template-areas:
    "logo1 bandeau bandeau bandeau logo2"
    "menu slogan slogan slogan date"
    "menu arthachecie arthachecie arthachecie arthachecie"
    "datepasse datepasse datepasse datefutur datefutur"
    "arthach arthach arthach ingrid ingrid"
    "eryn eryn logo3 ingrid ingrid"
    "eryn eryn gaily gaily gaily"
    "chapeau chapeau chapeau chapeau chapeau"
    "footer footer footer footer footer";
}

.page-histoire {
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  grid-template-areas:
    "logo1 bandeau bandeau bandeau logo2"
    "menu slogan slogan slogan date"
    "menu crieeantique crieeantique crieemedieval crieemedieval"
    "crieeretro crieeretro crieerue crieerue crieerue"
    "footer footer footer footer footer";
}

.page-boiteamot {
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  grid-template-areas:
    "logo1 bandeau bandeau bandeau logo2"
    "menu slogan slogan slogan date"
    "menu recolteweb recolteweb boiteamot boiteamot"
    "menu envoicriee envoicriee boiteamot boiteamot"
    "gallerymot gallerymot gallerymot gallerymot gallerymot"
    "footer footer footer footer footer";
}

.page-gallerie {
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  grid-template-areas:
    "logo1 bandeau bandeau bandeau logo2"
    "menu slogan slogan slogan date"
    "menu revuepresse revuepresse goodies goodies"
    "photos photos photos photos photos"
    "footer footer footer footer footer";
}

.page-contact {
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  grid-template-areas:
    "logo1 bandeau bandeau bandeau logo2"
    "menu slogan slogan slogan date"
    "menu envoicontact envoicontact motparici motparici"
    "menu envoicontact envoicontact devis devis"
    "menu envoicontact envoicontact crieespecial crieespecial"
    "dons dons dons dons dons"
    "footer footer footer footer footer";
}

.page-mentions-legales {
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  grid-template-areas:
    "logo1 bandeau bandeau bandeau logo2"
    "mentionlegal mentionlegal mentionlegal mentionlegal mentionlegal"
    "nosstatuts nosstatuts nosstatuts nosstatuts nosstatuts"
    "footer footer footer footer footer";
}
/* ============================ */
/*         RESPONSIVE DESIGN    */
/* ============================ */

/* Tablettes */
@media (max-width: 1024px) {
  .page-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
  }
  
  .page-index {
    grid-template-areas:
     
      "logo1 bandeau logo2"
      "slogan slogan date"
      "crieequoi crieequoi crieequoi"
      "motcriee motcriee boiteamot"
      "histoire histoire histoire"
      "boiteamotvan slogan1 contact"
      "compagnie compagnie compagnie"
      "footer footer footer";
  }
  
  .page-criee {
    grid-template-areas:
      "logo1 bandeau logo2"
      "menu slogan date"
      "menu criee criee"
      "deambule spectacle spectacle"
      "recolte spectacle spectacle"
      "footer footer footer";
  }
  
  .page-compagnie {
    grid-template-areas:
      "logo1 bandeau logo2"
      "menu slogan date"
      "menu arthachecie arthachecie"
      "datepasse datepasse datefutur"
      "arthach arthach ingrid"
      "eryn eryn gaily"
      "logo3 logo3 logo3"
      "chapeau chapeau chapeau"
      "footer footer footer";
  }
  
  .page-histoire {
    grid-template-areas:
      "logo1 bandeau logo2"
      "menu slogan date"
      "menu crieeantique crieemedieval"
      "crieeretro crieerue crieerue"
      "footer footer footer";
  }
  
  .page-boiteamot {
    grid-template-areas:
      "logo1 bandeau logo2"
      "menu slogan date"
      "menu recolteweb boiteamot"
      "menu envoicriee boiteamot"
      "gallerymot gallerymot gallerymot"
      "footer footer footer";
  }
  
  .page-gallerie {
    grid-template-areas:
      "logo1 bandeau logo2"
      "menu slogan date"
      "menu revuepresse goodies"
      "photos photos photos"
      "footer footer footer";
  }
  
  .page-contact {
    grid-template-areas:
      "logo1 bandeau logo2"
      "menu slogan date"
      "menu envoicontact motparici"
      "menu envoicontact devis"
      "menu envoicontact crieespecial"
      "dons dons dons"
      "footer footer footer";
  }
  
  .page-mentions-legales {
  grid-template-areas:
    "logo1 bandeau logo2"
    "mentionlegal mentionlegal mentionlegal"
    "nosstatuts nosstatuts nosstatuts"
    "footer footer footer";
}
  
  .bloc-menu ul {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  
  .bloc-menu img {
    width: 180px;
  }
}

/* Mobiles */
@media (max-width: 768px) {
  .page-container {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 15px;
    padding-top: 100px; /* Espace suffisant pour éviter que le menu cache le contenu */
  }
  
  /* Menu fixe compact pour mobile - styles prioritaires */
  .bloc-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background-color: #e6dbc7 !important;
    padding: 8px 5px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    border-bottom: 2px solid #dbc2a4 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  
  /* Assurer la cohérence du menu sur toutes les pages, y compris compagnie */
  .page-compagnie .bloc-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background-color: #e6dbc7 !important;
    padding: 8px 5px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    border-bottom: 2px solid #dbc2a4 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  
  /* S'assurer que le premier bloc n'est pas caché par le menu fixe */
  .bloc-logo1 {
    margin-top: 10px !important;
  }
  
  /* Espace supplémentaire pour éviter que le menu cache le contenu */
  .page-container {
    padding-top: 90px !important; /* Espace optimal pour le menu */
  }
  
  /* S'assurer que la page compagnie a exactement la même taille que les autres pages */
  .page-compagnie {
    max-width: 1280px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 15px !important;
    padding-top: 90px !important;
    box-sizing: border-box !important;
  }
  
  .bloc-menu ul {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
  }
  
  /* Assurer la cohérence des éléments du menu sur la page compagnie */
  .page-compagnie .bloc-menu ul {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
  }
  
  .bloc-menu li {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  /* Assurer la cohérence des éléments li du menu sur la page compagnie */
  .page-compagnie .bloc-menu li {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .bloc-menu img {
    width: 60px !important; /* Beaucoup plus petit */
    height: auto !important;
    border-radius: 8px !important;
    transition: transform 0.2s ease, filter 0.2s ease !important;
    display: block !important;
  }
  
  /* Assurer la cohérence des images du menu sur la page compagnie */
  .page-compagnie .bloc-menu img {
    width: 60px !important;
    height: auto !important;
    border-radius: 8px !important;
    transition: transform 0.2s ease, filter 0.2s ease !important;
    display: block !important;
  }
  
  .bloc-menu img:hover {
    transform: scale(1.05) !important;
    filter: brightness(1.1) !important;
  }
  
  /* Assurer la cohérence des effets hover sur la page compagnie */
  .page-compagnie .bloc-menu img:hover {
    transform: scale(1.05) !important;
    filter: brightness(1.1) !important;
  }
  
  .menu-btn-label {
    font-size: 0.6rem !important; /* Texte très petit */
    bottom: 4px !important;
    margin: 0 4px !important;
    line-height: 1 !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    padding: 2px 4px !important;
    background: rgba(255,255,255,0) !important;
    color: #000000 !important;
    font-weight: bold !important;
    letter-spacing: 0.03em !important;
    border-radius: 8px !important;
    font-family: 'Patrick Hand', cursive !important;
    pointer-events: none !important;
    box-shadow: none !important;
  }
  
  /* Assurer la cohérence des labels du menu sur la page compagnie */
  .page-compagnie .menu-btn-label {
    font-size: 0.6rem !important;
    bottom: 4px !important;
    margin: 0 4px !important;
    line-height: 1 !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    padding: 2px 4px !important;
    background: rgba(255,255,255,0) !important;
    color: #000000 !important;
    font-weight: bold !important;
    letter-spacing: 0.03em !important;
    border-radius: 8px !important;
    font-family: 'Patrick Hand', cursive !important;
    pointer-events: none !important;
    box-shadow: none !important;
  }
  
  .page-index {
    grid-template-areas:
      "logo1"
      "bandeau"
      "logo2"
      "slogan"
      "date"
      "crieequoi"
      "boiteamotvan"
      "motcriee"
      "boiteamot"
      "histoire"
      "contact"
      "slogan1"
      "compagnie"
      "footer";
  }
  
  .page-criee {
    grid-template-areas:
      "logo1"
      "bandeau"
      "logo2"
      "slogan"
      "date"
      "criee"
      "deambule"
      "recolte"
      "spectacle"
      "footer";
  }
  
  .page-compagnie {
    grid-template-areas:
      "logo1"
      "bandeau"
      "logo2"
      "slogan"
      "date"
      "arthachecie"
      "datepasse"
      "datefutur"
      "arthach"
      "ingrid"
      "eryn"
      "gaily"
      "logo3"
      "chapeau"
      "footer";
  }
  
  .page-histoire {
    grid-template-areas:
      "logo1"
      "bandeau"
      "logo2"
      "slogan"
      "date"
      "crieeantique"
      "crieemedieval"
      "crieeretro"
      "crieerue"
      "footer";
  }
  
  .page-boiteamot {
    grid-template-areas:
      "logo1"
      "bandeau"
      "logo2"
      "slogan"
      "date"
      "recolteweb"
      "envoicriee"
      "boiteamot"
      "gallerymot"
      "footer";
  }
  
  .page-gallerie {
    grid-template-areas:
      "logo1"
      "bandeau"
      "logo2"
      "slogan"
      "date"
      "revuepresse"
      "goodies"
      "photos"
      "footer";
  }
  
  .page-contact {
    grid-template-areas:
      "logo1"
      "bandeau"
      "logo2"
      "slogan"
      "date"
      "envoicontact"
      "motparici"
      "devis"
      "crieespecial"
      "dons"
      "footer";
  }
  
  .page-mentions-legales {
  grid-template-areas:
    "logo1"
    "bandeau"
    "logo2"
    "mentionlegal"
    "nosstatuts"
    "footer";
}
  
  
  .bloc {
    padding: 15px;
  }
  
  /* Anciens styles du menu supprimés - remplacés par le menu fixe */
  
  .bloc-histoire-flex,
  .bloc-crieequoi-flex {
    flex-direction: column;
    text-align: center;
  }
  
  .bloc-histoire-flex img,
  .bloc-crieequoi-flex img {
    max-width: 100%;
    margin: 0 auto 15px auto;
  }
  
  .bloc-compagnie-row {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  
  .bloc-compagnie-row .comedien {
    max-width: 100%;
  }
  
  /* Styles spécifiques pour la page compagnie sur mobile */
  .page-compagnie .comedien-image {
    max-width: 100%;
    display: block;
    margin: 0 auto 15px auto;
  }
  
  .page-compagnie .bloc-arthach,
  .page-compagnie .bloc-ingrid,
  .page-compagnie .bloc-eryn,
  .page-compagnie .bloc-gaily {
    text-align: center;
  }
}

/* Très petits écrans */
@media (max-width: 480px) {
  .page-container {
    padding: 10px;
    gap: 10px;
  }
  
  .bloc {
    padding: 10px;
  }
  
  .bloc-menu img {
    width: 140px;
  }
  
  .bloc-slogan h1 {
    font-size: 1rem;
  }
}

/* ============================ */
/*         STYLE DES BLOCS      */
/* ============================ */
.bloc {
  padding: 20px;
  border-radius: 25px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
  background-image: url('../assets/textures/subtle-grunge.png');
  background-repeat: repeat;
  background-size: cover;
  box-sizing: border-box;
  min-height: fit-content;
}

/* Assurer la cohérence de largeur entre toutes les pages */
.page-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

/* Forcer la même largeur pour tous les blocs */
.bloc {
  width: 100%;
  max-width: 100%;
}

/* ============================ */
/*      COULEUR PAR BLOC        */
/* ============================ */

/* ============================ */
/*        PALETTE DE COULEURS   */
/* ============================ */
/*
bleu ciel    Hex : #A7C6D9
marron clair Hex : #D2B48C
orange doux  Hex : #F4B183
jaune sable  Hex : #FFF4D1
*/
 




/* ============================ */
/*    COULEURS OPTIMISÉES       */
/* ============================ */

/* Blocs principaux - meilleur contraste */

.bloc-logo1         { grid-area: logo1;         background-color: #e6dbc7; }
.bloc-bandeau       { grid-area: bandeau;       background-color: #8e9775; }
.bloc-logo2         { grid-area: logo2;         background-color: #b5d2b2; }
.bloc-menu          { grid-area: menu;          background-color: #e6dbc7; }
.bloc-slogan        { grid-area: slogan;        background-color: #f5d99d; }
.bloc-crieequoi     { grid-area: crieequoi;     background-color: #e8c997; }
.bloc-motcriee      { grid-area: motcriee;      background-color: #b5d2b2; }
.bloc-boiteamotvan  { grid-area: boiteamotvan;  background-color: #e6dbc7; color: #fff; }
.bloc-boiteamot     { grid-area: boiteamot;     background-color: #d2b48c; color: #fff; }
.bloc-contact       { grid-area: contact;       background-color: #eeeeee; color: #fff; }
.bloc-slogan1       { grid-area: slogan1;       background-color: #f5d99d; }
.bloc-histoire      { grid-area: histoire;      background-color: #a8a29e; }
.bloc-compagnie     { grid-area: compagnie;     background-color: #8e9775; }
.bloc-footer        { grid-area: footer;        background-color: #f4d29b; }
/* Blocs secondaires - contraste amélioré */
.bloc-criee         { grid-area: criee;         background-color: #f0d4a0; color: #2c2c2c; }
.bloc-deambule      { grid-area: deambule;      background-color: #a8c8a8; color: #2c2c2c; }
.bloc-recolte       { grid-area: recolte;      background-color: #f5f5dc; color: #2c2c2c; }
.bloc-spectacle     { grid-area: spectacle;    background-color: #b8d4e3; color: #2c2c2c; }
.bloc-arthachecie   { grid-area: arthachecie;  background-color: #d4c4a8; color: #2c2c2c; }
.bloc-datepasse     { grid-area: datepasse;    background-color: #6b8e6b; color: #ffffff; }
.bloc-datefutur     { grid-area: datefutur;    background-color: #4a7ba7; color: #ffffff; }
.bloc-arthach       { grid-area: arthach;      background-color: #f0f0f0; color: #2c2c2c; }
.bloc-ingrid        { grid-area: ingrid;       background-color: #e8d8c4; color: #2c2c2c; }
.bloc-eryn          { grid-area: eryn;         background-color: #b8d4e3; color: #2c2c2c; }
.bloc-gaily         { grid-area: gaily;        background-color: #f0d4a0; color: #2c2c2c; }
.bloc-logo3         { grid-area: logo3;        background-color: #d73527; color: #ffffff; }
.bloc-chapeau       { grid-area: chapeau;      background-color: #9a9a9a; color: #ffffff; }
/* Blocs spécialisés - lisibilité optimisée */
.bloc-crieeantique  { grid-area: crieeantique;  background-color: #e8d8c4; color: #2c2c2c; }
.bloc-crieemedieval { grid-area: crieemedieval; background-color: #a8c8a8; color: #2c2c2c; }
.bloc-crieeretro    { grid-area: crieeretro;   background-color: #b8d4e3; color: #2c2c2c; }
.bloc-crieerue      { grid-area: crieerue;     background-color: #f0d4a0; color: #2c2c2c; }
.bloc-recolteweb    { grid-area: recolteweb;   background-color: #d4c4a8; color: #2c2c2c; }
.bloc-envoicriee    { grid-area: envoicriee;   background-color: #6b8e6b; color: #ffffff; }
.bloc-gallerymot    { grid-area: gallerymot;   background-color: #b8d4e3; color: #2c2c2c; }
.bloc-motparici     { grid-area: motparici;    background-color: #f0d4a0; color: #2c2c2c; }
.bloc-crieespecial  { grid-area: crieespecial; background-color: #f0f0f0; color: #2c2c2c; }
.bloc-envoicontact  { grid-area: envoicontact; background-color: #e8d8c4; color: #2c2c2c; }
.bloc-devis         { grid-area: devis;        background-color: #a8c8a8; color: #2c2c2c; }
.bloc-dons          { grid-area: dons;         background-color: #d73527; color: #ffffff; }
.bloc-revuepresse   { grid-area: revuepresse;  background-color: #9a9a9a; color: #ffffff; }
.bloc-goodies       { grid-area: goodies;      background-color: #f5f5dc; color: #2c2c2c; }
.bloc-photos        { grid-area: photos;       background-color: #6b8e6b; color: #ffffff; }
.bloc-mentionlegal  { grid-area: mentionlegal; background-color: #b8d4e3; color: #2c2c2c; }
.bloc-nosstatuts    { grid-area: nosstatuts;   background-color: #e8d8c4; color: #2c2c2c; }
.bloc-date          { grid-area: date;         background-color: #d73527; color: #ffffff; } 

 /* ======= Formulaires dans les blocs ======== */
.bloc-envoicriee form,
.bloc-contact form,
.bloc-envoicontact form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-field label {
  font-weight: bold;
  margin-bottom: 4px;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 8px;
  border: 2px solid #ccc;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
}

.bloc-envoicriee button,
.bloc-contact button,
.bloc-envoicontact button {
  align-self: flex-start;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background-color: #f15e5e;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.bloc-envoicriee button:hover,
.bloc-contact button:hover,
.bloc-envoicontact button:hover {
  background-color: #d04b4b;
}



/* ============================ */
/*        OPTIMISATION IMAGES   */
/* ============================ */
.bloc-logo1 img,
.bloc-logo2 img,
.bloc-logo3 img,
.bloc-bandeau img {
  max-width: 100%;
  max-height: 120px;
  width: auto;
  height: auto;
  margin: 0 auto;
  display: block;
  object-fit: contain;
  border-radius: 10px;
}

.bloc-compagnie img {
  max-width: 100px;
  max-height: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
}

.bloc img {
  max-width: 100%;
  max-height: 180px;
  height: auto;
  width: auto;
  object-fit: contain;
  border-radius: 10px;
}

/* Images responsives */
img {
  border-radius: 10px;
  transition: transform 0.3s ease;
  max-width: 100%;
  height: auto;
  display: block;
}

img:hover {
  transform: scale(1.02);
}

/* Uniformiser l'affichage des images de bandeau */
.bloc-bandeau img {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 300px;
}

/* Optimisation pour les écrans haute résolution */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .bloc-bandeau img {
    max-height: 150px;
  }
  
  .bloc-logo1 img,
  .bloc-logo2 img {
    max-height: 140px;
  }
}

.bloc-menu ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

.bloc-menu li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu-btn {
  position: relative;
  display: inline-block;
  text-align: center;
  width: 100%;
}

.menu-btn img {
  display: block;
  width: 220px;
  height: auto;
  border-radius: 16px;
}

.menu-btn-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  padding: 4px 8px;
  background: rgba(255,255,255,0); /* <-- totalement transparent */
  color: #000000;
  font-weight: bold;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  border-radius: 12px;
  font-family: 'Patrick Hand', cursive;
  pointer-events: none;
  box-shadow: none;
  margin: 0 16px;
  /* supprime tout ce qui donne une ombre ou un fond */
}


.bloc-menu img {
  width: 220px;
  height: auto;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.bloc-menu img:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
  cursor: pointer;
}

.bloc-slogan h1 {
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.3;
  margin: 0 0 5px 0;
  text-align: center;
}

h1, h2, h3, p {
  margin: 0 0 10px;
  color: #222;
}

/* ============================ */
/*        ACCESSIBILITÉ         */
/* ============================ */

/* Focus visible pour la navigation au clavier */
.menu-btn:focus,
button:focus,
input:focus,
textarea:focus {
  outline: 3px solid #f15e5e;
  outline-offset: 2px;
}

/* Amélioration du contraste pour certains blocs */
.bloc-contact {
  background-color: #f8f8f8;
  color: #333;
}

.bloc-boiteamot {
  background-color: #e6dbc7;
  color: #333;
}

/* Skip link pour l'accessibilité */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #f15e5e;
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 1000;
}

.skip-link:focus {
  top: 6px;
}

/* ============================ */
/*  AJUSTEMENTS BLOCS SPÉCIAUX  */
/* ============================ */

/* Conteneur pour les images des comédiens */
.comedien-images {
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

/* Images des comédiens - style cohérent */
.comedien-image {
  max-width: 180px;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  transition: transform 0.3s ease;
  display: block;
}

.comedien-image:hover {
  transform: scale(1.02);
}

/* Logo 3 spécifique */
.logo3-image {
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
  display: block;
  border-radius: 10px;
}

/* Assurer la cohérence de la page compagnie */
.page-compagnie {
  /* Utiliser exactement les mêmes styles que les autres pages */
  font-size: 16px;
  line-height: 1.5;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 40px;
  /* Forcer les mêmes dimensions que les autres pages */
  min-width: auto;
  box-sizing: border-box;
}

.page-compagnie .bloc {
  /* Utiliser les styles par défaut des blocs */
  font-size: inherit;
  line-height: inherit;
}

/* Styles spécifiques pour les blocs de comédiens */
.page-compagnie .bloc-arthach,
.page-compagnie .bloc-ingrid,
.page-compagnie .bloc-eryn,
.page-compagnie .bloc-gaily {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
  /* Même padding que les autres blocs */
  padding: 20px;
}

/* Responsive pour les blocs de comédiens */
@media (max-width: 768px) {
  .page-compagnie .bloc-arthach,
  .page-compagnie .bloc-ingrid,
  .page-compagnie .bloc-eryn,
  .page-compagnie .bloc-gaily {
    flex-direction: column;
    text-align: center;
  }
  
  .comedien-images {
    flex-direction: column;
    align-items: center;
  }
  
  .page-compagnie .comedien-image {
    max-width: 150px;
    margin: 0 auto 10px auto;
  }
}
.bloc-histoire-flex {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.bloc-histoire-flex img {
  max-width: 320px;
  max-height: 320px;
  margin-right: 12px;
}
.bloc-histoire-flex div {
  flex: 1;
}

.bloc-crieequoi-flex {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.bloc-crieequoi-flex img {
  max-width: 240px;
  max-height: 300px;
}
.bloc-crieequoi-flex div {
  flex: 1;
  min-width: 160px;
}

.bloc-compagnie-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 48px;
  flex-wrap: wrap;
  padding-left: 24px;
  padding-right: 24px;
}
.bloc-compagnie-row .comedien {
  text-align: center;
  max-width: 220px;
}
.bloc-compagnie-row .comedien img {
  display: block;
  margin: 0 auto 12px auto;
  max-width: 180px;
  max-height: 180px;
}

/* ============================ */
/*        GALERIE PHOTOS         */
/* ============================ */

/* Galerie de presse */
.presse-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 15px;
}

.presse-item {
  text-align: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.presse-image {
  width: 100%;
  max-width: 200px;
  height: auto;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.presse-item p {
  font-size: 0.9rem;
  margin: 0;
  color: #333;
}

/* Galerie de goodies */
.goodies-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.goodie-item {
  text-align: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.goodie-image {
  width: 100%;
  max-width: 150px;
  height: auto;
  border-radius: 8px;
  margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.goodie-item p {
  font-size: 0.8rem;
  margin: 0;
  color: #333;
}

/* Galerie de photos */
.photos-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 15px;
}

.photo-item {
  text-align: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.photo-image {
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.photo-image:hover {
  transform: scale(1.05);
}

.photo-item p {
  font-size: 0.9rem;
  margin: 0;
  color: #333;
  font-style: italic;
}

/* Responsive pour les galeries */
@media (max-width: 768px) {
  .presse-gallery,
  .goodies-gallery,
  .photos-gallery {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .presse-image,
  .goodie-image,
  .photo-image {
    max-width: 100%;
  }
}

/* ============================ */
/*        FORMULAIRES            */
/* ============================ */

/* Formulaire de contact complet */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.contact-form .form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.contact-form label {
  font-weight: bold;
  color: #333;
  font-size: 0.9rem;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  padding: 10px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #f15e5e;
  box-shadow: 0 0 5px rgba(241, 94, 94, 0.3);
}

.contact-form textarea {
  resize: vertical;
  min-height: 100px;
}

.contact-form button {
  background: linear-gradient(135deg, #f15e5e, #d04b4b);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  align-self: flex-start;
}

.contact-form button:hover {
  background: linear-gradient(135deg, #d04b4b, #b83a3a);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.contact-form button:active {
  transform: translateY(0);
}

/* Formulaire de contact simple (page d'accueil) */
.contact-form-simple {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 15px;
}

.contact-form-simple .form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-form-simple label {
  font-weight: bold;
  color: #333;
  font-size: 0.85rem;
}

.contact-form-simple input,
.contact-form-simple textarea {
  padding: 8px;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.9rem;
  transition: border-color 0.3s ease;
}

.contact-form-simple input:focus,
.contact-form-simple textarea:focus {
  outline: none;
  border-color: #f15e5e;
  box-shadow: 0 0 3px rgba(241, 94, 94, 0.3);
}

.contact-form-simple textarea {
  resize: vertical;
  min-height: 80px;
}

.contact-form-simple button {
  background: #f15e5e;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  align-self: flex-start;
}

.contact-form-simple button:hover {
  background: #d04b4b;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Checkbox styling */
.contact-form input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.1);
}

.contact-form label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  font-weight: normal;
  font-size: 0.9rem;
  color: #666;
}

/* Responsive pour les formulaires */
@media (max-width: 768px) {
  .contact-form,
  .contact-form-simple {
    gap: 10px;
  }
  
  .contact-form input,
  .contact-form select,
  .contact-form textarea,
  .contact-form-simple input,
  .contact-form-simple textarea {
    font-size: 16px; /* Évite le zoom sur mobile */
  }
  
  .contact-form button,
  .contact-form-simple button {
    width: 100%;
    align-self: stretch;
  }
}


.bloc-date          { grid-area: date;          background-color: #f15e5e; color: #fff; } 



 /* ======= Formulaires dans les blocs ======== */

.bloc-envoicriee form,

.bloc-contact form,

.bloc-envoicontact form {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.form-field label {

  font-weight: bold;

  margin-bottom: 4px;

}



.form-field input,

.form-field textarea {

  width: 100%;

  padding: 8px;

  border: 2px solid #ccc;

  border-radius: 8px;

  font-family: inherit;

  font-size: 1rem;

}



.bloc-envoicriee button,

.bloc-contact button,

.bloc-envoicontact button {

  align-self: flex-start;

  padding: 10px 20px;

  border: none;

  border-radius: 8px;

  background-color: #f15e5e;

  color: white;

  font-size: 1rem;

  cursor: pointer;

  transition: background-color 0.2s;

}



.bloc-envoicriee button:hover,

.bloc-contact button:hover,

.bloc-envoicontact button:hover {

  background-color: #d04b4b;

}







/* Règles dupliquées supprimées - voir section "OPTIMISATION IMAGES" plus haut */



.bloc-menu ul {

  list-style: none;

  padding: 0;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 15px;

}



.bloc-menu li {

  display: flex;

  flex-direction: column;

  align-items: center;

}



.menu-btn {

  position: relative;

  display: inline-block;

  text-align: center;

  width: 100%;

}



.menu-btn img {

  display: block;

  width: 220px;

  height: auto;

  border-radius: 16px;

}



.menu-btn-label {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 12px;

  padding: 4px 8px;

  background: rgba(255,255,255,0); /* <-- totalement transparent */

  color: #000000;

  font-weight: bold;

  font-size: 1.1rem;

  letter-spacing: 0.03em;

  border-radius: 12px;

  font-family: 'Patrick Hand', cursive;

  pointer-events: none;

  box-shadow: none;

  margin: 0 16px;

  /* supprime tout ce qui donne une ombre ou un fond */

}





.bloc-menu img {

  width: 220px;

  height: auto;

  transition: transform 0.2s ease, filter 0.2s ease;

}



.bloc-menu img:hover {

  transform: scale(1.05);

  filter: brightness(1.1);

  cursor: pointer;

}



.bloc-slogan h1 {

  font-size: 1.1rem;

  font-weight: bold;

  line-height: 1.3;

  margin: 0 0 5px 0;

  text-align: center;

}



h1, h2, h3, p {

  margin: 0 0 10px;

  color: #222;

}



/* ============================ */

/*  AJUSTEMENTS BLOCS SPÉCIAUX  */

/* ============================ */

.bloc-histoire-flex {

  display: flex;

  align-items: flex-start;

  gap: 24px;

}

.bloc-histoire-flex img {

  max-width: 320px;

  max-height: 320px;

  margin-right: 12px;

}

.bloc-histoire-flex div {

  flex: 1;

}



.bloc-crieequoi-flex {

  display: flex;

  align-items: flex-start;

  gap: 24px;

}

.bloc-crieequoi-flex img {

  max-width: 240px;

  max-height: 300px;

}

.bloc-crieequoi-flex div {

  flex: 1;

  min-width: 160px;

}



.bloc-compagnie-row {

  display: flex;

  justify-content: center;

  align-items: flex-start;

  gap: 48px;

  flex-wrap: wrap;

  padding-left: 24px;

  padding-right: 24px;

}

.bloc-compagnie-row .comedien {

  text-align: center;

  max-width: 220px;

}

.bloc-compagnie-row .comedien img {

  display: block;

  margin: 0 auto 12px auto;

  max-width: 180px;

  max-height: 180px;

}

/* --- MODALE BOÎTE À MOTS --- */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  overflow-y: auto; /* Important pour scroller sur mobile */
}

.modal-content {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  position: relative;
  margin: 40px 0;
  box-sizing: border-box;
}

/* Bouton de fermeture */
.modal-content .close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  color: #444;
}

/* Responsive : adapter la taille du texte et des champs */
@media (max-width: 600px) {
  .modal-content {
    width: 95%;
    padding: 15px;
    font-size: 0.9em;
  }
  .modal-content textarea,
  .modal-content input,
  .modal-content select {
    font-size: 1em;
    width: 100%;
  }
}

/* ============================ */
/*   AMÉLIORATIONS LISIBILITÉ   */
/* ============================ */

/* Amélioration des contrastes pour tous les blocs */
.bloc h1, .bloc h2, .bloc h3 {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  font-weight: bold;
}

/* Amélioration de la lisibilité du texte */
.bloc p, .bloc li {
  line-height: 1.6;
  text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.05);
}

/* Amélioration des liens */
.bloc a {
  color: inherit;
  text-decoration: underline;
  font-weight: bold;
}

.bloc a:hover {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* Style spécial pour le bouton Instagram */
.instagram-btn {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border-radius: 8px;
  transition: transform 0.2s ease;
  min-width: 120px; /* Largeur réduite */
  max-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.instagram-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.instagram-btn img {
  filter: brightness(0) invert(1); /* Rendre l'icône blanche */
  width: 80%; /* Réduire la taille de l'image */
  display: block;
  margin: 0 auto;
}

.instagram-btn .menu-btn-label {
  font-size: 0.8em; /* Texte plus petit */
  text-align: center;
  margin-top: 5px;
}

/* Amélioration mobile - contraste renforcé */
@media (max-width: 768px) {
  .bloc {
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
  }
  
  .bloc h1, .bloc h2 {
    font-size: 1.2em;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
  }
  
  .bloc p {
    font-size: 1em;
    line-height: 1.7;
  }
  
  /* Amélioration des contrastes sur mobile */
  .bloc-boiteamot,
  .bloc-contact,
  .bloc-histoire,
  .bloc-compagnie,
  .bloc-datepasse,
  .bloc-datefutur,
  .bloc-logo3,
  .bloc-chapeau,
  .bloc-envoicriee,
  .bloc-dons,
  .bloc-revuepresse,
  .bloc-photos,
  .bloc-date {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  }
  
  /* Ajustement du bouton Instagram sur mobile */
  .instagram-btn {
    min-width: 100px;
    max-width: 120px;
  }
  
  .instagram-btn .menu-btn-label {
    font-size: 0.7em;
  }
  
  .instagram-btn img {
    width: 70%;
  }
  
  /* Footer responsive - empiler les liens sur mobile */
  .bloc-footer div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
  }
}

/* ============================= */
/*   MODALE "BOÎTE À MOTS" FIXE  */
/* ============================= */
/* Boîte à mots : mise en forme corrigée */
.modal {
 .modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;       /* largeur totale */
  height: 100vh;      /* hauteur totale de l'écran */
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center; /* centre horizontal */
  align-items: center;     /* centre vertical */
  z-index: 2000;
}

.modal-content {
  position: relative;      /* pour le bouton close */
  background: #fff;
  border-radius: 16px;
  width: 90%;
  max-width: 450px;
  padding: 25px 30px;
  box-sizing: border-box;
  text-align: left;
  max-height: 90vh;        /* pour éviter débordement vertical */
  overflow-y: auto;        /* scroll si contenu trop grand */
}


.modal-content h2 {
  text-align: center;
  margin-bottom: 10px;
}

.modal-content p {
  text-align: center;
  margin-bottom: 20px;
}

.boite-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-field {
  display: flex;
  flex-direction: column;
}

.form-field input,
.form-field select,
.form-field textarea {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.form-field label {
  font-weight: bold;
  margin-bottom: 5px;
}

.boite-form button {
  background: #f04e30;
  color: white;
  border: none;
  padding: 12px;
  font-size: 1rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.boite-form button:hover {
  background: #d03d22;
}

.close {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 1.5rem;
  color: #555;
  cursor: pointer;
}