/* Le Coin Coin Couture de Mokkona, v2 */

:root {
  /* Couleurs du panneau peint de la boutique */
  --moutarde: #ffb81c;     /* jaune d'œuf */
  --rouge: #d8363f;        /* « Coin Coin », étoiles, fil */
  --rouge-fonce: #b8272f;
  --vert: #12865f;         /* « Couture » */
  --vert-fonce: #0d6b4b;
  --bordeaux: #7a2c3a;     /* « de Mokkona » */
  --bleu: #2a4ba6;         /* « sur rendez-vous », jean */
  --gris: #9da8b0;         /* le canard */
  --contour: #1b1b1b;      /* contour noir des lettres */

  --bg: #fffbea;
  --bg-alt: #ffefc7;
  --hero-bg: var(--moutarde);
  --surface: #ffffff;
  --ink: #1b1b1b;
  --ink-soft: #5b4a36;
  --midori: var(--vert);
  --midori-deep: var(--vert-fonce);
  --duck: var(--moutarde);
  --thread: var(--rouge);
  --line: #f3d79a;
  --shadow: 0 10px 30px rgba(60, 40, 0, .16);
  --rail: 64px;
  --radius: 18px;
  --header-h: 65px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1712;
    --bg-alt: #261f17;
    --hero-bg: #3b2d12;
    --surface: #2e261c;
    --ink: #fbf3e0;
    --ink-soft: #d9c9a8;
    --vert: #4cc79a;
    --vert-fonce: #7fdcb8;
    --rouge: #ff6b6b;
    --bordeaux: #f0a3b0;
    --moutarde: #f0b43a;
    --line: #43382a;
    --shadow: 0 10px 30px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1c1712;
  --bg-alt: #261f17;
  --hero-bg: #3b2d12;
  --surface: #2e261c;
  --ink: #fbf3e0;
  --ink-soft: #d9c9a8;
  --vert: #4cc79a;
  --vert-fonce: #7fdcb8;
  --rouge: #ff6b6b;
  --bordeaux: #f0a3b0;
  --moutarde: #f0b43a;
  --line: #43382a;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* Couleur du fil (bobine, fils, couture, canette), choisie depuis la bobine */
:root { --fil: var(--rouge); }
:root[data-fil="jaune"] { --fil: #f2b705; }
:root[data-fil="bleu"] { --fil: #2a4ba6; }
:root[data-fil="blanc"] { --fil: #ffffff; }
:root[data-fil="noir"] { --fil: #1b1b1b; }

/* La barre native est remplacée par le pied de biche */
html { scrollbar-width: none; scroll-behavior: smooth; }
html::-webkit-scrollbar { width: 0; height: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.65 "Nunito", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--midori-deep); }
a:hover { color: var(--thread); }
:focus-visible { outline: 3px dashed var(--thread); outline-offset: 3px; }

h1, h2 {
  font-family: "Fraunces", Georgia, serif;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 .6em;
}
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; }

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 calc(16px + var(--rail)) 0 24px;
}

.skip {
  position: absolute; left: -999px; top: 8px;
  background: var(--duck); color: #1f2a24; padding: .5em 1em; border-radius: 8px; z-index: 50;
}
.skip:focus { left: 8px; }

/* ---------- En-tête ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px dashed var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: "Fraunces", serif; font-weight: 600; font-size: 1.15rem; }
.brand:hover { color: var(--ink); }   /* « Le Coin Coin » garde sa couleur au survol, comme « Couture » et « de Mokkona » */
.brand em { color: var(--midori); font-style: italic; }
.brand-de { color: var(--bordeaux); font-size: .85em; }
.brand img { width: 52px; height: auto; mix-blend-mode: multiply; }
.bobine-zone { position: relative; flex: none; display: flex; }
.bobine {
  position: relative; display: inline-flex; flex: none; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--ink); filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); transition: scale .2s ease;
}
.bobine:hover { scale: 1.08; }
.bobine:focus-visible { outline: 3px dashed var(--thread); outline-offset: 3px; border-radius: 6px; }
.bobine svg { display: block; }
.bobine-dessin { position: relative; }   /* passe devant l'axe */

