/*
Theme Name: Jérémie Walch
Author: Jérémie Walch
Description: Thème bloc sur mesure — portfolio de motion design 2D (Moonlight Thief). Accueil en blocs natifs, éditable dans Gutenberg.
Version: 1.3.9
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jeremie-walch
Tags: block-theme, full-site-editing, portfolio, one-column
*/

/* Toutes les cotes viennent de la maquette validée (Claude/site/styles.css), exprimées en u.

   Deux régimes, selon le rapport largeur / hauteur de la fenêtre (r) :
   - écran 16:9 ou 16:10 (r ≤ 2,12) : 1u = largeur / 1440, la composition de la maquette ;
   - écran 21:9 (r ≥ 2,3) : 1u = hauteur / 1000, pour que la largeur n'agrandisse plus tout.
   Entre les deux, chaque grandeur passe de l'un à l'autre en ligne droite, sans saut :
   min(régime 16:9, max(régime 21:9, droite qui les relie)).

   Spécificité : WordPress imprime le CSS des blocs et des mises en page (:root :where(...))
   après cette feuille. Les règles qui leur disputent une propriété sont donc qualifiées
   par leur parent (.reel .ecran plutôt que .ecran). */

:root {
  --vh: 1vh;
  --u: min(calc(100vw / 1440), max(calc(100 * var(--vh) / 1000), calc(0.70340 * var(--vh) - 0.26235vw)));
  --logo-centre: min(25vw, max(calc(40 * var(--vh)), calc(206.111 * var(--vh) - 72.222vw)));
  --vague-l: 100vw;
  --vague-h: calc(var(--vague-l) * 1748 / 3840);
  --vague-haut: min(29.514vw, max(calc(47.2 * var(--vh)), calc(243.581 * var(--vh) - 85.383vw)));
  --bleu: #4a86df;
  --jaune: #dfbe48;
  --blanc: #ffffff;
  --ardoise: #495059;
  --ecume: #eceee9;
  --galet: #e6e8e4;
  --trait: #eef0ec;
  --police: "Alegreya Sans SC", "Alegreya Sans", "Trebuchet MS", sans-serif;
}
@supports (height: 1svh) {
  :root { --vh: 1svh; }
}

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

html {
  background: var(--bleu);
  scroll-behavior: smooth;
  overflow-x: clip;
}

/* Le bleu du ciel est porté par html : body reste transparent. */
body {
  margin: 0;
  background: none;
  color: var(--blanc);
  font-family: var(--police);
  font-weight: 300;
  font-size: calc(33 * var(--u));
  line-height: 1.2;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; } /* height:auto obligatoire : sinon l'attribut height des blocs image l'emporte */
p { margin: 0; }

/* Neutralisation de l'espacement automatique : blockGap à 0 dans theme.json,
   et filet de sécurité à spécificité nulle — jamais .wp-block-group > * */
:where(.wp-block-group) > :where(*) { margin-block: 0; }
figure.wp-block-image,
figure.wp-block-video { margin: 0; }

