/* neochrome — feuille de style unique.
   Sobriété : fond noir, Space Grotesk, l'image parle. La couleur vit dans les
   photos, pas dans l'interface. */

@font-face {
  font-family: 'Space Grotesk';
  src: url('/static/fonts/SpaceGrotesk.woff2') format('woff2');
  font-weight: 300 700;        /* police variable : un seul fichier, tous les poids */
  font-style: normal;
  font-display: swap;
}

:root {
  --noir: #000;
  --blanc: #f4f4f4;     /* onglet actif, marque, liens d'action */
  --texte: #c9c9c9;     /* corps de texte sur fond noir */
  --grise: #5f5f5f;     /* onglets inactifs, mentions discrètes */
  --ligne: rgba(244, 244, 244, .12);  /* séparateurs discrets (faq…) */
  --largeur: 1180px;
  --slot-h: 64vh;       /* hauteur de l'emplacement image partagé (accueil · faq · scène) */
}

/* Navigation adoucie : le navigateur fond d'une page à l'autre (et métamorphose
   les onglets nommés plus bas). Amélioration progressive — sans support, la
   navigation reste nette et instantanée. On respecte « réduire les animations ». */
@view-transition { navigation: auto; }
/* Le fondu : doux, et l'onglet entrant prend un peu plus de temps à s'installer
   que le sortant à s'effacer. Une seule paire de durées à ajuster au goût. */
::view-transition-old(*) { animation-duration: .5s;  animation-timing-function: ease-in-out; }
::view-transition-new(*) { animation-duration: .72s; animation-timing-function: ease-in-out; }

/* L'image vedette occupe le MÊME emplacement partout : pas besoin de la
   « métamorphoser » comme élément partagé — on la laisse dans le fondu de page
   ci-dessus. Identique et au même endroit sur les deux pages, elle paraît alors
   immobile pendant la transition, et le reste se fond autour. On évite ainsi le
   micro-glissement que la métamorphose produisait sur une paire DÉFILÉE (position
   capturée fractionnaire ; la 1re paire, à défilement nul, ne glissait pas).
   La classe .vedette reste posée comme simple repère sémantique. */

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;   /* réserve toujours la place de la barre : la largeur
                                 ne dépend plus de la longueur de page, donc l'image
                                 vedette ne se décale plus entre accueil et exemples */
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--noir);
  color: var(--texte);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* --- Le bandeau : la colonne vertébrale, partout identique --- */
.barre {
  display: flex;
  align-items: baseline;
  gap: 2.4rem;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 2rem 1.5rem 0;
}

.onglets { display: flex; gap: 2rem; align-items: baseline; }

/* État inactif : petit et gris. La taille suit l'état, pas l'élément. */
.marque, .onglet {
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--grise);
  transition: color .2s ease, font-size .2s ease;
}
.marque { letter-spacing: .005em; }

/* L'onglet de la page courante grandit et passe au blanc ;
   les autres rapetissent d'autant et restent gris. */
.marque.actif, .onglet.actif {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--blanc);
}
.marque:hover, .onglet:hover { color: var(--texte); }
.marque.actif:hover, .onglet.actif:hover { color: var(--blanc); }

/* Pas de view-transition-name sur les onglets : on laisse toute la page se
   fondre d'un état à l'autre (fondu vers l'onglet agrandi), sans donner à voir
   l'agrandissement lui-même. */

main {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 2.6rem 1.5rem 4rem;
}

/* --- Accueil : le propos à gauche, la photo à droite --- */
.accueil {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* mêmes colonnes que la galerie : l'image
                                       occupe le même rectangle qu'en exemples */
  gap: 1.6rem;
  align-items: start;
}

.propos { font-size: 1.02rem; }
.propos p { margin: 0 0 1.15rem; max-width: 34rem; }

.essayer {
  display: inline-block;
  margin-top: 1.6rem;
  padding: .6rem 1.4rem;
  border: 0.5px solid var(--blanc);   /* contour très fin : le bouton ressort sur le noir */
  color: var(--blanc);
  font-size: 1.05rem;
  transition: opacity .2s ease;
}
.essayer:hover { opacity: .72; }

.visuel img { width: 100%; height: auto; display: block; }

/* --- Pages encore à venir --- */
.bientot { color: var(--grise); padding-top: 1rem; }

/* --- Remerciement après abonnement --- */
.merci { color: var(--blanc); padding-top: 1.5rem; max-width: 34rem; }
.merci h1 { font-weight: 500; font-size: 1.7rem; margin: 0 0 1rem; }
.merci p { color: var(--grise); margin: 0; font-size: 1.02rem; }