/* Changement de bobine : elle remonte le long de l'axe, puis la nouvelle redescend */
.axe {
  position: absolute; left: 50%; top: -10px; bottom: 2px; width: 3px; margin-left: -1.5px; border-radius: 2px;
  background: linear-gradient(90deg, #6f787d, #eef2f4 45%, #7b848a);
  opacity: 0; transition: opacity .2s ease;
}
.bobine.change .axe { opacity: 1; }
.bobine.retrait .bobine-dessin { animation: bobine-sort .45s ease-in forwards; }
.bobine.pose .bobine-dessin { animation: bobine-entre .5s ease-out both; }
@keyframes bobine-sort { to { translate: 0 -48px; opacity: 0; } }
@keyframes bobine-entre { from { translate: 0 -48px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
/* petit chevron sous la bobine : il y a un menu, qui descend (il se retourne quand il est ouvert) */
.bobine-chevron { position: absolute; left: 50%; bottom: -9px; margin-left: -5px; opacity: .7; transition: rotate .3s ease; }
.bobine[aria-expanded="true"] .bobine-chevron { rotate: 180deg; }
/* menu des couleurs : colonne de pastilles qui descend sous la bobine */
.fils {
  position: absolute; top: calc(100% + 12px); left: 50%; translate: -50% -8px;
  display: flex; flex-direction: column; gap: 4px; padding: 5px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  clip-path: inset(0 0 100% 0 round 999px); opacity: 0; visibility: hidden;
  transition: clip-path .35s ease, opacity .25s ease, translate .35s ease, visibility 0s linear .35s;
}
.fils.is-open {
  clip-path: inset(0 0 0 0 round 999px); opacity: 1; translate: -50% 0; visibility: visible;
  transition: clip-path .35s ease, opacity .25s ease, translate .35s ease, visibility 0s;
}
.fils button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.fils .pastille {
  width: 22px; height: 22px; border-radius: 50%; background: var(--pastille);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset -3px -3px 0 rgba(0,0,0,.12);
}
.fils button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.fils button:hover .pastille { scale: 1.12; }
/* fil blanc : un léger contour pour qu'il reste visible sur le tissu clair */
.seam-seg, .loose { --fil: var(--rouge); }
.seam-seg[data-fil="jaune"], .loose[data-fil="jaune"] { --fil: #f2b705; }
.seam-seg[data-fil="bleu"], .loose[data-fil="bleu"] { --fil: #2a4ba6; }
.seam-seg[data-fil="blanc"], .loose[data-fil="blanc"] { --fil: #ffffff; filter: drop-shadow(0 0 1px rgba(0,0,0,.55)); }
.seam-seg[data-fil="noir"], .loose[data-fil="noir"] { --fil: #1b1b1b; }
.nav { display: flex; gap: 22px; }
.nav a { text-decoration: none; color: var(--ink-soft); font-weight: 700; font-size: .95rem; }
.nav a:hover { color: var(--thread); }
.nav { margin-left: auto; }
.nav a, .brand > span { white-space: nowrap; }
@media (max-width: 960px) { .nav { display: none; } .langue-zone { margin-left: auto; } }

/* Menu des langues : bouton (drapeau + code de la langue en cours) et liste qui descend dessous */
.langue-zone { position: relative; flex: none; display: flex; }
.langue-bouton {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 8px;
  border: 2px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink);
  font: 800 .8rem/1 "Nunito", sans-serif; letter-spacing: .04em; cursor: pointer;
}
.langue-bouton:hover { border-color: var(--thread); }
.langue-bouton img, .langues-menu img { width: 24px; height: 16px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.15); object-fit: cover; }
.langue-chevron { transition: rotate .3s ease; }
.langue-bouton[aria-expanded="true"] .langue-chevron { rotate: 180deg; }
.langues-menu {
  position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% -8px; z-index: 2;
  display: flex; flex-direction: column; gap: 2px; padding: 5px; min-width: 150px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  clip-path: inset(0 0 100% 0 round 14px); opacity: 0; visibility: hidden;
  transition: clip-path .35s ease, opacity .25s ease, translate .35s ease, visibility 0s linear .35s;
}
.langues-menu.is-open {
  clip-path: inset(0 0 0 0 round 14px); opacity: 1; translate: -50% 0; visibility: visible;
  transition: clip-path .35s ease, opacity .25s ease, translate .35s ease, visibility 0s;
}
.langues-menu button {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px; border: 0; border-radius: 10px;
  background: none; color: var(--ink); font: 700 .95rem/1.2 "Nunito", sans-serif; text-align: left; cursor: pointer;
}
.langues-menu button:hover { background: var(--bg-alt); }
.langues-menu button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand img { filter: invert(1); mix-blend-mode: screen; } }
:root[data-theme="dark"] .brand img { filter: invert(1); mix-blend-mode: screen; }

/* ---------- Contact (héros) ---------- */
.hero {
  padding: clamp(48px, 9vw, 110px) 0;
  background:
    repeating-linear-gradient(180deg, transparent 0 118px, rgba(0,0,0,.07) 118px 120px),
    var(--hero-bg);
}
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-weight: 800; font-size: .8rem; color: var(--bordeaux); margin: 0 0 1em; }
.hero h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); font-weight: 800; }
.hero h1 { color: var(--ink); }
/* lettres peintes : couleur, contour noir, petit reflet */
.h1-rouge, .h1-vert {
  -webkit-text-stroke: 3px var(--contour); paint-order: stroke fill;
  text-shadow: 0 3px 0 rgba(0,0,0,.18);
}
.h1-rouge { color: var(--rouge); }
.h1-vert { color: var(--vert); }
.h1-mokkona {
  display: block; margin-top: .25em;
  font-family: "Nunito", sans-serif; font-weight: 800; font-size: .5em;
  text-transform: uppercase; letter-spacing: .08em; color: var(--bordeaux);
}
.services { list-style: none; padding: 0; margin: 1.5em 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.services li {
  padding: .45em 1em; border-radius: 999px; font-weight: 700;
  background: var(--surface); border: 2px dashed var(--thread); color: var(--ink);
}
.services li::before { content: "★ "; color: var(--rouge); }

.contact-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 36px);
  box-shadow: var(--shadow);
}
/* surpiqûre décorative */
.contact-card::before {
  content: ""; position: absolute; inset: 10px; border-radius: calc(var(--radius) - 8px);
  border: 2px dashed color-mix(in srgb, var(--midori) 45%, transparent); pointer-events: none;
}
.contact-card h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.contact-card p { margin: 0 0 .3em; }
.contact-list { margin: 1.4em 0; display: grid; gap: 14px; }
.contact-list div { display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
.contact-list dt { font-weight: 700; color: var(--ink-soft); font-size: .9rem; padding-top: .1em; }
.contact-list dd { margin: 0; overflow-wrap: anywhere; }
.contact-list a { font-weight: 700; text-decoration: none; }
/* Grand écran : l'adresse e-mail tient sur une seule ligne (la carte s'élargit). En dessous, tout reste adaptatif. */
@media (min-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 520px; }
  .hero h1 { font-size: 3.8rem; }
  .contact-list a[href^="mailto:"] { white-space: nowrap; }
}

