@charset "UTF-8";
/* =========================================================================
   Jouan Olivier Pujol — société d'avocats, Marseille. Version 2.
   Papier blanc, encre noire, la couleur vient des photographies.
   Tokens → base → identité → composants → sections → mouvement → réponses.
   ========================================================================= */

/* ---------- 1. Police ---------- */
/* General Sans (Indian Type Foundry, ITF Free Font License) : la police du
   logo. Une seule famille variable, 200 → 700, auto-hébergée. */
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans/GeneralSans-Variable.woff2') format('woff2-variations'),
       url('../fonts/general-sans/GeneralSans-Variable.woff2') format('woff2');
  font-weight: 200 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans/GeneralSans-VariableItalic.woff2') format('woff2-variations'),
       url('../fonts/general-sans/GeneralSans-VariableItalic.woff2') format('woff2');
  font-weight: 200 700; font-style: italic; font-display: swap;
}

/* ---------- 2. Tokens ---------- */
:root {
  /* les deux couleurs du logo, rien d'autre : la couleur vient des photos */
  --papier:      #ffffff;
  --encre:       #1d1d1b;
  --gris:        #63635f;   /* 6,4:1 sur papier */
  --filet-c:     #e2e2de;
  --voile:       rgba(29, 29, 27, 0.04);

  --titre:  'General Sans', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;
  --texte:  'General Sans', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif;

  --t-display: clamp(2.3rem, 4.6vw, 4.1rem);
  --t-titre:   clamp(1.95rem, 3.6vw, 3.2rem);
  --t-phrase:  clamp(1.6rem, 3vw, 2.7rem);
  --t-sous:    clamp(1.15rem, 1.6vw, 1.45rem);
  --t-chapeau: clamp(1.1rem, 1.45vw, 1.4rem);
  --t-corps:   1rem;
  --t-petit:   0.9375rem;
  --t-label:   0.75rem;

  --marge:     clamp(1.25rem, 5vw, 5rem);
  --conteneur: min(1240px, 100% - 2 * var(--marge));
  --pas-l:     clamp(5.5rem, 13vh, 11rem);
  --pas-m:     clamp(2.5rem, 5vh, 4.5rem);
  --pas-s:     clamp(1rem, 2vh, 1.75rem);

  --z-fond: 0;
  --z-contenu: 10;
  --z-entete: 100;
  --z-menu: 200;
  --z-evitement: 300;

  /* la courbe du rideau, reprise des surfaces amU carrières */
  --rideau: cubic-bezier(0.76, 0, 0.24, 1);
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--t-corps);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  text-wrap: balance;   /* hérité : toutes les lignes sont équilibrées */
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.07; }
p { margin: 0 0 1.2em; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

::selection { background: var(--encre); color: var(--papier); }

:focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 3px;
}

.conteneur { width: var(--conteneur); margin-inline: auto; }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.evitement {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: var(--z-evitement);
  padding: 0.8rem 1.4rem;
  background: var(--encre); color: var(--papier);
  font-size: var(--t-label); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  transition: transform 0.3s var(--rideau);
}
.evitement:focus { transform: translate(-50%, 0); }

/* ---------- 4. Identité : picto, signe, logo ---------- */
/* Le logo du hero est en ligne dans la page : son état final est l'état par
   défaut (sans JavaScript, il reste lisible) et la classe « joue » rejoue la
   séquence du studio — les pièces se tracent, l'entrée glisse à 45°, le texte
   se découvre par balayage. Les repères (--dx, --ex, --w…) sont portés par le
   SVG lui-même, calculés à l'export. */
.logo--anime { fill: var(--encre); overflow: visible; }
.logo--anime .plein { opacity: 1; }
.logo--anime .trait {
  fill: none; stroke: #fff; stroke-width: 22.5;
  stroke-linecap: butt; stroke-linejoin: miter;
  stroke-dasharray: 1 1; stroke-dashoffset: 0;
}
.logo--anime #cadrage,
.logo--anime #entree-g,
.logo--anime .balai { transform-box: view-box; }
.logo--anime #entree-g { transform: none; }
.logo--anime .balai    { transform: translateX(var(--w)); }

