/* ============================================
   Mimita Bakehouse — Mouvement, 3D et interactions
   Tout est en CSS pur (aucune librairie 3D) pour rester
   rapide sur un téléphone en 3G.
   ============================================ */

/* ============ RÉVÉLATION AU SCROLL ============
   Piloté par IntersectionObserver dans js/ui.js (classe .in ajoutée). */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-l { opacity: 0; transform: translateX(-38px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); }
.reveal-l.in { opacity: 1; transform: none; }
.reveal-r { opacity: 0; transform: translateX(38px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); }
.reveal-r.in { opacity: 1; transform: none; }
.reveal-z { opacity: 0; transform: scale(0.92); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); }
.reveal-z.in { opacity: 1; transform: none; }

/* Sur telephone, le glissement HORIZONTAL des revelations pousse l element
   hors de l ecran tant que l animation n a pas joue : la page devient plus
   large que la fenetre (mesure : 16 px de trop a 390 px), et comme le corps
   est en overflow-x hidden, le contenu parait simplement coupe a droite.
   C est ce qui donnait l impression d une mise en page decalee sur iPhone.
   On garde la revelation, mais verticale : aucun deplacement lateral. */
@media (max-width: 1279px) {
  .reveal-l, .reveal-r { transform: translateY(26px); }
  .reveal-l.in, .reveal-r.in { transform: none; }
}
.d1 { transition-delay: 0.1s; } .d2 { transition-delay: 0.2s; } .d3 { transition-delay: 0.3s; }
.d4 { transition-delay: 0.4s; } .d5 { transition-delay: 0.5s; } .d6 { transition-delay: 0.6s; }

/* ============ HÉROS ============ */
.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: center;
  padding: 60px 0 80px;
  overflow: hidden;
  background:
    radial-gradient(1100px 620px at 82% 12%, rgba(240, 220, 203, 0.75), transparent 62%),
    radial-gradient(900px 520px at 8% 88%, rgba(217, 154, 145, 0.16), transparent 60%),
    var(--cream);
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 50px; align-items: start; }
/* La photo descend juste de quoi passer sous le sur-titre (« LEVAIN NATUREL »)
   et la marge haute du titre. Son bord superieur arrive ainsi a la hauteur de
   la premiere ligne du titre, au lieu d'etre centre sur une colonne de gauche
   bien plus haute qu'elle. */
.hero-visual { margin-top: 36px; }
.hero-copy h1 { margin: 16px 0 18px; }
.hero-copy h1 em { font-style: italic; color: var(--cinnamon); }
.hero-cta { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 30px; }
.hero-proof { display: flex; gap: 26px; margin-top: 38px; flex-wrap: wrap; }
.hero-proof div b { font-family: var(--display); font-size: 1.9rem; display: block; line-height: 1; color: var(--cacao); }
.hero-proof div span { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cacao-3); }

/* ---------- LE HEROS DOIT TENIR DANS LE PREMIER ECRAN ----------
   Sur un portable, la hauteur utile est souvent de 620 a 780 px une fois le
   bandeau, les onglets et la barre d'adresse deduits. Or la colonne de gauche
   — sur-titre, titre sur deux lignes, paragraphe, pastille du levain, deux
   boutons, quatre statistiques — plus 140 px de marges verticales depasse
   largement ce budget : la photo se retrouvait coupee en deux, et il fallait
   defiler pour la voir entiere.

   On resserre donc sur la HAUTEUR et non sur la largeur : c'est la hauteur qui
   manque, et un ecran large peut tres bien etre court. Le garde `min-width`
   laisse les telephones tranquilles, ou la mise en page est deja empilee et ou
   defiler est naturel. */
@media (min-width: 861px) and (max-height: 900px) {
  .hero { min-height: 0; padding: 30px 0 34px; }
  .hero-copy h1 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); margin: 10px 0 12px; }
  .hero-visual { margin-top: 30px; }
  .hero-cta { margin-top: 18px; }
  /* Les quatre chiffres doivent tenir sur UNE rangee : la seconde rangee
     pousse tout le bloc vers le bas et c est elle qui finissait sous le bord
     de l ecran. */
  .hero-proof { margin-top: 20px; gap: 18px; }
  .hero-proof div b { font-size: 1.6rem; }
  .hero-proof div span { font-size: 0.7rem; letter-spacing: 0.11em; }
  /* Le plafond de hauteur de la photo est dans home.css, a cote de sa regle
     de base : ce fichier-la est charge apres, et une requete media n'ajoute
     aucune specificite. Ecrite ici, la regle ne ferait rien. */
}
@media (min-width: 861px) and (max-height: 720px) {
  .hero { padding: 18px 0 22px; }
  .hero-copy h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin: 6px 0 10px; }
  .hero-visual { margin-top: 26px; }
  .hero-copy .lead { font-size: 0.97rem; }
  .hero-cta { margin-top: 14px; }
  /* Les quatre chiffres passaient a la ligne faute de place, et la seconde
     rangee tombait sous le bord de l ecran. On resserre l interligne et les
     libelles pour qu ils tiennent sur une seule rangee. */
  .hero-proof { margin-top: 14px; gap: 16px; }
  .hero-proof div b { font-size: 1.4rem; }
  .hero-proof div span { font-size: 0.67rem; letter-spacing: 0.1em; }
}

