/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  Justine Viala — Architecte HMONP · Montpellier                      ║
   ║  Feuille de styles principale                                         ║
   ║  Organisation :                                                       ║
   ║   1. Variables (couleurs, easing)                                     ║
   ║   2. Réinitialisation & accessibilité                                 ║
   ║   4. Lien d'évitement                                                 ║
   ║   5. Écran de chargement                                              ║
   ║   6. Curseur personnalisé & barre de scroll                           ║
   ║   7. Header & navigation                                              ║
   ║   8. Section ABOUT                                                    ║
   ║   9. Barre de services                                                ║
   ║  10. Missions + accordéon des étapes                                  ║
   ║  11. Collage de photos (pêle-mêle)                                    ║
   ║  12. Section OPA                                                      ║
   ║  13. Section CONTACT + formulaire                                     ║
   ║  14. Footer                                                           ║
   ║  15. Animations « reveal » au scroll                                  ║
   ║  16. Micro-interactions au survol                                     ║
   ║  17. Responsive (mobile)                                              ║
   ║  18. Page OPA (opa.html)                                              ║
   ╚══════════════════════════════════════════════════════════════════════╝ */


/* ═══════════════════════════════════════════════════════════════════════
   0. POLICES — Poppins (utilisée pour les onglets du header)
   ═══════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}

/* Simplon (page OPA) — ATTENTION : fichiers « Trial » (licence usage personnel).
   Ces versions d'essai n'ont que les lettres A–Z sans accent : chiffres 1–9,
   ponctuation (' : ? ! @ « » – —) absents et accents (é è à ç ô…) remplacés
   par la lettre nue. La plage Unicode déclarée limite Simplon aux glyphes
   fiables ; le reste bascule sur la police suivante (voir --opa-norm / --opa-mono).
   Avec les fichiers Simplon complets, il suffira de retirer ces plages. */

