/* Polices hébergées sur le site (licence SIL OFL 1.1, voir /polices/OFL-*.txt) :
   aucune requête vers Google, donc aucune adresse IP de visiteur transmise. */
/* latin-ext */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/polices/bodoni-moda-italique-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/polices/bodoni-moda-italique-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-ext */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/polices/bodoni-moda-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/polices/bodoni-moda-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-ext */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/polices/bodoni-moda-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/polices/bodoni-moda-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-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/polices/karla-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/polices/karla-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-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/polices/karla-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/polices/karla-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-ext */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/polices/karla-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/polices/karla-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;
}

/*
  Michoozon Inc. — feuille unique, partagée par les deux langues.

  ## Ce que ce site doit tenir en même temps

  C'est une **page d'identité** : Apple, Google et Dun & Bradstreet viennent y
  vérifier qu'une société existe, à cette adresse, sous ce nom. Rien de ce qui
  suit ne doit rendre ces mentions moins lisibles ou moins exactes.

  Et c'est la vitrine d'une maison qui publie des applications : elle a le droit
  d'avoir de l'allure.

  Les deux ne s'opposent pas, à une condition — le mouvement sert la lecture,
  il ne la décore pas. Chaque animation ici a une raison : révéler à mesure
  qu'on descend, donner de la profondeur, faire respirer une page courte.

  ## Pas de photographie, et c'est délibéré

  Michoozon n'a pas de banque d'images, et de la photographie générique dirait
  moins que rien sur une société de trois personnes. Les visuels sont donc
  géométriques et animés : des halos de couleur qui dérivent, des blocs
  décalés, une typographie très contrastée. Le jour où de vraies photos
  existent, elles remplacent les `.forme` sans toucher au reste.

  ## L'identité visuelle

  Volontairement distincte de Nuzalo — encre et pierre, non crème et cacao.
  Les confondre laisserait croire que l'entreprise et le produit sont la même
  chose, ce qu'une vérification d'identité cherche justement à démêler.
*/

:root {
  --encre: #141619;
  --encre-douce: #232830;
  --encre-voile: rgba(20, 22, 25, 0.72);
  --pierre: #f4f2ed;
  --pierre-grise: #d9d5cc;
  --texte-doux: #5b6169;
  --accent: #1d5b3b;
  --accent-clair: #2f8a5b;
  --or: #c9a227;
  --display: 'Bodoni Moda', Georgia, serif;
  --corps: 'Karla', system-ui, -apple-system, sans-serif;
  --marge: clamp(1.25rem, 6vw, 6rem);
  --bloc: clamp(4rem, 10vw, 9rem);
  --large: 76rem;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--corps);
  color: var(--encre);
  background: var(--pierre);
  line-height: 1.65;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  overflow-x: hidden;
}

a {
  color: inherit;
}

.dedans {
  width: 100%;
  max-width: var(--large);
  margin: 0 auto;
  padding: 0 var(--marge);
}