.logo--anime.joue .trait    { animation: jop-trait 1.05s cubic-bezier(.55,.08,.3,1) .2s both; }
.logo--anime.joue .plein    { animation: jop-plein .15s linear 1.25s both; }
.logo--anime.joue #cadrage  { animation: jop-recentre 1.05s cubic-bezier(.65,0,.25,1) 1.4s both; }
.logo--anime.joue #entree-g { animation: jop-glisse 1.05s cubic-bezier(.65,0,.25,1) 1.4s both; }
.logo--anime.joue .balai    { animation: jop-balai var(--t) linear var(--d) both; }

@keyframes jop-trait    { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes jop-plein    { from { opacity: 0; } to { opacity: 1; } }
@keyframes jop-recentre { from { transform: translate(var(--dx), var(--dy)); } to { transform: translate(0, 0); } }
@keyframes jop-glisse   { from { transform: translate(calc(-1 * var(--ex)), calc(-1 * var(--ey))); } to { transform: none; } }
@keyframes jop-balai    { from { transform: translateX(0); }   to { transform: translateX(var(--w)); } }

.picto { width: auto; }
/* la pastille : le rectangle d'encre, le picto en réserve.
   Une lettre allumée en blanc, les autres pièces en gris —
   J = pièce bas gauche, P = pièce haut droite, O = les deux autres. */
.pastille__fond {
  fill: var(--encre); stroke: var(--encre);
  stroke-width: 22.677px; stroke-miterlimit: 10;
}
.picto .piece { fill: #fff; transition: opacity 0.7s var(--sortie); }
.picto--j .piece, .picto--o .piece, .picto--p .piece { opacity: 0.34; }
.picto--j .piece--j,
.picto--o .piece--o,
.picto--p .piece--p { opacity: 1; }

/* ---------- 5. En-tête ---------- */
.entete {
  position: fixed; inset: 0 0 auto;
  z-index: var(--z-entete);
  background: var(--papier);
  border-bottom: 1px solid transparent;
  padding-top: env(safe-area-inset-top);
  transition: transform 0.45s var(--rideau), border-color 0.3s;
}
.entete.est-posee { border-bottom-color: var(--filet-c); }
.entete.est-cachee { transform: translateY(-100%); }

.entete__inner {
  width: var(--conteneur); margin-inline: auto;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 5rem;
}

.marque { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.pastille { height: clamp(38px, 3.6vw, 48px); width: auto; }

.nav { margin-left: auto; }
.nav__liste { display: flex; gap: clamp(0.9rem, 2.2vw, 2.1rem); }
.nav__liste a {
  position: relative; display: block; overflow: hidden;
  font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  padding: 0.35rem 0;
}
/* le libellé monte, sa copie prend sa place : le geste du rideau */
.nav__liste a span { display: block; transition: transform 0.4s var(--rideau); }
.nav__liste a::after {
  content: attr(data-libelle);
  position: absolute; inset: 0.35rem 0 auto;
  transform: translateY(100%);
  transition: transform 0.4s var(--rideau);
}
.nav__liste a:hover span, .nav__liste a:focus-visible span { transform: translateY(-100%); }
.nav__liste a:hover::after, .nav__liste a:focus-visible::after { transform: translateY(0); }
.nav__contact { display: none; }

.entete__tel {
  font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.08em; text-decoration: none;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--encre);
  white-space: nowrap;
}

.burger {
  display: none;
  width: 44px; height: 44px; padding: 0; margin-left: auto;
  background: none; border: 0; color: inherit; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
}
.burger__trait {
  display: block; width: 22px; height: 1px; background: currentColor;
  transition: transform 0.4s var(--rideau);
}
.burger[aria-expanded="true"] .burger__trait:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__trait:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* ---------- 6. Boutons et liens ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: 1.05rem 2.1rem;
  background: var(--encre); color: var(--papier);
  border: 1px solid var(--encre);
  font-family: var(--texte); font-size: var(--t-label); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
}
/* rideau clair qui monte au survol */
.btn::before {
  content: ''; position: absolute; inset: 0;
  background: var(--papier);
  transform: translateY(101%);
  transition: transform 0.45s var(--rideau);
}
.btn span { position: relative; z-index: 1; transition: color 0.45s var(--rideau); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover span, .btn:focus-visible span { color: var(--encre); }

.btn--nu { background: none; color: var(--encre); }
.btn--nu::before { background: var(--encre); }
.btn--nu:hover span, .btn--nu:focus-visible span { color: var(--papier); }

.lien {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size 0.45s var(--rideau);
}
.lien:hover { background-size: 0 1px; }

/* ---------- 7. Titres, filets, prose ---------- */
.titre {
  font-family: var(--titre); font-size: var(--t-titre);
  font-weight: 400; letter-spacing: -0.025em;
}
.chapeau {
  font-family: var(--titre); font-size: var(--t-chapeau);
  font-weight: 300; line-height: 1.5; letter-spacing: -0.01em; max-width: 40ch;
  margin-top: 1.5rem;
}
.prose { max-width: 60ch; margin-top: 1.75rem; }
.prose p { color: var(--gris); }
.prose em { font-style: italic; color: var(--encre); font-weight: 500; }
.prose__lien { margin-top: 1.75rem; }

.filet {
  display: block; height: 1px; width: 100%;
  margin-top: clamp(1.5rem, 3vh, 2.25rem);
  background: var(--encre);
  transform: scaleX(0); transform-origin: left;
}
.js .filet { transition: transform 1s var(--rideau); }
.filet.est-visible, html:not(.js) .filet { transform: scaleX(1); }

/* ---------- 8. Sections ---------- */
.section { position: relative; padding-block: var(--pas-l); }
/* deux sections de papier qui se suivent ne comptent qu'une respiration */
.section + .section { padding-top: clamp(2.5rem, 6vh, 5rem); }
.section__entete { margin-bottom: var(--pas-m); }

@media (min-width: 901px) {
  .section__entete {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 4rem); align-items: end;
  }
  .section__entete .titre   { grid-column: 1 / 7; grid-row: 1; }
  /* la dernière ligne du chapeau s'aligne sur la ligne de base du titre :
     on annule la marge du paragraphe, puis on rattrape l'écart de demi-
     interligne entre les deux (1,45 contre 1,07). */
  .section__entete .chapeau {
    grid-column: 8 / 13; grid-row: 1; max-width: 38ch;
    margin: 0 0 -0.19em;
  }
  .section__entete .filet   { grid-column: 1 / 13; grid-row: 2; }
}
.section__pied {
  margin-top: var(--pas-m); padding-top: var(--pas-s);
  border-top: 1px solid var(--filet-c);
  font-family: var(--titre); font-size: var(--t-sous); color: var(--gris);
}

/* ---------- 9. Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(6rem, 12vh, 9rem);
  padding-bottom: 5rem;
}
.hero__inner {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
  flex: 1 0 auto;
}
.hero__logo { grid-column: 1 / 6; }
.hero__logo .logo { width: min(100%, 400px); height: auto; }
.hero__dire { grid-column: 7 / 13; }

.hero__titre {
  font-family: var(--titre); font-size: var(--t-display);
  font-weight: 300; line-height: 1.05; letter-spacing: -0.03em;
  overflow-wrap: break-word;
}
.hero__chapeau {
  margin-top: 1.75rem; max-width: 42ch;
  font-size: var(--t-corps); line-height: 1.75; color: var(--gris);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2.25rem 0 0; }

.hero__bas { border-top: 1px solid var(--filet-c); padding-top: 1.1rem; }
.hero__bandeau {
  display: flex; flex-wrap: wrap; gap: 0.75rem clamp(1.5rem, 4vw, 3rem);
  font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris);
}
.hero__defiler { margin-left: auto; }
.hero__defiler::after {
  content: ''; display: inline-block; vertical-align: middle;
  width: 34px; height: 1px; margin-left: 0.75rem;
  background: currentColor;
  animation: filer 2.6s var(--rideau) infinite;
  transform-origin: left;
}
@keyframes filer {
  0%   { transform: scaleX(0); transform-origin: left; }
  45%  { transform: scaleX(1); transform-origin: left; }
  55%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* ---------- 10. Photographies ---------- */
/* La pièce qui se détache du monogramme devient la structure des images :
   la photographie occupe toute la largeur et prend sa forme — un de ses
   coins s'arrondit du rayon du logo. Le dessin de l'arc n'est pas rappelé :
   la découpe de la photographie suffit à le faire lire. */
.bande--coin { --r: clamp(64px, 10vw, 176px); }
.bande--coin-bd > .bande__cadre { border-bottom-right-radius: var(--r); }
.bande--coin-hg > .bande__cadre { border-top-left-radius: var(--r); }
/* la phrase posée sur la photo ne passe jamais sous l'arc */
.bande--coin-bd .bande__contenu { padding-right: calc(var(--r) / 2); }

/* Le cadre découpe, l'image déborde de 12 % et remonte au scroll. */
.bande__cadre { position: relative; overflow: hidden; background: var(--voile); }
.bande__zoom { height: 100%; }
.bande__cadre img {
  width: 100%; height: 100%; object-fit: cover;
  will-change: transform;
}
/* deux mouvements composés : le calque se détend à l'apparition,
   l'image se déplace au scroll (JS). */
.js [data-parallaxe] .bande__zoom {
  transform: scale(1.14); transform-origin: center;
  transition: transform 1.4s var(--rideau);
}
.js [data-parallaxe].est-visible .bande__zoom { transform: scale(1); }
.js [data-parallaxe] .bande__cadre img { transform: scale(1.22); }

/* le rideau blanc qui se lève sur l'image quand elle entre dans l'écran */
.js [data-parallaxe] .bande__cadre::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: var(--papier);
  transform: scaleY(1); transform-origin: bottom;
  transition: transform 1.15s var(--rideau);
}
.js [data-parallaxe].est-visible .bande__cadre::after { transform: scaleY(0); }

