/* ============================================================
   ATELIER VASSEUR — concept one-page, d'après le brief PDF.
   Démonstration Étage Zéro. Marque fictive.

   Direction donnée par le brief : « un site qui ressemble davantage
   à un studio d'architecture qu'à un site d'artisan traditionnel ».
   Beaucoup d'espace, grandes photos, lignes fines, aucun gadget.

   Ce que le brief interdit et qu'on ne trouvera donc pas ici :
   icônes marteau/scie, textures bois dans l'interface, palette
   marron appliquée partout, accumulation de cartes et pictogrammes.
   Le bois est dans les photos ; l'interface reste neutre.

   Palette imposée, contrastes vérifiés (tous au-dessus des seuils).
   ============================================================ */

:root {
  --ivoire:     #F2EFE8;
  --anthracite: #1D1D1B;
  --noyer:      #866348;
  --olive:      #53604E;

  --gris:       #6B6862;   /* texte secondaire sur ivoire — 5,4:1 */
  --gris-clair: #A9A49B;   /* texte secondaire sur anthracite */
  --filet:      #DAD5C9;

  --titre: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --texte: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;

  --marge: 22px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--anthracite);
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, blockquote {
  font-family: var(--titre);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}

p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { list-style: none; padding: 0; }
img { display: block; max-width: 100%; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--noyer); outline-offset: 3px; }

.evitement { position: absolute; left: -9999px; }
.evitement:focus {
  left: 0; top: 0; z-index: 90;
  background: var(--anthracite); color: var(--ivoire);
  padding: 12px 18px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* petit œil de section — fine, espacée, jamais criarde */
.oeil {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--noyer);
}

.num {
  font-family: var(--texte);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--noyer);
}

.dit { color: var(--gris); font-size: 15px; }

.avert {
  font-size: 12px;
  color: var(--gris);
  font-style: italic;
}

/* ---------- bandeau de démonstration ---------- */

.demo {
  background: var(--anthracite);
  color: var(--ivoire);
  font-size: 12px;
  letter-spacing: .04em;
  text-align: center;
  padding: 9px var(--marge);
  position: relative;
  z-index: 60;
}
.demo a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 01 · navigation ---------- */

/* Fond plein, et non plus translucide. Au-dessus des deux sections
   anthracite, l'ivoire à 92 % virait au #E1DED8 : le sous-titre du logo
   (4,13:1) et le lien de la section en cours (4,01:1) passaient sous le
   seuil de 4,5:1. Vu le 15 septembre 2026 en faisant défiler la page — une
   vérification faite en haut de page ne pouvait pas le voir. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ivoire);
  border-bottom: 1px solid var(--filet);
}
.nav__in {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px var(--marge);
  max-width: 1440px;
  margin: 0 auto;
  transition: padding .35s cubic-bezier(.2,.7,.3,1);
}
/* Passé le bloc d'ouverture, la barre se resserre. On n'anime que des
   dimensions : si la transition ne se joue pas, la barre reste haute —
   rien ne disparaît, rien ne devient illisible. */
.nav.compacte .nav__in { padding-top: 8px; padding-bottom: 8px; }
.nav.compacte .logo__nom { font-size: 18px; }
.logo {
  text-decoration: none;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
}
.logo__txt { display: block; }

/* La marque : un A dont la contre-forme est une queue d'aronde. */
.marque {
  width: 30px; height: 30px;
  flex: none;
  transition: width .35s cubic-bezier(.2,.7,.3,1), height .35s cubic-bezier(.2,.7,.3,1);
}
.nav.compacte .marque { width: 26px; height: 26px; }
.marque--pied { width: 34px; height: 34px; }
.logo__nom {
  display: block;
  font-family: var(--titre);
  font-size: 21px;
  letter-spacing: .02em;
  transition: font-size .35s cubic-bezier(.2,.7,.3,1);
}
.logo__sous {
  display: block;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris);
}
.nav__liens { display: none; gap: 30px; }
.nav__liens a {
  text-decoration: none;
  font-size: 14px;
  padding: 12px 0;
  border-bottom: 1px solid transparent;
}
.nav__liens a:hover { border-bottom-color: var(--noyer); }
/* Section en cours de lecture. Le filet suffit à le dire : sur une page
   d'une seule traite, c'est la seule aide au repérage qui existe. */
