/* =====================================================================
   FEUILLE DE STYLE - Olivier Truyman
   ---------------------------------------------------------------------
   Le site tient en une page. Ce fichier tient en trois parties :
     1. REGLAGES   couleurs, police, tailles - commence et finis ici
     2. BASES      remise a zero
     3. LA CARTE   la mise en page du contenu

   Pour changer l'allure du site, la partie 1 suffit.
   ===================================================================== */


/* =====================================================================
   1. REGLAGES
   ===================================================================== */
:root {

  /* --- COULEURS ---------------------------------------------------
     Trois valeurs seulement. Format : #RRGGBB
  */
  --fond:       #ffffff;   /* fond de page */
  --texte:      #1a1a1a;   /* nom et coordonnees */
  --texte-doux: #6b6b6b;   /* activite, filet */

  /* --- POLICE -----------------------------------------------------
     Courier : la machine a ecrire, presente sur tous les ordinateurs.
     Rien a telecharger, donc affichage instantane.

     Alternative si tu veux changer un jour :
       Georgia, "Times New Roman", serif
       -apple-system, "Segoe UI", Arial, sans-serif
  */
  --police: "Courier New", Courier, "Nimbus Mono PS", monospace;

  /* --- DIMENSIONS -------------------------------------------------- */
  --taille-nom:      clamp(1.7rem, 6vw, 3.4rem);   /* s'adapte a l'ecran */
  --taille-activite: clamp(0.85rem, 2.2vw, 1.05rem);
  --taille-contact:  clamp(0.9rem, 2.4vw, 1.1rem);
  --largeur-filet:   min(280px, 60vw);
}

/* --- MODE SOMBRE ---------------------------------------------------
   S'active tout seul si le visiteur a regle son appareil en sombre.
   Supprime ce bloc pour un site toujours clair.
*/
@media (prefers-color-scheme: dark) {
  :root {
    --fond:       #101010;
    --texte:      #f2f2f2;
    --texte-doux: #8f8f8f;
  }
}


/* =====================================================================
   2. BASES
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;          /* toute la hauteur de l'ecran */
  display: flex;
  align-items: center;         /* centrage vertical */
  justify-content: center;     /* centrage horizontal */
  padding: 2rem 1.5rem;

  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Contour visible a la navigation au clavier : c'est l'accessibilite,
   ne pas supprimer. */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}


/* =====================================================================
   3. LA CARTE
   ===================================================================== */
.carte {
  text-align: center;
  max-width: 640px;
}

.carte__nom {
  font-size: var(--taille-nom);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin: 0;
}

.carte__activite {
  font-size: var(--taille-activite);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin: 1.4rem 0 0;
}

.carte__filet {
  width: var(--largeur-filet);
  height: 0;
  border: 0;
  border-top: 1px solid var(--texte-doux);
  opacity: 0.35;
  margin: 2.8rem auto;
}

/* <address> est en italique par defaut dans les navigateurs : on annule */
.carte__contact {
  font-style: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  font-size: var(--taille-contact);
}

.carte__contact a {
  color: inherit;
  text-decoration: none;
  letter-spacing: 0.03em;
  padding-bottom: 0.2em;
  border-bottom: 1px solid transparent;
  transition: border-color 240ms ease;
  overflow-wrap: anywhere;     /* l'email ne deborde jamais sur mobile */
}
.carte__contact a:hover {
  border-bottom-color: currentColor;
}

/* Sur un ecran tactile, l'effet de survol n'a pas de sens :
   on affiche le soulignement en permanence. */
@media (hover: none) {
  .carte__contact a { border-bottom-color: currentColor; opacity: 0.9; }
}

/* Respecte les personnes sensibles au mouvement */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}