/* ==========================================================================
   Amélie Desvernay · feuille de style du portfolio

   Sommaire
   1.  Réglages (couleurs, polices, espacements)
   2.  Base
   3.  En-tête et menu
   4.  Accueil : grand titre
   5.  Accueil : panneau clair et grands titres
   6.  Projets (carrousel de l'accueil et grille de la page Portfolio)
   7.  À propos et encart jaune
   8.  Méthode « Un chemin balisé »
   9.  Encart bleu « Merci pour leur confiance »
   10. Contact et pied de page
   11. Loupes (grands titres)
   12. Page Portfolio
   13. Fenêtre de projet
   14. Liens animés
   15. Tablette et téléphone
   16. Animations réduites

   Pour changer une couleur partout : modifier la variable dans la partie 1.
   ========================================================================== */


/* 1. Réglages ============================================================== */

:root {
  /* couleurs */
  --navy: #080d18;          /* bleu nuit */
  --white: #ffffff;
  --sun: #fcfd97;           /* jaune poussin */
  --green-word: #8EDDB4;    /* vert pastel des mots en couleur */
  --blue-word: #8FD3EE;     /* bleu pastel */
  --muted: #b5bcc7;         /* texte secondaire sur bleu nuit */
  --line: rgba(255, 255, 255, .18);
  --line-dark: rgba(8, 13, 24, .22);

  /* polices */
  --sans: "Manrope", Arial, sans-serif;
  --serif: "Playfair Display", Georgia, serif;

  /* espacements */
  --pad: clamp(1.1rem, 4.2vw, 4.5rem);                /* marge gauche et droite */
  --section-gap: clamp(150px, 20vw, 232px);           /* espace entre les rubriques */
  --partners-overlap: clamp(60px, 9vw, 135px);        /* chevauchement de l'encart bleu */
}

/* Rayon de la loupe, animable (voir partie 11). */
@property --lens-r { syntax: '<length>'; inherits: true; initial-value: 0px; }


/* 2. Base ================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--navy); overflow-x: clip; }
body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--navy);
  color: var(--white);
  font-family: var(--sans);
  overflow-anchor: none;
  -webkit-font-smoothing: antialiased;
}
html.home-initial-top, html.home-initial-top body { overflow-anchor: none; scroll-behavior: auto; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* La flèche partout (jamais le curseur texte), la main sur ce qui se clique,
   et pas de surlignage du texte à la souris. */
html, body, body *, body *::before, body *::after { cursor: default !important; }
a, a *, button, button *, [role="button"], [role="button"] *, [role="link"], [role="link"] * { cursor: pointer !important; }
body { -webkit-user-select: none; user-select: none; }

.section-pad { padding: 6rem var(--pad); }

.eyebrow {
  margin: 0 0 1.4rem;
  font: .63rem var(--sans);
  letter-spacing: .07em;
  text-transform: uppercase;
}

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


/* 3. En-tête et menu ======================================================= */

.site-header {
  position: absolute; top: 0; left: 0; z-index: 20;
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.45rem var(--pad);
  color: var(--white);
}

.wordmark {
  font-size: .76rem; font-weight: 700; line-height: .92; letter-spacing: -.055em;
}
.wordmark span { margin-left: .2rem; font: .55rem var(--sans); vertical-align: top; }
.wordmark { display: inline-flex; line-height: 0; }
.wordmark-logo { display: block; width: auto; height: clamp(30px, 3vw, 42px); }   /* logo AD */

.site-header nav {
  display: flex; align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2.75rem);
  font: .78rem/1.3 var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.site-header nav a {
  position: relative;
  display: inline-flex; align-items: center;
  padding: .45rem 0;
  white-space: nowrap;
  transition: color .3s ease;
}
.site-header nav a[aria-current="page"] { color: var(--blue-word); } /* page en cours */
.site-header nav a:hover,
.site-header nav a:focus-visible { color: var(--sun); }

