@charset "UTF-8";

/* * Typescale Golden Ratio (×1.618)
 * h1 : 3.560rem | h2 : 2.2rem | h3 : 1.36rem | h4 : 0.9rem
 * p  : 1.25rem
 */

* {
  box-sizing: border-box;
}

html {
  font: 600 20px/25px 'Roboto', sans-serif, Arial;
  color: #333333;
  padding-left: 0.6em;
  display: inline-block;
  width: 100%;
  background-color: #ffffff;
}

img {
  border-radius: 1%;
}

.map {
  position: relative;
  width: 100%;
  top: 1em;
}

/* ================================
   TITRES PRINCIPAUX (H1 & H2)
   ================================ */
div h1 {
  color: #333333;
  text-transform: uppercase;
  font: 700 3.560rem/1.2 'Roboto', sans-serif;
  padding: 0.9em 0.2em 1em 0.6em;
  text-decoration: underline;
  border-top: 3px solid #333333;
}

div h2 {
  text-transform: uppercase;
  font: 700 2.2rem/4rem 'Roboto', sans-serif;
  padding: 0.5em 0.2em 0.5em 0.6em;
  border-top: 3px solid #333333;
  margin-top: 1.5rem;
}

div h2::after {
  padding-left: 0.2em;
  content: ":";
}

/* ================================
   TITRES DE SECTIONS (H3 & H4) 
   Style compact avec accent latéral
   ================================ */
div h3 {
  font: 700 1.36rem/1.4 'Roboto', sans-serif;
  padding: 1rem 0.1em 0.2rem 1.0em;
  margin-bottom: 0; /* Compactage */
  text-transform: uppercase;
  border-left: 5px solid #d0e9f0; /* Accent bleu pâle */
}

div h3::after {
  content: ":";
  padding-left: 0.2em;
}

div h4 {
  font: 700 0.9rem/1.3 'Roboto', sans-serif;
  padding: 0.8rem 0.1rem 0.1rem 1.2rem;
  margin-bottom: 0; /* Compactage */
  text-transform: uppercase;
  font-style: italic;
  border-left: 3px solid #d0e9f0; /* Accent plus fin */
  color: #555555;
}

/* ================================
   PARAGRAPHES & CONTENU
   ================================ */
p {
  padding: 0.1em 0.3em 0.1em 0.9em;
  font: 400 1.25rem/1.75rem 'Roboto', sans-serif, Arial;
  margin: 0.5rem 0.1rem 1rem;
}

p strong { font-weight: 700; }
p u { text-decoration: underline; }

/* ================================
   LISTES DE CONTENU (Révisées)
   Style paragraphe, sans traits, minuscules
   ================================ */
div ul {
  margin-top: 0.2rem; /* Colle au titre H3 ou H4 */
  margin-bottom: 1.5rem;
  padding-left: 0;
}

div ul li {
  border-top: none !important; /* Enlève les traits horizontaux */
  text-transform: none !important; /* Enlève les majuscules */
  font: 400 1.25rem/1.6rem 'Roboto', sans-serif, Arial;
  color: #333333;
  list-style: disc; /* Puces classiques */
  margin: 0.3rem 0.1rem 0.3rem 2.2rem; 
  padding: 0.1rem 0;
}

/* ================================
   NAVIGATION & MENUS (Style préservé)
   ================================ */
nav ul, footer ul, ul.navigation-links {
  font: 700 2.441rem/1.75rem 'Roboto', sans-serif;
}

/* On cible les li qui sont dans une nav ou qui ont la classe projet */
nav li, footer li, .projet {
  text-transform: uppercase;
  color: #333333;
  list-style: none;
  padding: 0.5em 0.2em 0.5em 0.6em;
  border-top: 3px solid #333333; /* Conservation des traits pour le menu */
}

li a {
  color: #333333;
  text-decoration: none;
}

li a:hover {
  color: #448cca;
  text-decoration: underline;
}

/* ================================
   RESPONSIVE — Tablette & Desktop (≥ 750px)
   ================================ */
@media screen and (min-width: 750px) {
  html {
    width: 66%;
  }
  
  .map {
    position: absolute;
    width: 33%;
    right: 0em;
    top: 0em;
  }

  div h1 { padding: 1em 0.2em 1.5em 1.4em; }
  div h2 { padding: 0.5em 0.2em 0.4em 1.7em; }
  
  p { padding-left: 2.6em; }
  
  div h3 { padding-left: 2.7rem; }
  div h4 { padding-left: 3.5rem; }
  
  /* Alignement des listes sur le retrait des paragraphes */
  div ul li {
    margin-left: 4.2rem;
    transition: all .3s ease;
  }

  nav li, .projet { padding-left: 1.4em; }

  figure { margin: 0.7em 2.8em 1.5em 2.8em; }
}

/* ================================
   DIVERS & IMAGES
   ================================ */
figure {
  display: block;
  margin: 20px 30px;
  max-width: 150%;
  height: auto;
}

figure img {
  width: 100%;
  height: auto;
}