/*
Theme Name: Axel Hoarau
Theme URI: https://axelhoarau.com
Author: Axel Hoarau
Description: Thème bloc sur mesure du site d'Axel Hoarau, photographe. Toutes les pages sont en blocs natifs, modifiables dans l'éditeur.
Version: 1.2.4
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: axelhoarau
*/

/* Axel Hoarau — maquette
   Registre relevé sur la référence : une seule sans-serif grotesque, capitales,
   aucun accent, blanc froid, photo plein cadre, angles vifs, nom à gauche, pages à droite. */

/* Police hébergée sur le site (aucun appel à Google : pas de transfert d'adresse IP).
   Inter Tight, licence SIL Open Font License, police variable 500–600. */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url(fonts/inter-tight-latin.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: "Inter Tight";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url(fonts/inter-tight-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --blanc: #ffffff;
  --noir: #0a0a0a;
  --police: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* tailles adaptatives à la largeur de l'écran
     menu : 14 px sur téléphone, ~23 px à 1440 px, 30 px maximum
     texte : 13 px sur téléphone, ~15 px à 1440 px, 18 px maximum */
  --corps: clamp(14px, 1.6vw, 30px);
  --texte: clamp(13px, 1.05vw, 18px);
  --petit: clamp(8px, 0.6vw, 11px);
  --marge: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--police);
  font-weight: 600;
  font-size: var(--texte);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p, ul, figure, h1, h2 { margin: 0; padding: 0; font: inherit; }
ul { list-style: none; }

/* — Navigation : le nom à gauche, les pages à droite — */
.entete { position: relative; z-index: 10; }
.nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px var(--marge);
  font-size: var(--corps);
  line-height: 1.2;
}
.nav-pages { display: flex; gap: 1.6em; }
.nav-ig { margin-left: 1.6em; }   /* IG mis à part des pages */
.nav a { transition: opacity .2s; }
.nav a:hover { opacity: .6; }
.nav-pages a[aria-current="page"] { opacity: .4; }

/* sur l'accueil, le menu flotte en blanc sur la photo */
.accueil .entete { position: absolute; inset: 0 0 auto 0; }
.accueil .nav { color: var(--blanc); }

/* — Hero : l'accueil n'est qu'une photo — */
.accueil { overflow: hidden; }
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--noir);
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  cursor: pointer;
}
.hero-bureau.est-active { display: block; }
/* écran en portrait (téléphone, tablette tenue droite) : la série verticale */
@media (orientation: portrait) {
  .hero-bureau.est-active { display: none; }
  .hero-mobile.est-active { display: block; }
}
.hero-copyright,
.hero-legal,
.pied {
  font-size: var(--petit);
  letter-spacing: 0.02em;
}
.hero-copyright {
  position: absolute;
  left: var(--marge);
  bottom: 14px;
  color: var(--blanc);
  opacity: .8;
}

.hero-legal {
  position: absolute;
  right: var(--marge);
  bottom: 14px;
  display: flex;
  gap: 1.6em;
  color: var(--blanc);
  opacity: .8;
}
.hero-legal a:hover, .pied-legal a:hover { opacity: .6; }

/* — Pied des pages internes : le copyright et les pages légales, en tout petit — */
.pied {
  display: flex;
  justify-content: space-between;
  padding: 40px var(--marge) 14px;
}
.pied-legal { display: flex; gap: 1.6em; }

/* — Pages légales : texte courant en minuscules, pour la lecture — */
.legal {
  max-width: 46em;
  padding: clamp(32px, 5vw, 80px) var(--marge) 0;
}
.legal h1 { font-size: var(--corps); margin-bottom: 1.6em; }
.legal-date { margin: -2em 0 2.4em; opacity: .4; text-transform: none; }
.legal section + section { margin-top: 2em; }
.legal h2 { margin-bottom: .6em; }
.legal p { text-transform: none; line-height: 1.5; font-weight: 500; letter-spacing: 0; }
.legal p + p { margin-top: .8em; }
.legal a { border-bottom: 1px solid currentColor; }
.legal a:hover { opacity: .6; }

