/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =========================
   Style global — La Centrale
   Une seule feuille CSS
   ========================= */

/* Variables thème */
:root{
  --brand: #ff6600;       /* orange titres / accents */
  --brand-dark: #cc5200;
  --ink: #222;            /* texte */
  --bg: #f8f8f8;          /* fond de secours */
  --nav-bg: #030303;      /* navbar */
  --nav-link: #fff;       /* liens navbar */
  --nav-shadow: 0 8px 16px rgb(0 81 255 / .35);
  --radius: 10px;
  --container-w: 1000px;
  --nav-h: 56px;          /* hauteur approx. navbar (affinable) */
}

/* Reset léger */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--bg) url('Photos/SiteWeb/index.jpg') center/cover no-repeat fixed;
  /* espace sous la navbar fixe */
  padding-top: var(--nav-h);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width:100%; height:auto; display:block; }

/* Titres */
h1,h2,h3,h4,h5{
  color: var(--brand);
  font-weight: 800;
  margin: 10px 0;
  text-shadow: 2px 2px 4px rgb(255 255 255 / .4);
}
p{
  font-size: 16px;
  line-height: 1.55;
  margin: 8px 0;
  text-shadow: 1px 1px 2px rgb(255 255 255 / .4);
}

/* Conteneur principal */
.container{
  max-width: var(--container-w);
  margin: 24px auto;
  padding: 20px;
  background: rgb(255 255 255 / .82);
  border-radius: var(--radius);
  box-shadow: 0 10px 22px rgb(0 0 0 / .08);
  backdrop-filter: blur(2px);
}

/* =========================
   Navbar (unique)
   ========================= */
.navbar-desktop{
  position: fixed;
  inset: 0 0 auto 0;            /* top:0; left:0; right:0 */
  height: var(--nav-h);
  z-index: 1000;
  background: var(--nav-bg);
  box-shadow: var(--nav-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.navbar-desktop a{
  color: var(--nav-link);
  text-decoration: none;
  padding: 8px 14px;
  margin: 0 6px;
  font-weight: 700;
  letter-spacing: .2px;
  border-radius: 6px;
  transition: background .2s ease, color .2s ease, transform .08s ease;
  white-space: nowrap;
}
.navbar-desktop a:hover{
  background: var(--brand);
  color:#fff;
  transform: translateY(-1px);
}
.navbar-desktop a:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
  background: var(--brand);
}

/* Option: mettre le téléphone en « pill » plus visible (dernier lien) */
.navbar-desktop a:last-child{
  background: #0b5fff;
  box-shadow: 0 6px 16px rgb(11 95 255 / .35);
}
.navbar-desktop a:last-child:hover{
  background: #2a74ff;
}

/* =========================
   Blocs spécifiques
   ========================= */
.contact-info{
  margin-top: 10px;
}
.contact-info p strong{
  display: inline-block;
}

/* =========================
   Accessibilité / utilitaires
   ========================= */
a{ color: #0b5fff; }
a:hover{ color: #2a74ff; }
a:focus-visible{
  outline: 2px solid #2a74ff;
  outline-offset: 2px;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 960px){
  :root{ --container-w: 92vw; }
  body{ padding-top: calc(var(--nav-h) + 2px); }
  .navbar-desktop{
    padding: 0 6px;
    justify-content: flex-start;
    overflow-x: auto;      /* défilement horizontal si trop de liens */
    -webkit-overflow-scrolling: touch;
  }
  .navbar-desktop a{
    margin: 0 4px;
    padding: 8px 12px;
    font-size: 15px;
  }
  h1{ font-size: 1.6rem; }
  h2{ font-size: 1.25rem; }
}

@media (max-width: 560px){
  :root{ --nav-h: 64px; } /* un peu plus haut si 2 lignes */
  .navbar-desktop{
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4px;
    padding: 6px;
  }
  .navbar-desktop a{
    margin: 2px 4px;
    padding: 8px 10px;
    font-size: 14px;
  }
  .container{ padding: 16px; }
}

/* Impression */
@media print{
  body{ padding-top: 0; background: #fff none; }
  .navbar-desktop{ display:none; }
  .container{ box-shadow: none; }
}

/* Safe areas (iOS/Android) : navbar collée tout en haut */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Étend le fond de la barre sous l’encoche */
.navbar-desktop{
  top: 0;            /* déjà présent, on confirme */
  left: 0;
  right: 0;
  padding-top: var(--safe-top);
}

/* Réserve l’espace exact au contenu sous la barre */
body{
  padding-top: calc(var(--nav-h) + var(--safe-top));
}


/* === Mobile : tout le menu visible, sans scroll horizontal === */
@media (max-width: 960px){
  /* le contenu n'a plus besoin de réserver de place pour une barre fixe */
  body{
    padding-top: 0 !important;
  }

  .navbar-desktop{
    position: sticky !important;   /* reste collée en haut en scroll */
    top: 0;
    height: auto !important;       /* hauteur selon le nombre de lignes */
    flex-wrap: wrap !important;    /* autorise 2-3 lignes si besoin */
    justify-content: center;
    overflow: visible !important;
    padding: calc(var(--safe-top) + 6px) 8px 8px;
  }

  .navbar-desktop a{
    flex: 0 0 auto;
    margin: 4px 6px;
    padding: 8px 10px;
    font-size: 14px;
    white-space: nowrap;
  }
}