/* Couches de parallaxe (translateY appliqué par js/ui.js) */
.parallax { will-change: transform; }
.hero-wheat {
  position: absolute; bottom: -18px; left: 0; right: 0; height: 190px;
  pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(78deg, transparent 0 34px, rgba(217, 154, 145, 0.28) 34px 36px);
  mask-image: linear-gradient(to top, #000 0%, transparent 88%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 88%);
}

/* ============ FARINE QUI FLOTTE ============ */
.flour { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.flour i {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
  animation: floatUp linear infinite;
  bottom: -12px;
}
@keyframes floatUp {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  12%  { opacity: 0.9; }
  100% { transform: translate(var(--dx, 30px), -105vh) scale(1.1); opacity: 0; }
}

/* ============ BOCAL DE LEVAIN 3D ============ */
.jar-stage { perspective: 900px; display: grid; place-items: center; padding: 20px; }
.jar {
  position: relative;
  width: clamp(180px, 34vw, 250px);
  height: clamp(240px, 45vw, 330px);
  transform-style: preserve-3d;
  animation: jarSpin 22s linear infinite;
}
@keyframes jarSpin {
  0%   { transform: rotateY(-13deg) rotateX(4deg); }
  50%  { transform: rotateY(13deg) rotateX(-2deg); }
  100% { transform: rotateY(-13deg) rotateX(4deg); }
}
.jar-glass {
  position: absolute; inset: 30px 0 0;
  border-radius: 18px 18px 26px 26px;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.2) 34%, rgba(240, 220, 203, 0.28) 66%, rgba(255, 255, 255, 0.5) 100%);
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow: inset -14px 0 26px rgba(126, 92, 75, 0.16), 0 26px 44px rgba(74, 48, 39, 0.2);
  overflow: hidden;
}
/* Reflet vertical qui glisse : donne l'illusion du verre */
.jar-glass::after {
  content: ''; position: absolute; top: 0; left: 16%; width: 14%; height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.1));
  filter: blur(2px);
}
.jar-lid {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 78%; height: 44px;
  border-radius: 12px 12px 7px 7px;
  background: linear-gradient(180deg, var(--cinnamon-light) 0%, var(--cinnamon) 42%, var(--cinnamon-dark) 100%);
  box-shadow: 0 8px 18px rgba(153, 16, 31, 0.34), inset 0 -4px 10px rgba(0, 0, 0, 0.2);
}
.jar-lid::before {
  content: ''; position: absolute; inset: 8px 6px auto; height: 22px;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.11) 0 3px, transparent 3px 7px);
  border-radius: 4px;
}
/* La pâte : niveau qui « pousse » lentement, comme un vrai levain actif */
.jar-dough {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 46%;
  background: linear-gradient(180deg, #EBD9BC 0%, #DCC49F 45%, #CBAE84 100%);
  animation: doughRise 9s ease-in-out infinite;
}
@keyframes doughRise { 0%, 100% { height: 42%; } 50% { height: 57%; } }
.jar-dough::before {
  content: ''; position: absolute; top: -7px; left: 0; right: 0; height: 14px;
  background: radial-gradient(circle at 20% 60%, #F2E4CC 6px, transparent 7px),
              radial-gradient(circle at 52% 40%, #F2E4CC 8px, transparent 9px),
              radial-gradient(circle at 82% 65%, #F2E4CC 5px, transparent 6px);
}
/* Bulles de fermentation */
.jar-dough i {
  position: absolute; bottom: 6%;
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  animation: bubble ease-in infinite;
}
@keyframes bubble {
  0%   { transform: translateY(0) scale(0.4); opacity: 0; }
  25%  { opacity: 0.85; }
  100% { transform: translateY(-90px) scale(1.25); opacity: 0; }
}
.jar-tag {
  position: absolute; top: 74px; left: 50%; transform: translate(-50%, 0) rotate(-5deg);
  width: 96px; height: 88px;
  background: var(--dough);
  border: 1px solid var(--border-2);
  display: grid; place-items: center; text-align: center;
  box-shadow: var(--shadow-sm);
  clip-path: path('M48 88 C10 60 0 42 0 28 C0 10 16 0 30 8 C40 13 46 22 48 27 C50 22 56 13 66 8 C80 0 96 10 96 28 C96 42 86 60 48 88 Z');
  animation: tagSway 5s ease-in-out infinite;
}
@keyframes tagSway { 0%, 100% { transform: translate(-50%, 0) rotate(-5deg); } 50% { transform: translate(-50%, 0) rotate(3deg); } }
.jar-tag b { font-family: var(--display); font-size: 1.15rem; display: block; line-height: 1; margin-top: 12px; }
.jar-tag span { font-size: 0.55rem; letter-spacing: 0.06em; color: var(--cacao-3); display: block; }

/* ============ COMPTEUR DE LEVAIN ============ */
.levain-badge {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 20px 11px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
}
.levain-badge .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(46, 125, 94, 0.55); animation: pulse 2.1s infinite; flex-shrink: 0; }
@keyframes pulse { 70% { box-shadow: 0 0 0 12px rgba(46, 125, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 125, 94, 0); } }
.levain-badge b { font-family: var(--display); font-size: 1.15rem; }
.levain-badge span { font-size: 0.78rem; color: var(--cacao-3); }

/* ============ CARTE EN TILT 3D ============ */
.tilt { transform-style: preserve-3d; transition: transform 0.18s ease-out, box-shadow 0.3s ease; will-change: transform; }
.tilt-inner { transform: translateZ(26px); }
.tilt-shine {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.5), transparent 46%);
  opacity: 0; transition: opacity 0.3s ease;
}
.tilt:hover .tilt-shine { opacity: 1; }

/* ============ VAPEUR (pain chaud) ============ */
.steam { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 90px; height: 80px; pointer-events: none; }
.steam i {
  position: absolute; bottom: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  filter: blur(4px);
  animation: steamUp 3.4s ease-in-out infinite;
}
@keyframes steamUp {
  0%   { transform: translate(0, 10px) scale(0.5); opacity: 0; }
  35%  { opacity: 0.75; }
  100% { transform: translate(var(--sx, 8px), -68px) scale(2.1); opacity: 0; }
}

/* ============ CHRONOLOGIE 24 H DU LEVAIN ============ */
.timeline { position: relative; max-width: 780px; margin: 0 auto; padding-left: 40px; }
.timeline::before { content: ''; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(to bottom, var(--rose-light), var(--border-2)); }
.tl-step { position: relative; margin-bottom: 14px; }
.tl-step::before {
  content: ''; position: absolute; left: -33px; top: 20px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--paper); border: 2.5px solid var(--rose);
  transition: var(--transition);
}
.tl-step.open::before { background: var(--cinnamon); border-color: var(--cinnamon); transform: scale(1.22); }
.tl-head {
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: var(--transition);
}
.tl-head:hover { border-color: var(--border-2); box-shadow: var(--shadow-sm); }
.tl-hour { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--cinnamon); min-width: 62px; }
.tl-title { font-weight: 600; flex: 1; font-size: 0.96rem; }
.tl-chev { color: var(--cacao-3); transition: transform 0.3s ease; }
.tl-step.open .tl-chev { transform: rotate(180deg); }
.tl-body { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); }
.tl-step.open .tl-body { max-height: 320px; }
.tl-body p { padding: 14px 18px 6px 76px; font-size: 0.9rem; }