.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .7em 1.3em; border-radius: 999px; font-weight: 700; text-decoration: none;
  transition: transform .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-insta { background: var(--midori); color: #fff; }
.btn-insta:hover { color: #fff; }
.btn-fb { background: var(--rouge-fonce); color: #fff; }
.btn-fb:hover { color: #fff; }

/* ---------- Histoire ---------- */
.story { padding: clamp(56px, 9vw, 110px) 0; background: var(--bg-alt); border-block: 2px dashed var(--line); }
.story-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: start; }
.story-text {
  margin: 0; font-family: "Fraunces", serif; font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.5;
}
.story-text p { margin: 0 0 .8em; }
.story-text p:last-child { margin-bottom: 0; }

/* ---------- Galerie ---------- */
.gallery { padding: clamp(56px, 9vw, 110px) 0; }
.gallery-grid { display: grid; align-items: start; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
@media (max-width: 960px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.photo { margin: 0; background: var(--surface); padding: 12px 12px 0; border-radius: 6px; box-shadow: var(--shadow); }
.photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px; }
.photo figcaption { padding: 12px 4px 14px; font-family: "Fraunces", serif; font-style: italic; color: var(--ink-soft); }
.photo:nth-child(3n+2) { margin-top: 60px; }
@media (max-width: 960px) { .photo:nth-child(3n+2) { margin-top: 0; } .photo:nth-child(even) { margin-top: 48px; } }

/* Apparition au défilement : le tissu se déroule */
.reveal {
  opacity: 0;
  transform: translateY(60px) rotate(0deg) scale(.96);
  clip-path: inset(0 0 100% 0 round 6px);
  transition: opacity .7s ease, transform 1s cubic-bezier(.2,.8,.2,1), clip-path 1.1s cubic-bezier(.6,0,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) rotate(var(--r, 0deg)) scale(1);
  clip-path: inset(0 0 0 0 round 6px);
}

/* ---------- Avis Google ---------- */
.reviews { padding: clamp(56px, 9vw, 110px) 0; background: var(--bg-alt); border-block: 2px dashed var(--line); }
.reviews-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 18px; margin-bottom: 28px; }
.reviews-score { font-family: "Fraunces", serif; font-size: 3rem; font-weight: 800; line-height: 1; }
.stars { color: #e09b12; letter-spacing: 2px; font-size: 1.2rem; }
.stars .off { color: var(--line); }
.reviews-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.review {
  background: var(--surface); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px;
}
.review-head { display: flex; align-items: center; gap: 12px; }
.review-head img { width: 40px; height: 40px; border-radius: 50%; }
.review-author { font-weight: 700; text-decoration: none; color: var(--ink); }
.review-date { color: var(--ink-soft); font-size: .85rem; }
.review p { margin: 0; }
.reviews-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.reviews-attrib { color: var(--ink-soft); font-size: .85rem; }
.reviews-loading { color: var(--ink-soft); }

/* ---------- Réseaux ---------- */
.social { padding: clamp(56px, 9vw, 110px) 0; }
.social-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.social-card {
  display: flex; flex-direction: column; gap: 6px; padding: 32px; border-radius: var(--radius);
  text-decoration: none; color: #fff; background: var(--midori); box-shadow: var(--shadow);
}
.social-card:nth-child(2) { background: var(--rouge-fonce); color: #fff; }
.social-card:hover { color: inherit; filter: brightness(1.05); }
.social-name { font-family: "Fraunces", serif; font-size: 2rem; font-weight: 800; }
.social-handle { opacity: .85; font-size: .9rem; }

/* ---------- Pied de page ---------- */
.site-footer { padding: 32px 0 48px; border-top: 2px dashed var(--line); color: var(--ink-soft); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.footer-inner p { margin: 0; }

/* ---------- Pied de biche (barre de défilement) ---------- */
.seam {
  /* commence sous le bandeau : le guide-fil est dans le bandeau */
  position: fixed; top: var(--header-h); right: 0; bottom: 0; width: var(--rail);
  z-index: 30; cursor: pointer; touch-action: none;
}
.seam-fabric {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 26px; transform: translateX(-50%);
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.035) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(0,0,0,.035) 3px 4px),
    color-mix(in srgb, var(--moutarde) 30%, var(--bg));
  border-inline: 1px solid var(--line);
}
/* ligne de craie : là où la couture ira */
.seam-fabric::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 0;
  border-left: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent);
}
.seam-stitches { position: absolute; top: 0; left: 50%; width: 0; height: 0; }
/* un tronçon de couture garde le point et la couleur avec lesquels il a été cousu */
.seam-seg {
  position: absolute; left: 0; translate: -50% 0; width: 3px;
  background: repeating-linear-gradient(to bottom, var(--fil) 0 9px, transparent 9px 14px);
  border-radius: 2px;
}
.foot {
  position: absolute; left: 50%; top: 0; width: 44px; height: 80px;
  margin-left: -22px; cursor: grab;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.25));
  will-change: translate;
}
.foot:active, .seam.is-dragging .foot { cursor: grabbing; }
.foot svg { display: block; overflow: visible; }
.needle { transform-box: fill-box; transform-origin: center; }