/* ───────────────────────────── le mouvement ─────────────────────────────
   Tout ce qui bouge part d'ici. `.rv` est posé dans le HTML, `.vu` est ajouté
   par le script quand l'élément entre à l'écran. Sans JavaScript, rien n'est
   masqué : la règle par défaut est visible, et le script ne fait que retarder.
*/
.rv {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rv.vu {
  opacity: 1;
  transform: none;
}

.rv--tard {
  transition-delay: 0.12s;
}

.rv--tres-tard {
  transition-delay: 0.24s;
}

/*
  ⚠️ Le respect du réglage système n'est pas une politesse : un mouvement de
  parallaxe peut provoquer des nausées chez les personnes sensibles au
  vestibulaire. Ici tout s'arrête, et rien ne se perd — la page reste entière.
*/
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .rv {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .forme {
    animation: none !important;
  }
}

/* ─────────────────────────── les formes animées ─────────────────────────
   Des halos flous qui dérivent lentement. `filter: blur` sur un fond sombre
   coûte peu et donne une profondeur que les aplats n'ont pas.
*/
.formes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.forme {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  will-change: transform;
}

.forme--a {
  width: 42vw;
  height: 42vw;
  min-width: 320px;
  min-height: 320px;
  top: -12%;
  right: -8%;
  background: radial-gradient(circle at 30% 30%, var(--accent-clair), transparent 70%);
  animation: derive-a 22s ease-in-out infinite alternate;
}

.forme--b {
  width: 34vw;
  height: 34vw;
  min-width: 260px;
  min-height: 260px;
  bottom: -14%;
  left: -10%;
  background: radial-gradient(circle at 60% 40%, #2b4a6f, transparent 70%);
  animation: derive-b 27s ease-in-out infinite alternate;
}

.forme--c {
  width: 18vw;
  height: 18vw;
  min-width: 160px;
  min-height: 160px;
  top: 42%;
  left: 52%;
  background: radial-gradient(circle at 50% 50%, var(--or), transparent 68%);
  opacity: 0.28;
  animation: derive-c 19s ease-in-out infinite alternate;
}

@keyframes derive-a {
  to {
    transform: translate3d(-7%, 9%, 0) scale(1.12);
  }
}

@keyframes derive-b {
  to {
    transform: translate3d(9%, -7%, 0) scale(1.08);
  }
}

@keyframes derive-c {
  to {
    transform: translate3d(-14%, -11%, 0) scale(0.88);
  }
}

/* ───────────────────────────── l'en-tête ────────────────────────────────
   Asymétrique : le nom occupe la gauche sur deux tiers, la ligne de conduite
   descend à droite et plus bas. Une composition centrée aurait donné la carte
   de visite que ce site n'est plus.
*/
.entete {
  position: relative;
  background: var(--encre);
  color: var(--pierre);
  padding: calc(var(--bloc) * 0.9) 0 var(--bloc);
  isolation: isolate;
}

.entete > .dedans {
  position: relative;
  z-index: 1;
}

.langues {
  display: inline-flex;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}

.langues a,
.langues span {
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(217, 213, 204, 0.3);
  color: var(--pierre-grise);
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s;
}

.langues > :first-child {
  border-radius: 999px 0 0 999px;
}

.langues > :last-child {
  border-radius: 0 999px 999px 0;
  border-left: 0;
}

/* La langue affichée n'est pas un lien : cliquer sur la page où l'on se trouve
   déjà ne mène nulle part, et le dire évite de le faire découvrir en essayant. */
.langues [aria-current='true'] {
  background: var(--pierre);
  color: var(--encre);
  border-color: var(--pierre);
}

.langues a:hover {
  background: rgba(244, 242, 237, 0.1);
  color: var(--pierre);
}

.entete__grille {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 60rem) {
  .entete__grille {
    grid-template-columns: 1.35fr 0.65fr;
    align-items: end;
  }
}

.nom {
  font-family: var(--display);
  font-size: clamp(2.8rem, 11vw, 7rem);
  line-height: 0.92;
  margin: 0;
  letter-spacing: -0.02em;
}

.nom em {
  font-style: italic;
  color: var(--or);
}

.baseline {
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.28rem);
  color: var(--pierre-grise);
  margin: 0;
  max-width: 34ch;
}

@media (min-width: 60rem) {
  .baseline {
    padding-bottom: 0.9rem;
    border-left: 2px solid var(--or);
    padding-left: 1.4rem;
  }
}

/* ────────────────────────────── les sections ────────────────────────────── */

.section {
  padding: var(--bloc) 0;
  position: relative;
}

.section--pierre {
  background: var(--pierre);
}

.section--encre {
  background: var(--encre-douce);
  color: var(--pierre);
  overflow: hidden;
}

.oeil {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 0.9rem;
}

.section--encre .oeil {
  color: var(--or);
}

h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 3rem);
  line-height: 1.12;
  margin: 0 0 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1.1rem;
  max-width: 60ch;
}

.discret {
  color: var(--texte-doux);
}

.section--encre .discret {
  color: var(--pierre-grise);
}

/*
  L'asymétrie, concrètement : deux colonnes inégales, et la seconde décalée
  vers le bas. C'est ce décalage — pas la largeur — qui donne l'impression de
  composition plutôt que de gabarit.
*/
.duo {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
}