.menu-toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px; margin-right: -9px;
  padding: 0; border: 0; background: none;
  color: var(--white);
}
/* hamburger : trois traits qui se croisent en X à l'ouverture */
.menu-toggle span {
  position: absolute; left: 9px; width: 26px; height: 2px;
  border-radius: 2px; background: currentColor;
  transition: transform .3s ease, opacity .2s ease, top .3s ease;
}
.menu-toggle span:nth-child(1) { top: 14px; }
.menu-toggle span:nth-child(2) { top: 21px; }
.menu-toggle span:nth-child(3) { top: 28px; }
.menu-toggle.is-open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { top: 21px; transform: rotate(-45deg); }


/* 4. Accueil : grand titre ================================================= */

/* Le grand titre reste en place pendant que le panneau clair glisse par-dessus. */
.panel-scroll-stage { position: relative; isolation: isolate; overflow-anchor: none; }

.hero {
  position: sticky; top: 0; z-index: 0;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 8.5rem var(--pad) 3rem;
  overflow: hidden;
}
.hero-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5vw; align-items: center; }
.hero-copy { position: relative; z-index: 1; width: 100%; min-width: 0; will-change: transform; }

.hero h1 {
  position: relative; z-index: 2;
  margin: 0;
  font-size: clamp(4rem, 10.5vw, 10rem); font-weight: 500;
  line-height: .88; letter-spacing: -.09em;
}

.hero .intro {
  max-width: 380px;
  margin: 2rem 0 1.8rem;
  font: clamp(1rem, 1.3vw, 1.25rem)/1.55 var(--serif);
}

/* Mot qui alterne entre « forme. » et « sens. » (créé par script.js). */
.hero h1 em.forme-soft {
  position: relative;
  display: inline-grid; grid-template-columns: max-content; align-items: baseline;
  white-space: nowrap;
}
.hero h1 em.forme-soft > span {
  grid-area: 1 / 1;
  display: inline-block; width: max-content;
  white-space: nowrap;
  transition: opacity .9s ease-in-out;
}
.hero h1 .forme-measure { visibility: hidden; }
.hero h1 .forme-alternative { color: var(--blue-word); }
.hero h1 em:not(.forme-auto-sens) .forme-original { opacity: 1; transition-delay: .95s; }
.hero h1 em:not(.forme-auto-sens) .forme-alternative { opacity: 0; transition-delay: 0s; }
.hero h1 em.forme-auto-sens .forme-original { opacity: 0; transition-delay: 0s; }
.hero h1 em.forme-auto-sens .forme-alternative { opacity: 1; transition-delay: .95s; }


/* 5. Accueil : panneau clair et grands titres ============================== */

.light-sections-panel {
  position: relative; z-index: 1;
  margin-top: 36svh;
  margin-bottom: clamp(12px, 1.8vw, 24px);
  overflow: hidden;
  background: var(--white);
  color: var(--navy);
  box-shadow: 0 -24px 65px rgba(255, 255, 255, .13);
}

/* Grands titres : un mot en couleur, le dernier mot en italique. */
.section-heading h2,
.about h2,
.process h2,
.contact h2,
.archive-intro h1 { margin: 0; font-weight: 500; }
.hero h1 em,
.about h2 em,
.process h2 em,
.contact h2 em,
.archive-intro h1 em {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  letter-spacing: -.075em;
}
.accent-green { color: var(--green-word); }


/* 6. Projets =============================================================== */

.section-heading {
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: 3.2rem;
}
.section-heading h2 { font-size: clamp(3rem, 7vw, 7rem); line-height: .9; letter-spacing: -.09em; }
.section-aside { margin: 0 0 .3rem; font: .95rem/1.5 var(--serif); }