/* Simplon Mono — textes de la page OPA */
@font-face {
  font-family: 'Simplon Mono';
  src: url('../fonts/SimplonMono-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  unicode-range: U+0020, U+002C-002F, U+0041-005A, U+0061-007A;
  font-display: swap;
}
@font-face {
  font-family: 'Simplon Mono';
  src: url('../fonts/SimplonMono-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  unicode-range: U+0020, U+002C-002F, U+0041-005A, U+0061-007A;
  font-display: swap;
}
@font-face {
  font-family: 'Simplon Mono';
  src: url('../fonts/SimplonMono-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  unicode-range: U+0020, U+002C-002F, U+0041-005A, U+0061-007A;
  font-display: swap;
}
@font-face {
  font-family: 'Simplon Mono';
  src: url('../fonts/SimplonMono-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  unicode-range: U+0020, U+002C-002F, U+0041-005A, U+0061-007A;
  font-display: swap;
}

/* Simplon Norm — titres, gros chiffres, navigation et footer de la page OPA */
@font-face {
  font-family: 'Simplon Norm';
  src: url('../fonts/SimplonNorm-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  unicode-range: U+0020, U+002C-002F, U+0041-005A, U+0061-007A;
  font-display: swap;
}
@font-face {
  font-family: 'Simplon Norm';
  src: url('../fonts/SimplonNorm-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  unicode-range: U+0020, U+002C-002F, U+0041-005A, U+0061-007A;
  font-display: swap;
}
@font-face {
  font-family: 'Simplon Norm';
  src: url('../fonts/SimplonNorm-RegularItalic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  unicode-range: U+0020, U+002C-002F, U+0041-005A, U+0061-007A;
  font-display: swap;
}
@font-face {
  font-family: 'Simplon Norm';
  src: url('../fonts/SimplonNorm-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  unicode-range: U+0020, U+002C-002F, U+0041-005A, U+0061-007A;
  font-display: swap;
}
@font-face {
  font-family: 'Simplon Norm';
  src: url('../fonts/SimplonNorm-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  unicode-range: U+0020, U+002C-002F, U+0041-005A, U+0061-007A;
  font-display: swap;
}
@font-face {
  font-family: 'Simplon Norm';
  src: url('../fonts/SimplonNorm-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  unicode-range: U+0020, U+002C-002F, U+0041-005A, U+0061-007A;
  font-display: swap;
}


/* ═══════════════════════════════════════════════════════════════════════
   1. VARIABLES — palette de couleurs et courbes d'animation réutilisables
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --blue:        #62769e;                          /* Couleur signature : bleu de la maquette */
  --blue-dark:   #4d5e84;                          /* Variante plus foncée pour les hovers/contrastes */
  --cream:       #f3f0ea;                          /* Beige doux pour cartes secondaires */
  --paper:       #fefcf9;                          /* Fond uni, sans grain */
  --paper-soft:  #f7f0de;                          /* Variante plus claire pour les cartes du collage */
  --dark:        #303030;                          /* Gris anthracite : couleur unique pour tous les textes du site */
  --gray:        #6e6e6e;                          /* Gris des textes secondaires (#888 passait sous le contraste AA sur le fond papier) */
  --light-line:  rgba(0, 0, 0, 0.1);              /* Couleur des séparateurs et bordures fines */
  --dotted:      rgba(48, 48, 48, 0.25);          /* Filets pointillés (texte et liste des étapes) */
  --content-w:   860px;                            /* Largeur de la colonne de contenu (maquette) */
  --gutter:      3rem;                             /* Marge latérale minimale */

  /* Courbes d'animation (« easing ») partagées pour cohérence visuelle */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.19, 1, 0.22, 1);
}


/* ═══════════════════════════════════════════════════════════════════════
   2. RÉINITIALISATION & ACCESSIBILITÉ
   ═══════════════════════════════════════════════════════════════════════ */

/* Reset universel : marges/paddings à zéro, box-sizing prévisible */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Curseur natif masqué partout — remplacé par .custom-cursor
   On double la règle universelle * avec des sélecteurs explicites car certains navigateurs
   (Safari Windows, Firefox anciens) ignorent `*` pour les éléments de formulaire et de lien
   à cause des styles user-agent qui ont une spécificité plus forte. */
*, *::before, *::after,
html, body,
a, button, input, textarea, select, option, label, [role="button"] {
  cursor: none !important;
}

/* Réglages globaux du document */
html {
  scroll-behavior: smooth;                         /* Scroll fluide pour les ancres internes */
  -webkit-font-smoothing: antialiased;             /* Lissage des polices (Safari/Chrome) */
  -moz-osx-font-smoothing: grayscale;              /* Lissage sur macOS Firefox */
  text-rendering: optimizeLegibility;              /* Privilégie la lisibilité aux ligatures */
  -webkit-text-size-adjust: 100%;                 /* iOS n'agrandit pas le texte en paysage */
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;        /* Pas de flash gris au toucher */
}

/* Sélection de texte aux couleurs de la marque */
::selection      { background: var(--blue); color: #fff; }
::-moz-selection { background: var(--blue); color: #fff; }

/* Focus accessible : visible UNIQUEMENT au clavier (jamais à la souris) */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Scrollbar discrète aux couleurs de la marque */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(98, 118, 158, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--blue); }

/* Filet de sécurité : une entrée animée ne doit jamais rendre la page
   scrollable horizontalement. `clip` (et non `hidden`) ne crée pas de
   conteneur de défilement, donc position: sticky continue de fonctionner. */
html { overflow-x: clip; }

/* Sur écrans tactiles : on rétablit le curseur natif et on cache le custom */
@media (hover: none) {
  * { cursor: auto !important; }
  .custom-cursor { display: none !important; }
}

/* Respect des préférences utilisateur « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Corps du document : fond papier crème, police monospace type machine à écrire */
body {
  font-family: 'Courier New', Courier, monospace;
  color: var(--dark);
  background: var(--paper);
  overflow-x: hidden;
}

/* Bloque le scroll pendant l'écran de chargement */
body.is-loading { overflow: hidden; }


/* ═══════════════════════════════════════════════════════════════════════
   4. LIEN D'ÉVITEMENT (skip link) — accessibilité clavier
   ═══════════════════════════════════════════════════════════════════════ */
.skip-link {
  position: absolute;
  top: -100px;                                     /* Caché hors viewport par défaut */
  left: 1rem;
  background: var(--dark);
  color: #fff;
  padding: 0.7rem 1.2rem;
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  z-index: 10000;
  transition: top 0.25s ease;
}
.skip-link:focus { top: 1rem; }                    /* Apparaît quand on tabule dessus */


/* ═══════════════════════════════════════════════════════════════════════
   5. ÉCRAN DE CHARGEMENT
   - Fond bleu plein écran, 5 logos cyclent au centre
   - Glisse vers le haut à la fin (translateY -100%)
   ═══════════════════════════════════════════════════════════════════════ */
#loadingPage {
  position: fixed;
  inset: 0;
  background: var(--blue);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}

#loadingPage.fade-out { transform: translateY(-100%); }

.loading-logo-wrap {
  position: relative;
  width: 200px;
  height: 200px;
}

/* Chaque logo de l'animation : superposé en absolu, opacité gérée en JS */
.loading-logo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Le visuel à l'intérieur de chaque logo (SVG inline OU <img> chargé depuis assets) */
.loading-logo svg,
.loading-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;        /* Garde le ratio des SVG depuis le dossier PAGE ATTENTE */
  display: block;
  transform-origin: center center;
}

/* Rééquilibre les tailles : LOGO 1, 2, 5 sont au format A4 portrait (595×842)
   et apparaissent plus petits que LOGO 4, qui est carré.
   On les agrandit + on les recentre verticalement pour que tous aient la
   même taille visuelle et soient parfaitement centrés dans le cadre. */
.loading-logo.ll1 img,
.loading-logo.ll2 img,
.loading-logo.ll5 img {
  transform: scale(1.42) translateY(-3%);
}

/* LOGO 5 (badge « justine · archi. · mtpl. · viala ») : son dessin n'est pas
   centré dans son plan de travail A4 — il ressortait de 21 px à droite et
   6 px plus bas que le logo 1. On le recale sur le même axe (mesuré sur le rendu).
   La translation s'applique avant l'agrandissement : −21 px à l'écran = −14,6 px × 1,42. */
.loading-logo.ll5 img {
  transform: scale(1.42) translate(-7.32%, -5.11%);
}


/* ═══════════════════════════════════════════════════════════════════════
   6. CURSEUR PERSONNALISÉ + BARRE DE PROGRESSION DE SCROLL
   ═══════════════════════════════════════════════════════════════════════ */
.custom-cursor {
  position: fixed;
  width: 10px;
  height: 10px;
  background: var(--blue);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);                /* Centré sur la position de la souris */
  transition: transform 0.18s var(--ease-out-quart),
              width 0.3s var(--ease-out-quart),
              height 0.3s var(--ease-out-quart),
              background 0.3s ease,
              opacity 0.3s ease;
}

/* Au survol d'un élément cliquable : le curseur grossit */
.custom-cursor.is-hovering {
  width: 32px;
  height: 32px;
  background: var(--blue);
  opacity: 0.85;
}

/* Au clic : il se contracte légèrement */
.custom-cursor.is-clicking { transform: translate(-50%, -50%) scale(0.7); }

/* Mince barre de progression du scroll, en haut de la fenêtre */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0%;                                       /* Mis à jour en JS sur l'événement scroll */
  height: 2px;
  background: var(--blue);
  z-index: 9997;
  transition: width 0.1s linear;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   7. HEADER + NAVIGATION
   ═══════════════════════════════════════════════════════════════════════ */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3rem;
  z-index: 1000;
}

/* Lien-conteneur du logo header : 5 versions empilées en absolu (animation au survol) */
.logo-header {
  display: block;
  width: 76px;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-header-logos {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.logo-header-logo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.22s ease;
}

/* Le 1er logo (bleu plein) est visible par défaut */
.logo-header-logo.lh1 { opacity: 1; }

/* Support à la fois pour <svg> inline et <img> chargé depuis assets */
.logo-header-logo svg,
.logo-header-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Logo de Justine un peu plus grand (+25 %). On agrandit le dessin et non la
   boîte : le header garde sa hauteur de 80 px et la nav ne bouge pas.
   Ciblé sur #logoHeader pour ne pas grossir le logo OPA de opa.html. */
#logoHeader .logo-header-logo img {
  transform: scale(1.25);
}

/* Navigation principale (police Poppins, sans soulignement) */
header nav {
  display: flex;
  gap: 2.5rem;
  align-items: center;
}

header nav a {
  text-decoration: none;
  color: var(--dark);
  font-family: 'Poppins', sans-serif;        /* Poppins pour les onglets (Regular 400) */
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}

/* Lien actif (calculé par scrollspy en JS) ou survolé : passe au bleu */
header nav a:hover,
header nav a.active { color: var(--blue); }

/* Petite pastille rouge-cuivré entre « contact » et « opa » */
.nav-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #835b52;                        /* Teinte demandée */
  flex-shrink: 0;
  align-self: center;
}

/* Bouton hamburger (visible uniquement en mobile) */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--dark);
  transition: 0.3s;
}


/* ═══════════════════════════════════════════════════════════════════════
   8. SECTION ABOUT — grand titre, bio à gauche, portrait rond à droite
   (maquette de septembre 2026 : la bio s'aligne sur le bord gauche du
   titre « justine viala »)
   ═══════════════════════════════════════════════════════════════════════ */
main { padding-top: 80px; }                        /* Décalage pour le header fixe */

/* Colonne commune : titre, bio, services, étapes et grille partagent le
   même bord gauche et la même largeur, comme sur la maquette */
.about-inner,
.services-bar,
.missions,
.projets-grid {
  width: min(var(--content-w), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.about {
  padding: clamp(7rem, 28.5vw, 22.5rem) 0 3rem;    /* Grand blanc au-dessus du titre (maquette) — en vw et non en vh : la maquette est proportionnelle à la largeur */
}

/* Titre : nom en Poppins ExtraBold bleu, métier en Courier New */
.about-title {
  font-weight: normal;
  margin-bottom: clamp(3rem, 8.3vw, 6.5rem);
}

.about-name {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 5.25vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--blue);
}

.about-role {
  display: block;
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(1rem, 1.86vw, 1.46rem);
  letter-spacing: 0;                               /* Chasse naturelle du Courier New (maquette) */
  color: var(--dark);
  margin-top: 0;
  padding-left: 1.28em;                            /* Léger retrait sous le titre (maquette) */
}

.about-grid {
  display: grid;
  grid-template-columns: 48% 1fr;                 /* Bio sur 48 % de la colonne, portrait centré dans le reste */
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* Bio en Poppins Light, justifiée, une phrase par paragraphe */
.about-bio p {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--dark);
  text-align: justify;
}

/* Portrait détouré sur son disque jaune (PNG à fond transparent) */
.about-portrait {
  justify-self: center;
  width: min(100%, 230px);
}

.about-portrait img {
  width: 100%;
  height: auto;
  display: block;
}


/* ═══════════════════════════════════════════════════════════════════════
   9. BARRE DE SERVICES (RENOVATION | AMENAGEMENT INTERIEUR | …)
   ═══════════════════════════════════════════════════════════════════════ */
.services-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  padding: clamp(2.5rem, 5.4vw, 4.2rem) 0 clamp(2.5rem, 6.4vw, 5rem);
}

/* Intitulés en Poppins Bold capitales */
.services-bar .svc {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--dark);
}

/* Sous-titre de « DESIGN GLOBAL w/ OPA » en Courier New */
.services-bar .svc-sub {
  display: block;
  font-family: 'Courier New', Courier, monospace;
  font-weight: normal;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-transform: none;
  color: var(--gray);
  margin-top: 0.35rem;
}

/* « OPA » : lien bleu en italique (capitales, comme sur la maquette) */
.services-bar .svc-opa {
  color: var(--blue);
  font-style: italic;
  text-decoration: none;
  transition: opacity 0.2s;
}

.services-bar .svc-opa:hover { opacity: 0.7; }

/* Zone tactile d'au moins 24 px sans décaler le texte (marges négatives = padding) */
.services-bar .svc-opa {
  display: inline-block;
  padding: 0.3rem 0.2rem;
  margin: -0.3rem -0.2rem;
}


/* ═══════════════════════════════════════════════════════════════════════
   10. MISSIONS — texte d'introduction + liste des 5 étapes
   ═══════════════════════════════════════════════════════════════════════ */
.missions {
  padding-bottom: clamp(3rem, 6vw, 4.7rem);
}

.missions-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.7;
  text-align: justify;
  color: var(--dark);
  padding-bottom: 0.45rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px dotted var(--dotted);
}