/* on coud : l'aiguille pique */
.seam.is-sewing .needle { animation: stitch .16s linear infinite; }
@keyframes stitch {
  /* vue du dessus : l'aiguille descend (grossit, plus nette) puis remonte */
  0%, 100% { transform: scale(.5); opacity: .55; }
  50% { transform: scale(1.15); opacity: 1; }
}
/* on découd : le pied tremble un peu, l'aiguille reste en haut */
.seam.is-unpicking .needle { transform: scale(.45); opacity: .5; }
.seam.is-unpicking .foot svg { animation: wobble .2s ease-in-out infinite; }
@keyframes wobble {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-4deg); }
  75% { transform: rotate(4deg); }
}

/* Fil de la bobine au pied de biche (calque au-dessus de tout, sans clic) */
.fil {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 31; pointer-events: none; overflow: visible;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
}

/* Motifs de couture selon le point choisi (masque appliqué à la couleur du fil) */
.seam-seg[data-point="zigzag"] {
  width: 14px; border-radius: 0; background: var(--fil);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 0 11.5 7 2.5 14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-y top center / 14px 14px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 0 11.5 7 2.5 14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-y top center / 14px 14px;
}
.seam-seg[data-point="invisible"] {
  width: 12px; border-radius: 0; background: var(--fil);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 28'%3E%3Cpath d='M7 1v5M7 9v5M7 17 1.5 21 7 25' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-y top center / 12px 28px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 28'%3E%3Cpath d='M7 1v5M7 9v5M7 17 1.5 21 7 25' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-y top center / 12px 28px;
}
.seam-seg[data-point="nid"] {
  width: 14px; border-radius: 0; background: var(--fil);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 .8 12 3.6V10.4L7 13.2 2 10.4V3.6Z' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-y top center / 14px 14px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 .8 12 3.6V10.4L7 13.2 2 10.4V3.6Z' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-y top center / 14px 14px;
}
.seam-seg[data-point="boutonniere"] {
  width: 14px; border-radius: 0; background: var(--fil);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 40'%3E%3Cpath d='M1 1.2H13 M1 2.6H13 M1.4 4.4 L5.6 5.5 L1.4 6.6 L5.6 7.7 L1.4 8.8 L5.6 9.9 L1.4 11.0 L5.6 12.1 L1.4 13.2 L5.6 14.3 L1.4 15.4 L5.6 16.5 L1.4 17.6 L5.6 18.7 L1.4 19.8 L5.6 20.9 L1.4 22.0 L5.6 23.1 L1.4 24.2 L5.6 25.3 L1.4 26.4 L5.6 27.5 L1.4 28.6 L5.6 29.7 L1.4 30.8 L5.6 31.9 L1.4 33.0 L5.6 34.1 L1.4 35.2 M8.4 4.4 L12.6 5.5 L8.4 6.6 L12.6 7.7 L8.4 8.8 L12.6 9.9 L8.4 11.0 L12.6 12.1 L8.4 13.2 L12.6 14.3 L8.4 15.4 L12.6 16.5 L8.4 17.6 L12.6 18.7 L8.4 19.8 L12.6 20.9 L8.4 22.0 L12.6 23.1 L8.4 24.2 L12.6 25.3 L8.4 26.4 L12.6 27.5 L8.4 28.6 L12.6 29.7 L8.4 30.8 L12.6 31.9 L8.4 33.0 L12.6 34.1 L8.4 35.2 M1 36.4H13 M1 37.8H13' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-y top center / 14px 40px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 40'%3E%3Cpath d='M1 1.2H13 M1 2.6H13 M1.4 4.4 L5.6 5.5 L1.4 6.6 L5.6 7.7 L1.4 8.8 L5.6 9.9 L1.4 11.0 L5.6 12.1 L1.4 13.2 L5.6 14.3 L1.4 15.4 L5.6 16.5 L1.4 17.6 L5.6 18.7 L1.4 19.8 L5.6 20.9 L1.4 22.0 L5.6 23.1 L1.4 24.2 L5.6 25.3 L1.4 26.4 L5.6 27.5 L1.4 28.6 L5.6 29.7 L1.4 30.8 L5.6 31.9 L1.4 33.0 L5.6 34.1 L1.4 35.2 M8.4 4.4 L12.6 5.5 L8.4 6.6 L12.6 7.7 L8.4 8.8 L12.6 9.9 L8.4 11.0 L12.6 12.1 L8.4 13.2 L12.6 14.3 L8.4 15.4 L12.6 16.5 L8.4 17.6 L12.6 18.7 L8.4 19.8 L12.6 20.9 L8.4 22.0 L12.6 23.1 L8.4 24.2 L12.6 25.3 L8.4 26.4 L12.6 27.5 L8.4 28.6 L12.6 29.7 L8.4 30.8 L12.6 31.9 L8.4 33.0 L12.6 34.1 L8.4 35.2 M1 36.4H13 M1 37.8H13' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-y top center / 14px 40px;
}
.seam-seg[data-point="canard"] {
  width: 26px; border-radius: 0; background: var(--fil);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1.5 32 26'%3E%3Cpath d='M9.2 6.2 Q7.2 6 7.4 4.3 Q8.2 2 12 2.1 Q15.8 2.5 16.2 5.6 Q16.3 8.3 12.6 9.6 M2 7.6 Q6 11 12.6 9.6 Q8.2 11.6 8 14.6 Q8.4 18.8 16 19.1 Q23.6 19.3 27.4 16.2 M18.6 15.2 Q21.6 14.2 20.6 11.9 Q19.2 10.4 16.6 11.2 L25.6 8.9 L27.1 6.2 L26.1 10.1 L30.6 8.4 L28.6 13.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-y top center / 26px 22px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1.5 32 26'%3E%3Cpath d='M9.2 6.2 Q7.2 6 7.4 4.3 Q8.2 2 12 2.1 Q15.8 2.5 16.2 5.6 Q16.3 8.3 12.6 9.6 M2 7.6 Q6 11 12.6 9.6 Q8.2 11.6 8 14.6 Q8.4 18.8 16 19.1 Q23.6 19.3 27.4 16.2 M18.6 15.2 Q21.6 14.2 20.6 11.9 Q19.2 10.4 16.6 11.2 L25.6 8.9 L27.1 6.2 L26.1 10.1 L30.6 8.4 L28.6 13.4' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-y top center / 26px 22px;
}
/* l'aiguille zigzague dans la fente, mord de côté pour le point invisible, va et vient pour le nid d'abeille */
.seam[data-point="zigzag"].is-sewing .needle { animation: stitch .16s linear infinite, zig .32s steps(1) infinite; }
.seam[data-point="invisible"].is-sewing .needle { animation: stitch .16s linear infinite, mord .48s steps(1) infinite; }
.seam[data-point="nid"].is-sewing .needle { animation: stitch .16s linear infinite, nid .64s steps(1) infinite; }
.seam[data-point="boutonniere"].is-sewing .needle { animation: stitch .12s linear infinite, bourdon .12s steps(1) infinite; }
.seam[data-point="canard"].is-sewing .needle { animation: stitch .16s linear infinite, canard .8s steps(1) infinite; }
@keyframes zig { 0% { translate: -4px 0; } 50% { translate: 4px 0; } }
@keyframes mord { 0% { translate: 0 0; } 66% { translate: -5px 0; } }
@keyframes bourdon { 0% { translate: -2.5px 0; } 50% { translate: 2.5px 0; } }
@keyframes canard { 0% { translate: -5px -1px; } 20% { translate: -2px 2px; } 40% { translate: 3px 2px; } 60% { translate: 5px -2px; } 80% { translate: 0 -2px; } }
@keyframes nid { 0% { translate: 0 0; } 25% { translate: 4px 0; } 50% { translate: 0 0; } 75% { translate: -4px 0; } }