/* Carrousel de l'accueil */
.project-carousel { position: relative; min-width: 0; }
.project-carousel-track {
  width: 100%;
  overscroll-behavior-x: contain;   /* en bout de carrousel, la page ne glisse pas sur le côté */
  padding-bottom: 12px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.project-carousel-track::-webkit-scrollbar { display: none; }
.project-carousel .project-grid {
  display: flex; flex-wrap: nowrap; align-items: stretch;
  gap: clamp(14px, 2.2vw, 28px);
  /* pas de width: max-content : certains navigateurs (Firefox) le calculent
     d'après la taille réelle des images, ce qui laissait un blanc à droite */
}
.project-carousel .project-card { flex: 0 0 clamp(250px, 32vw, 460px); min-width: 0; }
.project-carousel .project-meta { display: none; }

.project-carousel-prev,
.project-carousel-next {
  position: absolute; top: 50%; z-index: 8;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--navy); color: var(--white);
  transition: opacity .25s ease;
}
.project-carousel-next { right: 0; transform: translate(50%, -50%); clip-path: inset(0 50% 0 0); }
.project-carousel-prev { left: 0; transform: translate(-50%, -50%); clip-path: inset(0 0 0 50%); }
.project-carousel-prev[hidden] { display: none; }
.project-carousel-next:disabled { opacity: .35; }
.project-carousel-prev svg,
.project-carousel-next svg {
  display: block; width: 31px; height: 31px;
  fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round;
}
.project-carousel-next svg { margin-right: 32px; }
.project-carousel-prev svg { margin-left: 32px; }

.all-projects-link {
  display: inline-block;
  transition: color .3s ease;
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
  padding-bottom: .15em;
  font: 600 calc(clamp(1rem, 1.55vw, 1.25rem) + 2px + 1pt)/1.25 var(--sans);
  letter-spacing: -.025em;
}

.all-projects-link:hover,
.all-projects-link:focus-visible { color: var(--green-word); } /* vert : le lien est sur fond blanc */

/* Cartes (accueil et page Portfolio) */
.project-image {
  position: relative;
  aspect-ratio: 1.42 / 1;
  overflow: hidden;
  border-radius: 16px;
  background: transparent; /* pas de fond sombre : il formait un liseré autour des images */
}
.project-image img[src$=".svg"] { object-fit: contain; padding: 4%; background: var(--white); box-sizing: border-box; }
.project-carousel .project-image img[src$=".svg"] { padding: 0; transform: scale(1.25); }
.project-carousel .project-card:hover .project-image img[src$=".svg"] { transform: scale(1.3); }
.archive-grid .project-image img[src$=".svg"] { padding: 0; transform: scale(1.15); }
.archive-grid .project-card:hover .project-image img[src$=".svg"],
.archive-grid .project-card:focus-visible .project-image img[src$=".svg"] { transform: scale(1.2); }
.project-image img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .5s;
}
.project-card:hover .project-image img,
.project-card:focus-visible .project-image img { transform: scale(1.035); }

.project-meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-top: .85rem;
}
.project-title { margin: 0; font: clamp(1.2rem, 2vw, 1.8rem)/1.1 var(--serif); }
.project-type {
  font: calc(.58rem + 2px)/1.4 var(--sans);
  text-align: right;
  text-transform: uppercase;
}


/* 7. À propos et encart jaune ============================================== */

.about-layout {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 8vw;
  padding: 2rem 0 clamp(8px, 1.2vw, 18px);   /* espace réduit avant l'encart jaune */
}
.about h2 { font-size: clamp(3.5rem, 8vw, 8rem); line-height: .92; letter-spacing: -.085em; }
.about-copy { align-self: end; max-width: 440px; }
.about-copy p { margin: 1em 0; font: clamp(1.1rem, 1.45vw, 1.3rem)/1.7 var(--serif); }

/* L'encart jaune (« Compétences ») */
.about-expanded { margin-top: 0; }
.about-expanded-inner { position: relative; overflow: hidden; background: var(--sun); }
.about-expanded-content {
  position: relative;
  padding: clamp(26px, 4vw, 58px);
  overflow: hidden;
  background: var(--sun);
  color: var(--navy);
}
.about-expanded-content > p {
  max-width: 46ch; margin: 0;
  font: 500 clamp(1.2rem, 2vw, 1.75rem)/1.45 var(--sans);
  letter-spacing: -.01em;
}
.about-expanded-content .services-heading { margin: clamp(2.5rem, 5vw, 4rem) 0 .9rem; font: 700 .78rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }
/* Liste des services : grands titres en italique ; au défilement, un
   surlignage passe sous chacun à son tour (script.js).
   Couleur du surlignage : --service-mark. */