.etapes {
  list-style: none;
  padding-left: 1.3rem;
}

/* Chaque étape : « + » cuivré, intitulé, puis un filet pointillé jusqu'au bord */
.etape {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--dark);
}

.etape-plus {
  flex-shrink: 0;
  color: #835b52;                                  /* Même cuivre que la pastille du header */
  font-weight: 600;
}

.etape::after {
  content: '';
  flex: 1 1 2rem;
  min-width: 2rem;
  border-bottom: 1px dotted var(--dotted);
}


/* ═══════════════════════════════════════════════════════════════════════
   11. GRILLE DES PROJETS — 3 colonnes de carrés, deux ronds,
       dernière rangée calée à droite (rond + visuel panoramique)
   ═══════════════════════════════════════════════════════════════════════ */
.projets {
  padding-bottom: clamp(4rem, 7vw, 5.5rem);
}

.projets-grid {
  --gap-x: clamp(1rem, 6.5vw, 4.9rem);
  /* Largeur d'une colonne, réutilisée par la dernière rangée : elle sort de
     la grille 3 colonnes mais son rond doit garder la même taille */
  --tile: calc((100% - 2 * var(--gap-x)) / 3);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--gap-x);
  row-gap: clamp(1rem, 4.5vw, 3.5rem);
}