.masque {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Texture « lumière tamisée » sur tout le site — les lecteurs vidéo passent au-dessus */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  background: url("assets/img/texture.jpg") 0 0 / calc(576 * var(--u)) repeat;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* ---------- En-tête ---------- */

.entete {
  position: absolute;
  top: 0; left: 0; right: 0;
}

/* La signature reste en haut de page (elle ne suit plus le défilement : elle se superposait
   au contenu). Ses vidéos sont en blanc sur noir : le mode « écran », posé sur le groupe entier,
   efface le noir (posé sur les vidéos, il serait enfermé dans le groupe et le noir resterait). */
.entete .signature {
  position: absolute;
  z-index: 70;
  left: calc(51 * var(--u));
  top: calc(31 * var(--u));
  width: calc(201 * var(--u));
  height: calc(46 * var(--u));
  mix-blend-mode: screen;
  cursor: pointer;
}
.signature .jw {
  position: absolute;
  left: calc(-94 * var(--u));
  top: calc(-86.6 * var(--u));
  width: calc(392 * var(--u));
  pointer-events: none;
}
.signature .jw video { display: block; width: 100%; height: auto; }
.signature .jw-boucle { opacity: 0; }
.signature .jw-boucle.actif { opacity: 1; }
.signature .jw-apparition.fini { opacity: 0; }

/* z-index 45 : au-dessus du ciel (sinon il capte les clics), sous la texture.
   « nav » obligatoire : le bloc navigation recopie sa classe sur la liste interne,
   qui serait sinon positionnée une seconde fois à l'intérieur du nav. */
nav.wp-block-navigation.menu {
  position: absolute;
  z-index: 45;
  top: calc(40 * var(--u));
  right: calc(49 * var(--u));
  gap: calc(45 * var(--u));
  font-size: calc(33 * var(--u));
  line-height: 1;
}
.wp-block-navigation.menu .wp-block-navigation__container { gap: calc(45 * var(--u)); }
.wp-block-navigation.menu .wp-block-navigation-item__content { padding: 0; transition: opacity .2s; }
.wp-block-navigation.menu .wp-block-navigation-item__content:hover { opacity: .75; }

/* Sous-titre : reste en haut de page, il ne suit pas le défilement comme la signature */
.entete .sous-titre {
  position: absolute;
  left: calc(51 * var(--u));
  top: calc(82.8 * var(--u));
  margin: 0;
  font-size: calc(22.5 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

/* Barre d'administration (connecté) : décaler ce qui est accroché en haut */
.admin-bar .entete { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .entete { top: 46px; }
}

/* ---------- Ciel, logo et vague ---------- */

/* Jonction vague / sable sans liseré : la vidéo dépasse de 4 px sous la scène (rognés),
   le sable remonte de 2 px dessus, et le bas de la scène est déjà jaune derrière la vidéo. */
.wp-block-group.scene {
  position: relative;
  height: calc(var(--vague-haut) + var(--vague-h));
  overflow: clip;
  background: linear-gradient(transparent calc(100% - 0.3 * var(--vague-h)), var(--jaune) 0);
}

.scene .vague {
  position: absolute;
  top: var(--vague-haut);
  left: 50%;
  width: var(--vague-l);
  height: calc(var(--vague-h) + 4px);
  margin: 0 0 0 calc(var(--vague-l) / -2);
}
.scene .vague video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Le logo occupe 444 × 448 px au centre de la vidéo 1920 × 1080 (centre à 51,1 % de la hauteur) */
.scene .logo-anim {
  position: absolute;
  top: calc(var(--logo-centre) - 396.4 * var(--u));
  left: 50%;
  width: calc(1379 * var(--u));
  margin: 0 0 0 calc(-689.5 * var(--u));
  mix-blend-mode: screen;
  pointer-events: none;
}
.scene .logo-anim video { display: block; width: 100%; height: auto; }

/* ---------- Sable ---------- */

.wp-block-group.sable {
  position: relative;
  margin-top: -2px;
  background: var(--jaune);
  padding-top: calc(44.3 * var(--u) + 2px);
}

.wp-block-heading.titre {
  margin: 0;
  font-size: calc(44 * var(--u));
  font-weight: 300;
  line-height: 1;
  text-align: center;
  color: var(--blanc);
}

/* Showreel */
.reel .ecran {
  position: relative;
  z-index: 60;
  width: calc(776 * var(--u));
  aspect-ratio: 16 / 9;
  margin: calc(34.2 * var(--u)) auto 0;
  background: #000;
}
.reel .ecran video { display: block; width: 100%; height: 100%; }

.reel .pitch,
.reel .pitch-suite,
.reel .pitch-suite-mobile {
  max-width: calc(960 * var(--u));
  margin: calc(42.5 * var(--u)) auto 0;
  font-size: calc(29.7 * var(--u));
  line-height: calc(37.1 * var(--u));
  color: var(--ardoise);
  text-align: center;
  hyphens: none;
}
.reel .pitch-suite {
  margin-top: calc(39.3 * var(--u));
  line-height: calc(40.35 * var(--u));
}
/* le retour avant « avec des projets… » ne sert qu'en mobile */
.reel .pitch br { display: none; }
/* le second paragraphe a sa propre version, découpée pour le téléphone */
.reel .pitch-suite-mobile { display: none; }

/* Productions */
.wp-block-group.productions { padding-top: calc(73.3 * var(--u)); }

/* z-index 55 : les miniatures passent au-dessus de la texture */
.productions .defile {
  position: relative;
  z-index: 55;
  margin-top: calc(46.7 * var(--u));
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.productions .defile.glisse { cursor: grabbing; }

.defile .piste {
  display: flex;
  gap: calc(56 * var(--u));
  width: max-content;
  will-change: transform;
}

.piste .vignette {
  position: relative;
  flex: 0 0 calc(381 * var(--u));
  aspect-ratio: 16 / 9;
  border-radius: calc(29 * var(--u));
  overflow: hidden;
  background: var(--blanc);
}
.vignette .wp-block-video { height: 100%; }
.vignette .wp-block-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* Le titre de la production est un vrai lien, étendu sur toute la miniature et invisible :
   il porte l'adresse de la vidéo complète, le focus clavier et le nom lu par les lecteurs d'écran. */
.vignette .vignette-lien {
  position: absolute;
  inset: 0;
  margin: 0;
}
.vignette .vignette-lien a {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 0;
  color: transparent;
  -webkit-user-drag: none;
}
.vignette .vignette-lien a:focus-visible {
  outline: 3px solid var(--blanc);
  outline-offset: -6px;
  border-radius: calc(29 * var(--u));
}

/* Clients : 3 rangées (5, 5, 4) sur une grille de 164 × 101, chaque logo à sa largeur
   relevée sur le PSD (--l, en u) ; un logo ajouté sans classe prend 110 */
.wp-block-group.clients { padding-top: calc(129.1 * var(--u)); }

.clients .logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: calc(820 * var(--u));
  margin: calc(32.3 * var(--u)) auto 0;
}
.logos > .wp-block-image {
  --l: 110;
  flex: 0 0 calc(164 * var(--u));
  height: calc(101 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
}
.logos > .wp-block-image img {
  display: block;
  width: calc(var(--l) * var(--u));
  max-width: 100%;
  height: auto;
}
.logos > .logo-disney { --l: 129.9; }
.logos > .logo-netflix { --l: 102.9; }
.logos > .logo-sanofi { --l: 102.9; }
.logos > .logo-candia { --l: 102.9; }
.logos > .logo-loreal { --l: 119.3; }
.logos > .logo-heineken { --l: 153.6; }
.logos > .logo-thea { --l: 102.9; }
.logos > .logo-novo-nordisk { --l: 105.8; }
.logos > .logo-place-de-la-gare { --l: 102.9; }
.logos > .logo-cogedim { --l: 97.3; }
.logos > .logo-pix { --l: 76.5; }
.logos > .logo-engie { --l: 126.6; }
.logos > .logo-credit-agricole { --l: 82.1; }
.logos > .logo-servier { --l: 128.8; }

/* Contact : le bloc entier est l'ancien réduit à 89,57 % (relevé sur le PSD), recentré */
.wp-block-group.contact {
  padding-top: calc(84.8 * var(--u));
  padding-bottom: calc(132.7 * var(--u));
}

.contact .formulaire {
  display: grid;
  grid-template-columns: calc(342.6 * var(--u)) minmax(0, 1fr);
  grid-template-areas: "champs direct";
  align-items: start;
  column-gap: calc(91.8 * var(--u));
  width: calc(707.6 * var(--u));
  margin: calc(53.9 * var(--u)) auto 0;
}

.formulaire .champs { grid-area: champs; }
.formulaire .champs > p:empty { display: none; }   /* wpautop du bloc code court */

.formulaire .champ { display: block; }
.formulaire .champ-libelle {
  display: block;
  font-size: calc(29.56 * var(--u));
  line-height: 1;
}
.formulaire .wpcf7-form-control-wrap { display: block; }
.formulaire .champ input,
.formulaire .champ textarea {
  display: block;
  width: 100%;
  height: calc(32.78 * var(--u));
  margin: calc(9.72 * var(--u)) 0 calc(6.54 * var(--u));
  padding: 0 calc(8.96 * var(--u));
  border: max(1.5px, calc(1.79 * var(--u))) solid var(--trait);
  border-radius: 0;
  background: transparent;
  color: var(--blanc);
  font: inherit;
  font-size: calc(23.29 * var(--u));
  outline: none;
}
.formulaire .champ textarea {
  height: calc(62.7 * var(--u));
  margin-bottom: 0;
  padding-top: calc(5.37 * var(--u));
  line-height: 1.2;
  resize: vertical;
}
.formulaire .champ input:focus,
.formulaire .champ textarea:focus { background: rgba(255, 255, 255, .12); }
.formulaire .champ .wpcf7-not-valid { border-color: var(--ardoise); }
.formulaire .wpcf7-not-valid-tip {
  margin: calc(-4 * var(--u)) 0 calc(6 * var(--u));
  font-size: calc(20 * var(--u));
  color: var(--ardoise);
}

/* Le bouton vit dans le formulaire (colonne de gauche) mais se centre sous les deux colonnes :
   (707,6 − 170,8) / 2 = 268,4u depuis le bord gauche du formulaire. */
.formulaire input.wpcf7-submit.envoyer {
  display: block;
  width: calc(170.8 * var(--u));
  height: calc(61.45 * var(--u));
  margin: calc(30.8 * var(--u)) 0 0 calc(268.4 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--galet);
  color: var(--ardoise);
  font: inherit;
  font-size: calc(29.56 * var(--u));
  line-height: 1;
  cursor: pointer;
  transition: background .2s;
}
.formulaire input.wpcf7-submit.envoyer:hover { background: var(--blanc); }
.formulaire .wpcf7-spinner { display: none; }
.formulaire .wpcf7 form .wpcf7-response-output {
  width: calc(707.6 * var(--u));
  margin: calc(24 * var(--u)) 0 0;
  padding: calc(10 * var(--u)) calc(16 * var(--u));
  border: max(1.5px, calc(2 * var(--u))) solid var(--trait);
  color: var(--blanc);
  font-size: calc(24 * var(--u));
  text-align: center;
}

.formulaire .direct { grid-area: direct; padding-top: calc(2.06 * var(--u)); }
.direct .logo-mlt {
  width: calc(189.9 * var(--u));
  margin: 0 0 0 calc(59.1 * var(--u));
}
.direct .logo-mlt img { display: block; width: 100%; height: auto; }
.direct .direct-texte {
  margin: calc(30.45 * var(--u)) 0 0;
  font-size: calc(30 * var(--u));
  line-height: calc(39.77 * var(--u));
  white-space: nowrap;
}
.direct .direct-texte a:hover { opacity: .75; }

/* ---------- Pied ---------- */

.wp-block-group.pied {
  height: calc(58.4 * var(--u));
  padding-top: calc(20.5 * var(--u));
  background: var(--ecume);
  color: var(--ardoise);
  text-align: center;
}
.pied p {
  margin: 0;
  font-size: calc(20 * var(--u));
  line-height: 1;
}
.pied a:hover { text-decoration: underline; text-underline-offset: .15em; }

/* ---------- Mentions légales et confidentialité ---------- */

.wp-block-group.page-legal {
  min-height: calc(100 * var(--vh) - 58.4 * var(--u));
  padding: calc(190 * var(--u)) calc(40 * var(--u)) calc(140 * var(--u));
  background: var(--jaune);
}
.wp-block-group.page-legal > * {
  max-width: calc(900 * var(--u));
  margin-left: auto;
  margin-right: auto;
}
.wp-block-group.page-legal > .wp-block-heading.titre { margin-bottom: calc(70 * var(--u)); }
.page-legal h2.wp-block-heading {
  margin-top: calc(56 * var(--u));
  margin-bottom: calc(16 * var(--u));
  font-size: calc(30 * var(--u));
  font-weight: 300;
  line-height: 1.1;
  color: var(--blanc);
}
.page-legal p {
  margin-bottom: calc(14 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: 1.5;
  color: var(--ardoise);
}
.page-legal p a { text-decoration: underline; text-underline-offset: .15em; }
.page-legal p a:hover { color: var(--blanc); }
.page-legal p.maj { margin-top: calc(56 * var(--u)); font-size: calc(18 * var(--u)); }

/* ---------- Pages secondaires (404, liste d'articles) ---------- */

.wp-block-group.page-simple {
  min-height: 80vh;
  padding: calc(220 * var(--u)) calc(60 * var(--u)) calc(160 * var(--u));
  text-align: center;
}
.page-simple .titre,
.page-simple .wp-block-post-title {
  margin: 0 0 calc(40 * var(--u));
  font-size: calc(44 * var(--u));
  font-weight: 300;
  line-height: 1.1;
  color: var(--blanc);
}
.page-simple p { color: var(--ardoise); }
.page-simple a:hover { opacity: .75; }

/* ---------- Visionneuse (créée par le script, sans contenu propre) ---------- */

.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .75);
  cursor: pointer;
}
.visionneuse[hidden] { display: none; }
.visionneuse video,
.visionneuse iframe {
  width: 50vw;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  background: #000;
  cursor: auto;
}

/* ---------- Bouton « remonter » (créé par le script, sans contenu propre) ----------
   Discret : petit, très transparent, flèche évidée (on voit le fond au travers), sur le bord droit.
   Le script le pose juste avant le pied de page, en « sticky » : il reste à --marge-bas du bas
   de l'écran, puis s'arrête à la même distance au-dessus du pied et défile avec la page,
   sans jamais le chevaucher. Ses marges négatives lui font n'occuper aucune place.
   z-index 80 : au-dessus des miniatures (55) qui défilent dessous, sous la visionneuse (100). */

.remonter {
  --taille: max(30px, calc(42 * var(--u)));
  --marge-bas: calc(40 * var(--u));
  position: sticky;
  bottom: var(--marge-bas);
  z-index: 80;
  display: block;
  width: var(--taille);
  height: var(--taille);
  margin: calc(-1 * (var(--taille) + var(--marge-bas))) calc(30 * var(--u)) var(--marge-bas) auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(12 * var(--u)));
  transition: opacity .3s, transform .3s, visibility 0s .3s;
}
.remonter.visible {
  opacity: .4;
  visibility: visible;
  transform: none;
  transition: opacity .3s, transform .3s, visibility 0s;
}
.remonter.visible:hover { opacity: .75; }
.remonter svg { display: block; width: 100%; height: 100%; }
/* zone de clic un peu plus large que le rond, invisible */
.remonter::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }

:where(a, button, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--blanc); outline-offset: 3px; }

