/* ==========================================================================
   Après la Brume — page d'accueil temporaire
   Maquette de référence : 1920 × 1080 (desktop) / mobile
   ========================================================================== */

@font-face {
  font-family: "Bagnard Sans";
  src: url("../fonts/BagnardSans.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --vert: #0f4540;      /* textes, boutons */
  --bleu: #4f80ff;      /* logo, mains */
  --orange: #c1581c;    /* étiquette « en construction » */
  --fond: #eef2fd;

  --f-titre: "Bagnard Sans", Georgia, serif;
  --f-texte: "Open Sans", "Segoe UI", system-ui, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--fond);
  color: var(--vert);
  font-family: var(--f-texte);
  overflow-x: hidden;
  position: relative;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, p, ul, figure { margin: 0; padding: 0; }

/* ---------- Fond brume (calque fixe, compatible iOS) ---------- */
.fond {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: var(--fond);
  background-image: url("../img/fond.jpg");
  background-image: image-set(url("../img/fond.webp") type("image/webp"), url("../img/fond.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
}

/* Grande forme « nuage » en filigrane */
.forme-fond {
  position: absolute;
  z-index: -1;
  left: -0.5vw;
  top: 13.9vh;
  width: 49.5vw;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

/* ---------- Mise en page ---------- */
.page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 5.5vh, 80px) 0 clamp(24px, 4vh, 80px);
}

.entete { display: flex; justify-content: center; }

.logo {
  position: relative;
  /* le SVG du logo a des marges : 536 px de boîte ≈ 405 px de lettrage à 1920 px */
  width: clamp(300px, 27.9vw, 620px);
}
.logo img:first-child { width: 100%; }
.construction {
  position: absolute;
  left: 63%;
  top: 16%;
  width: 43%;
}

.contenu {
  flex: 1;
  width: min(81.3vw, 1800px);
  margin: clamp(24px, 9vh, 130px) auto 0;
  display: grid;
  grid-template-columns: minmax(0,31.25fr) minmax(0,5fr) minmax(0,25.8fr) minmax(0,3.6fr) minmax(0,15.6fr);
  grid-template-areas: "texte . portrait . contact";
  align-items: center;
  align-content: start;
}

/* ---------- Texte de présentation ---------- */
.presentation { grid-area: texte; }

.titre {
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: clamp(26px, 2.45vw, 56px);
  line-height: 1.17;
  white-space: nowrap;  /* 2 lignes comme la maquette, le titre déborde un peu sur la gouttière */
  letter-spacing: 0.01em;
  margin-bottom: 0.85em;
}

.presentation p {
  font-size: clamp(16px, 1.15vw, 25px);
  line-height: 1.2;
  margin-bottom: 1.2em;
  max-width: 27.5em;
}
.presentation p:last-child { margin-bottom: 0; }
.presentation strong { font-weight: 700; }

/* ---------- Portrait ---------- */
.portrait {
  grid-area: portrait;
  position: relative;
  width: 100%;
}
.portrait svg { width: 100%; height: auto; overflow: visible; }
.mains {
  position: absolute;
  left: 56.5%;
  top: 67%;
  width: 27.5%;
}

/* ---------- Contact ---------- */
.contact { grid-area: contact; }

.contact-titre {
  display: inline-block;
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: clamp(19px, 1.25vw, 28px);
  line-height: 1.2;
  padding-bottom: 0.3em;
  border-bottom: 1.5px solid var(--vert);
  white-space: nowrap;
}

.coordonnees {
  margin-top: 1.4em;
  font-size: clamp(16px, 1.15vw, 25px);
  font-weight: 700;
  line-height: 1.22;
}
.coordonnees a { text-decoration: none; white-space: nowrap; }
.coordonnees a:hover,
.coordonnees a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.bouton {
  display: inline-block;
  margin-top: clamp(18px, 1.35vw, 30px);
  width: clamp(220px, 15.7vw, 340px);
  transition: transform .25s ease;
}
.bouton img { width: 100%; }
.bouton:hover,
.bouton:focus-visible { transform: rotate(-1.5deg) scale(1.03); }

.reseaux {
  list-style: none;
  display: flex;
  gap: clamp(6px, 0.42vw, 10px);
  margin-top: clamp(10px, 0.65vw, 14px);
}
.reseaux a { display: block; width: clamp(28px, 1.67vw, 36px); transition: transform .2s ease; border-radius: 50%; }
.reseaux a:hover,
.reseaux a:focus-visible { transform: translateY(-2px); }
.reseaux img { width: 100%; }

a:focus-visible { outline: 2px solid var(--bleu); outline-offset: 4px; border-radius: 6px; }

.br-desk { display: inline; }
.br-mob { display: none; }

/* ==========================================================================
   Tablette / petit portable : 2 colonnes
   texte à gauche — portrait + contact empilés à droite
   ========================================================================== */
@media (max-width: 1199px) {
  .logo { width: clamp(300px, 40vw, 480px); }

  .contenu {
    width: min(88vw, 1000px);
    grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
    grid-template-areas:
      "texte portrait"
      "texte contact";
    column-gap: 6vw;
    row-gap: 32px;
    align-items: start;
  }
  .presentation { align-self: center; }
  .titre { font-size: clamp(28px, 3.6vw, 40px); white-space: normal; }
  .titre .br-desk { display: none; }
  .presentation p,
  .coordonnees { font-size: clamp(15px, 1.75vw, 18px); line-height: 1.3; }
  .contact-titre { font-size: clamp(18px, 2vw, 22px); }
  .bouton { width: clamp(220px, 26vw, 280px); }
  .reseaux a { width: 32px; }
  .forme-fond { width: 75vw; top: 18vh; left: -12vw; }
}

/* ==========================================================================
   Mobile : une colonne (maquette téléphone)
   logo — portrait — texte — contact
   ========================================================================== */
@media (max-width: 719px) {
  .fond { background-position: 78% center; }
  .forme-fond { width: 135vw; left: -78vw; top: 70vw; }

  .page { padding: 36px 0 56px; }

  .logo { width: min(82vw, 440px); }

  .contenu {
    width: auto;
    margin: 0;
    padding: 0 max(28px, 8vw);
    grid-template-columns: 1fr;
    grid-template-areas:
      "portrait"
      "texte"
      "contact";
    row-gap: 0;
  }

  .portrait {
    width: min(60vw, 330px);
    margin: 44px auto 40px;
    justify-self: center;
  }
  .mains { left: 34%; top: 72%; width: 31.5%; }

  .titre {
    font-size: clamp(27px, 7.6vw, 38px);
    line-height: 1.14;
    margin-bottom: 0.8em;
  }
  .presentation p { font-size: 16px; line-height: 1.38; margin-bottom: 1.1em; max-width: 34em; }
  .br-desk { display: none; }
  .br-mob { display: inline; }

  .contact { margin-top: 48px; }
  .contact-titre { font-size: 20px; }
  .coordonnees { font-size: 16px; line-height: 1.4; margin-top: 1.1em; }
  .bouton { width: 240px; margin-top: 18px; }
  .reseaux { margin-top: 10px; gap: 8px; }
  .reseaux a { width: 34px; }  /* cible tactile confortable */
}

/* Écrans d'ordinateur peu hauts (ex. 1366 × 768) : on resserre la verticale pour tout voir sans défiler */
@media (min-width: 1200px) and (max-height: 820px) {
  .page { padding-top: 3vh; padding-bottom: 3vh; }
  .contenu { margin-top: 5vh; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}
.nowrap { white-space: nowrap; }