/* =========================================
   ACCES.CSS — Styles spécifiques à la page Accès
   ========================================= */


/*============================
======= FICHIERS COMMUNS ========
=============================
   Styles de base, sans media queries
=============================*/

/* Reset + outils généraux */
* { margin:0; padding:0; box-sizing:border-box; }
.cesure { width:100%; max-width:350px; overflow-wrap:break-word; hyphens:auto; text-align:justify; }

/* Indents conservés */
.indent-40{ text-indent:40px; } .indent-45{ text-indent:45px; } .indent-50{ text-indent:50px; }
.indent-55{ text-indent:55px; } .indent-60{ text-indent:60px; } .indent-65{ text-indent:65px; }
.indent-70{ text-indent:70px; } .indent-75{ text-indent:75px; } .indent-80{ text-indent:80px; }
.indent-85{ text-indent:85px; } .indent-90{ text-indent:90px; } .indent-95{ text-indent:95px; }
.indent-100{ text-indent:100px; } .indent-105{ text-indent:105px; } .indent-110{ text-indent:110px; }
.indent-115{ text-indent:115px; } .indent-120{ text-indent:120px; } .indent-125{ text-indent:125px; }
.indent-200{ text-indent:200px; } .indent-210{ text-indent:210px; } .indent-215{ text-indent:215px; }
.indent-220{ text-indent:220px; } .indent-225{ text-indent:225px; } .indent-230{ text-indent:230px; }
.indent-235{ text-indent:235px; } .indent-240{ text-indent:240px; } .indent-290{ text-indent:290px; }
.indent-300{ text-indent:300px; } .indent-400{ text-indent:400px; }

/* ==================================================
   CONTAINER PRINCIPAL (dans .mainbox)
================================================== */
.acces-container{
  position: relative;
  width: min(1600px, calc(100% - 40px));
  margin: 20px auto 100px;
  padding: 20px 20px 120px;
  background: #047303;
  border: none;
  border-radius: 10px;
  overflow: visible;
}

/* ==================================================
   TYPOGRAPHIE SPÉCIFIQUE — PAGE ACCÈS
================================================== */

/* Bandeau */
.containerB {
  font-family: Verdana, Arial, sans-serif;
  font-size: 26px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  letter-spacing: 1px;
  line-height: 1.3;
  text-transform: uppercase;
}

/* Adresse */
.adresse {
  font-family: Verdana, Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;      /* <- unifié */
  line-height: 1.6;
  text-align: center;
}

/* Bouton Google (accent vert) */
.google {
  font-family: Verdana, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;      /* <- unifié */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 1.4;
}

/* Carte Google */
.maps {
  font-family: Verdana, Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  color: #ffffff;
  text-align: center;
  line-height: 1.4;
}

/* Bouton Waze */
.waze2 {
  font-family: Verdana, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 1.4;
}

/* Carte Waze */
.waze {
  font-family: Verdana, Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  color: #ffffff;
  text-align: center;
  line-height: 1.4;
}

/* Pancarte */
.pancartes {
  font-family: Verdana, Arial, sans-serif;
  font-size: 22px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  letter-spacing: 1px;
  line-height: 1.4;
}


/*============================
====== FICHIERS PETITS FORMATS ======
=============================
   Smartphones portrait (≤480px)
=============================*/

/* ==================================================
   MOBILE (≤480px) — empilement + ordre + cadres visibles
================================================== */
@media (max-width: 480px){

  .acces-container{
    display:flex; flex-direction:column; align-items:center;
    gap:12px; padding:16px 14px 10px; min-height:0 !important;
  }

  /* Tous les blocs sortent du absolute et s’adaptent */
  .acces-container .containerB,
  .acces-container .adresse,
  .acces-container .google,
  .acces-container .maps,
  .acces-container .waze2,
  .acces-container .waze,
  .acces-container .pancartes{
    position: static !important;
    width: 95% !important;
    max-width: 520px;
    height: auto !important;
    margin: 0 auto !important;
    text-align: center;
  }

  /* On remet les cadres visibles sur mobile */
  .acces-container .containerB,
  .acces-container .adresse,
  .acces-container .google{
    border: 3px solid #04DF1F;
    border-radius: 10px;
    background: #047303;
  }

  /* Ordre d’affichage */
  .adresse  { order: 1; }
  .google   { order: 2; }
  .maps     { order: 3; }
  .waze2    { order: 4; }
  .waze     { order: 5; }
  .pancartes{ order: 6; }

  /* Cartes responsive */
  .maps, .waze { aspect-ratio: 16 / 9; overflow: hidden; }
  .maps iframe, .waze iframe { width:100% !important; height:100% !important; border:0; display:block; }

  /* Pancarte responsive */
  .pancartes img { width:100%; height:auto; display:block; }

  /* Confort typo mobile */
  .containerB { font-size: 20px; }
  .adresse { font-size: 18px; line-height: 1.6; }
  .google, .waze2 { font-size: 16px; }
  .maps, .waze { font-size: 13px; }
  .pancartes { font-size: 20px; }

  /* supprime l’air final sous le dernier bloc */
  .acces-container > :last-child { margin-bottom:0 !important; }
}


