/* =========================================================
   LÉOLESTUDIO — feuille de style unique pour tout le site
   ---------------------------------------------------------
   Pour changer une couleur ou une police PARTOUT sur le site,
   modifie seulement les variables du bloc :root ci-dessous.
   ========================================================= */

/* Mise en page : colonne de contenu alignée à gauche, large, aérée ;
   fond blanc, violet en couleur de texte, lavande en accent. */
:root {
  /* --- Couleurs --- */
  --violet: #36018D;          /* couleur principale : textes, boutons */
  --violet-fonce: #26006A;    /* survol des boutons */
  --lavande: #CDC0E3;         /* couleur secondaire : numéros, filets */
  --lavande-pale: #F1EDF8;    /* fonds doux (bouton secondaire) */
  --blanc: #FFFFFF;           /* fond du site */

  /* --- Police : Helvetica partout --- */
  --police: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* --- Graisses --- */
  --light: 300;     /* corps de texte */
  --regular: 400;
  --medium: 500;    /* grands titres */
  --bold: 700;      /* titres et sous-titres */

  /* --- Largeur maximale du contenu --- */
  --largeur-max: 1280px;

  /* --- Marges latérales (s'adaptent à la taille de l'écran) --- */
  --marge: clamp(20px, 5vw, 72px);

  /* --- Hauteur de l'en-tête (mesurée automatiquement par js/main.js ;
         la valeur ci-dessous ne sert qu'en attendant la mesure) --- */
  --hauteur-entete: 78px;

  color-scheme: light;
}

/* ---------- Bases ---------- */
[hidden] { display: none !important; }  /* un élément avec l'attribut hidden est masqué */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--violet);
  font-family: var(--police);
  font-weight: var(--light);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }

a { color: inherit; }

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

/* Conteneur : aligne le contenu à gauche avec des marges sur les côtés */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  padding-left: max(var(--marge), env(safe-area-inset-left, 0px));
  padding-right: max(var(--marge), env(safe-area-inset-right, 0px));
  margin-inline: auto;
}

/* ---------- Typographie ---------- */

/* Petit titre en majuscules espacées : "LE PROCESS", "GRAPHISTE & ILLUSTRATRICE" */
.surtitre {
  margin: 0;
  font-size: 15px;
  font-weight: var(--bold);
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

/* Grand titre de page */
.titre {
  margin: 0;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.12;
  font-weight: var(--medium);  /* un peu moins gras que les sous-titres */
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 20ch;
}

/* Filet sous le grand titre */
.filet {
  width: 88px;
  height: 3px;
  background: var(--violet);
  border: 0;
  margin: 0;
}

/* Texte courant */
.texte {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.65;
  font-weight: var(--light);
}

.texte + .texte { margin-top: 1em; }

/* ---------- Effet "light → bold" au survol ----------
   Le mot passe en gras sans faire bouger la mise en page :
   une copie invisible du mot, en gras, réserve la place à l'avance.
   Il suffit d'entourer le mot d'un <span data-texte="Le mot">Le mot</span>. */
[data-texte] {
  display: inline-grid;
  transition: font-weight 0.2s ease;
}
[data-texte]::before {
  content: attr(data-texte);
  font-weight: var(--bold);
  visibility: hidden;
  height: 0;
  overflow: hidden;
}

/* ---------- En-tête et menu ---------- */
.entete {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--blanc);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.entete.defile { border-bottom-color: var(--lavande); }

.entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 18px;
}

.logo { display: block; width: 116px; }
.logo img { width: 100%; height: auto; }

.menu ul {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.4vw, 52px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu a {
  text-decoration: none;
  font-size: 17px;
  font-weight: var(--light);
  letter-spacing: 0.02em;
}

.menu a:hover > span,
.menu a[aria-current="page"] > span { font-weight: var(--bold); }

/* Bouton menu (mobile uniquement) */
.bouton-menu {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--violet);
  cursor: pointer;
}
.bouton-menu svg { width: 28px; height: 28px; }

/* ---------- Boutons ---------- */
.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 30px;
  font-size: 15px;
  font-weight: var(--light);
  letter-spacing: 0.08em;
  text-decoration: none;
  border: 1px solid var(--violet);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.bouton:hover > span { font-weight: var(--bold); }