/* Sélecteur de point : menu replié dans la canette, il se déroule vers la gauche */
.points {
  position: fixed; bottom: 22px; right: calc(var(--rail) + 14px + 56px + 20px); z-index: 26;
  display: flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line);
  clip-path: inset(0 0 0 100% round 999px); opacity: 0; translate: 24px 0; visibility: hidden;
  transition: clip-path .35s ease, opacity .25s ease, translate .35s ease, visibility 0s linear .35s;
}
.points.is-open {
  clip-path: inset(0 0 0 0 round 999px); opacity: 1; translate: 0 0; visibility: visible;
  transition: clip-path .35s ease, opacity .25s ease, translate .35s ease, visibility 0s;
}
.points button {
  width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: none; color: var(--ink-soft); cursor: pointer; transition: background .2s ease, color .2s ease;
}
.points button:hover { color: var(--thread); }
.points button[aria-pressed="true"] { background: var(--thread); color: #fff; }

/* fil coupé (menu Affichage ouvert) : les fils et les ciseaux passent devant le bandeau */
.fil.coupe { z-index: 45; }

/* Mode cumul : bouton découd-vite entre la canette et le tissu (la canette et son menu se décalent) */
.points-separateur { width: 2px; align-self: stretch; margin: 6px 2px; background: var(--line); }
.points-cumul[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.decoud-vite {
  position: fixed; right: calc(var(--rail) + 8px); bottom: 24px; z-index: 27;
  width: 40px; height: 40px; padding: 0; display: none; place-items: center; border-radius: 50%;
  border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: var(--shadow);
}
.decoud-vite:hover { border-color: var(--thread); scale: 1.06; }
:root[data-cumul] .decoud-vite { display: grid; }
:root[data-cumul] .canette { right: calc(var(--rail) + 14px + 44px); }
:root[data-cumul] .points { right: calc(var(--rail) + 14px + 56px + 20px + 44px); }
.canette, .points { transition-property: scale, right, clip-path, opacity, translate, visibility; }
/* pendant le découdage : le pied de biche s'estompe, le grand découd-vite remonte la couture */
.foot { transition: opacity .3s ease; }
.seam.decousage .foot { opacity: 0; }
.decoud-anim {
  position: absolute; left: 50%; width: 46px; height: 46px; margin-left: -23px; pointer-events: none;
  rotate: -45deg; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3));
}
.decoud-anim svg { width: 100%; height: 100%; display: block; }