/*============================
====== FICHIERS MOYENS FORMATS =====
=============================
   Smartphones paysage + tablettes portrait
   (pas de règle spécifique pour l’instant)
=============================*/



/*============================
===== FICHIERS GRANDS FORMATS ======
=============================
   Tablettes paysage + petits ordis portables
   (pas de règle spécifique pour l’instant)
=============================*/



/*============================
======= FICHIERS ORDINATEURS =======
=============================
   Desktop (≥1025px) — positions + tailles (+40%)
=============================*/

/* ==================================================
   DESKTOP (≥1025px)
   NB: on NE met PAS la typo ici pour éviter les conflits
================================================== */
@media (min-width: 1025px){

  /* Réglages rapides (offsets) — ajuste ces valeurs si besoin */
  .acces-container{
    --cB-dx: 0px;  --cB-dy: 0px;  --cB-dw: 0px;  --cB-dh: 0px;
    --adr-dx: 0px; --adr-dy: 0px; --adr-dw: 0px; --adr-dh: 0px;
    --ggl-dx: 0px; --ggl-dy: 0px; --ggl-dw: 0px; --ggl-dh: 0px;
    --map-dx: 0px; --map-dy: 0px; --map-dw: 0px; --map-dh: 0px;
    --wz2-dx: 0px; --wz2-dy: 0px; --wz2-dw: 0px; --wz2-dh: 0px;
    --wze-dx: 0px; --wze-dy: 0px; --wze-dw: 0px; --wze-dh: 0px;
    --pan-dx: 0px; --pan-dy: 0px; --pan-dw: 0px; --pan-dh: 0px;
  }

  .containerB{
    position:absolute;
    left:  calc(120px  + var(--cB-dx));
    top:   calc( 80px  + var(--cB-dy));
    width: calc(1260px + var(--cB-dw));
    height:calc(  70px + var(--cB-dh));
    border:3px solid #04DF1F; border-radius:10px; padding:10px 50px;
    text-align:center;
  }

  .adresse{
    position:absolute;
    left:  calc( 50px + var(--adr-dx));
    top:   calc(300px + var(--adr-dy));
    width: calc(700px + var(--adr-dw));
    height:calc(490px + var(--adr-dh));
    border:3px solid #04DF1F; border-radius:10px; padding:70px 50px;
    text-align:center;
    color: #FFFB00;
  }

  .google{
    position:absolute;
    left:  calc(940px + var(--ggl-dx));
    top:   calc(600px + var(--ggl-dy));
    width: calc(420px + var(--ggl-dw));
    height:calc( 56px + var(--ggl-dh));
    border:3px solid #04DF1F; border-radius:5px; padding-top:10px;
    text-align:center;
  }

  .maps{
    position:absolute;
    left:  calc(800px + var(--map-dx));
    top:   calc(700px + var(--map-dy));
    width: calc(700px + var(--map-dw));
    height:calc(490px + var(--map-dh));
    border:1px solid #000; border-radius:10px; overflow:hidden;
  }

  .waze2{
    position:absolute;
    left:  calc(190px + var(--wz2-dx));
    top:   calc(1070px + var(--wz2-dy));
    width: calc(420px + var(--wz2-dw));
    height:calc( 56px + var(--wz2-dh));
    border:3px solid #04DF1F; border-radius:5px; padding-top:12px;
    text-align:center;
  }

  .waze{
    position:absolute;
    left:  calc(50px + var(--wze-dx));
    top:   calc(1180px + var(--wze-dy));
    width: calc(700px + var(--wze-dw));
    height:calc( 490px + var(--wze-dh));
    border-radius:10px; overflow:hidden;
  }

  .pancartes{
    position:absolute;
    left:  calc(190px  + var(--pan-dx));
    top:   calc(1800px + var(--pan-dy));
    width: calc(1120px + var(--pan-dw));
    height:calc( 280px + var(--pan-dh));
    text-align:center;
  }

  .maps iframe, .waze iframe{ width:100%; height:100%; border:0; display:block; }
}