/* GENERE par build-css.sh — ne pas editer. Sources : assets/css/*.css */

/* ═══════════ fonts.css ═══════════ */
/* Polices auto-hebergees — woff2 uniquement. Genere depuis fontshare + Google Fonts. */
@font-face {
  font-family: 'Clash Display';
  src: url('fonts/BSY64LPTT3OPLVKAZKL3AHKRWZ3D74AC.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Clash Display';
  src: url('fonts/Z3MGHFHX6DCTLQ55LJYRJ5MDCZPMFZU6.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Clash Display';
  src: url('fonts/53RZKGODFYDW3QHTIL7IPOWTBCSUEZK7.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/WNDVG7O66ENLOD43GS7FBUCC4KMT5OM2.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/KFIAZD4RUMEZIYV6FQ3T3GP5PDBDB6JY.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/7AHDUZ4A7LFLVFUIFSARGIWCRQJHISQP.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/GHM6WVH6MILNYOOCXHXB5GTSGNTMGXZR.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/i7dPIFZifjKcF5UAWdDRYE58RXi4EwSsbg.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/i7dPIFZifjKcF5UAWdDRYE98RXi4EwSsbg.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/i7dPIFZifjKcF5UAWdDRYEF8RXi4EwQ.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/i7dMIFZifjKcF5UAWdDRaPpZUFqaHi6WZ3S_Yg.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/i7dMIFZifjKcF5UAWdDRaPpZUFuaHi6WZ3S_Yg.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/i7dMIFZifjKcF5UAWdDRaPpZUFWaHi6WZ3Q.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- CJK ---------------------------------------------------------------
   Les styles du site sont en ligne ('Clash Display', serif / 'Satoshi',
   sans-serif / 'Space Mono', monospace), donc une regle :lang(zh) ne peut
   pas les surcharger sans !important.

   On alias donc les plages CJK sur les MEMES noms de famille : le navigateur
   bascule tout seul par point de code, sans toucher au latin. Et comme on
   pointe sur des polices systeme via local(), aucun telechargement n'a lieu
   — ni pour un visiteur francais, ni meme pour un visiteur chinois.
   Remplace l'ancienne feuille Noto SC, qui etait chargee mais jamais appliquee.
--------------------------------------------------------------------------- */
@font-face {
  font-family: 'Clash Display';
  src: local('Noto Serif CJK SC'), local('Source Han Serif SC'), local('Songti SC'), local('SimSun');
  unicode-range: U+2E80-9FFF, U+3000-303F, U+FF00-FFEF, U+20000-2A6DF;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: local('PingFang SC'), local('Noto Sans CJK SC'), local('Source Han Sans SC'), local('Hiragino Sans GB'), local('Microsoft YaHei');
  unicode-range: U+2E80-9FFF, U+3000-303F, U+FF00-FFEF, U+20000-2A6DF;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: local('PingFang SC'), local('Noto Sans CJK SC'), local('Source Han Sans SC'), local('Microsoft YaHei');
  unicode-range: U+2E80-9FFF, U+3000-303F, U+FF00-FFEF, U+20000-2A6DF;
  font-display: swap;
}

/* ═══════════ a11y.css ═══════════ */
/* ─── Accessibilite & ergonomie tactile ──────────────────────────────── */

/* #17 — Etats de focus visibles.
   :focus-visible n'apparait qu'au clavier, donc aucun contour parasite
   a la souris. Le double liseré reste lisible sur fond clair comme sombre. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid #FF3B1F;
  outline-offset: 3px;
  border-radius: 2px;
}
/* Les navigateurs sans :focus-visible gardent le focus par defaut. */
:where(a, button, input, [tabindex]):focus:not(:focus-visible) { outline: none; }

/* Lien d'evitement : premier element tabulable, visible une fois focalise. */
.rg-skip {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-160%);
  transition: transform 220ms cubic-bezier(.16,1,.3,1);
  background: #EDE4D6; color: #08080A;
  font-family: 'Space Mono', monospace; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  padding: 14px 18px; text-decoration: none;
}
.rg-skip:focus { transform: translateY(0); }

/* #10 — Cibles tactiles : 44px minimum sur pointeur grossier (WCAG 2.5.5). */
@media (pointer: coarse) {
  /* !important est necessaire : plusieurs boutons portent un min-height
     en style inline (36px sur le selecteur de langue), qu'une feuille
     externe ne peut pas surcharger autrement. */
  button, a[href], input, [role="button"] { min-height: 44px !important; }
  button, [role="button"] { min-width: 44px; }
}

/* Carte selectionnable au clavier (#17). */
[data-card]:focus-visible {
  outline: 2px solid #FF3B1F;
  outline-offset: 6px;
}

/* Filet de securite mouvement reduit : neutralise toute transition/animation
   residuelle que le JS ne couvrirait pas. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════ mobile.css ═══════════ */
/* ─── Adaptation mobile ──────────────────────────────────────────────────
   Sur 375 px, l'en-tete fixe empilait ses 6 controles sur 4 rangees et
   occupait 240 px — soit un quart de l'ecran, par-dessus le hero.
   On le ramene a 2 rangees lisibles.
   Les !important sont necessaires : tous ces styles sont en ligne.
------------------------------------------------------------------------- */
@media (max-width: 760px) {

  header {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 10px !important;
    padding: 12px 16px 16px !important;
  }

  /* Rangee 1 : logo (+ langue a droite) */
  header > div:first-child { flex: 0 1 auto !important; gap: 12px !important; min-width: 0; }

  /* Le badge « Minute confiee » est un indicateur decoratif :
     on le retire du bandeau pour rendre la place aux actions. */
  header > div:first-child > div { display: none !important; }

  /* display:contents fait remonter langue/son/devis au niveau du header,
     ce qui permet de les ordonner librement en deux rangees. */
  header > div:last-child { display: contents !important; }

  header > div:first-child      { order: 1; }
  header [data-cta-devis]       { order: 2; margin-left: auto; }
  /* margin-left:auto sur le CTA absorbe l'espace libre : langue et son
     passent naturellement en rangee 2, sans separateur artificiel. */
  header > div:last-child > div[role="group"] { order: 3; flex: 0 0 auto; display: flex; gap: 1px; }
  header > div:last-child > button:nth-of-type(1) { order: 4; }

  /* « Passer l'experience » fait doublon avec les deux appels a l'action
     deja presents dans le hero. On le masque ici seulement. */
  header > div:last-child > button:nth-of-type(2) { display: none !important; }

  /* Controles secondaires resserres, sans descendre sous 44 px de hauteur. */
  header button { padding: 8px 10px !important; font-size: 8.5px !important; letter-spacing: .14em !important; }
  header [role="group"] { margin-right: 0 !important; }
}

/* Tres petits ecrans : la langue passe sous le logo plutot que de comprimer. */
@media (max-width: 380px) {
  header > div:last-child { flex: 1 1 100% !important; }
}

/* #30 — Le credit Yokr n'apparaissait qu'au survol, donc jamais au doigt.
   Sur pointeur grossier on l'affiche en permanence : c'est la signature
   du studio, elle doit etre vue. */
@media (pointer: coarse) {
  [data-yokr-hint] {
    opacity: .75 !important;
    transform: none !important;
  }
}

/* ─── Correctifs iOS Safari (#9) ─────────────────────────────────────────
   Audit statique du code : Safari mobile est le navigateur le plus exposé
   sur ce site (scroll orchestré, transformations 3D, verrou d'intro).
------------------------------------------------------------------------- */

/* Le rebond élastique et le « tirer pour rafraîchir » se déclenchaient
   pendant l'expérience, ce qui casse une narration pilotée au scroll. */
html { overscroll-behavior-y: none; }
body { overscroll-behavior-y: none; }

/* Safari peint un flash bleu translucide à chaque tap. Sur un fond noir
   premium, c'est le détail qui trahit le site non finalisé. */
html {
  -webkit-tap-highlight-color: rgba(255, 59, 31, .12);
}

/* Empêche l'agrandissement automatique du texte en rotation paysage. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Écrans courts (iPhone SE et similaires) : à 667 px de haut, un en-tête de
   124 px occupe 19 % de l'écran. On resserre sans descendre sous les 44 px
   de hauteur tactile — c'est le padding et les interlignes qui cèdent. */
@media (max-width: 760px) and (max-height: 720px) {
  header { padding: 8px 14px 12px !important; gap: 6px 8px !important; }
  header button { padding: 6px 9px !important; }
  header img { height: 17px !important; }
}

/* Téléphone en paysage : 390 px de haut pour 844 de large. La règle « écran
   court » ci-dessus est conditionnée à max-width: 760px et ne s'applique donc
   pas. On cible ici la hauteur et le pointeur, indépendamment de la largeur —
   l'en-tête occupait 30 % de l'écran. */
@media (max-height: 500px) and (pointer: coarse) {
  header {
    padding: 6px 16px 10px !important;
    gap: 4px 10px !important;
  }
  header button { padding: 5px 10px !important; font-size: 8.5px !important; }
  header img { height: 15px !important; }
  /* Le badge « Minute confiée » cède la place, comme en portrait. */
  header > div:first-child > div { display: none !important; }
}

/* ═══════════ design-tuning.css ═══════════ */
/* ─── Réglages de direction artistique ───────────────────────────────────
   Feuille volontairement isolée : retire la ligne <link> qui la charge et
   le site revient exactement à son état précédent. Rien d'autre n'en dépend.
------------------------------------------------------------------------- */

/* #18 — Mouvement typographique.
   Le retrait des vidéos d'ambiance a rendu le site plus immobile que le SOTD
   médian. On rend le rythme à la typo, sans JavaScript : animations pilotées
   par le scroll (animation-timeline). Les navigateurs qui ne connaissent pas
   `view()` ignorent la règle et affichent le titre normalement — aucun
   risque de contenu invisible. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes rg-monte {
      from { opacity: 0; transform: translate3d(0, 26px, 0); letter-spacing: -.01em; }
      to   { opacity: 1; transform: none; }
    }
    /* Scopé à #dc-root : c'est le conteneur que le runtime crée pour
       l'expérience. Sans ce scope, la règle atteignait aussi les <section>
       des mentions légales, dont les titres restaient à opacité 0. */
    #dc-root section h2 {
      animation: rg-monte linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }

    /* Les chiffres de la section preuves montent en décalé, un cran plus tard. */
    @keyframes rg-chiffre {
      from { opacity: .12; transform: translate3d(0, 14px, 0); }
      to   { opacity: 1; transform: none; }
    }
    #dc-root section[data-screen-label="09"] [style*="tabular-nums"] {
      animation: rg-chiffre linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 34%;
    }
  }
}