/* ============ MARQUEE (bandeau défilant) ============ */
.marquee { overflow: hidden; background: var(--cacao); color: var(--ivory); padding: 15px 0; white-space: nowrap; }
/*  promeut le bandeau sur sa propre couche graphique. Sans lui,
   iOS le redessine a chaque image sur le fil principal et l anime par a-coups,
   voire pas du tout quand la page tourne en mode application. Ca ne corrige pas
   le mode economie d energie, qui suspend les animations CSS au niveau du
   systeme — rien en CSS ne peut le contourner. */
/* `width: max-content` plutot que de compter sur `inline-flex` : sur iOS la
   largeur d'un element en ligne dans un parent en `overflow: hidden` est
   parfois calculee sur le PARENT, et `translateX(-50%)` ne deplace alors
   presque rien — le bandeau parait fige. En `max-content`, la piste fait
   exactement la largeur de son contenu et les -50 % valent bien une copie. */
.marquee-track { display: flex; width: max-content; gap: 46px; animation: marquee 26s linear infinite; will-change: transform; }
.marquee-track span { font-family: var(--display); font-size: 1.28rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.9; }
.marquee-track span::after { content: ' ✦'; color: var(--rose); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============ BOUTON FLOTTANT INSTAGRAM ============ */
/* ============ RESPONSIVE ============ */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; text-align: center; }
  .hero-visual { margin-top: 0; }
  .hero-cta, .hero-proof { justify-content: center; }
  .hero { min-height: auto; padding: 40px 0 60px; }
  .timeline { padding-left: 34px; }
  .tl-body p { padding-left: 20px; }
  .tl-head { flex-wrap: wrap; gap: 8px 12px; }
}
@media (max-width: 480px) {
  .hero-proof { gap: 18px; }
}