/* — Portfolio : une ligne par catégorie, photo à gauche, titre et description à droite — */
.series {
  padding: clamp(40px, 6vw, 110px) 5.7vw 0;
}
.serie {
  display: grid;
  grid-template-columns: 34vw 1fr;
  column-gap: 3.6vw;
  align-items: start;
}
.serie + .serie { margin-top: 12px; }
.serie-photo img {
  width: 100%;
  aspect-ratio: 10 / 9;
  object-fit: cover;
}
.serie-texte {
  padding-top: .3em;
  font-size: clamp(18px, 2.3vw, 44px);
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.serie-description {
  margin-top: 1.2em;
  max-width: 30em;
  font-size: var(--texte);
  line-height: 1.35;
  opacity: .5;
  text-wrap: pretty;
}
.serie-photo img, .serie-texte { transition: opacity .25s; }
.serie:hover .serie-photo img { opacity: .85; }
.serie:hover .serie-titre { opacity: .6; }

/* — Galerie d'une catégorie : une photo par écran, centrée, numérotée — */
.galerie-tete {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  row-gap: .6em;
  padding: clamp(48px, 7vw, 130px) 5.7vw 0;
  font-size: clamp(18px, 2.3vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.galerie-total { font-size: var(--texte); opacity: .4; }
.galerie-description {
  grid-column: 1 / -1;
  max-width: 34em;
  font-size: var(--texte);
  opacity: .4;
}

.planches {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(64px, 14vh, 180px);
  padding: clamp(64px, 14vh, 180px) var(--marge) 0;
}
.planche { display: flex; flex-direction: column; cursor: zoom-in; }
/* la place de chaque photo est réservée avant son chargement : le navigateur tire
   le format des attributs width/height de l'image. Portrait : 86 % de la hauteur d'écran ;
   paysage : 72 % de la largeur au plus. */
.planches .planche img { max-width: none; }
.planches .planche-portrait img { height: 86vh; width: auto; }
.planches .planche-paysage img { width: min(72vw, calc(86vh * 1.5)); height: auto; }
.planches .planche figcaption {
  margin: 0;
  padding-top: 10px;
  font-size: var(--petit);
  letter-spacing: 0.04em;
  opacity: .5;
}

.galerie-fin {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: clamp(96px, 20vh, 240px) 5.7vw 0;
  font-size: clamp(18px, 2.3vw, 44px);
  letter-spacing: -0.015em;
}
.galerie-retour { font-size: var(--texte); opacity: .4; }
.galerie-suivante-etiquette { font-size: var(--texte); opacity: .4; margin-bottom: .3em; text-align: right; }
.galerie-fin a { transition: opacity .2s; }
.galerie-fin a:hover { opacity: .6; }

/* — Visionneuse plein écran — */
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  background: var(--noir);
  color: var(--blanc);
}
.visionneuse.est-ouverte { display: block; }
.visionneuse-photo {
  position: absolute;
  inset: 64px var(--marge);
  width: calc(100% - 2 * var(--marge));
  height: calc(100% - 128px);
  object-fit: contain;
}
.visionneuse button {
  position: absolute;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  font-size: var(--corps);
  text-transform: uppercase;
  cursor: pointer;
}
.visionneuse button:hover { opacity: .6; }
.v-fermer { top: 18px; right: var(--marge); }
.v-compte { position: absolute; top: 18px; left: var(--marge); font-size: var(--corps); }
.v-prec { bottom: 18px; left: var(--marge); }
.v-suiv { bottom: 18px; right: var(--marge); }
.visionneuse-zone { position: absolute; inset: 64px 0; }
.v-gauche, .v-droite { position: absolute; top: 0; bottom: 0; width: 50%; }
.v-gauche { left: 0; cursor: w-resize; }
.v-droite { right: 0; cursor: e-resize; }

/* — About : la photo à gauche, le texte à droite — */
.apropos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: var(--marge);
  padding: clamp(8px, 3vh, 40px) var(--marge) 0;
}
/* la photo occupe toute la hauteur disponible : la page tient dans l'écran */
.apropos-photo { min-height: 0; }
.apropos-photo img { width: 100%; height: 100%; object-fit: cover; }
.apropos-texte { max-width: 38em; font-size: clamp(12px, 0.98vw, 17px); }
.bloc + .bloc { margin-top: clamp(1em, 3.5vh, 2.6em); }
.bloc-titre { margin-bottom: clamp(.3em, 1.1vh, .8em); opacity: .4; }
.bloc p + p { margin-top: clamp(.4em, 1.1vh, .8em); }
/* listes sur une ligne, séparées par des virgules */
.liste { display: flex; flex-wrap: wrap; gap: 0 .35em; }
.liste li:not(:last-child)::after { content: ","; }
/* parcours : une ligne par expérience */
.liste-parcours li + li { margin-top: .2em; }
.lien-souligne { border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
.lien-souligne:hover { opacity: .6; }

/* — Contact : coordonnées à gauche, formulaire à droite — */
/* la page Contact tient dans un seul écran : en-tête, contenu, pied */
/* pages About et Contact : tout tient dans un seul écran (en-tête, contenu, pied) */
.page-ecran { display: flex; flex-direction: column; height: 100vh; height: 100svh; }
.page-ecran main { flex: 1 1 auto; min-height: 0; }
.page-ecran .pied { padding-top: 14px; }
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--marge);
  padding: clamp(8px, 3vh, 40px) var(--marge) 0;
}
.coordonnees { font-size: var(--corps); line-height: 1.2; }
.coordonnees > * + * { margin-top: 1.2em; }
.coordonnees .etiquette { display: block; font-size: var(--texte); opacity: .4; margin-bottom: .2em; }
.coordonnees a:hover { opacity: .6; }