.bande {
  position: relative; margin: 0; isolation: isolate;
}
.bande > .bande__cadre { height: clamp(320px, 62vh, 620px); }
/* la photographie d'équipe : plus haute, cadrée sur les visages */
.bande--equipe > .bande__cadre { height: clamp(380px, 72vh, 780px); }
.bande--equipe img { object-position: 50% 26%; }
.bande figcaption {
  width: var(--conteneur); margin: 1rem auto 0;
  font-size: var(--t-petit); color: var(--gris);
}
.bande--phrase { display: grid; }
.bande--phrase > .bande__cadre { grid-area: 1 / 1; height: clamp(380px, 78vh, 760px); }
.bande--phrase .bande__contenu {
  grid-area: 1 / 1; position: relative; z-index: var(--z-contenu);
  align-self: end; padding-bottom: clamp(2.5rem, 7vh, 5rem);
}
.bande--phrase .bande__cadre::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(29,29,27,0) 30%, rgba(29,29,27,0.74) 100%);
}
.bande__phrase {
  margin: 0; max-width: 24ch;
  font-family: var(--titre); font-size: var(--t-phrase);
  font-weight: 300; line-height: 1.18; letter-spacing: -0.025em; color: var(--papier);
}

/* ---------- 11. Duo texte + image ---------- */
/* La photographie est posée dans la forme du logo et **le texte l'habille**,
   comme un habillage InDesign : `shape-outside` reprend le même tracé que le
   masque, `shape-margin` tient le texte à distance de la courbe. */