.projet-item {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.projet-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease-out-quart);
}

.projet-item:hover img { transform: scale(1.04); }

/* Visuels ronds (la caza, colette) */
.projet-item--round { border-radius: 50%; }

/* Axonométrie détourée (escalier) : montrée entière, sans recadrage */
.projet-item--contain img { object-fit: contain; }

/* Légende révélée au survol, sur un voile couleur papier */
.projet-item figcaption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(254, 252, 249, 0.94);
  color: var(--dark);
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.76rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.projet-item:hover figcaption { opacity: 1; }

/* Dans un rond, le texte est resserré pour ne pas toucher le bord courbe */
.projet-item--round figcaption { padding: 18%; }

/* Dernière rangée : hors grille 3 colonnes, calée à droite */
.projets-last {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: calc(var(--gap-x) * 1.28);
}

.projets-last .projet-item        { flex: none; }
.projets-last .projet-item--round { width: var(--tile); }
.projets-last .projet-item--wide  { width: calc(var(--tile) * 1.72); aspect-ratio: 1.72 / 1; }

/* Cascade d'apparition dans chaque rangée. Spécificité volontairement plus
   forte que .reveal, qui redéfinit `transition` en raccourci et remettrait
   sinon le délai à zéro. */
.projets-grid .pi-2,
.projets-grid .pi-5,
.projets-grid .pi-8,
.projets-grid .pi-11 { transition-delay: 0.08s; }
.projets-grid .pi-3,
.projets-grid .pi-6,
.projets-grid .pi-9  { transition-delay: 0.16s; }


/* ═══════════════════════════════════════════════════════════════════════
   12. SECTION OPA — fond bleu, mot OPA en grand, deux colonnes de texte
   ═══════════════════════════════════════════════════════════════════════ */
#opa {
  background: var(--blue);
  padding: 5rem 3rem;
  color: #fff;
}

.opa-inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* Mot « opa » en très grande taille, blanc semi-transparent */
.opa-word {
  font-size: 5rem;
  font-weight: normal;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 3rem;
  color: rgba(255, 255, 255, 0.92);
}

.opa-intro {
  font-size: 1rem;
  line-height: 1.9;
  margin-bottom: 3rem;
  max-width: 640px;
  color: rgba(255, 255, 255, 0.9);
}

.opa-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  font-size: 0.85rem;
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.82);
}

.opa-cols p { margin-bottom: 1rem; }

.opa-cols a {
  color: #fff;
  text-decoration: underline;
}


/* ═══════════════════════════════════════════════════════════════════════
   13. PAGE CONTACT (contact.html, maquette 2)
   - Titre Poppins ExtraBold bleu + badge rond « justine viala · architecte »
   - Coordonnées Poppins SemiBold, photo à gauche, formulaire à droite
   - Libellés Poppins Light, saisie Courier New Bold #4a5950
   - Bouton Poppins Regular qui passe en cuivre « ENVOYÉ » après l'envoi
   Les tailles de police sont calées sur les largeurs mesurées dans la maquette.
   ═══════════════════════════════════════════════════════════════════════ */
.contact-page {
  padding-bottom: clamp(5rem, 18.2vw, 14.25rem);
}

.contact-hero,
.contact-body {
  width: min(var(--content-w), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.contact-hero {
  position: relative;
  padding-top: clamp(4rem, 15.5vw, 12.125rem);
}

.contact-title {
  position: relative;
  z-index: 1;                                      /* Toujours lisible par-dessus le badge */
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 2.81vw, 2.194rem);
  line-height: 1.21;
  letter-spacing: -0.005em;
  color: var(--blue);
}

/* Badge rond : le cercle dessiné ne remplit pas son plan de travail A4,
   la taille et la position sont calculées sur le cercle lui-même */
.contact-badge {
  --badge-w: clamp(120px, 15.885vw, 198.6px);   /* suit la taille du titre au lieu de rester fixe */
  position: absolute;
  width: var(--badge-w);
  left: calc(69.4% - var(--badge-w) * 0.4950);
  top: calc(clamp(4rem, 15.5vw, 12.125rem) + var(--badge-w) * -0.7167);
  pointer-events: none;
}

.contact-body {
  display: grid;
  grid-template-columns: 36.4% 48%;                /* Photo / formulaire, comme la maquette */
  grid-template-areas:
    "infos ."
    "photo form";
  justify-content: space-between;
  row-gap: 33px;
  margin-top: clamp(3rem, 12vw, 9.4rem);
}

/* Coordonnées : Poppins SemiBold en capitales */
.contact-infos {
  grid-area: infos;
  display: flex;
  flex-direction: column;
  font-style: normal;
}

.contact-infos a {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15.1px;
  line-height: 26px;
  text-transform: uppercase;
  color: var(--dark);
  text-decoration: none;
  width: fit-content;
  transition: color 0.3s ease;
}

.contact-infos a:hover { color: var(--blue); }

.contact-photo {
  grid-area: photo;
  align-self: start;
  margin: 0;
  aspect-ratio: 103 / 134;                         /* Cadrage de la maquette */
  overflow: hidden;
}

.contact-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Formulaire ── */
.contact-form {
  --trait: rgba(48, 48, 48, 0.28);
  grid-area: form;
  display: flex;
  flex-direction: column;
}

.contact-form .form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}