.formulaire { max-width: 40em; }
.formulaire .champ { display: block; margin-bottom: clamp(.9em, 3vh, 1.8em); }
.formulaire .champ span { display: block; margin-bottom: .5em; opacity: .4; }
.formulaire input,
.formulaire textarea {
  display: block;
  width: 100%;
  padding: .4em 0;
  border: 0;
  border-bottom: 1.5px solid var(--noir);
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-transform: none;
  outline: none;
}
.formulaire textarea { resize: vertical; height: clamp(3.5em, 14vh, 7.5em); min-height: 3.5em; }
.formulaire input:focus,
.formulaire textarea:focus { border-bottom-width: 3px; padding-bottom: calc(.4em - 1.5px); }
.formulaire .envoyer {
  border: 0;
  border-bottom: 1.5px solid currentColor;
  padding: 0 0 1px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--corps);
  text-transform: uppercase;
  cursor: pointer;
}
.formulaire .envoyer:hover { opacity: .6; }
.formulaire-rgpd {
  margin-top: clamp(.8em, 2.5vh, 1.6em);
  font-size: var(--petit);
  letter-spacing: 0.02em;
  opacity: .5;
}
.formulaire-rgpd a { border-bottom: 1px solid currentColor; }

/* — Mobile — */
@media (max-width: 760px) {
  /* About : le texte personnel est trop long pour un écran de téléphone avec la photo ;
     la page défile, la photo garde son format portrait en tête */
  .page-ecran:has(.apropos) { height: auto; }
  .page-ecran .apropos { grid-template-rows: auto auto; }
  .page-ecran .apropos .apropos-photo img { height: auto; aspect-ratio: 4 / 5; }
  .apropos-texte { font-size: 14px; }
  :root { --marge: 14px; }
  .nav-pages { gap: 12px; }
  .nav-ig { margin-left: 0; }
  .serie { grid-template-columns: 1fr; }
  .planches { gap: 56px; padding-top: 48px; }
  .planches .planche-portrait img, .planches .planche-paysage img { width: calc(100vw - 2 * var(--marge)); height: auto; }
  .galerie-tete, .galerie-fin { padding-left: var(--marge); padding-right: var(--marge); }
  .serie + .serie { margin-top: 48px; }
  .serie-texte { padding-top: 14px; }
  .serie-description { margin-top: .6em; }
  .apropos { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: clamp(14px, 2.5vh, 24px); padding-bottom: 8px; }
  .contact { grid-template-columns: 1fr; align-content: start; gap: clamp(20px, 4vh, 40px); }
  .coordonnees > * + * { margin-top: .7em; }
  .formulaire .champ span { margin-bottom: .2em; }
  .visionneuse-photo { inset: 56px 0; width: 100%; height: calc(100% - 112px); }
}