.duo { display: block; max-width: 1060px; }      /* la mesure reste lisible malgré l'habillage */
.duo::after { content: ''; display: block; clear: both; }
.duo__texte { max-width: none; }
.duo__texte .prose { max-width: none; }

.duo__image {
  float: right; width: min(40%, 380px);
  margin: 0.25rem 0 1.75rem;
  shape-outside: content-box url("../img/masque-signe.svg");
  shape-margin: 2.25rem;                        /* le décalage d'habillage */
}
/* « Nous situer » ne s'habille pas : son tableau d'informations est fait de
   blocs, et un bloc ne contourne pas un flottant. Cette section garde donc
   sa composition en deux colonnes. */
.duo--inverse { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem); align-items: center; max-width: none; }
.duo--inverse .duo__texte { grid-column: 6 / 13; grid-row: 1; }
.duo--inverse .duo__image {
  grid-column: 1 / 6; grid-row: 1;
  float: none; width: auto; margin: 0; shape-outside: none;
}
/* le cadre a exactement le format de la pièce : la forme du masque et celle
   de l'habillage se superposent au pixel près */
.duo__image .bande__cadre {
  position: relative; aspect-ratio: 60.94 / 68.16;
  background: none;
  -webkit-mask-image: url("../img/masque-signe.svg");
          mask-image: url("../img/masque-signe.svg");
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
}
.duo--inverse .duo__image .bande__cadre {
  -webkit-mask-image: url("../img/masque-signe-miroir.svg");
          mask-image: url("../img/masque-signe-miroir.svg");
}