.contact-form label {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 15.2px;
  line-height: 1.25;
  color: var(--dark);
}

/* Saisie : Courier New Bold #4a5950 sur un simple trait */
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--trait);
  border-radius: 0;
  background-color: transparent;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  font-size: 16px;                                /* 16 px minimum : sinon l'iPhone zoome au toucher du champ */
  line-height: 1.3;
  color: #4a5950;
  padding: 1.25rem 0 0.15rem;
  outline: none;
  transition: border-color 0.3s ease;
}

.contact-form textarea {
  display: block;
  resize: none;
  overflow: hidden;                                /* La hauteur suit le texte (voir main.js) */
}

.contact-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%2362769e' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: 1.2rem;
}

.contact-form select option { color: var(--dark); background: var(--paper); font-weight: 400; }

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-bottom-color: var(--blue); }

/* Bouton : contour fin, reste en place et passe en cuivre une fois envoyé */
.form-submit {
  align-self: flex-end;
  position: relative;
  margin-top: 11px;
  min-width: 100px;
  height: 35px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--dark);
  border-radius: 0;
  color: var(--dark);
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 15.8px;
  letter-spacing: 0.02em;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.form-submit:hover { background: rgba(48, 48, 48, 0.05); }

.form-submit.is-sent {
  background: #835b52;                             /* Cuivre de la maquette (même teinte que la pastille du header) */
  border-color: #835b52;
  color: #fff;
  pointer-events: none;
}

.form-submit.is-sent .form-submit-label::after {
  content: 'ENVOYÉ';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Écrans tactiles : pas de survol, la légende s'affiche dans un bandeau en bas
   de l'écran quand on touche une image (voir main.js, section 12).
   Safari iOS simule :hover au toucher : on neutralise l'effet pour éviter
   d'afficher la légende deux fois. */
.legende-tactile {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  padding: 0.9rem 1.1rem;
  background: rgba(254, 252, 249, 0.97);
  border: 1px solid var(--light-line);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  color: var(--dark);
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.legende-tactile.is-visible { opacity: 1; transform: none; }

@media (hover: none) {
  .projet-item:hover figcaption { opacity: 0; }
  .projet-item:hover img { transform: none; }
  .projet-item.is-selectionne { outline: 2px solid var(--blue); outline-offset: 3px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   14. FOOTER — identité à gauche, crédits à droite
   ═══════════════════════════════════════════════════════════════════════ */
footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  padding: clamp(3rem, 8vh, 5rem) 3rem 2.5rem;
}

/* ── Colonne gauche : identité ── */
.footer-name {
  display: flex;
  flex-direction: column;
  line-height: 1.45;
  color: var(--dark);
}

/* « justine viala » en Poppins ExtraBold */
.footer-name .footer-name-main {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  margin-bottom: 0.35rem;
}

/* « architecte hmonp » / « montpellier, FR » en Courier New */
.footer-name .footer-name-line {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.08rem;
  letter-spacing: 0.03em;
}

/* ── Colonne droite : mentions ── */
.footer-links {
  display: flex;
  flex-direction: column;
  text-align: right;
  line-height: 1.45;
}

/* « copyright » et « web design » en Poppins ExtraBold, comme le nom à gauche */
.footer-links .footer-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--dark);
}

.footer-links .footer-value {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.07rem;
  letter-spacing: 0.03em;
  color: var(--dark);
}

/* Respiration entre les deux blocs de mentions */
.footer-links .footer-value + .footer-label { margin-top: 1.3rem; }


/* ═══════════════════════════════════════════════════════════════════════
   15. ANIMATIONS « REVEAL » AU SCROLL
   - Classes ajoutées en HTML, déclenchées en JS via IntersectionObserver
   - .is-visible est ajouté quand l'élément entre dans la viewport
   ═══════════════════════════════════════════════════════════════════════ */

/* Apparition douce du bas vers le haut */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1),
              transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Apparition cascade des enfants directs (jusqu'à 7 enfants gérés) */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.85s cubic-bezier(0.215, 0.61, 0.355, 1),
              transform 0.85s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.15s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.25s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.35s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.45s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.55s; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.65s; opacity: 1; transform: translateY(0); }

/* Apparitions latérales */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1),
              transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1),
              transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

/* Apparition par zoom doux (pour le mot OPA par exemple) */
.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 1.1s cubic-bezier(0.215, 0.61, 0.355, 1),
              transform 1.1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }


/* ═══════════════════════════════════════════════════════════════════════
   16. MICRO-INTERACTIONS AU SURVOL
   ═══════════════════════════════════════════════════════════════════════ */

/* Soulignement désactivé sur les onglets — uniquement changement de couleur au survol */
header nav a { position: relative; }

/* Items de la barre services : passage au bleu au survol.
   opacity/transform restent dans la liste : sans eux, cette règle écraserait
   la transition d'apparition de .reveal-stagger et les items surgiraient d'un coup. */