.about-services {
  --service-mark: var(--blue-word);
  margin: 1.4rem 0 0; padding: 0;
  list-style: none;
}
.about-services li {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  padding: clamp(.7rem, 1.2vw, 1rem) 0;
  border-top: 1.5px solid var(--navy);
}
.service-name {
  margin: 0;
  font: italic 400 clamp(2rem, 4.4vw, 4rem)/1.12 var(--serif);
  letter-spacing: -.05em;
  color: #6b7386;   /* bleu nuit éclairci, quand la ligne n'est pas survolée */
  transition: color .45s ease;
}
.service-name span {
  background: linear-gradient(var(--service-mark), var(--service-mark)) no-repeat 0 88% / 0% 34%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .6s cubic-bezier(.65, 0, .35, 1);
}
.about-services li p {
  max-width: none; margin: 0;
  color: #646c7f;   /* bleu nuit éclairci tant que la ligne n'est pas survolée (contraste 4,9 sur le jaune) */
  line-height: 1.55;
  transition: color .45s ease;
}
.about-services li.is-on .service-name,
.about-services li.is-on p { color: var(--navy); }
.about-services li.is-on .service-name span { background-size: 100% 34%; }
.about-expanded-content .about-services li:last-child { margin-bottom: 0; }
.about-expanded-content > :last-child { margin-bottom: 0; }


/* 8. Méthode « Un chemin balisé » ========================================== */