.nav__liens a.actif { color: var(--noyer); border-bottom-color: var(--noyer); }
.nav__cta { display: none; }

/* flèche typographique, pas d'icône dessinée */
.lien-fleche {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid var(--noyer);
  padding-bottom: 2px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.lien-fleche::after { content: " →"; white-space: pre; }
.lien-fleche:hover { color: var(--noyer); }

/* ---------- boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 26px;
  font-family: var(--texte);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
  border: 1px solid var(--anthracite);
  cursor: pointer;
  background: none;
  color: var(--anthracite);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.bouton--plein { background: var(--anthracite); color: var(--ivoire); }
.bouton--plein:hover { background: var(--noyer); border-color: var(--noyer); }
.bouton--fin { border-color: currentColor; }
.bouton--fin:hover { background: var(--anthracite); color: var(--ivoire); }

/* ---------- 02 · hero ---------- */

.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--ivoire);
  padding: 90px var(--marge) 0;
  overflow: hidden;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Voile sombre. Deux dégradés superposés plutôt qu'un seul :
   le vertical assoit le bas de l'image, l'horizontal assombrit la
   colonne de gauche, là où se trouve le texte. Sans le second, un
   titre ivoire posé sur une pièce claire devient illisible. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right,
      rgba(18,17,15,.82) 0%, rgba(18,17,15,.66) 38%,
      rgba(18,17,15,.22) 72%, rgba(18,17,15,.10) 100%),
    linear-gradient(to top,
      rgba(18,17,15,.78) 0%, rgba(18,17,15,.46) 46%, rgba(18,17,15,.30) 100%);
}
.hero__in, .hero__reperes { position: relative; z-index: 2; }
.hero__in { max-width: 720px; }
.hero .oeil { color: #D8C6B4; }

h1 {
  font-size: 44px;
  margin-top: 18px;
  color: var(--ivoire);
}
.hero__texte {
  margin-top: 20px;
  max-width: 46ch;
  color: #E4E0D8;
  font-size: 16px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero .bouton--plein { background: var(--ivoire); color: var(--anthracite); border-color: var(--ivoire); }
.hero .bouton--plein:hover { background: var(--noyer); border-color: var(--noyer); color: #fff; }
.hero .bouton--fin { color: var(--ivoire); border-color: rgba(242,239,232,.55); }
.hero .bouton--fin:hover { background: var(--ivoire); color: var(--anthracite); }

.hero__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 44px 0 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(242,239,232,.28);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #D8D3C9;
}

/* ---------- mise en page commune ---------- */

.bloc { padding: 72px var(--marge); max-width: 1440px; margin: 0 auto; }
.bloc--fonce {
  background: var(--anthracite);
  color: var(--ivoire);
  max-width: none;
}
.bloc--fonce .dit { color: var(--gris-clair); }
.bloc--filet { border-top: 1px solid var(--filet); }

.mesure { max-width: 760px; margin: 0 auto; }
/* Pas de marge basse : la section suivante apporte déjà la sienne.
   Les deux cumulées laissaient un trou de plus de 200 px. */
.intro { padding: 76px var(--marge) 0; text-align: center; }
.intro h2 { font-size: 34px; }
.intro p { margin-top: 20px; color: var(--gris); }

.paire {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 34px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--filet);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive);
}

.entete { max-width: 640px; margin-bottom: 40px; }
.entete h2 { font-size: 34px; }
.entete p { margin-top: 14px; color: var(--gris); }
.entete--serre { margin-bottom: 34px; }

/* ---------- 04 · savoir-faire ---------- */

.metiers { display: grid; gap: 40px; }
.cadre { overflow: hidden; margin-bottom: 18px; }
/* `height: auto` est indispensable : les attributs width/height du HTML
   sont appliqués par le navigateur comme une hauteur fixe, qui écrase
   `aspect-ratio`. Sans cette ligne, chaque photo garde sa hauteur propre
   et les colonnes se décalent les unes par rapport aux autres. */