/* Canette, fixe en bas à droite : c'est aussi le bouton du menu des points */
.canette {
  position: fixed; right: calc(var(--rail) + 14px); bottom: 14px; z-index: 27;
  width: 56px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); transition: scale .2s ease;
}
.canette:hover { scale: 1.06; }
.canette:focus-visible { outline: 3px dashed var(--thread); outline-offset: 3px; border-radius: 50%; }
.canette-dessin { display: block; position: relative; transition: opacity .4s ease, scale .4s ease; }

/* Changement de canette : elle s'efface dans son logement (trou noir), la nouvelle en ressort */
.canette-trou {
  position: absolute; inset: 3px; border-radius: 50%;
  background: radial-gradient(circle, #000 0 58%, #1b1d1f 70%, #3a3f42 100%);
  box-shadow: inset 0 3px 6px rgba(0,0,0,.8);
  opacity: 0; transition: opacity .25s ease;
}
.canette.change .canette-trou { opacity: 1; }
.canette.vide .canette-dessin { opacity: 0; scale: .78; }
/* petit chevron : il y a un menu, il s'ouvre vers la gauche (et se retourne quand il est ouvert) */
.canette-chevron {
  position: absolute; left: -15px; top: 50%; margin-top: -9px;
  color: var(--ink); opacity: .7; transition: rotate .3s ease, opacity .2s ease;
}
.canette:hover .canette-chevron { opacity: 1; }
.canette[aria-expanded="true"] .canette-chevron { rotate: 180deg; }

/* bouts de fil qui s'envolent quand on découd */
.loose {
  position: absolute; left: 50%; width: 3px; height: 9px; margin-left: -1.5px;
  background: var(--fil); border-radius: 2px; pointer-events: none;
  animation: fly .8s cubic-bezier(.2,.6,.4,1) forwards;
}
@keyframes fly {
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .seam.is-sewing .needle, .seam.is-unpicking .foot svg,
  .seam[data-point].is-sewing .needle { animation: none; }
  .points, .points.is-open, .canette-chevron, .fils, .fils.is-open, .bobine-chevron, .langues-menu, .langues-menu.is-open, .langue-chevron,
  .canette-dessin, .canette-trou, .axe { transition: none; }
  .bobine.retrait .bobine-dessin, .bobine.pose .bobine-dessin { animation: none; }
  .reveal { transition: opacity .3s ease; transform: none; clip-path: none; }
  .reveal.is-visible { transform: rotate(var(--r, 0deg)); }
}

/* Petits écrans : le logo seul dans le bandeau (le nom complet est juste en dessous, en grand) */
@media (max-width: 640px) {
  .brand > span:not(.bobine) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  :root { --rail: 40px; }
  .container { padding: 0 calc(8px + var(--rail)) 0 16px; }
  .nav { display: none; }
  .brand span { font-size: 1rem; }
  .hero-grid, .story-grid, .gallery-grid, .social-grid { grid-template-columns: 1fr; }
  .photo:nth-child(even), .photo:nth-child(3n+2) { margin-top: 0; }
  .contact-list div { grid-template-columns: 1fr; gap: 0; }
  .seam-fabric { width: 18px; }
  .foot { transform-origin: 50% 0; scale: .7; }
  .canette { width: 42px; height: 42px; right: calc(var(--rail) + 8px); bottom: 10px; }
  .canette-dessin { width: 42px; height: 42px; }
  .decoud-vite { width: 34px; height: 34px; right: calc(var(--rail) + 4px); bottom: 18px; }
  :root[data-cumul] .canette { right: calc(var(--rail) + 8px + 38px); }
  :root[data-cumul] .points { right: calc(var(--rail) + 8px + 42px + 18px + 38px); }
  .points { right: calc(var(--rail) + 8px + 42px + 18px); bottom: 14px; }
  .points button { width: 30px; height: 30px; }
  .bobine svg:not(.bobine-chevron) { width: 20px; height: 28px; }
  .brand { gap: 6px; }
  .brand img { width: 40px; }
  .brand span { white-space: nowrap; }
}

/* ---------- Menu « Affichage » (thème et mode malvoyants) ---------- */
.site-header { position: sticky; }
.affichage-bouton {
  flex: none; display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 0 8px;
  border: 2px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer;
}
.affichage-bouton:hover { border-color: var(--thread); }
.affichage-chevron { transition: rotate .3s ease; }
.affichage-bouton[aria-expanded="true"] .affichage-chevron { rotate: 180deg; }

/* bandeau horizontal qui se déroule sous le logo */
.reglages {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface); border-bottom: 2px dashed var(--line); box-shadow: var(--shadow);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .35s ease, visibility 0s linear .35s;
}
.reglages.is-open { clip-path: inset(0 0 -40px 0); visibility: visible; transition: clip-path .35s ease, visibility 0s; }
.reglages-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
/* menu ouvert : l'en-tête passe devant le pied de biche, les fils et la canette */
.site-header.menu-ouvert { z-index: 40; }
.reglages button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px;
  border: 2px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink);
  font: 700 .95rem/1.2 "Nunito", sans-serif; cursor: pointer;
}
.reglages button:hover { border-color: var(--thread); }
.reglages button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.reglages-separateur { width: 2px; align-self: stretch; margin: 4px 6px; background: var(--line); }
@media (prefers-reduced-motion: reduce) { .reglages, .reglages.is-open, .affichage-chevron { transition: none; } }