/* ==========================================================================
   Adaptations WordPress — ajoutées au CSS de la maquette par outils/vers-wordpress.js.
   Le balisage des blocs diffère un peu de la maquette (figure autour des images,
   enveloppes .wp-site-blocks et .wp-block-post-content, menu core/navigation) :
   ces règles rétablissent le même rendu. Les styles de blocs étant imprimés après
   cette feuille, les surcharges sont plus spécifiques, jamais plus tardives.
   ========================================================================== */

/* Espacement automatique de Gutenberg : coupé dans theme.json (blockGap 0),
   filet de sécurité à spécificité nulle pour ne jamais écraser les marges du design. */
:where(.wp-block-group) > :where(*),
:where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image { margin: 0; }
.wp-block-image figcaption.wp-element-caption { margin: 0; }

/* — Menu : core/navigation à la place des liens de la maquette — */
.wp-block-navigation.nav-pages { font-size: inherit; gap: 0; }
.wp-block-navigation.nav-pages .wp-block-navigation__container { gap: 1.6em; }
.wp-block-navigation.nav-pages .wp-block-navigation-item__content { padding: 0; color: inherit; }
.wp-block-navigation.nav-pages .nav-ig { margin-left: 1.6em; }
.nav-nom a { color: inherit; }
/* page courante grisée, galeries du portfolio comprises */
.rubrique-portfolio .nav-portfolio .wp-block-navigation-item__content,
.rubrique-about .nav-about .wp-block-navigation-item__content,
.rubrique-contact .nav-contact .wp-block-navigation-item__content { opacity: .4; }