/* #19 — Amener le rouge plus tôt.
   La révélation couleur arrive tard : un visiteur qui ne scrolle qu'à 40 %
   ne voyait qu'un site monochrome. On installe l'accent dès le premier
   écran, par petites touches, sans toucher à la dramaturgie de la révélation. */
[data-eyebrow-accent]::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 10px;
  vertical-align: middle;
  background: #FF3B1F;
  border-radius: 50%;
}

/* Le lien secondaire du hero reçoit un soulignement rouge au survol
   plutôt que le gris d'origine. */
[data-hero-secondaire]:hover,
[data-hero-secondaire]:focus-visible { color: #FF3B1F !important; }

/* #25 — Rendre le sound design désirable.
   15 générateurs Web Audio synthétisés que 90 % des visiteurs n'entendront
   jamais. Le réglage « off par défaut » est le bon ; c'est l'invitation qui
   manquait. Une pulsation lente attire l'œil sans jamais rien émettre. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  @keyframes rg-appel-son {
    0%, 68%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 31, 0); }
    82%           { box-shadow: 0 0 0 3px rgba(255, 59, 31, .16); }
  }
  [data-sound-toggle][aria-pressed="false"] {
    animation: rg-appel-son 4.2s ease-in-out infinite;
  }
  /* Une fois le son activé, plus aucune sollicitation. */
  [data-sound-toggle][aria-pressed="true"] { animation: none; }
}

/* #13 — content-visibility : ÉCARTÉ après mesure.
   Essayé sur les 8 sections ne servant pas au calcul de scroll, avec
   `contain-intrinsic-size: auto 900px`. Résultat mesuré : la hauteur du
   document dérive de +737 px et les sections rapportent des hauteurs
   fausses (10B : 702 -> 1191 px, 11 : 1544 -> 1195 px), parce que le
   navigateur substitue l'estimation intrinsèque tant que la section n'a pas
   été rendue une première fois.

   Or tout le scroll du site est piloté par getBoundingClientRect() sur ces
   sections : l'orchestration se décale. À reprendre seulement avec des
   hauteurs mesurées par section et par palier de viewport, ce qui n'a de
   sens qu'avec une vérification visuelle. Le gain de performance ne vaut
   pas ce risque ici.
*/