.cadre img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.metier:hover .cadre img { transform: scale(1.035); }
.metier h3 { font-size: 24px; margin: 6px 0 8px; }

/* ---------- 05 · réalisations ---------- */

.works { padding: 0 0 20px; }
.works .entete { padding: 72px var(--marge) 0; max-width: 1440px; margin: 0 auto 34px; }

/* `overflow: hidden` sert au survol : sans lui, une image agrandie de 2 %
   déborde la fenêtre sur les côtés et fait apparaître une barre de
   défilement horizontale. */
.work { margin-bottom: 56px; overflow: hidden; }
.work img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.2,.7,.3,1);
}
.work:hover img { transform: scale(1.02); }
.work__leg { padding: 18px var(--marge) 0; max-width: 1440px; margin: 0 auto; }
.work__leg h3 { font-size: 27px; margin: 6px 0 4px; }
.lieu {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--olive);
  margin-bottom: 8px;
}

/* ---------- 06 · process ---------- */

/* En colonne (mobile), chaque étape porte son propre filet : empilées,
   elles n'ont pas de parcours horizontal à dessiner. La ligne continue
   n'apparaît qu'au point de rupture, plus bas. */
.etapes { display: grid; gap: 30px; max-width: 1440px; margin: 0 auto; }
.etapes li { padding-top: 20px; border-top: 1px solid rgba(242,239,232,.24); }
.etapes h3 { font-size: 23px; margin: 8px 0 8px; color: var(--ivoire); }
.etapes .num { color: #C0A183; }

/* ---------- 07 · matières ---------- */

.matiere { display: grid; }
.matiere__img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.matiere__txt { padding: 48px var(--marge) 64px; max-width: 760px; }
.matiere__txt h2 { font-size: 32px; }
.matiere__txt p { margin-top: 18px; color: var(--gris); }
.essences {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--filet);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--noyer);
}

/* ---------- 08 · l'atelier ---------- */

.atelier { display: grid; }
.atelier__txt { padding: 64px var(--marge); max-width: 640px; }
.atelier__txt h2 { font-size: 32px; margin-top: 16px; }
.atelier__txt p { margin-top: 20px; color: var(--gris); }
.signature {
  margin-top: 26px !important;
  padding-top: 18px;
  border-top: 1px solid var(--filet);
  font-family: var(--titre);
  font-size: 19px;
  color: var(--anthracite) !important;
}
.atelier__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- 09 · avis ---------- */

.avis { display: grid; gap: 34px; }
.avis blockquote {
  font-size: 25px;
  line-height: 1.35;
  position: relative;
  padding-top: 22px;
  border-top: 2px solid var(--noyer);
}
.avis blockquote::before { content: "« "; }
.avis blockquote::after  { content: " »"; }
.avis figcaption {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
}

/* ---------- 10 · zone ---------- */

.zone { display: grid; gap: 30px; }
.zone h2 { font-size: 32px; margin-bottom: 14px; }
.secteurs { display: grid; gap: 0; }
.secteurs li {
  padding: 15px 0;
  border-bottom: 1px solid var(--filet);
  font-size: 15px;
}
.secteurs li:first-child { border-top: 1px solid var(--filet); }

/* ---------- 11 · devis et formulaire ---------- */

