/* Charly Blue, site b13 (pages statiques FR / DE / EN ; ordre de l'ancien site, 70 % en demi-écran, diaporama des pièces, précommande en pause, logo au centre de l'accueil) : éditorial épuré. Les photos et les pièces d'abord, du blanc, aucun filet.
   Trois fonds : blanc pour les sections de texte, bleu ciel pour les deux demi-écrans photo et texte (la laine, les partenaires),
   marine pour le pied de page et la page 404. Bleu ciel aussi pour les boutons et le grand nom du pied de page ; sur un fond bleu ciel, le bouton passe en marine.
   Marine #1A2350, bleu ciel #A9D4F5, blanc. Hanken Grotesk : Regular pour le texte, Medium pour les titres et la navigation,
   Extra Bold seulement pour le chiffre clé et le nom en pied de page. Phrases en casse normale, capitales réservées aux boutons.
   Sources en appels de note, listées dans le pied de page. Seuls les boutons sont arrondis. */
/* police hébergée sur le site (Hanken Grotesk, variable 100 à 900, latin ; licence SIL OFL, voir hanken-grotesk-OFL.txt) */
@font-face { font-family: "Hanken Grotesk"; src: url("hanken-grotesk-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --bg: #ffffff;
  --fg: #1a2350;
  --muted: #50577c;
  --sky: #a9d4f5;
  --mist: #eff6fb;
  --pad: 20px;
  --gap: 16px;
  --bar: 0px;
  --nav: 60px;
  --font: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
}
@media (min-width: 1024px) { :root { --pad: 44px; --gap: 24px; --nav: 68px; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font); font-weight: 400; font-size: 0.9375rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
::selection { background: var(--sky); color: var(--fg); }
p, h1, h2, h3, figure, ul, ol { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- typo */
.t-title { font-size: clamp(1.625rem, 2.6vw, 2.375rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
.t-figure { font-size: clamp(5rem, 11vw, 9.5rem); font-weight: 800; line-height: 0.84; letter-spacing: -0.055em; font-variant-numeric: tabular-nums; }
.lead { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.45; text-wrap: pretty; }
.kicker { font-size: 0.875rem; font-weight: 500; }
.muted { color: var(--muted); }
.wrap { max-width: 100rem; margin: 0 auto; padding: 0 var(--pad); }
.center { display: flex; justify-content: center; }
.sec { padding: 96px 0; scroll-margin-top: calc(var(--bar) + var(--nav)); }
@media (min-width: 1024px) { .sec { padding: 136px 0; } }
.head-c { max-width: 40rem; margin: 0 auto 48px; text-align: center; display: grid; gap: 12px; justify-items: center; }

/* boutons : capitales, arrondis */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 28px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--sky); color: var(--fg);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s, color 0.2s;
}
.btn:hover { transform: translateY(-2px); background: var(--fg); color: #ffffff; }
.btn:active { transform: none; }

/* ---------------------------------------------------------------- en-tête : bandeau d'annonce, logo au centre */
.top { position: fixed; inset: 0 0 auto 0; z-index: 40; color: #ffffff; transition: color 0.35s; }
.top-in { height: var(--nav); padding: 0 var(--pad); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; transition: background-color 0.35s; }
.top.solid { color: var(--fg); }
.top.solid .top-in { background: var(--bg); }
.top-l { justify-self: start; display: flex; align-items: center; }
.top-r { justify-self: end; display: flex; align-items: center; gap: 16px; }
.nav { display: none; gap: 32px; font-size: 0.9375rem; font-weight: 500; }
.nav a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; text-decoration-color: transparent; transition: text-decoration-color 0.2s; }
.nav a:hover, .nav a[aria-current="location"] { text-decoration-color: var(--sky); }
.brand { display: flex; align-items: center; gap: 10px; transition: opacity 0.35s; }
/* sur la photo d'accueil, le logo est au centre : celui de l'en-tête attend le défilement */
.top:not(.solid) .brand { opacity: 0; pointer-events: none; }
.brand img { height: 30px; width: auto; }
.brand .logo-m, .top.solid .brand .logo-w { display: none; }
.top.solid .brand .logo-m { display: block; }
.brand-name { display: none; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
@media (min-width: 600px) { .brand-name { display: inline; } }
.lang { display: none; font-size: 0.875rem; font-weight: 500; }
.lang button { min-width: 2.1rem; min-height: 2.75rem; padding: 0 2px; border: 0; background: none; cursor: pointer; opacity: 0.7; }
.lang button[aria-pressed="true"] { opacity: 1; }
/* les langues sont des liens entre /, /de/ et /en/ */
.lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.1rem; min-height: 2.75rem; padding: 0 2px; opacity: 0.7; transition: opacity 0.2s; }
.lang a:hover, .lang a[aria-current="page"] { opacity: 1; }
.pre-link { display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border-radius: 999px; background: var(--sky); color: var(--fg); font-size: 0.875rem; font-weight: 500; white-space: nowrap; transition: background-color 0.2s; }
.pre-link:hover { background: var(--fg); color: #ffffff; }
.menu-btn { border: 0; background: none; cursor: pointer; padding: 10px 0; font-size: 0.9375rem; font-weight: 500; }
@media (min-width: 1100px) {
  .nav, .top .lang { display: flex; }
  .menu-btn { display: none; }
}
.panel {
  position: fixed; inset: calc(var(--bar) + var(--nav)) 0 0 0; z-index: 39; background: var(--bg); color: var(--fg);
  display: flex; flex-direction: column; gap: 6px; padding: 24px var(--pad) calc(32px + env(safe-area-inset-bottom, 0px)); overflow-y: auto;
}
.panel a { padding: 6px 0; font-size: 1.75rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.025em; }
.panel a.panel-cta { justify-self: start; align-self: flex-start; margin-top: 10px; padding: 10px 22px; border-radius: 999px; background: var(--sky); font-size: 1.25rem; }
.panel .lang { display: flex; margin-top: 24px; }
.panel .lang a { padding: 0 2px; font: inherit; letter-spacing: inherit; }

/* ---------------------------------------------------------------- accueil */
.hero { --H: clamp(540px, 100vh, 1200px); position: relative; height: var(--H); overflow: hidden; background: #6e6a66; color: #ffffff; }
@supports (height: 100svh) { .hero { --H: clamp(540px, 100svh, 1200px); } }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; animation: hero-in 1.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes hero-in { from { transform: scale(1.05); } to { transform: none; } }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(16, 20, 36, 0.3) 0, rgba(16, 20, 36, 0) 22%, rgba(16, 20, 36, 0) 55%, rgba(16, 20, 36, 0.5) 100%); }
.hero-lockup { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: var(--nav) var(--pad) 110px; text-align: center; pointer-events: none; }
.hero-lockup::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(820px, 120vw); height: min(520px, 66vh); transform: translate(-50%, -54%); z-index: -1;
  background: radial-gradient(closest-side, rgba(16, 20, 36, 0.32), rgba(16, 20, 36, 0.14) 55%, rgba(16, 20, 36, 0) 100%); }
.hero-logo { height: clamp(96px, 15vh, 156px); width: auto; filter: drop-shadow(0 2px 18px rgba(16, 20, 36, 0.25)); }
.hero-name { font-size: clamp(1rem, 1.5vw, 1.375rem); font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; text-shadow: 0 1px 14px rgba(16, 20, 36, 0.45); }
.hero-cap { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(40px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; padding: 0 var(--pad); }
@media (prefers-reduced-motion: reduce) { .hero-img { animation: none; } }

/* ---------------------------------------------------------------- la collection */
.grid3 { list-style: none; padding: 0 var(--pad); margin: 0 calc(var(--pad) * -1); display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); scrollbar-width: none; }
.grid3::-webkit-scrollbar { display: none; }
.grid3 > li { scroll-snap-align: start; }
@media (min-width: 768px) { .grid3 { margin: 0; padding: 0; overflow: visible; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* cinq pièces : 3 en haut, 2 centrées dessous */
@media (min-width: 768px) { .grid5 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid5 > li { grid-column: span 2; } .grid5 > li:nth-child(4) { grid-column: 2 / span 2; } }
.prod-in { display: grid; }
.prod-photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--mist); margin-bottom: 14px; }
.prod-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.prod-photo .b { opacity: 0; }
.prod-in:hover .prod-photo .b { opacity: 1; }
.prod-in:hover .prod-photo img { transform: scale(1.03); }
.prod-name { font-weight: 500; font-size: 1rem; }
.prod-desc { color: var(--muted); }
.prod-price { margin-top: 6px; }
.coll .center { margin-top: 56px; }
/* sous la collection : visuels réalisés avec l'aide de l'IA */
.ai-note { margin-top: 32px; text-align: center; font-size: 0.8125rem; color: var(--muted); text-wrap: balance; }

/* ---------------------------------------------------------------- demi-écrans (la laine, partenaires) */
.split { display: grid; scroll-margin-top: calc(var(--bar) + var(--nav)); }
.split-photo { position: relative; min-height: 64vh; overflow: hidden; background: var(--mist); }
.split-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-txt { padding: 72px var(--pad) 80px; display: grid; align-content: center; justify-items: start; gap: 22px; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; min-height: 92vh; }
  .split-photo { min-height: 0; }
  .split-txt { padding: 96px clamp(44px, 6vw, 112px); }
}
.fn { font-size: 0.6em; font-weight: 700; line-height: 0; margin-left: 2px; }
.fn a:hover { opacity: 0.6; }
.partners .lead { max-width: 24em; }
.partners-title { max-width: 13em; }
@media (max-width: 899.98px) { .partners .split-photo { order: -1; } }

/* ---------------------------------------------------------------- notre démarche */
.demarche .head-c { max-width: 44rem; }

/* ---------------------------------------------------------------- l'origine, le chiffre, la grande photo, la laine */
.origin .head-c { margin-bottom: 0; }
.origin .head-c { max-width: 54rem; }
.origin .t-title { max-width: 22em; }
.laine .t-figure { margin-top: 8px; }
/* la section 70 % : panneau texte en bleu ciel (lavande), texte marine */
.laine .split-txt { background: var(--sky); }
.laine ::selection { background: #ffffff; }
/* partenaires : même panneau bleu ciel ; le bouton passe en marine pour rester visible */
.partners .split-txt { background: var(--sky); }
.partners ::selection { background: #ffffff; }
.partners .btn { background: var(--fg); color: #ffffff; }
.partners .btn:hover { background: #ffffff; color: var(--fg); }
.laine .stat { text-wrap: balance; max-width: 21em; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.4; }
.photo-line { position: relative; height: clamp(420px, 88vh, 1000px); overflow: hidden; background: var(--mist); display: grid; place-items: center; padding: 0 var(--pad); }
.photo-line img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; opacity: 0; transition: opacity 1.4s ease; }
.photo-line img.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .photo-line img { transition: none; } }
.photo-line::after { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side, rgba(16, 20, 36, 0.3), rgba(16, 20, 36, 0) 100%); }
.photo-line-txt { position: relative; z-index: 1; max-width: 13em; margin: 0; color: #ffffff; text-align: center; font-size: clamp(1.875rem, 4vw, 3.5rem); font-weight: 500; line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; text-shadow: 0 2px 22px rgba(16, 20, 36, 0.35); }
.demarche { padding-bottom: 104px; }
.pillars { list-style: none; padding: 0; display: grid; gap: 28px; max-width: 60rem; margin: 0 auto; text-align: center; }
@media (min-width: 768px) { .pillars { grid-template-columns: repeat(3, 1fr); gap: var(--gap); } }
.pillars li { display: grid; gap: 6px; }
.pil-t { font-weight: 500; font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.2; letter-spacing: -0.015em; }
.pillars .muted { font-size: 1rem; }

/* ---------------------------------------------------------------- contact */
.contact-in { display: grid; gap: 40px; max-width: 72rem; }
@media (min-width: 1024px) { .contact-in { grid-template-columns: 1fr 1.3fr; gap: 64px; } }
.contact-intro { margin-top: 12px; }
form { display: grid; gap: 18px; }
.row2 { display: grid; gap: 18px; }
@media (min-width: 640px) { .row2 { grid-template-columns: 1fr 1fr; gap: 16px; } }
.field { display: grid; gap: 6px; }
.field span { font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
.field input, .field textarea { width: 100%; border: 0; border-radius: 0; background: var(--mist); padding: 14px 16px; font-size: 1rem; outline: none; transition: box-shadow 0.2s; }
.field input:focus, .field textarea:focus { box-shadow: inset 0 0 0 1.5px var(--fg); }
.field textarea { min-height: 128px; resize: vertical; }
.field.short input { max-width: 12rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.err { font-size: 0.875rem; font-weight: 500; }
.thanks { font-size: 1.375rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; }

/* ---------------------------------------------------------------- pied de page : marine, sources, le nom sur toute la largeur */
.foot { background: var(--fg); color: #ffffff; padding: 56px 0 0; overflow: hidden; font-size: 0.875rem; }
.foot-cols { display: grid; gap: 28px; padding-bottom: 48px; }
@media (min-width: 900px) { .foot-cols { grid-template-columns: 1fr 1fr 1.6fr; gap: var(--gap); } }
.foot-links { display: grid; gap: 4px; align-content: start; }
.foot a { transition: color 0.2s; }
.foot a:hover { color: var(--sky); }
.foot .soft { color: rgba(255, 255, 255, 0.6); }
.sources { display: grid; gap: 6px; align-content: start; scroll-margin-top: calc(var(--bar) + var(--nav) + 24px); }
.sources ol { padding-left: 1.2em; display: grid; gap: 4px; color: rgba(255, 255, 255, 0.85); }
.sources:target { animation: flash 1.6s ease; }
@keyframes flash { 0%, 40% { color: var(--sky); } 100% { color: inherit; } }
.foot-word { display: inline-block; white-space: nowrap; font-size: 15.6vw; font-weight: 800; line-height: 1; letter-spacing: -0.045em; color: var(--sky); }
.copy { margin: 0 0 12px; font-size: 0.8125rem; }
/* le nom tout en bas : le cadre s'arrête juste sous la ligne de base (calculé en JS), la queue du y sort du cadre */
.foot-wm { overflow: hidden; height: calc(15.6vw * 0.86); }
.foot-bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }

/* ---------------------------------------------------------------- à propos : des faits courts, citables */
.about { padding-top: 0; }
/* liens du pied vers #a-propos et #faq : le titre arrive avec de l'air sous l'en-tête */
.about, .faq { scroll-margin-top: calc(var(--bar) + var(--nav) + 40px); }
.about-in { display: grid; gap: 32px; max-width: 72rem; }
@media (min-width: 1024px) { .about-in { grid-template-columns: 1fr 1.6fr; gap: 64px; } }
.facts { display: grid; gap: 20px; margin: 0; }
.facts div { display: grid; gap: 2px; }
@media (min-width: 640px) { .facts div { grid-template-columns: 9.5rem minmax(0, 1fr); gap: 16px; } }
.facts dt { font-size: 0.875rem; font-weight: 500; color: var(--muted); padding-top: 2px; }
.facts dd { margin: 0; font-size: clamp(1rem, 1.2vw, 1.0625rem); line-height: 1.5; }

/* ---------------------------------------------------------------- questions fréquentes */
.faq { padding-top: 0; }
.faq-list { display: grid; gap: 8px; max-width: 52rem; margin: 0 auto; }
.faq-list details { background: var(--mist); }
.faq-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 18px 20px; font-size: 1.0625rem; font-weight: 500; line-height: 1.35; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; font-size: 1.25rem; font-weight: 400; line-height: 1; transition: transform 0.25s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details > p { margin: 0; padding: 0 20px 20px; max-width: 46rem; color: var(--muted); line-height: 1.55; }
.faq-list summary:focus-visible { outline-offset: -2px; }
.nw { white-space: nowrap; }

/* ---------------------------------------------------------------- page 404 : marine comme le pied de page, le nom en bleu ciel */
.nf { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: var(--fg); color: #ffffff; overflow-x: hidden; }
.nf-top { height: var(--nav); display: flex; align-items: center; justify-content: center; padding: 0 var(--pad); }
.nf-brand { display: flex; align-items: center; gap: 10px; }
.nf-brand img { height: 30px; width: auto; }
.nf-main { flex: 1; display: grid; align-content: center; justify-items: center; gap: 16px; padding: 48px var(--pad) 56px; text-align: center; }
.nf-code { margin-bottom: 8px; }
.nf-sub { color: rgba(255, 255, 255, 0.7); margin-bottom: 16px; }
.nf .btn:hover { background: #ffffff; color: var(--fg); }
.nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; font-weight: 500; }
.nf-links a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: transparent; transition: text-decoration-color 0.2s; }
.nf-links a:hover { text-decoration-color: var(--sky); }
.nf :focus-visible { outline-color: var(--sky); }
.nf-wm { padding: 0 var(--pad); }

/* ---------------------------------------------------------------- mentions légales : une colonne de texte, en-tête blanc */
.lg-top { position: sticky; top: 0; z-index: 40; background: var(--bg); color: var(--fg); }
.lg-in { height: var(--nav); padding: 0 var(--pad); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
/* flèche de retour vers le site, toujours visible : l'en-tête reste collé en haut */
.lg-back { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 2.75rem; font-size: 0.875rem; font-weight: 500; white-space: nowrap; }
.lg-back svg { width: 16px; height: 16px; flex: none; transition: transform 0.2s; }
.lg-back:hover svg { transform: translateX(-3px); }
.lg-top .lang { justify-self: end; }
.lg-top .lang { display: flex; }
.legal { padding: 56px 0 104px; }
@media (min-width: 1024px) { .legal { padding: 88px 0 136px; } }
.legal .wrap { max-width: 46rem; margin: 0; padding: 0 var(--pad); }
@media (min-width: 1024px) { .legal .wrap { margin: 0 auto; } }
.legal-date { margin-top: 12px; font-size: 0.875rem; }
.legal h2 { margin: 52px 0 12px; font-size: 1.25rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; scroll-margin-top: calc(var(--nav) + 24px); }
.legal h3 { margin: 28px 0 6px; font-size: 1rem; font-weight: 500; line-height: 1.3; }
.legal p { max-width: 40rem; text-wrap: pretty; }
.legal a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal a:hover { text-decoration-color: var(--sky); }
.legal .todo { background: var(--sky); color: var(--fg); padding: 0 0.2em; }
.foot-links a[aria-current="page"] { color: var(--sky); }