/* ---------- 12. Domaines ---------- */
.domaines {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
}
.domaine__titre {
  font-family: var(--titre); font-size: var(--t-sous);
  line-height: 1.2; margin-bottom: 1.25rem;
}
.liste li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--filet-c);
  font-size: var(--t-petit); color: var(--gris);
}
.liste li:last-child { border-bottom: 0; }

/* ---------- 13. Associés ---------- */
.associes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
}
/* Le portrait prend la forme de la pastille de l'en-tête : même proportion
   (51,309 × 59,899) et même rayon (22,79 unités, soit 44,4 % de la largeur
   et 38 % de la hauteur). Le picto lettré, deux fois plus petit, mord sur
   son coin bas droit, et le texte s'aligne sur ce picto. */
.associe { --portrait: clamp(116px, 12vw, 168px); --picto: clamp(38px, 3.6vw, 48px); }
.associe__marques {
  position: relative; width: var(--portrait);
  margin-bottom: calc(var(--picto) * 0.5 + 1.25rem);
}
.associe__portrait {
  display: block; width: 100%; height: auto;
  aspect-ratio: 51.309 / 59.899;
  border-radius: 44.4% / 38%;
  object-fit: cover;
}
/* le picto garde la taille de celui de l'en-tête et se pose à cheval sur le
   coin bas droit du portrait ; un liseré de papier l'en détache, en épousant
   la forme de la pastille puisque le dessin remplit exactement sa boîte */
.associe__picto {
  position: absolute;
  right: calc(var(--picto) * -0.22);
  bottom: calc(var(--picto) * -0.14);
  height: var(--picto); width: auto;
  border-radius: 44.4% / 38%;
  box-shadow: 0 0 0 calc(var(--picto) * 0.13) var(--papier);
}

/* Le dessin au trait est lui aussi posé dans la forme du logo. Comme il est
   presque tout blanc, un fond d'encre très clair révèle la découpe, et le
   cadrage vise la partie dessinée (bibliothèque, fauteuils, parquet). */
.duo__image--dessin { width: min(44%, 400px); }
.duo__image--dessin .bande__cadre { background: rgba(29, 29, 27, 0.07); }
.duo__image--dessin img { object-position: 50% 35%; }

/* les collaboratrices : même format de photo, sans picto ni décalage */
.collaborateur { --portrait: clamp(116px, 12vw, 168px); }
.collaborateur .associe__marques { margin-bottom: 1.25rem; }
.associe__nom { font-family: var(--titre); font-size: var(--t-sous); font-weight: 500; }
.associe__fonctions { margin-top: 0.7rem; }
.associe__fonctions li {
  font-size: 0.9375rem; line-height: 1.45;
  color: var(--gris); margin-bottom: 0.5rem; max-width: 34ch;
}
.associe__fonctions li:last-child { color: var(--encre); margin-bottom: 0; }

/* « En collaboration avec », suivi d'un filet posé sur la ligne de base */
.collab__titre {
  display: flex; align-items: flex-end; gap: clamp(1rem, 2.5vw, 2rem);
  margin: var(--pas-m) 0 clamp(2rem, 4vh, 3rem);
  font-size: 0.9375rem; font-weight: 500;
  letter-spacing: 0.02em; line-height: 1.35;
}
.collab__titre span { flex: 0 0 auto; }
.collab__titre::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--encre);
  margin-bottom: 0.42em;   /* descendante + demi-interligne : le filet suit la ligne de base */
}