.bouton-plein { background: var(--violet); color: var(--blanc); }
.bouton-plein:hover { background: var(--violet-fonce); }

.bouton-doux { background: var(--lavande-pale); color: var(--violet); border-color: var(--lavande-pale); }
.bouton-doux:hover { background: var(--lavande); border-color: var(--lavande); }

/* ---------- Accueil : vidéo ---------- */
/* La vidéo occupe tout l'écran visible sous l'en-tête
   (100vh pour les anciens navigateurs, 100svh sinon : hauteur sans les barres du navigateur mobile) */
.video-accueil {
  position: relative;
  height: calc(100vh - var(--hauteur-entete));
  height: calc(100svh - var(--hauteur-entete));
  overflow: hidden;
  background: var(--lavande-pale);
}
.video-accueil video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Flèche « défiler vers le contenu » (bas des vidéo et bandeaux d'introduction) ---------- */
/* Bouton transparent centré en bas de la section ; le chevron se trouve à environ 24 px du bas */
.fleche-defiler {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 2;              /* au-dessus de la vidéo et des calques d'aquarelle */
  width: 44px;             /* zone de clic confortable au doigt */
  height: 44px;
  margin-inline: auto;     /* centrage horizontal (sans transform, réservé à l'animation) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blanc);     /* blanc sur les bandeaux aquarelle violets */
  cursor: pointer;
  animation: fleche-defiler 1.8s ease-in-out infinite;
}
.fleche-defiler svg { width: 28px; height: 28px; }
.fleche-defiler:focus-visible { outline-color: currentColor; }
.video-accueil .fleche-defiler { color: var(--violet); }  /* violet sur la vidéo d'accueil */

/* Mouvement doux : la flèche descend de quelques pixels en s'estompant légèrement, puis remonte */
@keyframes fleche-defiler {
  0%, 100% { transform: translateY(0);   opacity: 1; }
  50%      { transform: translateY(6px); opacity: 0.5; }
}

/* Sans animation pour les personnes qui ont désactivé les mouvements : la flèche reste fixe */
@media (prefers-reduced-motion: reduce) {
  .fleche-defiler { animation: none; }
}

/* Le contenu qui suit un hero s'arrête juste sous l'en-tête quand on y défile */
.video-accueil + section,
.intro-aquarelle + section { scroll-margin-top: var(--hauteur-entete); }

/* ---------- Accueil : présentation ---------- */
.presentation .conteneur {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: stretch;  /* la photo prend exactement la hauteur du texte (du surtitre aux boutons) */
  padding-block: clamp(64px, 9vw, 128px);
}

.presentation-photo { position: relative; min-height: 420px; }

.presentation-photo img {
  position: absolute;    /* la photo remplit toute la hauteur du bloc texte… */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* …et se recadre à gauche et à droite si besoin */
  object-position: 50% 30%; /* point de cadrage : 50% = centré ; 30% = garde plutôt le haut (visage) */
  filter: grayscale(1);  /* photo en noir et blanc ; supprime cette ligne pour la couleur */
}

.presentation-texte {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

/* ---------- Pages intérieures : introduction ---------- */
.intro .conteneur {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding-block: clamp(56px, 8vw, 112px) clamp(48px, 6vw, 80px);
}

/* Introduction sur fond aquarelle violet (page Process) */
.intro-aquarelle {
  position: relative;
  overflow: hidden;
  color: var(--blanc);
}
/* le lavis d'aquarelle, sur deux calques qui bougent en sens inverse :
   leurs zones claires et foncées glissent l'une sur l'autre, comme un pigment encore humide */
.intro-aquarelle::before,
.intro-aquarelle::after {
  content: "";
  position: absolute;
  inset: -10%;
  background: url("../images/aquarelle.webp") center / cover no-repeat;
  z-index: 0;
}
.intro-aquarelle::before {
  animation: aquarelle-a 14s ease-in-out infinite;
}
.intro-aquarelle::after {
  opacity: 0.6;
  animation: aquarelle-b 11s ease-in-out infinite;
}
/* Mouvements en plusieurs étapes (et non un simple aller-retour) pour un rendu plus organique.
   Pour plus ou moins de mouvement, change les pourcentages de translate et les degrés de rotate. */
@keyframes aquarelle-a {
  0%   { transform: translate(0, 0) scale(1.06) rotate(0deg); }
  25%  { transform: translate(-3%, 1.5%) scale(1.1) rotate(0.8deg); }
  50%  { transform: translate(-1%, -1.5%) scale(1.08) rotate(-0.6deg); }
  75%  { transform: translate(2.5%, 1%) scale(1.11) rotate(0.4deg); }
  100% { transform: translate(0, 0) scale(1.06) rotate(0deg); }
}
@keyframes aquarelle-b {
  0%   { transform: scaleX(-1) translate(0, 0) scale(1.1) rotate(0deg); }
  30%  { transform: scaleX(-1) translate(3.5%, -1.5%) scale(1.06) rotate(-1deg); }
  60%  { transform: scaleX(-1) translate(-2.5%, 1.5%) scale(1.12) rotate(0.8deg); }
  100% { transform: scaleX(-1) translate(0, 0) scale(1.1) rotate(0deg); }
}
.intro-aquarelle .conteneur {
  position: relative;
  z-index: 1;
  /* Le bandeau occupe tout l'écran visible sous l'en-tête, exactement comme la vidéo d'accueil
     (100vh pour les anciens navigateurs, 100svh sinon). min-height et non height :
     si le texte ne tient pas (petit écran, téléphone à l'horizontale), le bandeau grandit au lieu de le couper. */
  min-height: calc(100vh - var(--hauteur-entete));
  min-height: calc(100svh - var(--hauteur-entete));
  padding-block: 96px;                      /* marges égales en haut et en bas ; en bas, la place de la flèche de défilement */
  justify-content: center;                  /* le texte reste centré verticalement dans le bandeau */
}
.intro-aquarelle .surtitre,
.intro-aquarelle .titre { color: var(--blanc); }
.intro-aquarelle .filet { background: var(--blanc); }
.intro-aquarelle .texte { color: var(--blanc); font-weight: var(--regular); }  /* un peu plus épais pour bien se lire sur la texture */
.intro-aquarelle .titre { max-width: 22ch; }
.intro-aquarelle + section { padding-top: clamp(40px, 5vw, 72px); }  /* espace entre le bandeau et les étapes */
.intro-texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  min-width: 0;
}

/* ---------- Process : étapes ---------- */
.etapes {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* la liste des étapes démarre juste sous le bandeau (sans filet au-dessus de l'étape 01) */
.section-etapes { padding-top: clamp(8px, 1.5vw, 16px) !important; }

.etape {
  display: grid;
  grid-template-columns: clamp(96px, 14vw, 200px) minmax(0, 1fr);
  gap: 8px clamp(20px, 3vw, 48px);
  align-items: start;
  padding-block: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--lavande);
}

.etape-numero {
  font-size: clamp(64px, 9vw, 132px);
  line-height: 0.82;
  font-weight: var(--bold);
  color: var(--lavande);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Rappel du zèbre de l'accueil : les chiffres sont "remplis" avec le motif.
   L'image (images/zebre.jpg) vient de la zone la plus lumineuse de ta vidéo, recolorée
   aux couleurs du site (rayures violet #36018D sur lavande #CDC0E3),
   et répétée en miroir pour pouvoir se répéter sans raccord visible.
   background-size règle la taille des rayures : plus grand = rayures plus larges.
   Pour revenir à des chiffres lavande unis, supprime tout ce bloc @supports. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .etape-numero {
    background-image: url("../images/zebre.jpg");
    background-size: 280px auto;  /* l'image contient 2 × 2 copies en miroir, donc les raccords sont invisibles */
    background-position: 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: background-position 1.2s ease;
  }
  /* Chaque chiffre montre une zone différente du motif */
  .etape:nth-child(2) .etape-numero { background-position: -20px -20px; }
  .etape:nth-child(3) .etape-numero { background-position: -40px -40px; }
  .etape:nth-child(4) .etape-numero { background-position: -10px -60px; }
  .etape:nth-child(5) .etape-numero { background-position: -30px -30px; }
  /* Au survol (ordinateur) ou au toucher (téléphone), le motif glisse doucement */
  .etape:hover .etape-numero,
  .etape.touche .etape-numero { background-position-y: -90px; }
}



.etape-contenu {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.etape-titre {
  margin: 0;
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: var(--bold);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* ---------- Appel à l'action en bas de page ---------- */
.appel .conteneur {
  padding-block: clamp(32px, 4vw, 56px) clamp(48px, 6vw, 80px);  /* espace au-dessus, puis en dessous de l'encart */
}

/* L'encart violet */
.appel-encart {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(24px, 3vw, 40px) clamp(28px, 5vw, 72px);  /* haut/bas, puis gauche/droite */
  background: var(--violet);
  color: var(--blanc);
  touch-action: pan-y;   /* au doigt : glisser horizontalement dessine, glisser verticalement fait défiler */
}
.appel-encart h2 {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.2;
  font-weight: var(--bold);
  text-wrap: balance;
}
.appel-encart .bouton { position: relative; z-index: 2; }

/* Fond de l'encart : la même aquarelle violette que le haut de la page Process, qui bouge */
.appel-encart::before,
.appel-encart::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: url("../images/aquarelle.webp") center / cover no-repeat;
  z-index: 0;
  pointer-events: none;
}
.appel-encart::before { animation: aquarelle-a 5s ease-in-out infinite alternate; }
.appel-encart::after {
  transform: scaleX(-1);
  opacity: 0.55;
  animation: aquarelle-b 7s ease-in-out infinite alternate;
}

/* La zone où se dessinent les traits de pastel (créée par js/main.js) */
.appel-pixels {
  z-index: 1;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Bouton blanc, pour les fonds violets */
.bouton-blanc { background: var(--blanc); color: var(--violet); border-color: var(--blanc); }
.bouton-blanc:hover { background: var(--lavande); border-color: var(--lavande); }
.bouton-blanc:focus-visible { outline-color: var(--blanc); }

/* ---------- Créations : grille de projets ---------- */
.grille-projets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* 2 projets par ligne : grands visuels, et une grille toujours pleine avec 4 ou 6 projets */
  gap: clamp(28px, 3vw, 44px) clamp(20px, 2vw, 32px);
  padding-block: 0 clamp(72px, 9vw, 128px);
}

.projet {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
}

.projet-image {
  overflow: hidden;
  background: var(--lavande-pale);
  aspect-ratio: 4 / 5;
}
.projet-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.projet:hover .projet-image img:not(.diapo) { transform: scale(1.04); }

/* ---------- Carrousel dans chaque projet ---------- */
.carrousel { position: relative; }
.carrousel-piste {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;          /* cache la barre de défilement */
  overscroll-behavior-x: contain;
}
.carrousel-piste::-webkit-scrollbar { display: none; }
.diapo {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: start;
}
/* emplacements vides en attendant tes visuels (à remplacer par des <img class="diapo">) */
.diapo.vide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lavande-pale);
  font-size: 13px;
  font-weight: var(--bold);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--violet);
}
/* teintes des emplacements vides, pour bien voir le changement de visuel */
.diapo.vide:nth-child(2) { background: #E6DFF4; }
.diapo.vide:nth-child(3) { background: #DCD2EF; }
.diapo.vide:nth-child(4) { background: #D2C6EA; }

.carrousel-fleche {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--violet);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease, background-color 0.25s ease;
}
.carrousel-fleche svg { width: 20px; height: 20px; }
.carrousel-fleche:hover { background: var(--blanc); }
.carrousel-fleche.precedente { left: 12px; }
.carrousel-fleche.suivante { right: 12px; }
.carrousel-fleche[disabled] { visibility: hidden; }
/* les flèches apparaissent au survol du projet… */
.projet:hover .carrousel-fleche,
.carrousel-fleche:focus-visible { opacity: 1; }
/* …et restent visibles sur les écrans tactiles (où l'on peut aussi glisser du doigt) */
@media (hover: none) { .carrousel-fleche { opacity: 1; } }

.carrousel-points {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.carrousel-points span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(54, 1, 141, 0.25);
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.carrousel-points span.actif { background: var(--violet); transform: scale(1.2); }

/* Emplacement vide en attendant tes images (à supprimer quand tu as tes visuels) */
.projet-image.vide {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--lavande);
  font-size: 13px;
  font-weight: var(--bold);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--violet);
}

.projet-titre {
  margin: 0;
  font-size: 15px;
  font-weight: var(--bold);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.projet-type { margin: 0; font-size: 15px; font-weight: var(--light); }

/* ---------- Contact : formulaire ---------- */
.contact .conteneur {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  padding-block: 0 clamp(72px, 9vw, 128px);
}

.coordonnees {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.coordonnees p { margin: 0; }
.coordonnees .surtitre { font-size: 13px; margin-bottom: 6px; }

.formulaire {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.champ { display: flex; flex-direction: column; gap: 8px; }

.champ label {
  font-size: 13px;
  font-weight: var(--bold);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--lavande);
  border-radius: 0;
  background: transparent;
  color: var(--violet);
  font-family: var(--police);
  font-size: 17px;
  font-weight: var(--light);
  transition: border-color 0.2s ease;
}
.champ textarea { min-height: 160px; resize: vertical; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-bottom-color: var(--violet);
}

.formulaire .bouton { align-self: flex-start; cursor: pointer; font-family: var(--police); }

.message-formulaire { margin: 0; font-weight: var(--regular); }

.cache { display: none; }

/* ---------- Pied de page ---------- */
.pied {
  border-top: 1px solid var(--lavande);
}
.pied .conteneur {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
  padding-block: 44px;
  font-size: 15px;
}
.pied p { margin: 0; }
.pied ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pied a { text-decoration-color: var(--lavande); text-underline-offset: 4px; }
.pied a:hover { text-decoration-color: var(--violet); }

/* ---------- Animation d'apparition au chargement ---------- */
.apparait {
  animation: apparition 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.apparait.delai-1 { animation-delay: 0.12s; }
.apparait.delai-2 { animation-delay: 0.24s; }
.apparait.delai-3 { animation-delay: 0.36s; }

@keyframes apparition {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Le filet se dessine de gauche à droite */
.filet.apparait { animation-name: filet; transform-origin: left; }
@keyframes filet {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Respecte les personnes qui ont désactivé les animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Mobile et tablette ---------- */
@media (max-width: 820px) {
  .bouton-menu { display: inline-flex; align-items: center; justify-content: center; }

  .entete .conteneur { position: relative; }
  .menu { display: none; }
  .entete.ouvert .menu { display: block; }

  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--blanc);
    border-bottom: 1px solid var(--lavande);
  }
  .menu ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px max(var(--marge), env(safe-area-inset-left, 0px)) 24px;
  }
  .menu a { display: block; padding: 12px 0; font-size: 20px; }

  .presentation .conteneur,
  .contact .conteneur { grid-template-columns: minmax(0, 1fr); }

  /* Sur téléphone, la photo reprend ses proportions normales au-dessus du texte */
  .presentation-photo { max-width: 460px; min-height: 0; }
  .presentation-photo img { position: static; height: auto; aspect-ratio: 2 / 3; }

  /* Sur téléphone, la vidéo reste en plein écran mais s'affiche en entier
     (sur fond lavande pâle) pour que le logo ne soit pas coupé */
  .video-accueil { background: var(--lavande-pale); }
  .video-accueil video { object-fit: contain; }


  .etape { grid-template-columns: minmax(0, 1fr); }
  .grille-projets { grid-template-columns: minmax(0, 1fr); }
  .etape-titre { letter-spacing: 0.28em; }
}

/* Sur téléphone (moins de 768 px), la vidéo verticale (videos/leo-mobile.mp4) remplit
   tout l'écran sous l'en-tête, centrée, sans bandes ni débordement */
@media (max-width: 767px) {
  .video-accueil video {
    display: block;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* ---------- Lien Instagram avec son logo ---------- */
.lien-instagram {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.icone-instagram { width: 20px; height: 20px; flex: none; }