.process {
  padding: clamp(5.5rem, 10vw, 9.5rem) var(--pad)
           calc(var(--partners-overlap) + var(--section-gap) - 1.5rem);
}
.process h2 {
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  font-size: clamp(3.5rem, 8vw, 8rem); line-height: .92; letter-spacing: -.085em;
}
.process-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin: 0; padding: 0;
  list-style: none;
}
.process-steps li {
  display: grid; align-content: start; gap: .7rem;
  min-width: 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-dark);
}
.process-num {
  color: var(--green-word);
  font: 700 .85rem/1 var(--sans);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.process-steps h3 { margin: 0; font: 600 clamp(1.15rem, 1.5vw, 1.4rem)/1.2 var(--sans); letter-spacing: -.02em; }
.process-steps p { margin: 0; font: 1rem/1.6 var(--serif); color: rgba(8, 13, 24, .82); }


/* 9. Encart bleu « Merci pour leur confiance » ============================= */

/* Il chevauche le bas du panneau clair. Les noms défilent sur deux lignes,
   la seconde étant la suite de la première (voir script.js). */
.partners {
  position: relative; z-index: 3;
  width: 100%;
  margin-top: calc(-1 * var(--partners-overlap));
  margin-bottom: calc(var(--section-gap) - 6rem); /* 6rem = marge haute du contact */
  padding: clamp(52px, 6vw, 92px) 0 clamp(1.8rem, 3.6vw, 3.25rem);
  overflow: hidden;
  background: var(--blue-word);
  color: var(--navy);
}
.partners h2 {
  margin: 0 0 clamp(1rem, 2.2vw, 1.9rem);
  padding-left: max(var(--pad), env(safe-area-inset-left, 0px));
  padding-right: var(--pad);
  font: 600 clamp(1.9rem, 4.4vw, 4.5rem)/1 var(--sans);
  letter-spacing: -.045em;
}
.partners-thanks { position: relative; display: inline-block; color: var(--sun); }

/* Confettis du « Merci » */
.thanks-confetti {
  position: absolute; z-index: 2;
  width: var(--size, 3px); height: var(--size, 3px);
  border-radius: 50%;
  background: var(--dot, var(--sun));
  pointer-events: none;
}

/* Liste lisible au clavier et par les lecteurs d'écran ; elle s'affiche
   à la place du ruban quand on navigue au clavier dans l'encart. */
.partners-list { list-style: none; }
.partners-list:not(:focus-within) {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.partners:focus-within .partners-list {
  display: flex; flex-wrap: wrap; gap: .5em 1.4em;
  margin: 0; padding-inline: var(--pad);
  font: 500 clamp(1.1rem, 2vw, 1.5rem)/1.4 var(--sans);
}
.partners:focus-within .partners-ribbon { display: none; }

.partners-line {
  overflow: hidden; white-space: nowrap;
  font: italic 400 clamp(.95rem, 1.65vw, 1.55rem)/1.4 var(--serif);
  letter-spacing: -.01em;
}
.partners-track { display: inline-flex; align-items: baseline; will-change: transform; }
.partners-sep { padding-inline: .9em; }
.partners-track a,
.partners-list a { transition: color .2s ease; }
.partners-track a:hover,
.partners-list a:hover,
.partners-list a:focus-visible { color: var(--sun); }


/* 10. Contact et pied de page ============================================== */

.contact {
  min-height: max(3.5rem + 100vh, 820px); /* permet d'aligner « Une idée en tête ? » en haut */
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 6rem var(--pad) clamp(1.1rem, 2vw, 2rem);
}
.contact .eyebrow { font-size: calc(.63rem + 1pt); }
.contact h2 { font-size: clamp(3.8rem, 10vw, 10rem); line-height: .92; letter-spacing: -.085em; }

.contact-note {
  max-width: 52ch;
  margin: 2.6rem 0 0;
  font: clamp(1rem, 1.2vw, 1.15rem)/1.6 var(--serif);
}
.contact-note span { display: inline-block; } /* « écrivez-moi » passe à la ligne tant que la phrase tient sur 2 lignes */

.email-link {
  display: inline-block;
  margin-top: 1.1rem; padding-bottom: .25rem;
  font: 600 clamp(1rem, 1.3vw, 1.15rem)/1.3 var(--sans);   /* adresse e-mail */
  letter-spacing: -.025em;
  transition: color .3s ease;
}
.email-link:hover,
.email-link:focus-visible { color: var(--sun); }
/* l'adresse e-mail est la seule partie sélectionnable du site (pour la copier) */
#emailLink, #emailLink * { cursor: text !important; -webkit-user-select: text; user-select: text; }

/* Vidéos dans un rond (accueil sous l'e-mail, portfolio après les projets) */
.video-round {
  --round: clamp(190px, 22vw, 320px);   /* diamètre */
  /* largeur et hauteur fixées toutes les deux, sans aspect-ratio : dans une
     colonne flex, certains navigateurs écrasaient un peu la hauteur, ce qui
     aplatissait le haut du rond */
  width: var(--round); height: var(--round);
  width: round(var(--round), 1px); height: round(var(--round), 1px);   /* diamètre en pixels entiers (Firefox rognait le haut sur certaines tailles d'écran) */
  flex-shrink: 0;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);   /* découpe nette de la vidéo, quel que soit le navigateur */
  overflow: hidden;
  background: #121a28;
  transition: opacity .4s ease;          /* réapparition rapide */
}
.video-round.is-resting { opacity: 0; transition-duration: 1.2s; }   /* disparition lente */
.video-round { position: relative; }
/* pastille « son » (comme Instagram) : la vidéo démarre muette, un clic active le son */
.video-sound {
  position: absolute; left: 50%; bottom: 9%; z-index: 2;
  width: 34px; height: 34px; translate: -50% 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(8, 13, 24, .65); color: var(--white);
  transition: background .25s ease, color .25s ease;
}
.video-sound:hover, .video-sound:focus-visible { background: var(--navy); color: var(--sun); }
.video-sound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.video-sound svg path:first-child { fill: currentColor; }
.video-sound .icon-sound { display: none; }
.video-sound[aria-pressed="true"] .icon-sound { display: block; }
.video-sound[aria-pressed="true"] .icon-muted { display: none; }
.video-round video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; clip-path: circle(50% at 50% 50%); }   /* découpe aussi sur la vidéo : certains navigateurs ignorent celle du conteneur */
.video-round--contact { margin-top: clamp(2.5rem, 5vw, 4rem); }
.video-round--archive { margin: clamp(4rem, 10vw, 10rem) auto clamp(3rem, 8vw, 7rem); }