.collaborateurs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.75rem, 3.5vw, 4rem);
}

/* ---------- 14. Nous situer ---------- */
.infos { margin: 2rem 0 0; }
.infos__ligne {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem;
  padding: 0.85rem 0; border-top: 1px solid var(--filet-c);
}
.infos dt {
  font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris);
  padding-top: 0.2rem;
}
.infos dd { margin: 0; font-size: var(--t-petit); }

/* ---------- 15. Contact ---------- */
.section--contact { border-top: 1px solid var(--filet-c); }
.contact {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.contact__dire { grid-column: 1 / 6; }
.contact__formulaire { grid-column: 7 / 13; }

.contact__direct { margin-top: 2.5rem; display: grid; gap: 0.75rem; }
.contact__tel {
  font-family: var(--titre); font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 300; letter-spacing: -0.025em;
  line-height: 1; text-decoration: none;
}
.contact__adresse { font-size: var(--t-petit); color: var(--gris); line-height: 1.6; }

.form__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.champ { display: grid; gap: 0.5rem; margin: 0 0 1.5rem; }
.champ label {
  font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris);
}
.champ input, .champ textarea {
  font: inherit; font-size: var(--t-corps); color: var(--encre);
  background: none;
  border: 0; border-bottom: 1px solid var(--encre);
  padding: 0.7rem 0;
  width: 100%;
  transition: border-color 0.3s;
}
.champ input:focus, .champ textarea:focus { outline: none; border-bottom-width: 2px; padding-bottom: calc(0.7rem - 1px); }
.champ textarea { resize: vertical; min-height: 7rem; }
.champ-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }

.champ--case {
  grid-template-columns: auto 1fr; align-items: start; gap: 0.8rem;
  margin-top: 0.5rem;
}
.champ--case input {
  width: 1.1rem; height: 1.1rem; margin-top: 0.3rem;
  accent-color: var(--encre); border: 1px solid var(--encre);
}
.champ--case label {
  text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: var(--t-petit); color: var(--gris); line-height: 1.55;
}
.champ--erreur input, .champ--erreur textarea { border-bottom-color: #a4232a; }
.champ__erreur { grid-column: 1 / -1; font-size: var(--t-petit); color: #a4232a; }

.form__envoi {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  margin: 2rem 0 0;
}
.form__obligatoire { font-size: var(--t-petit); color: var(--gris); }

.conditions { margin-top: 2.25rem; border-top: 1px solid var(--filet-c); padding-top: 1rem; }
.conditions summary { cursor: pointer; font-size: var(--t-petit); color: var(--gris); padding: 0.35rem 0; }
.conditions summary:hover { color: var(--encre); }
.conditions p { font-size: var(--t-petit); color: var(--gris); line-height: 1.65; max-width: 68ch; margin-top: 0.85rem; }

.message { padding: 1.5rem 1.75rem; margin-bottom: 1.5rem; border: 1px solid var(--encre); }
.message p { margin: 0; }
.message--erreur { border-color: #a4232a; color: #a4232a; }

/* ---------- 16. Pied ---------- */
.pied {
  border-top: 1px solid var(--encre);
  padding-top: clamp(2.5rem, 6vh, 4.5rem);
}
.pied__inner {
  width: var(--conteneur); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
.pied__marque .logo { width: min(100%, 230px); }
.pied__colonnes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.pied__titre {
  font-size: var(--t-label); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris);
  margin-bottom: 1rem;
}
.pied__bloc p { font-size: var(--t-petit); line-height: 1.9; margin: 0; }
.pied__gris { color: var(--gris); }
.pied__liens li { font-size: var(--t-petit); line-height: 2; }

.pied__bas {
  position: relative;
  width: var(--conteneur); margin-inline: auto;
  border-top: 1px solid var(--filet-c);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  padding: 1.4rem 0 calc(1.4rem + env(safe-area-inset-bottom));
  font-size: var(--t-petit); color: var(--gris);
}
.pied__bas p { margin: 0; }
.pied__bas nav { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.pied__signe { width: 18px; align-self: center; }

/* ---------- 17. Pages légales ---------- */
.page--legal { padding-top: 4.5rem; }
.legal { padding-block: var(--pas-m) var(--pas-l); }
.legal__entete { margin-bottom: var(--pas-m); max-width: 40ch; }
.legal__corps { max-width: 72ch; }
.legal__corps h2 { font-family: var(--titre); font-size: var(--t-sous); margin: var(--pas-m) 0 1rem; }
.legal__corps h3 { font-size: 1rem; font-weight: 600; margin: 1.75rem 0 0.5rem; }
.legal__corps p, .legal__corps li { color: var(--gris); font-size: var(--t-petit); }
.legal__corps ul { margin: 0 0 1.2em; }
.legal__corps ul li { position: relative; padding-left: 1.1rem; margin-bottom: 0.4rem; }
.legal__corps ul li::before {
  content: ''; position: absolute; left: 0; top: 0.72em;
  width: 5px; height: 1px; background: var(--encre);
}
.legal__liste-def { margin: 0 0 1.5rem; }
.legal__liste-def > div {
  display: grid; grid-template-columns: 16rem 1fr; gap: 1rem;
  padding: 0.75rem 0; border-top: 1px solid var(--filet-c);
}
.legal__liste-def dt { color: var(--gris); font-size: var(--t-petit); }
.legal__liste-def dd { margin: 0; font-size: var(--t-petit); }

.tableau-rgpd { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; font-size: var(--t-petit); }
.tableau-rgpd th, .tableau-rgpd td {
  text-align: left; vertical-align: top; padding: 0.9rem 1rem 0.9rem 0;
  border-top: 1px solid var(--filet-c); color: var(--gris);
}
.tableau-rgpd th { color: var(--encre); font-weight: 500; }
.tableau-rgpd__enveloppe { overflow-x: auto; }

/* ---------- 18. Mouvement ---------- */
/* Balayage : le texte se découvre de gauche à droite, comme dans le logo. */
.js [data-balai] { clip-path: inset(0 100% 0 0); }
.js [data-balai].est-visible {
  clip-path: inset(0 -2% 0 0);
  transition: clip-path 0.95s linear;
}

/* Révélation simple : le bloc monte en se découvrant. */
.js [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.9s var(--sortie), transform 0.9s var(--sortie);
}
.js [data-reveal].est-visible { opacity: 1; transform: none; }
.js [data-reveal].est-visible:nth-child(2) { transition-delay: 0.08s; }
.js [data-reveal].est-visible:nth-child(3) { transition-delay: 0.16s; }
.js [data-reveal].est-visible:nth-child(4) { transition-delay: 0.24s; }

/* ---------- 19. Réponses ---------- */
@media (max-width: 1080px) {
  .contact__dire { grid-column: 1 / 6; }
  .contact__formulaire { grid-column: 6 / 13; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 5rem; }

  /* la marque et le bouton restent au-dessus du panneau : on doit pouvoir refermer */
  .burger { display: flex; position: relative; z-index: calc(var(--z-menu) + 1); }
  .marque { position: relative; z-index: calc(var(--z-menu) + 1); }
  .entete__tel { display: none; }
  .entete__inner { min-height: 4.5rem; }
  .marque__nom { font-size: 1.05rem; }

  .nav {
    position: fixed; inset: 0; margin: 0;
    z-index: var(--z-menu);
    background: var(--papier);
    display: flex; flex-direction: column; justify-content: center;
    padding: 5rem var(--marge) calc(3rem + env(safe-area-inset-bottom));
    /* le panneau défile au lieu de laisser ses liens déborder : sans cela,
       sur un écran court, le dernier lien restait visible menu fermé */
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.55s var(--rideau), visibility 0s 0.55s;
  }
  .nav.est-ouverte {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.55s var(--rideau), visibility 0s;
  }
  .nav__liste { flex-direction: column; gap: 0.15rem; flex: 0 0 auto; }
  .nav__liste a {
    font-family: var(--titre); font-size: clamp(1.7rem, 7.5vw, 2.6rem);
    font-weight: 400; letter-spacing: 0; text-transform: none;
    padding: 0.25rem 0;
  }
  /* le libellé ne monte plus : sa copie est masquée ici, il disparaîtrait */
  .nav__liste a { overflow: visible; }
  .nav__liste a::after { display: none; }
  .nav__liste a:hover span,
  .nav__liste a:focus-visible span { transform: none; }
  .nav__liste a:hover, .nav__liste a:focus-visible { opacity: 0.55; }
  .nav__liste a { transition: opacity 0.3s var(--rideau); }
  .nav__contact {
    display: block; margin: 2rem 0 0; padding-top: 1.25rem; flex: 0 0 auto;
    border-top: 1px solid var(--filet-c);
    font-size: var(--t-petit); color: var(--gris);
  }
  .nav__contact a { display: block; font-size: 1.25rem; color: var(--encre); text-decoration: none; margin-bottom: 0.35rem; }

  /* photo de groupe : à cette largeur, un cadrage en hauteur couperait la
     moitié de l'équipe — on suit le format de la photographie. */
  .bande--equipe > .bande__cadre { height: auto; aspect-ratio: 2996 / 2269; }
  .bande--equipe img { object-position: 50% 50%; }

  .hero { min-height: auto; padding-top: 7rem; padding-bottom: 3rem; }
  .hero__inner { display: block; }
  .hero__logo .logo { width: min(72%, 300px); }
  .hero__dire { margin-top: clamp(2.5rem, 7vh, 4rem); }

  /* Pas d'habillage sous 900 px : à cette largeur, contourner la forme
     hacherait le texte en lignes de quatre mots. La forme sort du flux du
     texte et vient se poser après le dernier paragraphe, réduite. */
  .duo__texte .prose { display: flex; flex-direction: column; }
  .duo__texte .prose > * { order: 1; }
  .duo__texte .prose > .duo__image { order: 2; }   /* plus spécifique que « .prose > * » */
  .duo__image {
    float: none; shape-outside: none;
    width: min(58%, 290px);
    margin: clamp(1.5rem, 4vh, 2.5rem) 0 0 auto;
  }
  /* « Nous situer » s'empile : le texte, puis la forme réduite à gauche */
  .duo--inverse { display: block; }
  .duo--inverse .duo__image {
    width: min(56%, 280px); margin: clamp(1.5rem, 4vh, 2.5rem) auto 0 0;
  }

  .contact { display: block; }
  .contact__formulaire { margin-top: clamp(2.5rem, 6vh, 4rem); }

  .pied__inner { display: block; }
  .pied__colonnes { margin-top: 2.5rem; }
  .champ-duo { grid-template-columns: 1fr; }
  .infos__ligne { grid-template-columns: 1fr; gap: 0.15rem; }
  .legal__liste-def > div { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* écran court (paysage, petit téléphone) : le menu doit tenir sans défiler */
@media (max-width: 900px) and (max-height: 640px) {
  .nav { justify-content: flex-start; padding-top: 4.5rem; }
  .nav__liste a { font-size: clamp(1.3rem, 5.2vw, 1.8rem); padding: 0.15rem 0; }
  .nav__contact { margin-top: 1.25rem; padding-top: 1rem; }
  .nav__contact a { font-size: 1.1rem; }
}

@media (max-width: 480px) {
  .hero__actions { display: grid; }
  .pied__bas { flex-direction: column; align-items: flex-start; }
  .pied__signe { position: absolute; right: 0; bottom: 1.4rem; }
}

/* ---------- 20. Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15ms !important;
  }
  .js [data-balai] { clip-path: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js [data-parallaxe] .bande__cadre img { transform: none !important; }
  .js [data-parallaxe] .bande__cadre::after { display: none; }
  .logo--anime.joue * { animation: none !important; }
}

/* ---------- 21. Impression ---------- */
@media print {
  .entete, .burger, .form, .hero__bas, .bande__cadre::after { display: none; }
  body { color: #000; }
  .section, .hero { padding-block: 1rem; min-height: 0; }
}