/*
body
    layout
        header
        main
        footer
*/

/* 

Élément	Taille en pixels	Taille en rem	Poids / Particularité
-------------------------------------------------------------------
<h1>	32px	            2rem	        Gras par défaut
<h2>	24px	            1.5rem	        Gras par défaut
<h3>	18.72px	            1.17rem	        Gras par défaut
<p>	    16px	            1rem	        Normal
<li>	16px	            1rem	        Hérite de <ul> ou <ol>
<a>	    16px	            1rem	        Hérite de son contexte + bleue par défaut
-------------------------------------------------------------------

1rem = taille de la police racine, souvent 16px
1vh = 1% de la hauteur visible du viewport (de la fenêtre)

Ecran rétina (2560×1600) :
    2.2 vh ≈ 35.2 px ≈ 2.2 rem

En pratique pour un design responsive: 

Tu peux conserver ces tailles en rem (elles sont stables et accessibles),
et les ajuster avec des media queries si tu veux réduire légèrement les titres sur mobile :

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.17rem; }
p, li, a { font-size: 1rem; }

@media (max-width: 768px) {
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }
  h3 { font-size: 1.1rem; }
}

Écrans Apple Retina – Résolutions réelles et logiques
Modèle	                            Résolution physique (pixels réels)	
             Taille écran                           Résolution logique (CSS / points)	
                                                                                Densité 
MacBook Air  13,3" Retina (M1, M2)	2560 × 1600	    1280 × 800 (×2 Retina)	    ≈ 227 ppi	
MacBook Pro  14,2" (M1/M2 Pro)	    3024 × 1964	    1512 × 982 (×2 Retina)	    ≈ 254 ppi	
MacBook Pro  16,2" (M1/M2 Pro/Max)	3456 × 2234	    1728 × 1117 (×2 Retina)	    ≈ 254 ppi	
iMac         23,5" Retina 4.5K	    4480 × 2520	    2240 × 1260 (×2 Retina)	    ≈ 218 ppi	
iMac         27"   Retina 5K	    5120 × 2880	    2560 × 1440 (×2 Retina)	    ≈ 218 ppi	
Apple (5K)	 27"   Studio Display   5120 × 2880	    2560 × 1440 (×2 Retina)	    ≈ 218 ppi	
Pro   (6K)	 32"   Display XDR      6016 × 3384	    3008 × 1692 (×2 Retina)	    ≈ 218 ppi	

=> il faut voir sur grand écran Apple avant de virer les vh !!!
 
Apple Store Louvre (Carrousel du Louvre) – pratique et calme.

Objectif	                    Solution	    Coût	    Fidélité
Test rapide, sans matériel	    Apple Store	    Gratuit	    Excellent

*/

/* variables pour le CSS : font-size: var(--nav-font-size); ------- */
:root {
  --nav-font-size: 2.2vh; /* Format de base pour le nav */
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
  background-color: white;

  /* chemin vers ton image de fond */
  background-image: url("../../public/img/tools/fond_site_beatricerogerliaudet.jpg");

  /* ---- options de base ---- */
  background-position: center;   /* centre l’image */
  background-repeat: no-repeat;  /* évite la répétition */
  background-size: cover;

  overflow-y: auto; 
        /* hidden : nécessaire pour safari  
                pas de scroll interne si trop de contenu 
                Si l'image est trop grande: ça coupe !
        */
        /* auto : ça scrolle si l'image est trop grande */
}

body { /* nécessaire pour safari */
  display: flex;
  flex-direction: column;
}

/* CSS layout  ---------------------------------------------- */

.layout {
  display: flex;
  flex-direction: column;

  /* 🌍 1. Hauteur par défaut (tous navigateurs desktop + Android) */
  height: 100vh;

  /* 🍏 2. iOS 16+ : unités dynamiques plus fiables */
  min-height: 100dvh;

  /* 🍎 3. iOS 15 et avant : correction du bug 100vh */
  height: -webkit-fill-Available;
}

header {
  flex: 0 0 11%; /* hauteur fixe à 12% */
}

main {
  -flex: 1 1 auto; /*les 2 marchent */
  flex: 1 0 84%; /* prend le reste */
  display: flex; /* utile pour que les images s'affichent bien Safari */
  flex-direction: column;
  overflow: hidden; /* ou auto : les 2 marchent */
}

footer {
  flex: 0 0 2.5%; /* hauteur fixe à 2,5% */
}

main .version-mobile {  /* géré pour tout le site : dans le main généal */
   display : none;
}

main .copyright-mobile { /* copyright des oeuvres sur mobile */
    display:none;
}

/* --- Gestion de la langue --- */

/* Par défaut, tout est masqué */
.lang-fr, .lang-aus {
  display: none;
}
/* Par défaut, tout est masqué : bidouille pour 2025*/
.lang-fr-2025, .lang-aus-2025 {
  display: none;
}

/* Affichage automatique selon la classe du body */
body.body-lang-fr .lang-fr {
  display: revert; /* inline pour span, block pour div */
}

body.body-lang-aus .lang-aus {
  display: revert;
}

body.body-lang-fr .lang-fr-2025 { /*bidouille pour 2025*/
  display: revert; /* inline pour span, block pour div */
}

body.body-lang-aus .lang-aus-2025 { /* : bidouille pour 2025*/
  display: revert;
}

@media all and (max-width: 768px) {
  main .copyright-mobile {
    display:block;
    font-size: calc(var(--nav-font-size) * 0.6);
    font-style: italic;
  }
  main .version-mobile { /* géré pour tout le site : dans le main généal */
    display : block;
  }

  main .version-mobile { /* géré pour tout le site : dans le main généal */
    background-color: rgb(130, 108, 66);
    text-align: center;
    margin-top:2rem;
    margin-bottom:5rem;
    padding:1rem;
    font-weight: normal;
    font-size: calc(var(--nav-font-size) * 1.3);
  }
  main .version-mobile p {    
    margin:5px 0px 5px 0px;
    font-size: calc(var(--nav-font-size) * 0.9);
    font-style: italic;
    color: beige;
  }
  main .version-mobile .copyright {    
    margin-top:1.2rem;
  }
}