/* ============================================
   ÉCRAN DE LANCEMENT (js/splash.js)
   Le même bocal que l'écran de démarrage de l'app, en CSS pur.
   ============================================ */
#mmSplash {
  position: fixed; inset: 0; z-index: 9000;
  background: var(--cream);
  display: grid; place-items: center;
  text-align: center; padding: 32px;
  animation: spIn .4s ease;
}
#mmSplash.out { animation: spOut .5s ease forwards; }
@keyframes spIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spOut { to { opacity: 0; visibility: hidden; } }

/* ---------- LE BOCAL DE L'ÉCRAN DE LANCEMENT (25/10/2026) ----------
   Le bocal du logo : un carré de lin noué par une ficelle, le verre, la pâte
   qui monte et ses bulles. Il remplace le roulé depuis que la marque couvre
   aussi le pain. Tout est en CSS, aucune image — cet écran s'affiche avant le
   moindre téléchargement, une image arriverait trop tard. */
#mmSplash .sp-jar { width: 104px; height: 128px; margin: 0 auto 26px; position: relative; }
#mmSplash .sp-cloth {
  position: absolute; top: 0; left: 2px; right: 2px; height: 34px; z-index: 2;
  background:
    repeating-linear-gradient(90deg, rgba(150,110,70,.10) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(0deg, rgba(150,110,70,.10) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #F1E3CC, #DCC5A2);
  border-radius: 46% 46% 10px 10px / 70% 70% 10px 10px;
  box-shadow: 0 3px 6px rgba(74,48,39,.15);
  /* bord effiloché : des pointes irrégulières en bas */
  clip-path: polygon(0 0,100% 0,100% 78%,94% 100%,87% 82%,79% 98%,70% 80%,61% 100%,52% 83%,
                     43% 99%,34% 81%,25% 100%,16% 82%,7% 97%,0 80%);
}
#mmSplash .sp-twine {
  position: absolute; top: 22px; left: 14px; right: 14px; height: 4px; z-index: 3;
  background: repeating-linear-gradient(60deg, #A96745 0 3px, #C98B5E 3px 6px);
  border-radius: 2px;
}
#mmSplash .sp-twine::after {           /* le nœud et ses deux brins */
  content: ''; position: absolute; right: -6px; top: -3px; width: 10px; height: 18px;
  border-left: 3px solid #A96745; border-right: 3px solid #C98B5E;
  transform: skewX(-12deg); border-radius: 2px;
}
#mmSplash .sp-body {
  position: absolute; top: 24px; left: 8px; right: 8px; bottom: 0;
  border: 2px solid rgba(74,48,39,.28); border-top: none;
  border-radius: 8px 8px 16px 16px; overflow: hidden;
  background: rgba(255,255,255,.55);
  box-shadow: inset 6px 0 0 rgba(255,255,255,.5);
}
#mmSplash .sp-dough {
  position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  background: linear-gradient(180deg, #F3E6CF, #E5CFA9);
  border-radius: 44% 44% 0 0 / 14px 14px 0 0;
  animation: spRise 2.4s ease-in-out infinite;
}
/* Les bulles qui remontent : c'est ce qui rend le levain « vivant ». */
#mmSplash .sp-dough i {
  position: absolute; border-radius: 50%; background: rgba(169,103,69,.28);
  width: 7px; height: 7px; bottom: 8px;
  animation: spBubble 2.8s ease-in infinite;
}
#mmSplash .sp-dough i:nth-child(1) { left: 16%; animation-delay: -.2s; }
#mmSplash .sp-dough i:nth-child(2) { left: 36%; width: 5px; height: 5px; animation-delay: -1.1s; }
#mmSplash .sp-dough i:nth-child(3) { left: 54%; animation-delay: -1.9s; }
#mmSplash .sp-dough i:nth-child(4) { left: 72%; width: 6px; height: 6px; animation-delay: -.7s; }
#mmSplash .sp-dough i:nth-child(5) { left: 86%; width: 4px; height: 4px; animation-delay: -2.3s; }
@keyframes spRise { 0%, 100% { height: 50%; } 50% { height: 64%; } }
@keyframes spBubble {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  25%  { opacity: .9; }
  100% { transform: translateY(-46px) scale(1.1); opacity: 0; }
}