/* ---------- Perruche calopsitte (passage aléatoire, voir js/perruche.js) ---------- */
.perruche {
  position: fixed; left: 0; top: 0; width: 180px; height: 120px; z-index: 34;
  display: none; pointer-events: none; will-change: translate, rotate;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.18));
}
.perruche svg { display: block; overflow: visible; width: 180px; height: 120px; }
.perruche.vers-la-gauche svg { scale: -1 1; }        /* elle revient dans l'autre sens */
.perruche-aile { transform-box: view-box; animation: battement .25s ease-in-out infinite; }
.perruche-aile-pres { transform-origin: 118px 48px; }
.perruche-aile-loin { transform-origin: 114px 46px; animation-delay: -.03s; }
/* l'aile se raccourcit en s'abaissant (vue en perspective) */
@keyframes battement {
  0%, 100% { transform: rotate(8deg) scaleY(1); }       /* aile levée */
  50% { transform: rotate(-96deg) scaleY(.7); }         /* aile abaissée */
}
/* vol plané : ailes tendues, immobiles */
.perruche.plane .perruche-aile { animation: none; transform: rotate(-52deg) scaleY(.85); transition: transform .15s ease-out; }
@media (max-width: 760px) { .perruche svg { width: 120px; height: 80px; } }
/* perruche posée en bas à gauche (bouton : un clic la fait s'envoler) */
.perruche-perchee {
  position: fixed; left: 12px; bottom: 8px; z-index: 26; width: 72px; height: 90px; padding: 0;
  border: 0; background: none; cursor: pointer; filter: drop-shadow(0 3px 3px rgba(0,0,0,.18));
  transition: scale .2s ease;
}
.perruche-perchee svg { display: block; width: 100%; height: 100%; overflow: visible; }
button.perruche-perchee:hover { scale: 1.06; }
.perruche-perchee:focus-visible { outline: 3px dashed var(--thread); outline-offset: 2px; border-radius: 8px; }
/* quand elle s'envole, seul l'oiseau disparaît : la branche reste, vide */
.perchee-oiseau { transition: opacity .3s ease; }
.perruche-perchee.envolee .perchee-oiseau { opacity: 0; transition: opacity .12s ease; }
.perruche-perchee.envolee { cursor: default; }
.perruche-perchee.sans-transition .perchee-oiseau { transition: none; }
@media (max-width: 760px) { .perruche-perchee { width: 54px; height: 68px; left: 6px; bottom: 6px; } }