/* ---------- Mobile ---------- */

@media (max-width: 860px) {
  /* Premier écran bleu, logo au centre ; la vague, élargie et recadrée pour garder
     du relief, laisse voir son écume en bas de cet écran, la jonction juste en dessous */
  :root {
    --u: calc(100vw / 640);
    --logo-centre: calc(46 * var(--vh));
    --vague-l: 220vw;
    --vague-haut: calc(100 * var(--vh) - 0.55 * var(--vague-h));
  }

  nav.wp-block-navigation.menu {
    right: calc(30 * var(--u));
    top: calc(44 * var(--u));
    font-size: calc(26 * var(--u));
  }
  .wp-block-navigation.menu,
  .wp-block-navigation.menu .wp-block-navigation__container { gap: calc(32 * var(--u)); }
  /* le sous-titre s'arrête à 331u, avant le menu (qui commence vers 361u) */
  .entete .sous-titre { font-size: calc(19 * var(--u)); }

  .reel .ecran { width: min(calc(776 * var(--u)), calc(100% - 32px)); }
  /* 26,5u : la plus longue ligne de la version mobile (« vous m’envoyez le brief… »)
     tient en une ligne quelle que soit la largeur du téléphone */
  .reel .pitch,
  .reel .pitch-suite-mobile {
    padding: 0 calc(46 * var(--u));
    font-size: calc(26.5 * var(--u));
    line-height: 1.35;
  }
  .reel .pitch-suite { display: none; }
  .reel .pitch-suite-mobile { display: block; margin-top: calc(28 * var(--u)); }
  .reel .pitch br { display: inline; }

  /* Logos en 3 colonnes justifiées : colonne de gauche calée à gauche, du milieu centrée,
     de droite calée à droite. Mêmes bords que les champs du formulaire (90u), loin du
     bouton « remonter » (62u). La dernière rangée, incomplète, reste centrée. */
  .clients .logos { width: calc(100% - 2 * 90 * var(--u)); }
  .logos > .wp-block-image { flex-basis: 33.333%; height: calc(98 * var(--u)); }
  .logos > .wp-block-image:nth-child(3n+1) { justify-content: flex-start; }
  .logos > .wp-block-image:nth-child(3n) { justify-content: flex-end; }
  .logos > .wp-block-image:nth-child(3n+1):nth-last-child(-n+2) { justify-content: center; }
  .logos > .wp-block-image img { width: calc(var(--l) * var(--u) * 0.9); max-width: 85%; }

  /* 90u de marge par côté : les champs s'arrêtent loin du bouton « remonter » (62u) */
  .contact .formulaire {
    width: calc(100% - 2 * 90 * var(--u));
    max-width: 480px;
    grid-template-columns: 1fr;
    grid-template-areas: "champs" "direct";
  }
  .formulaire input.wpcf7-submit.envoyer { margin: calc(28.8 * var(--u)) auto 0; }
  .formulaire .wpcf7 form .wpcf7-response-output { width: auto; }
  .formulaire .direct { padding-top: calc(70 * var(--u)); text-align: center; }
  .direct .logo-mlt { margin: 0 auto; }
  .direct .direct-texte { white-space: normal; }

  .visionneuse video,
  .visionneuse iframe { width: 92vw; }

  /* Dans la marge droite : il s'arrête à 62u du bord, avant la fin de la dernière ligne du texte
     de présentation (66u), les logos clients et le formulaire (90u). */
  .remonter {
    --taille: calc(50 * var(--u));
    --marge-bas: calc(30 * var(--u));
    margin-right: calc(12 * var(--u));
  }

  /* Le pied complet ferait 105 % de la largeur : on retire le métier (déjà dans le
     sous-titre), la ville reste visible pour Google, qui lit la version mobile. */
  .pied .pied-metier { display: none; }

  .wp-block-group.page-legal { padding: calc(170 * var(--u)) calc(46 * var(--u)) calc(120 * var(--u)); }
  .page-legal h2.wp-block-heading { font-size: calc(38 * var(--u)); }
  .page-legal p { font-size: calc(29 * var(--u)); }
  .page-legal p.maj { font-size: calc(24 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}