#mmSplash .sp-name {
  font-family: var(--display); font-size: 1.9rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--cacao);
}
#mmSplash .sp-tag {
  font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cacao-3); margin-top: 5px;
}
#mmSplash .sp-slogan {
  font-family: var(--display); font-size: 1.5rem; color: var(--cacao-2);
  margin-top: 20px; line-height: 1.3;
}
#mmSplash .sp-slogan em { color: var(--cinnamon); font-style: italic; }
#mmSplash .sp-day {
  display: inline-block; margin-top: 16px; padding: 7px 16px;
  border: 1px solid var(--border-2); border-radius: 999px;
  background: rgba(255,255,255,.7);
  font-family: var(--display); font-size: 1rem; color: var(--cacao-2);
}
#mmSplash .sp-heart {
  margin-top: 14px;
  font-family: var(--script);
  font-size: 1.5rem;
  color: var(--rose);
  line-height: 1;
}


/* ============ LES DEUX PASTILLES FLOTTANTES ============
   Contact à gauche, Instagram à droite. Au survol, chacune s'ouvre sur son
   libellé : une icône seule laisse deviner, un mot dit.

   Le libellé est déjà dans le DOM, réduit à une largeur nulle. L'ouverture est
   donc une transition de largeur et non un recalcul de la page — et le texte
   reste lisible par un lecteur d'écran même fermé.

   Pas d'ouverture au toucher (`hover: hover`) : sur téléphone, le premier appui
   servirait à ouvrir le libellé au lieu de suivre le lien. */
/* NE PAS renommer en `.fab` : Font Awesome utilise deja cette classe pour ses
   icones de marque (<i class="fab fa-instagram">). Le jour ou les deux ont porte
   le meme nom, les huit icones de marque du site se sont retrouvees en
   position: fixed, flottant par-dessus la page au defilement. */
.pastille {
  position: fixed; bottom: 20px; z-index: 900;
  display: inline-flex; align-items: center;
  height: 54px; border-radius: 999px;
  font-weight: 700; font-size: 0.9rem;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s;
}
.pastille:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.pastille-ico {
  flex: 0 0 auto; width: 54px; height: 54px;
  display: grid; place-items: center;
  font-size: 1.3rem;
}
.pastille-label {
  max-width: 0; opacity: 0; white-space: nowrap;
  padding-right: 0;
  transition: max-width .28s cubic-bezier(.2,.7,.3,1), opacity .2s, padding-right .28s;
}
/* `any-hover` et `any-pointer`, pas `hover` et `pointer` : ces derniers ne
   decrivent que le pointeur PRINCIPAL. Sur un portable a ecran tactile —
   Windows en est plein — le principal est le doigt, donc `hover: hover` est
   faux et le libelle ne s'ouvrait jamais, souris branchee ou pas.
   `any-hover: hover` est vrai des qu'UN des dispositifs sait survoler. */
@media (any-hover: hover) and (any-pointer: fine) {
  .pastille:hover .pastille-label,
  .pastille:focus-visible .pastille-label { max-width: 260px; opacity: 1; padding-right: 22px; }
}

/* Contact — crème et rose, comme le reste du site. */
.pastille-contact {
  left: 20px;
  background: var(--paper);
  color: var(--cinnamon-dark);
  border: 1px solid var(--border-2);
}
.pastille-contact .pastille-ico img {
  width: 38px; height: 38px; object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(74, 48, 39, .2));
}

/* Instagram — son dégradé de marque, qui n'est pas le nôtre mais que tout le
   monde reconnaît d'un coup d'œil. */
.pastille-ig {
  right: 20px;
  color: #fff;
  background: linear-gradient(45deg, #F09433, #E6683C, #DC2743, #CC2366, #BC1888);
}

@media (max-width: 560px) {
  .pastille { height: 48px; bottom: 16px; }
  .pastille-ico { width: 48px; height: 48px; font-size: 1.15rem; }
  .pastille-contact { left: 16px; }
  .pastille-contact .pastille-ico img { width: 33px; height: 33px; }
  .pastille-ig { right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .pastille, .pastille-label { transition: none; }
  .pastille:hover { transform: none; }
}