/* ---------- Mode malvoyants : fort contraste (objectif RGAA) ----------
 * Contrastes ≥ 7:1 (AAA) pour le texte, liens soulignés, focus très visible, texte agrandi,
 * pas d'animation, barre de défilement standard, décors animés masqués. */
:root[data-contraste="eleve"] {
  --bg: #ffffff; --bg-alt: #ffffff; --hero-bg: #ffffff; --surface: #ffffff;
  --ink: #000000; --ink-soft: #1a1a1a;
  --vert: #00573a; --vert-fonce: #00573a; --rouge: #a3000f; --rouge-fonce: #a3000f; --bordeaux: #5c0016;
  --moutarde: #ffffff; --line: #000000; --thread: #a3000f;
  --shadow: none; --rail: 0px;
  --focus: #000000;
  color-scheme: light;
}
:root[data-contraste="eleve"][data-theme="dark"] {
  --bg: #000000; --bg-alt: #000000; --hero-bg: #000000; --surface: #000000;
  --ink: #ffffff; --ink-soft: #f2f2f2;
  --vert: #7dffc4; --vert-fonce: #7dffc4; --rouge: #ff9a9a; --rouge-fonce: #ff9a9a; --bordeaux: #ffc2cf;
  --moutarde: #000000; --line: #ffffff; --thread: #ff9a9a; --focus: #ffd84d;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-contraste="eleve"]:not([data-theme="light"]) {
    --bg: #000000; --bg-alt: #000000; --hero-bg: #000000; --surface: #000000;
    --ink: #ffffff; --ink-soft: #f2f2f2;
    --vert: #7dffc4; --vert-fonce: #7dffc4; --rouge: #ff9a9a; --rouge-fonce: #ff9a9a; --bordeaux: #ffc2cf;
    --moutarde: #000000; --line: #ffffff; --thread: #ff9a9a; --focus: #ffd84d;
    color-scheme: dark;
  }
}
html[data-contraste="eleve"] { scrollbar-width: auto; }
html[data-contraste="eleve"]::-webkit-scrollbar { width: auto; height: auto; }
[data-contraste="eleve"] body { font-size: 1.1875rem; line-height: 1.7; }
[data-contraste="eleve"] .seam,
[data-contraste="eleve"] .fil,
[data-contraste="eleve"] .canette,
[data-contraste="eleve"] .points,
[data-contraste="eleve"] .bobine,
[data-contraste="eleve"] .decoud-vite,
[data-contraste="eleve"] .perruche,
[data-contraste="eleve"] .perruche-perchee { display: none !important; }
[data-contraste="eleve"] .container { padding-left: 20px; padding-right: 20px; }
[data-contraste="eleve"] a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 2px; }
[data-contraste="eleve"] :focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
[data-contraste="eleve"] .site-header { background: var(--bg); backdrop-filter: none; border-bottom: 3px solid var(--ink); }
[data-contraste="eleve"] .nav a { color: var(--ink); }
[data-contraste="eleve"] .langue-bouton, [data-contraste="eleve"] .langues-menu { border: 2px solid var(--ink); }
[data-contraste="eleve"] .hero { background: var(--bg); border-bottom: 3px solid var(--ink); }
[data-contraste="eleve"] .h1-rouge, [data-contraste="eleve"] .h1-vert { -webkit-text-stroke: 0; text-shadow: none; }
[data-contraste="eleve"] .eyebrow, [data-contraste="eleve"] .contact-list dt { color: var(--ink); }
[data-contraste="eleve"] .services li { border: 2px solid var(--ink); }
[data-contraste="eleve"] .contact-card { border: 3px solid var(--ink); box-shadow: none; }
[data-contraste="eleve"] .contact-card::before { display: none; }
[data-contraste="eleve"] .story, [data-contraste="eleve"] .reviews { border-block: 3px solid var(--ink); }
[data-contraste="eleve"] .btn, [data-contraste="eleve"] .social-card {
  background: var(--bg) !important; color: var(--ink) !important; border: 3px solid var(--ink); filter: none;
}
[data-contraste="eleve"] .btn:hover, [data-contraste="eleve"] .social-card:hover { background: var(--ink) !important; color: var(--bg) !important; }
[data-contraste="eleve"] .photo { border: 2px solid var(--ink); box-shadow: none; }
[data-contraste="eleve"] .photo figcaption { font-style: normal; color: var(--ink); }
[data-contraste="eleve"] .reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
[data-contraste="eleve"] .stars .off { color: var(--ink-soft); }
[data-contraste="eleve"] .reglages-malvoyants svg path[stroke="#fff"] { stroke: #fff; }