@media (min-width: 62rem) {
  .duo {
    grid-template-columns: 0.95fr 1.05fr;
    align-items: start;
  }

  .duo > :last-child {
    margin-top: clamp(2rem, 6vw, 5rem);
  }

  .duo--inverse {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .duo--inverse > :first-child {
    margin-top: clamp(2rem, 6vw, 5rem);
  }

  .duo--inverse > :last-child {
    margin-top: 0;
  }
}

/* Le bloc de couleur qui remplace la photographie. */
.panneau {
  position: relative;
  min-height: clamp(15rem, 34vw, 26rem);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(140deg, var(--encre) 0%, var(--accent) 130%);
  display: grid;
  place-items: center;
  padding: 2rem;
  isolation: isolate;
}

.panneau__mot {
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-size: clamp(2rem, 6vw, 3.6rem);
  color: var(--pierre);
  text-align: center;
  line-height: 1.05;
  margin: 0;
}

.panneau__sous {
  position: relative;
  z-index: 1;
  color: var(--pierre-grise);
  text-align: center;
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
}

/* ────────────────────────────── le produit ────────────────────────────── */

.produit {
  display: grid;
  gap: 1.6rem;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  background: var(--encre);
  color: var(--pierre);
  border-radius: 18px;
  align-items: start;
}

@media (min-width: 52rem) {
  .produit {
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: 2rem;
  }
}

.produit__nom {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 0;
}

.produit__quoi {
  margin: 0;
  color: var(--pierre-grise);
  max-width: 46ch;
}

.produit__lien {
  color: var(--pierre);
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 2px solid var(--or);
  padding-bottom: 2px;
  transition: color 0.2s;
}

.produit__lien:hover {
  color: var(--or);
}

/* ─────────────────────────── les réalisations ─────────────────────────── */

/* Trois cartes `.produit` empilées. Elles gardent le style des produits :
   c'est le même geste — voici une chose, voilà ce qu'elle est, allez la voir. */
.realisations {
  display: grid;
  gap: 1.1rem;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

/* ──────────────────────── le formulaire de contact ────────────────────── */

/*
  Le formulaire est une carte, pas une suite de champs posés sur le fond.
  Sans contour il flottait au milieu de la page, sans rien pour le rattacher
  au reste — c'est ce que Gishleine a vu et qu'elle a trouvé bizarre.
*/
.formulaire {
  display: grid;
  gap: 1.15rem;
  align-content: start;
  background: #fff;
  border: 1px solid var(--pierre-grise);
  border-radius: 18px;
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
}

/*
  ⚠️ `.duo > :last-child` décale la seconde colonne vers le bas : c'est
  l'asymétrie voulue du site, et elle est juste pour un panneau ou une image.
  Sur un formulaire, elle donne l'impression d'un bloc qui a glissé. On annule
  le décalage ici, et seulement ici.
*/
@media (min-width: 62rem) {
  .duo > .formulaire {
    margin-top: 0;
  }
}

.champ {
  display: grid;
  gap: 0.4rem;
}

.champ label {
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--texte-doux);
}

.champ input,
.champ textarea {
  font-family: var(--corps);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--encre);
  /* Le champ est légèrement plus sombre que la carte : c'est ce creux qui
     dit « on écrit ici », sans avoir à l'expliquer. */
  background: var(--pierre);
  border: 1px solid var(--pierre-grise);
  border-radius: 10px;
  padding: 0.78rem 0.9rem;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.champ input:hover,
.champ textarea:hover {
  border-color: #bdb8ad;
}

.champ textarea {
  resize: vertical;
  min-height: 8rem;
}

.champ input:focus,
.champ textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29, 91, 59, 0.15);
}

/* ⚠️ Le piège à robots. `display:none` est repéré par les automates les plus
   sérieux ; on le sort donc de l'écran plutôt que de le masquer, et on le
   retire du parcours au clavier pour qu'une personne au lecteur d'écran ne
   tombe jamais dessus. */
.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.bouton {
  font-family: var(--corps);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--pierre);
  background: var(--accent);
  border: none;
  border-radius: 10px;
  padding: 0.95rem 1.8rem;
  cursor: pointer;
  /* Pleine largeur sur téléphone, où viser un petit bouton est pénible ;
     à sa taille naturelle dès qu'il y a de la place. */
  justify-self: stretch;
  margin-top: 0.3rem;
  transition: background 0.2s, transform 0.1s;
}

@media (min-width: 34rem) {
  .bouton {
    justify-self: start;
  }
}

.bouton:hover {
  background: var(--accent-clair);
}

.bouton:active {
  transform: translateY(1px);
}

.bouton:disabled {
  opacity: 0.55;
  cursor: progress;
}

.formulaire__avis {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  opacity: 0.8;
}

.formulaire__etat {
  margin: 0;
  font-size: 0.95rem;
  min-height: 1.4rem;
}

.formulaire__etat[data-etat='ok'] {
  color: var(--accent);
  font-weight: 700;
}

.formulaire__etat[data-etat='erreur'] {
  color: #a4331f;
  font-weight: 700;
}

/* ──────────────────────────── les coordonnées ─────────────────────────── */

.coordonnees {
  display: grid;
  gap: 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  /* Depuis le 2026-08-28 la liste vit à l'intérieur de la colonne de texte,
     entre deux paragraphes, et non plus seule dans sa colonne. */
  margin: 1.8rem 0;
}

.coordonnees div {
  padding-top: 1rem;
  border-top: 2px solid var(--pierre-grise);
}

.section--encre .coordonnees div {
  border-top-color: rgba(217, 213, 204, 0.3);
}

.coordonnees dt {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-doux);
  font-weight: 700;
  margin-bottom: 0.45rem;
}

.section--encre .coordonnees dt {
  color: var(--or);
}

.coordonnees dd {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
}

.coordonnees a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ───────────────────────────────── le pied ──────────────────────────────── */

.pied {
  background: var(--encre);
  color: var(--pierre-grise);
  padding: 2.8rem 0;
  font-size: 0.9rem;
}

.pied__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  justify-content: space-between;
  align-items: center;
}

.pied a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  a {
    transition: opacity 0.2s;
  }

  a:hover {
    opacity: 0.78;
  }
}

/* Le lien d'évitement, obligatoire dès qu'il y a une barre de langues. */
.evitement {
  position: absolute;
  left: -9999px;
}

.evitement:focus {
  left: var(--marge);
  top: 1rem;
  z-index: 99;
  background: var(--pierre);
  color: var(--encre);
  padding: 0.6rem 1rem;
  border-radius: 8px;
}