/* pimagajam — styles de l'accueil et des mentions légales.
   Valeurs reprises de maquette/Main.dc.html (ordinateur, par défaut)
   et maquette/Mobile.dc.html (téléphone, sous 600 px). */

/* ---------- Polices (servies par le site, sous-ensemble latin) ---------- */

/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(polices/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(polices/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(polices/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(polices/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(polices/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Base (bloc <style> de la maquette) ---------- */

body { margin: 0; }
a { color: #1C4FD8; }
a:hover { color: #123A9E; }

/* Variantes de texte selon la largeur */
.seul-tel { display: none; }

/* ---------- Page ---------- */

.page {
  min-height: 100vh;
  background: #EEF1F5;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #121826;
}

.conteneur {
  max-width: 1120px;
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

/* Élément flex-grow de la maquette téléphone : absent sur ordinateur */
.ressort { display: none; }

/* ---------- En-tête ---------- */

.entete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

/* Les couleurs posées en attribut style dans la maquette l'emportaient sur a:hover */
.logo,
.logo:hover {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #121826;
}

.logo-nom {
  font-family: 'Bricolage Grotesque', Inter, sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
}

.contact,
.contact:hover {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid #CBD3DF;
  background: #FFFFFF;
  color: #121826;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
}

/* ---------- Introduction ---------- */

.intro {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 680px;
}

.surtitre {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4A5568;
}

.titre {
  margin: 0;
  font-family: 'Bricolage Grotesque', Inter, sans-serif;
  font-weight: 700;
  font-size: 60px;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.chapo {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  color: #4A5568;
}

/* ---------- Grille des apps ---------- */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

.tuile,
.tuile:hover {
  position: relative;
  display: block;
  min-height: 380px;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: #121826;
}

.tuile-popote { background: #FFE1CC; }
.tuile-familytasks { background: #DCE7FF; }
.tuile-over9000 { background: #D3F1E4; }

a.tuile { transition: transform .15s ease, box-shadow .15s ease; }
a.tuile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(18,24,38,.14); }
a.tuile:focus-visible { outline: 3px solid #1C4FD8; outline-offset: 3px; }

.tuile-decor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.carte {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: #FFFFFF;
  border-radius: 16px;
}

.carte-texte {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.carte-pied {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Popote : le rond fléché est retiré, sa hauteur est conservée pour que la carte reste identique */
.tuile-inerte .carte-pied { min-height: 44px; }

.nom-app {
  margin: 0;
  font-family: 'Bricolage Grotesque', Inter, sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
}

.description {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: #4A5568;
}

.statut {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
}

.statut-preparation { background: #FDEBDD; color: #9A3A06; }
.statut-service { background: #E3F4EC; color: #0B6B4A; }

.statut-prive {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #E8EDF5;
  color: #33415C;
}

.fleche {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #121826;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tuile « Prochaine app » */

.prochaine {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  min-height: 380px;
  padding: 28px;
  box-sizing: border-box;
  border: 2px dashed #B8C2D0;
  border-radius: 22px;
  text-align: center;
  color: #121826;
}

.prochaine-icone {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: #FFFFFF;
  border: 1px solid #DCE2EA;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prochaine .nom-app { color: #33415C; }

.statut-bientot {
  background: #FFFFFF;
  border: 1px solid #DCE2EA;
  color: #33415C;
}

/* ---------- Pied de page ---------- */

.pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid #D5DCE6;
  font-size: 14px;
  color: #4A5568;
}

/* Liens du pied de page : restent à droite même quand la ligne se replie */
.pied-liens { margin-left: auto; }

/* ---------- Mentions légales ---------- */

.insecable { white-space: nowrap; }

.lecture {
  max-width: 760px;
  padding: 40px;
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.lecture-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lecture-titre {
  margin: 0;
  font-family: 'Bricolage Grotesque', Inter, sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
}

.lecture p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #4A5568;
}

/* ---------- Téléphone (Mobile.dc.html), sous 600 px ---------- */

@media (max-width: 599.98px) {
  .seul-ordi { display: none; }
  .seul-tel { display: inline; }

  .page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  .conteneur {
    flex-grow: 1;
    max-width: none;
    margin: 0;
    padding: 28px 20px 24px;
    gap: 28px;
  }

  .ressort {
    display: block;
    flex-grow: 1;
  }

  .entete {
    flex-wrap: nowrap;
    gap: 0;
  }

  .logo,
  .logo:hover { gap: 10px; }

  .logo-icone {
    width: 30px;
    height: 30px;
  }

  .logo-nom { font-size: 22px; }

  /* Bouton rond sans texte */
  .contact,
  .contact:hover {
    display: flex;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 0;
    padding: 0;
  }

  .intro {
    gap: 10px;
    max-width: none;
  }

  .surtitre { font-size: 12px; }

  .titre {
    font-size: 38px;
    line-height: 1.05;
  }

  .chapo {
    font-size: 16px;
    line-height: 1.5;
  }

  .grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .tuile,
  .tuile:hover {
    min-height: 0;
    height: 214px;
    border-radius: 18px;
  }

  /* :active au lieu du survol */
  a.tuile { transition: none; }
  a.tuile:hover { transform: none; box-shadow: none; }
  a.tuile:active { transform: scale(.98); }

  /* Carte réduite au nom et au statut */
  .carte {
    left: 8px;
    right: 8px;
    bottom: 8px;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 12px;
  }

  .carte-texte,
  .carte-pied { display: contents; }

  .description,
  .fleche { display: none; }

  .nom-app { font-size: 18px; }

  .statut {
    align-self: flex-start;
    font-size: 11px;
    padding: 3px 8px;
  }

  .statut-prive { gap: 4px; }

  .statut-prive svg {
    width: 11px;
    height: 11px;
    stroke-width: 2.6;
  }

  .prochaine {
    gap: 10px;
    min-height: 0;
    height: 214px;
    padding: 16px;
    border-radius: 18px;
  }

  .prochaine-icone {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .prochaine-icone svg {
    width: 22px;
    height: 22px;
  }

  /* Dans la maquette, le badge « Bientôt » n'a pas d'align-self */
  .prochaine .statut { align-self: auto; }

  .pied {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 4px;
    padding-top: 16px;
    font-size: 13px;
  }

  .pied-liens { margin-left: 0; }

  .lecture {
    padding: 24px 20px;
    border-radius: 18px;
    gap: 24px;
  }

  .lecture-titre { font-size: 18px; }

  .lecture p {
    font-size: 15px;
    line-height: 1.55;
  }
}