.services-bar .svc {
  transition: color 0.3s ease,
              opacity 0.85s cubic-bezier(0.215, 0.61, 0.355, 1),
              transform 0.85s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.services-bar .svc:hover { color: var(--blue); }


/* Colonnes étroites (tablette et mobile) : le texte justifié creusait de grands
   espaces entre les mots ; la césure française les resserre (lang="fr") */
@media (max-width: 1024px) {
  .about-bio p,
  .missions-text {
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   17. RESPONSIVE — adaptation mobile (< 768 px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  :root { --gutter: 1.5rem; }

  /* Les apparitions latérales passent en vertical : sur un écran étroit, le
     décalage de 40px vers la droite dépassait la largeur de la page et la
     rendait scrollable sur le côté tant que le bloc n'était pas animé.
     Une montée verticale ne déborde jamais et se lit mieux sur mobile. */
  .reveal-left,
  .reveal-right { transform: translateY(26px); }
  .reveal-left.is-visible,
  .reveal-right.is-visible { transform: translateY(0); }

  header { padding: 0 1.5rem; }

  /* Menu mobile : caché par défaut, devient un panneau qui descend */
  header nav {
    display: none;
    position: absolute;
    top: 80px; left: 0; right: 0;
    background: var(--paper);
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid var(--light-line);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  }

  header nav.active { display: flex; }

  header nav a {
    display: flex;
    align-items: center;
    min-height: 44px;                              /* Cible tactile confortable */
    padding: 0.9rem 1.5rem;
    border-bottom: 1px solid var(--light-line);
    width: 100%;
  }

  /* La pastille décorative n'a pas de sens dans le menu empilé */
  .nav-dot { display: none; }

  /* Hamburger visible, zone tactile de 44 px sans décaler les traits */
  .menu-toggle {
    display: flex;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 11px;
    margin-right: -11px;
  }

  /* About : portrait au-dessus de la bio */
  .about { padding: 3.5rem 0 2.5rem; }
  .about-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .about-portrait { order: -1; width: min(70%, 230px); }

  /* Services en 2 × 2 */
  .services-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem 1.5rem;
    padding: 2.5rem 0;
  }

  /* Étapes : pas de filet pointillé, trop court pour être lisible */
  .etapes { padding-left: 0; }
  .etape::after { display: none; }

  /* Grille en 2 colonnes : la 9e image passe en bandeau pour ne pas rester seule */
  .projets-grid {
    --gap-x: 1rem;
    --tile: calc((100% - var(--gap-x)) / 2);
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1rem;
  }
  .projets-grid .pi-9 { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
  .projets-last { flex-direction: column; gap: 1rem; }
  .projets-last .projet-item--wide { width: 100%; }

  /* Page contact : badge au-dessus du titre, puis coordonnées, photo, formulaire */
  .contact-hero    { padding-top: 9rem; }
  .contact-title   { font-size: 1.7rem; line-height: 1.22; }
  .contact-badge   { width: 141.1px; left: auto; right: -12.3px; top: -23.6px; }
  .contact-body    {
    grid-template-columns: 1fr;
    grid-template-areas: "infos" "photo" "form";
    row-gap: 2rem;
    margin-top: 2.5rem;
  }
  .contact-photo   { width: 100%; max-width: 420px; }
  .form-submit     { min-height: 44px; margin-top: 1.4rem; }

  /* Footer empilé */
  footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.8rem;
    padding: 3rem 1.5rem 2rem;
  }
  .footer-links { text-align: left; }
  .footer-name .footer-name-main { font-size: 1.35rem; }
  .footer-name .footer-name-line,
  .footer-links .footer-value     { font-size: 0.95rem; }
  .footer-links .footer-label     { font-size: 1.2rem; }
}


/* ═══════════════════════════════════════════════════════════════════════
   18. PAGE OPA (opa.html)
   Même mise en page que la page OPA du site Studio OMA :
   - hero « OPA / design — hospitality » + photo
   - 01 : présentation en deux colonnes
   - 02 : illustration des chaises face à l'offre
   - 03 : contacts de part et d'autre de la photo du duo
   - gros chiffres 01/02/03 fixés en bas à gauche + légende à droite
   Aux couleurs de Justine (fond bleu, texte blanc, accents jaunes)
   et entièrement en Simplon (Norm pour les titres, Mono pour les textes).
   ═══════════════════════════════════════════════════════════════════════ */

/* Variables propres à la page OPA */
:root {
  --opa-blue:   #62769e;                 /* Fond = bleu signature */
  --opa-yellow: #fdf1bf;                 /* Jaune crème : chiffre actif, liens actifs, curseur */
  --opa-fg:     #ffffff;                 /* Texte blanc (le seul assez contrasté sur ce bleu) */
  --opa-line:   rgba(255, 255, 255, 0.2);
  --opa-norm:   'Simplon Norm', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --opa-mono:   'Simplon Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', 'DejaVu Sans Mono', monospace;
  --opa-ease:   cubic-bezier(0.22, 1, 0.36, 1);
}

body.is-opa-page {
  background: var(--opa-blue);
  color: var(--opa-fg);
}


/* ── Polices : toute la page en Simplon ──
   Simplon Norm partout (header, titres, chiffres, légende, footer)… */
body.is-opa-page,
body.is-opa-page :is(.skip-link, header, main, footer, .opa-stepper),
body.is-opa-page :is(header, main, footer, .opa-stepper) * {
  font-family: var(--opa-norm);
}

/* …et Simplon Mono pour les blocs de texte, comme sur la maquette */
body.is-opa-page .opa-mono,
body.is-opa-page .opa-mono * {
  font-family: var(--opa-mono);
}


/* ── Header : transparent, onglets blancs, « opa » en jaune ── */
body.is-opa-page .custom-cursor { background: var(--opa-yellow); }

body.is-opa-page header {
  background: transparent;
  transition: transform 0.4s var(--ease-out-quart);
}

/* Au scroll, le header glisse vers le haut (il revient en haut de page) */
body.is-opa-page header.is-hidden { transform: translateY(-100%); }

body.is-opa-page header nav a { color: var(--opa-fg); font-weight: 700; }
body.is-opa-page header nav a:hover,
body.is-opa-page header nav a[aria-current="page"] { color: var(--opa-yellow); }

/* Logo : variante claire (tracés blancs, réserves bleues) — un filtre
   brightness/invert passerait tout en blanc et boucherait le dessin */
body.is-opa-page .logo-header-logo img { filter: none; }


/* ── Conteneur ── */
.opa-wrap {
  position: relative;
  min-height: 100vh;
  /* Sur mobile, 100vh compte la barre d'adresse : la page dépasse la zone
     réellement visible. dvh suit la hauteur utile, vh reste le repli. */
  min-height: 100dvh;
  padding: 3rem 3rem 11rem;              /* Bas : place pour les chiffres fixes */
  color: var(--opa-fg);
}

/* Chaque section occupe presque un écran, contenu centré verticalement */
.opa-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 0;
  min-height: 78vh;
  min-height: 78dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-margin-top: 90px;               /* Les ancres 01/02/03 atterrissent sous le header */
}


/* ── HERO ── */
.opa-hero {
  align-items: center;
  text-align: center;
  padding-top: 2rem;
}

.opa-hero-title {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2.5rem;
}

.opa-hero-title em {
  display: block;
  font-style: italic;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
}

.opa-hero-sub {
  display: inline-block;
  font-style: italic;
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}

/* Trait « design ____ hospitality » dessiné en CSS : même rendu quelle que soit la police */
.opa-dash {
  display: inline-block;
  width: 3.4em;
  border-bottom: 1.5px solid currentColor;
  margin: 0 0.08em;
}

.opa-hero-photo {
  width: clamp(200px, 16vw, 260px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.opa-hero-photo img,
.opa-contact-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ── SECTIONS 01 et 02 : deux colonnes ── */
.opa-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
  padding-top: 6rem;
}

.opa-text-col {
  font-size: 0.8rem;
  line-height: 1.85;
  letter-spacing: 0.02em;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.opa-text-col p { margin-bottom: 1rem; }
.opa-text-col strong { font-weight: 700; }

/* Illustration des chaises (crème) face au texte de l'offre : les deux blocs
   sont centrés l'un sur l'autre, comme sur la maquette */
.opa-illus,
#opa-02 .opa-text-col { align-self: center; }

.opa-illus img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
}

/* Liste des métiers en gras */
.opa-services {
  list-style: none;
  text-align: left;                      /* Annule le « justify » de la colonne */
  margin-top: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.9;
}


/* ── SECTION 03 : contact ── */
.opa-contact {
  align-items: center;
  text-align: center;
}

.opa-contact-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 3rem;
  align-items: center;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 3rem;
}

.opa-contact-side {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.opa-contact-photo {
  width: clamp(180px, 15vw, 240px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.opa-contact-photo img { object-position: center top; }

.opa-contact-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
}

.opa-contact-handle,
.opa-contact-mail,
.opa-contact-insta {
  display: inline-block;
  padding: 0.2rem 0;                     /* Cible tactile ≥ 24 px sans décaler la mise en page */
  text-decoration: none;
  transition: color 0.3s ease;
}
.opa-contact-handle,
.opa-contact-mail  { color: var(--opa-fg); }
.opa-contact-insta { color: var(--opa-yellow); }

.opa-contact-handle:hover,
.opa-contact-mail:hover  { color: var(--opa-yellow); }
.opa-contact-insta:hover { color: var(--opa-fg); }


/* ── CHIFFRES 01 / 02 / 03 fixés en bas + légende ── */
.opa-stepper {
  position: fixed;
  left: 3rem;
  right: 3rem;
  bottom: 2rem;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  gap: 2.5rem;
  pointer-events: none;                  /* On clique à travers, sauf sur les liens */
  transition: opacity 0.45s ease, transform 0.45s var(--opa-ease);
}

/* Fondu bleu derrière les chiffres : invisible au repos (même bleu que le fond),
   il empêche le texte qui défile de passer lisiblement sous les chiffres */
.opa-stepper::before {
  content: '';
  position: absolute;
  inset: -2.5rem -3rem -2rem;
  z-index: -1;
  background: linear-gradient(to top, var(--opa-blue) 55%, rgba(98, 118, 158, 0));
}

/* Les chiffres s'effacent quand le footer arrive, pour ne jamais le chevaucher */
.opa-stepper.is-hidden {
  opacity: 0;
  transform: translateY(28px);
}
.opa-stepper.is-hidden a { pointer-events: none; }

.opa-step {
  pointer-events: auto;
  color: var(--opa-fg);
  text-decoration: none;
  font-size: clamp(3.2rem, 6vw, 6.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  transform-origin: bottom left;
  transition: color 0.4s ease,
              transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Simplon d'essai n'a pas les chiffres 1 à 9 : les gros chiffres passent en
   Poppins, comme sur la maquette OPA (même rendu sur Mac, Windows et mobile) */
body.is-opa-page .opa-step { font-family: 'Simplon Norm', 'Poppins', sans-serif; }

/* Chiffre de la section visible : jaune, léger grossissement à ressort */
.opa-step.is-active {
  color: var(--opa-yellow);
  transform: scale(1.12);
}

/* Légende cliquable à droite */
.opa-step-legend {
  pointer-events: auto;
  margin-left: auto;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: clamp(0.85rem, 1.1vw, 1.2rem);
  line-height: 1.9;
  letter-spacing: 0.02em;
}
.opa-step-legend em { font-style: italic; font-weight: 700; }

.opa-step-legend a {
  position: relative;
  color: var(--opa-fg);
  text-decoration: none;
  padding-left: 0;
  transition: color 0.35s ease, padding-left 0.45s var(--opa-ease);
}

/* Petit tiret jaune qui se déploie devant la ligne active ou survolée */
.opa-step-legend a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1.5px;
  background: var(--opa-yellow);
  transition: width 0.45s var(--opa-ease);
}

.opa-step-legend a.is-active { color: var(--opa-yellow); padding-left: 1.4rem; }
.opa-step-legend a.is-active::before { width: 1rem; }

/* Survols réservés aux appareils à souris (pas d'état « collé » au toucher) */
@media (hover: hover) {
  .opa-step:hover { transform: translateY(-4px); }
  .opa-step.is-active:hover { transform: scale(1.12) translateY(-4px); }
  .opa-step-legend a:hover { padding-left: 1.4rem; }
  .opa-step-legend a:hover::before { width: 1rem; }
}


/* ── Footer sur fond bleu ── */
body.is-opa-page footer {
  border-top: 1px solid var(--opa-line);
  color: var(--opa-fg);
}

body.is-opa-page :is(.footer-name, .footer-name-main, .footer-name-line, .footer-label, .footer-value) {
  color: var(--opa-fg);
}

/* Simplon Norm n'a pas de graisse 800 : on demande explicitement le Bold */
body.is-opa-page :is(.footer-name-main, .footer-label) { font-weight: 700; }


/* ── Apparitions au scroll ──
   Le contenu n'est masqué que si le JS tourne (classe .opa-js posée dans le <head>) */
.opa-reveal {
  transition: opacity 0.9s var(--opa-ease) var(--d, 0s),
              transform 0.9s var(--opa-ease) var(--d, 0s);
}
.opa-js .opa-reveal {
  opacity: 0;
  transform: translateY(30px);
}
.opa-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Photos : rideau qui s'ouvre + léger dé-zoom */
.opa-reveal-photo {
  transition: opacity 0.9s var(--opa-ease) var(--d, 0s),
              transform 0.9s var(--opa-ease) var(--d, 0s),
              clip-path 1.1s var(--opa-ease) var(--d, 0s);
}
.opa-reveal-photo img { transition: transform 1.4s var(--opa-ease) var(--d, 0s); }
.opa-js .opa-reveal-photo     { clip-path: inset(14% 0 14% 0); }
.opa-js .opa-reveal-photo img { transform: scale(1.12); }
.opa-reveal-photo.in-view     { clip-path: inset(0 0 0 0); }
.opa-reveal-photo.in-view img { transform: scale(1); }

/* Liste des métiers : les lignes montent une à une */
.opa-stagger li {
  transition: opacity 0.6s var(--opa-ease), transform 0.6s var(--opa-ease);
}
.opa-js .opa-stagger li { opacity: 0; transform: translateY(14px); }
.opa-reveal.in-view .opa-stagger li { opacity: 1; transform: translateY(0); }
.opa-reveal.in-view .opa-stagger li:nth-child(1) { transition-delay: 0.25s; }
.opa-reveal.in-view .opa-stagger li:nth-child(2) { transition-delay: 0.35s; }
.opa-reveal.in-view .opa-stagger li:nth-child(3) { transition-delay: 0.45s; }
.opa-reveal.in-view .opa-stagger li:nth-child(4) { transition-delay: 0.55s; }

/* Respect de « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  .opa-js .opa-reveal,
  .opa-js .opa-reveal-photo,
  .opa-js .opa-stagger li {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .opa-js .opa-reveal-photo img { transform: none !important; transition: none !important; }
  .opa-step.is-active { transform: none; }
}


/* Écrans bas (téléphone en paysage, ~390px de haut) : les chiffres fixes
   occupaient près de la moitié de la hauteur et recouvraient la photo du
   hero. On les réduit et on rend leur place au contenu. */
@media (max-height: 520px) and (orientation: landscape) {
  .opa-wrap      { padding-top: 5rem; padding-bottom: 5.5rem; }
  .opa-section   { min-height: auto; padding: 1.5rem 0; }
  .opa-hero-photo { width: clamp(130px, 22vh, 180px); }
  .opa-step      { font-size: 2.2rem; }
  .opa-stepper   { bottom: 0.9rem; gap: 1.2rem; }
  .opa-stepper::before { inset: -1.5rem -2rem -1rem; }
  .opa-step-legend { font-size: 0.75rem; line-height: 1.5; }
}

/* ── Responsive page OPA ── */
@media (max-width: 1024px) {
  .opa-wrap         { padding: 6rem 2rem 8rem; }        /* Haut : dégage le header fixe (80 px) */
  .opa-text         { gap: 3rem; padding-top: 4rem; }
  .opa-contact-grid { gap: 2rem; }
  .opa-stepper      { left: 2rem; right: 2rem; gap: 1.8rem; }
}

@media (max-width: 768px) {
  .opa-wrap          { padding: 5.5rem 1.5rem 7rem; }  /* Haut : dégage le header fixe (80 px) */
  .opa-section       { min-height: auto; padding: 2.5rem 0; }
  .opa-hero          { padding-top: 0; }
  .opa-hero-photo    { width: min(62%, 240px); }

  .opa-text          { grid-template-columns: 1fr; gap: 1rem; padding-top: 2.5rem; }
  .opa-text-col      { font-size: 0.85rem; text-align: left; }
  .opa-illus img     { max-width: 210px; margin-bottom: 1.5rem; }

  .opa-contact-grid  { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2rem; }
  .opa-contact-photo { order: -1; width: min(62%, 240px); margin: 0 auto; }

  /* Chiffres plus compacts, légende masquée : le fondu couvre toute la largeur */
  .opa-stepper       { left: 0; right: 0; bottom: 0; padding: 0 1.5rem 1.25rem; gap: 1.2rem; }
  .opa-stepper::before { inset: -2.5rem 0 0; }
  .opa-step          { font-size: 2.6rem; }
  .opa-step-legend   { display: none; }

  /* Menu mobile sur fond bleu : liens blancs lisibles */
  body.is-opa-page header nav        { background: var(--opa-blue); border-bottom-color: var(--opa-line); box-shadow: none; }
  body.is-opa-page header nav a      { border-bottom-color: var(--opa-line); }
  body.is-opa-page .menu-toggle span { background: #fff; }
}