.devis {
  background: var(--anthracite);
  color: var(--ivoire);
  padding: 72px var(--marge);
  display: grid;
  gap: 44px;
}
.devis h2 { font-size: 34px; margin-top: 16px; color: var(--ivoire); }
.devis__txt > p { margin-top: 20px; color: var(--gris-clair); max-width: 46ch; }
.devis .oeil { color: #C0A183; }

.coord { display: grid; gap: 6px; margin-top: 28px !important; }
.coord a {
  font-family: var(--titre);
  font-size: 25px;
  text-decoration: none;
  color: var(--ivoire);
  width: fit-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.coord a:hover { color: #C0A183; }
.coord .avert { color: var(--gris-clair); }

.form { display: grid; gap: 16px; }
.duo { display: grid; gap: 16px; }
.ch { display: grid; gap: 6px; }
.ch label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-clair); }
.ch input, .ch select, .ch textarea {
  font-family: var(--texte);
  font-size: 15px;
  color: var(--ivoire);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(242,239,232,.34);
  padding: 11px 2px;
  min-height: 44px;
  width: 100%;
  border-radius: 0;
  resize: vertical;
}
.ch select option { color: var(--anthracite); }
.ch input::placeholder { color: var(--gris-clair); }
.ch input:focus, .ch select:focus, .ch textarea:focus { border-bottom-color: var(--noyer); }

/* Champ fautif. Le filet passe à 2 px : la couleur seule ne suffit pas
   à signaler une erreur — elle échappe à qui distingue mal les teintes. */
.ch [aria-invalid="true"] { border-bottom: 2px solid #D9A88C; }
.erreur {
  margin-top: 7px;
  font-size: 13px;
  color: #D9A88C;          /* 7,98:1 sur l'anthracite */
  line-height: 1.45;
}
.form .bouton--plein {
  background: var(--ivoire);
  color: var(--anthracite);
  border-color: var(--ivoire);
  justify-self: start;
  margin-top: 8px;
}
.form .bouton--plein:hover { background: var(--noyer); border-color: var(--noyer); color: #fff; }
.form .avert { color: var(--gris-clair); }

.recu {
  border: 1px solid var(--noyer);
  padding: 24px;
  color: var(--ivoire);
  font-size: 17px;
}
.recu .avert { display: block; margin-top: 8px; color: var(--gris-clair); }

/* ---------- 13 · pied ---------- */

.pied { padding: 52px var(--marge) 34px; border-top: 1px solid var(--filet); }
.pied__in { display: grid; gap: 26px; max-width: 1440px; margin: 0 auto; }
.pied__marque { display: flex; align-items: center; gap: 13px; }
.pied__nom { font-family: var(--titre); font-size: 23px; }
.pied__soc, .pied__leg { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }
.pied__soc a, .pied__leg a {
  text-decoration: none;
  color: var(--gris);
  border-bottom: 1px solid transparent;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.pied__soc a:hover, .pied__leg a:hover { color: var(--anthracite); border-bottom-color: var(--noyer); }
.pied__bas {
  max-width: 1440px;
  margin: 30px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--filet);
  font-size: 12px;
  color: var(--gris);
}
.pied__bas a { color: var(--noyer); }

/* ============================================================
   Apparition au défilement.
   Uniquement sur `transform` — jamais sur l'opacité. Dans une
   fenêtre dont le rendu est suspendu (panneau d'aperçu, onglet
   jamais composité), une transition d'opacité ne se joue pas et
   des sections entières resteraient vides. Au pire ici, un bloc
   reste posé 16 px plus bas, ce qui ne se voit pas.
   ============================================================ */

.js-appar .appar { transform: translateY(16px); transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.js-appar .appar.vu { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    animation-duration: .01ms !important;
  }
  /* Tout est posé à sa place d'emblée : rien ne bouge, rien ne manque. */
  .js-appar .appar,
  .js-appar .parcours::before,
  .js-appar .parcours li::before { transform: none; }
  .work:hover img { transform: none; }
  .metier:hover .cadre img { transform: none; }
}

/* ============================================================
   Point de rupture unique, à 900 px.
   ============================================================ */

@media (min-width: 900px) {
  :root { --marge: 56px; }
  body { font-size: 17px; }

  .nav__liens, .nav__cta { display: flex; }

  .hero { min-height: 88vh; padding-top: 120px; }
  h1 { font-size: 76px; }
  .hero__texte { font-size: 18px; }
  .hero__reperes { margin: 64px 0 34px; gap: 8px 46px; }

  .bloc { padding: 112px var(--marge); }
  .intro { padding: 110px var(--marge) 0; }
  .intro h2, .entete h2 { font-size: 48px; }

  .metiers { grid-template-columns: repeat(2, 1fr); gap: 56px 40px; }

  .works .entete { padding-top: 112px; }
  .work { margin-bottom: 96px; }
  /* Le rapport 16/9 sur un grand écran donnait des images plus hautes
     que la fenêtre : on lisait une photo à la fois, sans jamais voir la
     légende. Le plafond en `vh` garde une image large mais laisse de la
     place au texte, et `object-fit: cover` recadre proprement. */
  .work img { aspect-ratio: 16 / 9; max-height: 68vh; }
  .work__leg {
    display: grid;
    grid-template-columns: 60px 1fr 1fr;
    gap: 24px;
    align-items: baseline;
    padding-top: 22px;
  }
  .work__leg h3 { grid-column: 2; margin: 0; }
  .work__leg .lieu { grid-column: 2; margin: 0; }
  .work__leg .dit { grid-column: 3; }

  /* Le parcours : UNE ligne continue traverse toute la largeur, et
     chaque étape pose un repère dessus. Le brief demandait « une ligne
     horizontale qui relie les quatre étapes » — quatre filets séparés
     par les gouttières ne relient rien, ils découpent. */
  .etapes {
    grid-template-columns: repeat(4, 1fr);
    gap: 34px;
    position: relative;
    padding-top: 34px;
  }
  .etapes::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: rgba(242,239,232,.24);
  }
  .etapes li { border-top: 0; padding-top: 0; position: relative; }
  .etapes li::before {          /* repère centré sur la ligne, au pixel près */
    content: "";
    position: absolute;
    top: -37px; left: 0;
    width: 7px; height: 7px;
    background: #C0A183;
  }

  /* Le parcours se dessine à l'arrivée dans le champ : la ligne se
     déploie de gauche à droite, puis les quatre repères se posent
     dessus l'un après l'autre. Deux `transform`, rien d'autre —
     sans le script, tout est déjà en place et visible. */
  .js-appar .parcours::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.1s cubic-bezier(.2,.7,.3,1);
  }
  .js-appar .parcours.tracee::before { transform: scaleX(1); }

  .js-appar .parcours li::before {
    transform: scale(0);
    transition: transform .45s cubic-bezier(.2,.7,.3,1);
  }
  .js-appar .parcours.tracee li::before { transform: scale(1); }
  .js-appar .parcours.tracee li:nth-child(1)::before { transition-delay: .32s; }
  .js-appar .parcours.tracee li:nth-child(2)::before { transition-delay: .52s; }
  .js-appar .parcours.tracee li:nth-child(3)::before { transition-delay: .72s; }
  .js-appar .parcours.tracee li:nth-child(4)::before { transition-delay: .92s; }

  .matiere { grid-template-columns: 1.15fr 1fr; align-items: center; }
  .matiere__img { height: 100%; aspect-ratio: auto; min-height: 520px; }
  .matiere__txt { padding: 0 var(--marge); }
  .matiere__txt h2 { font-size: 44px; }

  .atelier { grid-template-columns: 1fr 1fr; align-items: center; }
  .atelier__txt { padding: 112px var(--marge); max-width: none; }
  .atelier__txt h2 { font-size: 44px; }
  .atelier__img { height: 100%; aspect-ratio: auto; min-height: 560px; }

  .avis { grid-template-columns: repeat(2, 1fr); gap: 56px; }
  .avis blockquote { font-size: 30px; }

  .zone { grid-template-columns: 1fr 380px; gap: 80px; align-items: start; }
  .zone h2 { font-size: 44px; }

  .devis {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    padding: 120px var(--marge);
    align-items: start;
  }
  .devis h2 { font-size: 48px; }
  .duo { grid-template-columns: 1fr 1fr; gap: 24px; }
  .form { gap: 22px; }

  .pied__in { grid-template-columns: 1fr auto auto; gap: 56px; align-items: start; }
}

@media (min-width: 1200px) {
  .metiers { grid-template-columns: repeat(4, 1fr); gap: 34px; }
}

/* --- Surfaces de clic ------------------------------------------------------
   Relevé le 3 septembre 2026 par le contrôle automatique : trois liens
   faisaient 17 à 29 px de haut, là où la règle en demande 44. Le padding
   agrandit la cible, la marge négative la reprend : rien ne bouge à l'œil. */
.demo a,
.pied__bas a {
  display: inline-block;
  padding: 14px 4px;
  margin: -14px 0;
  vertical-align: middle;
}
.evitement { min-height: 44px; display: inline-flex; align-items: center; }