/* --- Page de connexion : connexion à gauche, image vedette à droite --------- */
.connexion { max-width: 22rem; font-size: 1rem; }
.connexion .intro { margin: 0 0 1.6rem; color: var(--texte); }
.erreur {
  margin: 0 0 1.3rem; padding-left: .8rem;
  border-left: 2px solid var(--grise); color: var(--blanc); font-size: .92rem;
}

/* Bouton Google : logo « G » officiel (non altéré) + texte, sobre sur le noir. */
.bouton-google {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .65rem 1.15rem;
  border: 1px solid var(--grise); color: var(--blanc); font-size: 1rem;
  transition: border-color .2s ease, background-color .2s ease;
}
.bouton-google:hover { border-color: var(--blanc); background: rgba(244, 244, 244, .05); }
.bouton-google .g-logo { display: block; flex: none; }

.sep-ou {
  display: flex; align-items: center; gap: .85rem;
  margin: 1.4rem 0; color: var(--grise); font-size: .85rem;
}
.sep-ou::before, .sep-ou::after { content: ""; flex: 1; height: 1px; background: var(--ligne); }

/* Lien magique par e-mail (pas de mot de passe). */
.form-lien { display: flex; flex-direction: column; gap: .8rem; align-items: stretch; }
.form-lien input, .form-dev input {
  padding: .62rem .8rem;
  background: transparent; color: var(--blanc);
  border: 1px solid var(--grise); font: inherit; font-size: 1rem;
}
.form-lien input::placeholder, .form-dev input::placeholder { color: var(--grise); }
.form-lien input:focus, .form-dev input:focus { outline: none; border-color: var(--blanc); }
.form-lien button {
  align-self: flex-start; padding: .6rem 1.4rem;
  border: 1px solid var(--blanc); background: transparent; color: var(--blanc);
  font: inherit; font-size: 1rem; cursor: pointer; transition: opacity .2s ease;
}
.form-lien button:hover { opacity: .72; }
.aide { margin: .9rem 0 0; color: var(--grise); font-size: .85rem; }