/* Pied de page commun (accueil et portfolio) */
.site-footer {
  width: 100%;
  display: flex; flex-direction: column;
  font: .62rem var(--sans);
}
.contact footer {
  margin-top: auto;
  padding-top: clamp(6rem, 16vh, 14rem);
}
.archive-site-footer { padding-top: clamp(3rem, 8vh, 6rem); padding-bottom: 1.5rem; }
/* repère : la flèche « remonter » s'arrête à cette hauteur en bas de page */
.scroll-top-stop { display: block; height: 64px; margin: 0 0 clamp(18px, 3vw, 34px); }
.footer-bottom {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 12px;
}
#instagramLink { display: inline-flex; align-items: center; line-height: 0; transition: color .3s ease; }
#instagramLink:hover, #instagramLink:focus-visible { color: var(--sun); }
/* l'icône Instagram à côté du nom, dans le pied de page (accueil et portfolio) */
.footer-id { display: inline-flex; align-items: center; gap: .9rem; }
#instagramLink svg { display: block; width: 24px; height: 24px; }


/* 11. Loupes =============================================================== */

/* Principe commun : une copie du texte, en bleu et posée sur un fond de la
   même couleur que la rubrique, n'est visible que dans un cercle qui suit la
   souris. Le texte d'origine n'est jamais masqué : la copie le recouvre.
   Le cercle est découpé par un masque (et non par clip-path) : le navigateur
   l'applique à la copie entière, ce qui évite le liseré sombre au bord.
   Variables posées par script.js : --lens-x, --lens-y, --lens-r. */

/* Grands titres. La copie déborde un peu du titre (--bleed) pour ne pas
   couper les jambages et l'italique (queue du « q », du « g »…). */