/* — Accueil : les bannières sont des blocs image (figure > img) — */
.hero .hero-photo { margin: 0; }
.hero .hero-photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* — Portfolio et About : images dans leur figure — */
.series .serie-photo img { width: 100%; aspect-ratio: 10 / 9; height: auto; object-fit: cover; }
.series .serie-photo a { display: block; }
.serie-titre a, .serie-description a { color: inherit; }
.apropos .apropos-photo { height: 100%; }
.apropos .apropos-photo img { width: 100%; height: 100%; object-fit: cover; }
.bloc-lien a { border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
.bloc-lien a:hover { opacity: .6; }

/* — Galeries — */
.galerie-fin { padding-bottom: 0; }
.galerie-suivante-titre a, .galerie-retour a { color: inherit; }

/* — About et Contact tiennent dans un écran : la hauteur passe par les enveloppes de WordPress — */
.page-ecran .wp-site-blocks {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.page-ecran .wp-site-blocks > main,
.page-ecran .wp-block-post-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.page-ecran .apropos,
.page-ecran .contact { flex: 1 1 auto; min-height: 0; }

/* — Contact : blocs groupe à la place de la liste de la maquette — */
.coordonnees .etiquette { display: block; }
.coordonnees a { color: inherit; }

/* — Contact Form 7 — */
.formulaire .wpcf7-form-control-wrap { display: block; }
.formulaire .wpcf7-not-valid-tip { display: block; margin-top: .4em; font-size: var(--petit); text-transform: uppercase; }
.formulaire .wpcf7-response-output { margin: 1em 0 0 !important; padding: 0 !important; border: 0 !important; font-size: var(--petit); }
.formulaire .wpcf7-spinner { display: none; }
.formulaire .screen-reader-response { position: absolute; left: -9999px; }

/* — Pages légales — */
.legal a { color: inherit; }

/* — Mobile — */
@media (max-width: 760px) {
  .wp-block-navigation.nav-pages .wp-block-navigation__container { gap: 12px; }
  .wp-block-navigation.nav-pages .nav-ig { margin-left: 0; }
}

/* Pages légales : une section par bloc groupe */
.legal .legal-section + .legal-section { margin-top: 2em; }

/* Numéros des galeries : WordPress grise les légendes d'image (#555), la maquette les veut en noir à 50 % */
.planches .planche .wp-element-caption { color: inherit; }

/* Contact Form 7 rend le bouton en <input type="submit"> : il ne doit pas prendre la largeur des champs */
.formulaire input.envoyer { display: inline-block; width: auto; padding: 0 0 1px; }

/* Sélecteur de langue : à côté d'IG, même espacement que les pages */
.wp-block-navigation.nav-pages .nav-langue a { color: inherit; }
/* le menu tient toujours sur une ligne, même en français (« À propos ») */
.wp-block-navigation.nav-pages .wp-block-navigation__container { flex-wrap: nowrap; }
.wp-block-navigation.nav-pages .wp-block-navigation-item__content,
.nav-nom { white-space: nowrap; }
@media (max-width: 420px) {
  .nav { font-size: min(13px, 3.2vw); gap: 8px; }
  .wp-block-navigation.nav-pages .wp-block-navigation__container { gap: min(9px, 2.2vw); }
}

/* Titre réservé aux moteurs et aux lecteurs d'écran */
.titre-invisible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Téléphone : zone de clic agrandie sur les petits liens, sans changer la mise en page */
@media (max-width: 760px) {
  .nav a, .pied-legal a, .hero-legal a { position: relative; }
  .nav a::after, .pied-legal a::after, .hero-legal a::after {
    content: "";
    position: absolute;
    inset: -8px -4px;
  }
}

/* Téléphone : le nom sur une ligne, le menu dessous en plus grand ; petits textes lisibles */
@media (max-width: 760px) {
  :root { --petit: 11px; }
  .nav { flex-wrap: wrap; font-size: 15px; gap: 6px 0; padding-top: 14px; padding-bottom: 12px; }
  .nav-nom, .wp-block-navigation.nav-pages { flex: 0 0 100%; }
  .wp-block-navigation.nav-pages .wp-block-navigation__container { justify-content: space-between; gap: 8px; width: 100%; }
  .pied { flex-wrap: wrap; gap: 4px 16px; }
  .pied p, .pied-legal a, .hero-legal a { white-space: nowrap; }
}
@media (max-width: 340px) {
  :root { --petit: 9px; }
  .nav { font-size: 13px; }
}

/* CGV : barème d'annulation et listes */
.legal .wp-block-list { text-transform: none; line-height: 1.5; font-weight: 500; letter-spacing: 0; margin: .8em 0; }
.legal .wp-block-list li + li { margin-top: .4em; }
.legal .wp-block-table { margin: .8em 0; overflow-x: auto; }
.legal .wp-block-table table { border-collapse: collapse; width: 100%; text-transform: none; letter-spacing: 0; font-weight: 500; }
.legal .wp-block-table th, .legal .wp-block-table td { border: 0; border-bottom: 1px solid currentColor; padding: .5em 1em .5em 0; text-align: left; }
.legal .wp-block-table th { font-weight: 600; }

/* Accueil sur téléphone : le copyright passe au-dessus des liens légaux */
@media (max-width: 760px) {
  .hero-copyright { bottom: 32px; }
}