/* Connexion dev (échafaudage — retiré avant le lancement). */
.form-dev {
  margin-top: 2rem; padding-top: 1.3rem; border-top: 1px solid var(--ligne);
  display: flex; gap: .6rem; flex-wrap: wrap;
}
.form-dev button {
  padding: .5rem 1rem; background: transparent; color: var(--grise);
  border: 1px solid var(--grise); font: inherit; cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.form-dev button:hover { color: var(--texte); border-color: var(--texte); }

/* --- Mobile : une colonne, la photo d'abord --- */
@media (max-width: 760px) {
  .barre { flex-wrap: wrap; gap: 1rem 1.4rem; padding-top: 1.5rem; }
  .marque, .onglet { font-size: 1.05rem; }
  .marque.actif, .onglet.actif { font-size: 1.32rem; }
  .onglets { gap: 1.4rem; }
  .accueil { grid-template-columns: 1fr; gap: 1.6rem; }
  .accueil .visuel { order: -1; }   /* la photo en premier */
  main { padding-top: 2rem; }
}

/* --- Page exemples : galerie de paires avant / après --- */
.galerie { display: flex; flex-direction: column; gap: 4rem; }

.paire {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  align-items: start;
}
.volet { margin: 0; }
.volet img { width: 100%; height: auto; display: block; }

.legende { margin-top: .65rem; color: var(--grise); font-size: .95rem; }
.legende.droite { text-align: right; }

/* Le remerciement Signature Edits — apparaît en léger fondu, s'efface en défilant. */
.merci {
  max-width: 52rem;
  margin-top: 1rem;
  color: var(--grise);
  animation: monter 1.1s .15s ease both;
}
.merci p { margin: 0 0 1rem; }
.merci strong { color: var(--texte); font-weight: 500; }

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

@media (prefers-reduced-motion: reduce) {
  .merci { animation: none; }
}

/* Texte adapté à la disposition des paires : « à gauche / à droite » sur grand
   écran, « en haut / en dessous » quand elles s'empilent. Un seul des deux <p>
   s'affiche selon la largeur. */
.sur-mobile { display: none; }

@media (max-width: 760px) {
  .galerie { gap: 2.6rem; }
  .paire { grid-template-columns: 1fr; gap: 1rem; }
  .legende.droite { text-align: left; }   /* tout aligné à gauche en pile */
  .sur-bureau { display: none; }
  .sur-mobile { display: block; }
}

/* --- Mode « scène » (exemples, bureau) : une paire à la fois, qui se remplace.
       Le bandeau reste fixe en haut, chaque paire se cale dans la scène. --- */
@media (min-width: 761px) {
  body.scene { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
  .scene .barre { flex: none; width: 100%; }   /* pleine largeur : le menu reste aligné à gauche */

  .scene main {
    flex: 1; min-height: 0;                 /* hauteur définie = la scène */
    overflow-y: scroll;
    scrollbar-width: none;                 /* Firefox : barre masquée */
    padding: 0;
    /* le défilement par paire est piloté par scene.js (glissement doux contrôlé) */
  }
  .scene main::-webkit-scrollbar { display: none; }   /* Chromium / Brave / Safari */

  .scene .galerie {
    height: 100%;                           /* = hauteur de la scène (main est définie) */
    display: flex; flex-direction: column;
    max-width: var(--largeur); margin: 0 auto;
    padding: 0 1.5rem;
  }

  .scene .paire-bloc {
    flex: 0 0 100%;                         /* chaque bloc = exactement une scène pleine */
    display: flex; flex-direction: column; justify-content: flex-start; gap: 1.4rem;
    padding-top: 2.6rem;                    /* image calée en haut, comme l'accueil */
    box-sizing: border-box;
  }
  .scene .legende, .scene .legende.droite { text-align: center; }

  /* L'emplacement partagé de l'image (accueil · faq · scène) : calée en haut,
     ajustée à --slot-h. Paysage → pleine largeur (courte) ; portrait → pleine
     hauteur. Identique partout → l'image ne se déplace pas d'une page à l'autre. */
  .accueil .visuel,
  .scene .volet { display: flex; flex-direction: column; align-items: center; }
  .accueil .visuel img,
  .scene .volet img {
    width: auto; height: auto;
    max-width: 100%; max-height: var(--slot-h);
  }
}

/* Repère de navigation (bureau) : index « 02 / 03 » avec une flèche au-dessus
   (image précédente) et/ou en dessous (image suivante). Les flèches sont en
   absolu autour de l'index, qui sert d'ancre fixe — montrer ou cacher une flèche
   ne décale donc pas l'index. */
.repere {
  position: fixed; bottom: 2.1rem; left: 50%; transform: translateX(-50%);
  color: var(--grise); z-index: 5;
}
.repere .index { font-size: .85rem; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.chevron {
  appearance: none; -webkit-appearance: none; background: none; padding: 0;
  position: absolute; left: 50%;
  width: .6rem; height: .6rem; cursor: pointer; color: inherit;
  border: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
}
.chevron:hover { color: var(--texte); }
.chevron.haut { bottom: 100%; margin-bottom: .55rem; transform: translateX(-50%) rotate(-135deg); }
.chevron.bas  { top: 100%; margin-top: .55rem; transform: translateX(-50%) rotate(45deg);
                animation: respire 2.4s ease-in-out infinite; }
@keyframes respire { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

@media (max-width: 760px) { .repere { display: none; } }
@media (prefers-reduced-motion: reduce) { .chevron.bas { animation: none; } }

/* --- Aperçu agrandi d'une image d'exemple ---------------------------------
   <dialog> natif : le fond du site se tamise (::backdrop), Échap ferme, le
   focus est géré par le navigateur. Aucune dépendance. On clique une image
   d'exemple (accueil · faq · scène), on la revoit en grand, on referme d'un
   clic à côté, sur la croix, sur l'image, ou par Échap. */
.visuel img, .volet img { cursor: zoom-in; }

.apercu {
  position: fixed; inset: 0;
  width: auto; height: auto; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent; overflow: hidden;
}
.apercu[open] { display: flex; align-items: center; justify-content: center; }
.apercu::backdrop {
  background: rgba(0, 0, 0, .82);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.apercu img {
  display: block; width: auto; height: auto;
  max-width: 78vw; max-height: 80dvh;   /* sur bureau : plus grand que la vignette (~46vw), avec une vraie marge */
  cursor: zoom-out;
  box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, .55);
}
/* Sur mobile, la vignette occupe déjà presque toute la largeur (~88vw) : l'aperçu
   agrandi doit donc la dépasser, sinon il paraîtrait plus petit que l'image de base. */
@media (max-width: 760px) {
  .apercu img { max-width: 94vw; max-height: 92dvh; }
}

/* La croix de fermeture : deux traits fins, dans l'esprit des chevrons. */
.apercu-fermer {
  appearance: none; -webkit-appearance: none; background: none;
  position: fixed; top: 1.5rem; right: 1.7rem;
  width: 1.6rem; height: 1.6rem; padding: 0; border: 0;
  cursor: pointer; color: var(--grise); z-index: 1;
}
.apercu-fermer::before, .apercu-fermer::after {
  content: ""; position: absolute; top: 50%; left: 0;
  width: 100%; height: 2px; background: currentColor;
}
.apercu-fermer::before { transform: rotate(45deg); }
.apercu-fermer::after  { transform: rotate(-45deg); }
.apercu-fermer:hover { color: var(--blanc); }

/* Apparition douce, dans le même esprit que les transitions de page. */
.apercu[open], .apercu[open]::backdrop { animation: apparaitre .28s ease both; }
@keyframes apparaitre { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .apercu[open], .apercu[open]::backdrop { animation: none; }
}

/* --- Pied de page : sélecteur de langue (et, plus tard, le légal) -----------
   Fixe et discret en bas à droite, présent partout comme le repère de scène.
   Même idiome que la navigation : la langue active en blanc, l'autre en gris. */
.pied {
  position: fixed; right: 1.5rem; bottom: 1.4rem; z-index: 4;
  font-size: .8rem; letter-spacing: .08em;
  display: flex; align-items: center; flex-wrap: wrap;
  justify-content: flex-end; gap: .7rem;
}
.lien-legal { color: var(--grise); transition: color .2s ease; }
.lien-legal:hover { color: var(--texte); }
.lien-legal.actif { color: var(--blanc); }
.contact + .lien-legal::before,
.lien-legal + .lien-legal::before { content: "·"; margin-right: .55rem; color: var(--grise); }

/* Langues — repliées derrière la langue active (« FR ▾ »), même idiome <details>
   que le contact. Scalable aux 8 langues prévues sans encombrer le pied. */
.langues { position: relative; }
.langues > summary {
  list-style: none; cursor: pointer; color: var(--grise); transition: color .2s ease;
}
.langues > summary::-webkit-details-marker { display: none; }
.langues > summary::after { content: "▾"; margin-left: .25rem; font-size: .8em; }
.langues > summary:hover { color: var(--texte); }
.langues[open] > summary { color: var(--blanc); }
.langues-panneau {
  position: absolute; bottom: calc(100% + .7rem); right: 0;
  display: flex; flex-direction: column; gap: .55rem;
  padding: .7rem .95rem; background: var(--noir); border: 1px solid var(--grise);
  letter-spacing: normal; text-align: right;
}
.langue { color: var(--grise); transition: color .2s ease; }
.langue:hover { color: var(--texte); }
.langue.actif { color: var(--blanc); cursor: default; }
.langue.actif:hover { color: var(--blanc); }

/* (pied sur mobile : bloc consolidé en fin de fichier — après .contact-panneau,
   pour que la cascade s'applique bien) */

/* --- Contact : formulaire repliable dans le pied (même idiome que la langue) -
   Le « contact » s'ouvre en petit panneau flottant AU-DESSUS du pied (le pied
   est ancré en bas) : pas de popup, pas de JS, pas de service tiers. */
.contact { position: relative; }
.contact summary {
  list-style: none; cursor: pointer; color: var(--grise);
  transition: color .2s ease;
}
.contact summary::-webkit-details-marker { display: none; }
.contact summary:hover { color: var(--texte); }
.contact[open] summary { color: var(--blanc); }
.contact-panneau {
  position: absolute; bottom: calc(100% + .7rem); right: 0;
  width: min(20rem, 86vw); padding: .95rem 1rem;
  background: var(--noir); border: 1px solid var(--grise);
  text-align: left; letter-spacing: normal;
}
.contact-panneau form { display: flex; flex-direction: column; gap: .7rem; }
.contact-panneau label {
  display: flex; flex-direction: column; gap: .3rem;
  color: var(--grise); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
}
.contact-panneau input, .contact-panneau textarea {
  padding: .5rem .6rem; background: transparent; color: var(--blanc);
  border: 1px solid var(--grise); font: inherit; font-size: .9rem; width: 100%;
}
.contact-panneau textarea { resize: vertical; min-height: 4.6rem; }
.contact-panneau input:focus, .contact-panneau textarea:focus {
  outline: none; border-color: var(--blanc);
}
.contact-panneau button {
  align-self: flex-start; padding: .5rem 1.25rem;
  border: 1px solid var(--blanc); background: transparent; color: var(--blanc);
  font: inherit; font-size: .88rem; cursor: pointer; transition: opacity .2s ease;
}
.contact-panneau button:hover { opacity: .72; }
.contact-note { margin: 0; font-size: .82rem; }
.contact-note.ok { color: var(--blanc); }
.contact-note.err { color: var(--blanc); border-left: 2px solid var(--grise); padding-left: .6rem; }
/* pot de miel : présent dans le DOM (les robots le remplissent) mais hors écran */
.contact-pot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* --- FAQ : questions repliables (accordéon) ---------------------------------
   <details>/<summary> natifs : un clic déroule la réponse, c'est accessible et
   sans JS. L'attribut name="faq" n'en laisse qu'une ouverte à la fois. */
.faq { font-size: 1rem; border-top: 1px solid var(--ligne); }
.qa { border-bottom: 1px solid var(--ligne); }

.qa summary {
  list-style: none;                 /* retire la flèche par défaut */
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: .9rem 0;
  color: var(--texte); cursor: pointer;
  transition: color .2s ease;
}
.qa summary::-webkit-details-marker { display: none; }   /* Safari */
.qa summary:hover { color: var(--blanc); }
.qa[open] summary { color: var(--blanc); font-weight: 500; }

/* Le chevron, dans l'esprit de ceux de la navigation : il pointe à droite,
   et bascule vers le bas quand la réponse s'ouvre. */
.qa summary::after {
  content: ""; flex: none;
  width: .45rem; height: .45rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .25s ease;
}
.qa[open] summary::after { transform: rotate(45deg); }

.reponse { padding: 0 0 1.15rem; max-width: 34rem; }
.reponse p { margin: 0 0 .9rem; }
.reponse p:last-child { margin-bottom: 0; }

.qa[open] .reponse { animation: deplier .28s ease both; }
@keyframes deplier {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .qa summary::after { transition: none; }
  .qa[open] .reponse { animation: none; }
}

/* --- Pages légales (confidentialité…) : une seule colonne de prose sobre --- */
.legal { max-width: 42rem; }
.legal h1 { font-weight: 500; font-size: 1.7rem; margin: 0 0 .4rem; color: var(--blanc); }
.legal-maj { margin: 0 0 1.8rem; color: var(--grise); font-size: .85rem; letter-spacing: .04em; }
.legal-intro { color: var(--texte); }
.legal-bloc { margin: 2.2rem 0 0; }
.legal-bloc h2 {
  font-weight: 500; font-size: 1.1rem; margin: 0 0 .7rem; color: var(--blanc);
}
.legal-bloc p { margin: 0 0 .9rem; }
.legal-bloc ul { margin: 0 0 .9rem; padding-left: 1.1rem; }
.legal-bloc li { margin: 0 0 .4rem; }
.legal-fin {
  margin: .9rem 0 0; padding-left: .7rem; border-left: 2px solid var(--ligne);
  color: var(--grise); font-size: .9rem;
}
/* Formulaire-type de rétractation : encadré sobre, posé à part */
.legal-modele {
  margin: .4rem 0 .2rem; padding: 1rem 1.1rem; border: 1px solid var(--ligne);
}
.legal-modele p { margin: 0 0 .6rem; color: var(--grise); }
.legal-modele p:last-child { margin-bottom: 0; }

/* --- Pied de page sur smartphone : barre propre, contact entièrement visible ---
   Desktop : le pied flotte dans le coin bas-droit (l'espace vide y est fait pour
   lui). Mobile : il chevauchait le corps du site, et le panneau de contact, ancré
   au pied fixe, n'apparaissait qu'à moitié. On repose donc le pied EN FLUX sous le
   contenu (sa propre barre, séparée par un filet), et le repli ouvert (contact ou
   langues) prend toute la largeur → le formulaire se voit en entier. Mobile seul. */
@media (max-width: 760px) {
  .pied {
    position: static; inset: auto;
    margin-top: 2.5rem;
    padding: 1.1rem 1.2rem calc(1.1rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--ligne);
    justify-content: center; gap: .55rem 1rem;
  }
  .pied > details[open] { flex: 1 0 100%; }   /* le repli ouvert occupe toute la barre */
  .contact-panneau, .langues-panneau {
    position: static; inset: auto; width: 100%; margin: .7rem 0 0;
  }
}