.has-title-lens {
  --bleed-x: 40px;   /* valeurs entières : la copie tombe pile sur les mêmes pixels */
  --bleed-y: 48px;
  position: relative;
  transition: --lens-r .25s ease;
}
.title-text { display: block; }
.title-lens {
  position: absolute;
  inset: calc(-1 * var(--bleed-y)) calc(-1 * var(--bleed-x));
  padding: var(--bleed-y) var(--bleed-x);
  display: block;
  pointer-events: none;
  background: var(--navy);
  background-clip: content-box;
  color: var(--blue-word);
  -webkit-mask-image: radial-gradient(circle at calc(var(--lens-x, 50%) + var(--bleed-x)) calc(var(--lens-y, 50%) + var(--bleed-y)), #000 calc(var(--lens-r) - .5px), transparent calc(var(--lens-r) + .5px));
          mask-image: radial-gradient(circle at calc(var(--lens-x, 50%) + var(--bleed-x)) calc(var(--lens-y, 50%) + var(--bleed-y)), #000 calc(var(--lens-r) - .5px), transparent calc(var(--lens-r) + .5px));
}
.light-sections-panel .title-lens { background-color: var(--white); }
.title-lens * { color: inherit; }

/* 12. Page Portfolio ======================================================= */

.archive-page { --line: rgba(255, 255, 255, .22); }

.archive-main {
  min-height: 100vh;
  padding: clamp(9rem, 16vw, 14rem) var(--pad) 0;
}
.archive-intro { margin-bottom: 4rem; padding-top: 1.5rem; }
.archive-intro h1 {
  margin: 1.4rem 0;
  font-size: clamp(4rem, 10vw, 10rem); line-height: .95; letter-spacing: -.09em;
}
.archive-intro > p:last-child { font: clamp(1rem, 1.4vw, 1.3rem)/1.6 var(--serif); }

 /* rubrique affichée */
               /* survol */

.archive-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start;
  gap: clamp(30px, 4vw, 58px) clamp(18px, 2vw, 28px);
  width: min(100%, 1060px);
  margin-inline: auto;
  padding-bottom: 7rem;
}
.archive-grid .project-card { min-width: 0; }
/* Grand écran : 3 vignettes par rangée, sur toute la largeur.
   Le sous-titre passe sous le titre pour que les titres tiennent sur 2 lignes. */
@media (min-width: 1400px) {
  .archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-inline: 0; }
  .archive-grid .project-meta { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .archive-grid .project-title { font-size: clamp(1.35rem, 1.55vw, 1.75rem); }
  .archive-grid .project-type { text-align: left; }
}
/* Écrans moyens et téléphone : même chose, pour éviter une 3e ligne de titre. */
@media (max-width: 1100px) {
  .archive-grid .project-meta { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .archive-grid .project-type { max-width: none; text-align: left; }
}
.archive-grid .project-card[hidden] { display: none; }


/* 13. Fenêtre de projet ==================================================== */

.project-dialog {
  width: min(850px, 100% - 2rem);
  max-height: 90vh;
  padding: clamp(1.2rem, 4vw, 3rem);
  overflow: auto;
  border: 0; border-radius: 0;
  background: var(--white);
  color: var(--navy);
  font-size: calc(1rem + 2px);
}
.project-dialog::backdrop { background: rgba(8, 13, 24, .82); backdrop-filter: blur(6px); }
#dialogContent .eyebrow,
.dialog-tags { color: #5b6472; font: calc(.75rem + 2px) var(--sans); }
#dialogContent .eyebrow { letter-spacing: .07em; }
.dialog-title { margin: 1rem 0 .4rem; font: clamp(2rem, 6vw, 4rem) var(--serif); letter-spacing: -.06em; }
.dialog-client { margin: 0 0 .6rem; font: 600 1rem/1.5 var(--sans); }
.dialog-description { max-width: 620px; margin-top: 0; line-height: 1.7; }

/* images les unes sous les autres, sans arrondi ni recadrage */
.dialog-images { display: flex; flex-direction: column; gap: 1rem; margin: 2rem 0 0; }
video.dialog-image { max-width: 100%; height: auto; object-fit: cover; }
.dialog-image { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; border-radius: 0; }   /* jamais agrandie au-delà de sa taille réelle (évite le flou) */

/* projets précédent et suivant, en bas de la fenêtre */
.dialog-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  margin-top: 3rem;
}
.dialog-prev, .dialog-next {
  display: grid; align-items: center; gap: .2rem 1rem;
  padding: 0; border: 0; background: none;
  color: var(--navy); font: inherit;
}
.dialog-prev { grid-template-columns: auto 1fr; text-align: left; }
.dialog-next { grid-template-columns: 1fr auto; text-align: right; }
.dialog-prev .dialog-nav-arrow { grid-column: 1; grid-row: 1 / span 2; }
.dialog-prev .dialog-nav-label, .dialog-prev .dialog-nav-title { grid-column: 2; }
.dialog-next .dialog-nav-label, .dialog-next .dialog-nav-title { grid-column: 1; }
.dialog-next .dialog-nav-arrow { grid-column: 2; grid-row: 1 / span 2; }
.dialog-nav-label { color: #5b6472; font: calc(.75rem + 2px) var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.dialog-nav-title { font: clamp(1.1rem, 2.4vw, 1.8rem)/1.15 var(--serif); letter-spacing: -.03em; }
/* même flèche que le carrousel */
.dialog-nav-arrow {
  width: 31px; height: 31px;
  fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s ease;
}
.dialog-prev:hover, .dialog-prev:focus-visible,
.dialog-next:hover, .dialog-next:focus-visible { color: var(--green-word); }
.dialog-prev:hover .dialog-nav-label, .dialog-next:hover .dialog-nav-label { color: inherit; }
.dialog-prev:hover .dialog-nav-arrow { transform: translateX(-.4rem); }
.dialog-next:hover .dialog-nav-arrow { transform: translateX(.4rem); }
@media (max-width: 560px) { .dialog-nav-label { font-size: .7rem; } }


/* bouton pour remonter : flèche seule, couleur selon le fond (script.js) */
.scroll-top {
  position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); z-index: 30;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0;
  border: 0;
  background: none; color: var(--sun);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  translate: 0 calc(-1 * var(--lift, 0px));   /* posé par script.js en bas de page */
  transition: opacity .3s ease, transform .3s ease, color .25s ease, visibility 0s linear .3s;
}
.scroll-top.on-light { color: var(--green-word); }   /* sur fond blanc */
.scroll-top.on-pastel { color: var(--navy); }        /* sur l'encart jaune ou le bandeau bleu */
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s ease, color .25s ease; }
.scroll-top svg {
  display: block; width: 31px; height: 31px;
  fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s ease, color .25s ease;
}
.scroll-top:hover svg, .scroll-top:focus-visible svg { transform: translateY(-3px); }
@media (max-width: 700px) { .scroll-top { width: 52px; height: 52px; } .scroll-top svg { width: 26px; height: 26px; } }


/* 14. Liens animés ========================================================= */

/* « Parcourir le portfolio » et « Retour à l'accueil » : script.js découpe
   le texte en lettres et fait glisser la couleur de gauche à droite. */
.lateral-letter { color: var(--lateral-color, currentColor); }


/* 15. Tablette et téléphone ================================================ */

@media (max-width: 1000px) {
  .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .section-pad { padding-block: 4rem; }
  .process { padding-top: clamp(5.5rem, 10vw, 9.5rem); }
  .archive-main { padding-bottom: 0; }

  /* menu */
  .site-header { padding-top: 1rem; }
  .menu-toggle { display: block; }
  /* liens alignés à droite, sans cadre, qui apparaissent un à un */
  .site-header nav {
    position: absolute; top: 4.4rem; right: var(--pad); left: auto;
    display: flex; flex-direction: column; align-items: flex-end; gap: .55rem;
    padding: 0; border: 0; background: none;
    font-size: .95rem; letter-spacing: .06em;
    visibility: hidden; pointer-events: none;
    transition: visibility 0s linear .45s;
  }
  .site-header nav.open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .site-header nav a {
    padding: .3rem 0;
    opacity: 0; transform: translateX(16px);
    transition: opacity .3s ease, transform .35s ease, color .3s ease;
  }
  .site-header nav.open a { opacity: 1; transform: none; }
  .site-header nav.open a:nth-child(2) { transition-delay: .07s, .07s, 0s; }
  .site-header nav.open a:nth-child(3) { transition-delay: .14s, .14s, 0s; }
  .site-header nav.open a:nth-child(4) { transition-delay: .21s, .21s, 0s; }
  .site-header nav.open a:nth-child(5) { transition-delay: .28s, .28s, 0s; }

  /* vidéos rondes plus grandes */
  .video-round { --round: min(68vw, 300px); }

  /* accueil */
  .hero { padding-top: 14rem; padding-bottom: 4rem; }   /* titre plus bas : place pour le menu */
  .hero-layout { gap: 3rem; }
  .hero h1 { font-size: clamp(3.8rem, 15vw, 6.5rem); }
  .light-sections-panel { margin-top: 24svh; }

  .section-heading { align-items: start; gap: 1rem; margin-bottom: 2rem; }
  .section-aside { max-width: 125px; font-size: .8rem; }
  .project-carousel .project-card { flex-basis: min(78vw, 340px); }

  .about-layout { grid-template-columns: 1fr; gap: 2rem; padding: 1.5rem 0; }
  .about h2,
  .process h2 { font-size: clamp(3.7rem, 14vw, 6rem); }
  .about-services li { grid-template-columns: 1fr; gap: .4rem; padding: 1rem 0; }

  .process { padding-bottom: calc(var(--partners-overlap) + var(--section-gap) - .75rem); }
  .process-steps { grid-template-columns: 1fr; }

  .partners { margin-bottom: calc(var(--section-gap) - 4rem); }

  .contact { min-height: calc(2.5rem + 100vh); padding-top: 4rem; padding-bottom: clamp(1.1rem, 2vw, 2rem); }
  .contact h2 { font-size: 11vw; } /* « Donnons de l'image » tient sur une ligne */

  /* page Portfolio */
  .archive-main { padding-top: 17rem; }   /* titre plus bas : place pour le menu (5 liens) */
  .archive-intro h1 { font-size: clamp(3.5rem, 14vw, 6rem); }
  .archive-grid { grid-template-columns: 1fr; row-gap: 2.5rem; width: min(100%, 560px); }
  .project-title { font-size: 1.35rem; }
  .project-type { max-width: 45%; }
}

@media (max-width: 560px) {
  .footer-bottom { flex-wrap: wrap; }
}


/* 16. Animations réduites ================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { position: relative; min-height: auto; }
  .light-sections-panel { margin-top: 0; box-shadow: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}