/* =========================================================
   Portfolio Antoine Boissy — maquette v2
   Valeurs reprises du prototype « Portfolio Accueil » (Claude Design)
   ========================================================= */

:root {
  --encre: #1C1915;
  --gris: #645C53;
  --gris-contact: #4F4840;
  --violet: #6A45E0;
  --violet-bouton: #7E5AEE;
  --violet-clair: #9C82F5;
  --orange: #FF9A30;
  --orange-fonce: #E07A0E;
  --peche: #FFEDD9;
  --blanc: #FFFFFF;
  --creme: #FBF7F2;
  --creme-sombre: #F4EEE7;
  --gris-sombre: #B8AEA3;
  --filet: #ECE4DA;
  --filet-fort: #E6DDD2;
  --fond-filtres: #F1EAE1;
  --filet-sombre: #3A342E;

  --base: "Figtree", system-ui, sans-serif;
  --titres: "Sora", sans-serif;
  --texte: "Inter", sans-serif;

  --contenu: 1280px;
  --espace-section: 192px;
  --gouttiere: 24px;
}

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

/* les ancres (#contact, #identites…) s'arrêtent sous l'en-tête collant */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--base);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
/* le curseur du portrait peut déborder pendant l'animation : jamais de défilement horizontal */
main { overflow-x: clip; }
figure { margin: 0; }
p { margin: 0; }
a { color: var(--encre); text-decoration: none; }
a:hover { color: var(--violet); }

h1, h2, h3 { margin: 0; hyphens: none; }

.enveloppe {
  width: min(var(--contenu), 100% - 2 * var(--gouttiere));
  margin-inline: auto;
}

/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  font-family: var(--texte);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.bouton-sombre { background: var(--encre); color: var(--creme); }
.bouton-sombre:hover { background: var(--violet); color: var(--blanc); }
.bouton-contour { border: 1.5px solid var(--encre); color: var(--encre); }
.bouton-contour:hover { background: var(--encre); color: var(--creme); }
.bouton-violet { background: var(--violet-bouton); color: var(--blanc); }
.bouton-violet:hover { background: var(--blanc); color: var(--encre); }

/* flèche 20 × 20 tracée dans img/fleche.svg, teinte héritée de la couleur du texte */
.avec-fleche::after,
.fleche-ronde::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("img/fleche.svg") center / 20px 20px no-repeat;
          mask: url("img/fleche.svg") center / 20px 20px no-repeat;
  transition: transform .25s ease;
}
/* au survol, la flèche avance dans sa direction ; sa couleur suit déjà le contraste du bouton */
.avec-fleche:hover::after,
.avec-fleche:focus-visible::after { transform: translateX(3px); }
/* cartes d'expertise : comme les projets, la flèche pivote sur son centre de l'horizontale à la diagonale */
.carte-expertise:hover .fleche-ronde::after,
.carte-expertise:focus-visible .fleche-ronde::after { transform: rotate(-45deg); }

.bouton-grand { padding: 16px 26px; }
.bouton-grand.bouton-contour { padding: 14.5px 26px; }
.bouton-entete { padding: 11px 20px; }

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

/* en-tête collant, en capsule flottante façon verre dépoli : la page défile dessous, floutée.
   La bande autour de la capsule reste transparente et ne capte pas les clics. */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: 12px;
  pointer-events: none;
}
.entete-enveloppe {
  pointer-events: auto;
  padding: 8px 8px 8px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  /* moitié de la hauteur (58 px) : une vraie capsule, et un passage net au panneau ouvert en mobile */
  border-radius: 29px;
  background: rgba(238, 236, 233, .72);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
          backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    0 0 0 1px rgba(28, 25, 21, .05),
    0 12px 32px -14px rgba(28, 25, 21, .28);
}
.marque { display: block; }
.marque img { height: 40px; width: auto; }
/* page active dans une pastille orange ; avec app.js, la pastille glisse vers la page cliquée */
.menu {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 16px;
}
.menu a {
  position: relative;
  z-index: 1;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--gris);
  transition: color .2s ease;
}
.menu a:hover { color: var(--orange-fonce); }
.menu a.actif {
  font-weight: 600;
  color: var(--encre);
  background: var(--orange);
}
.menu-pastille {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  border-radius: 999px;
  background: var(--orange);
  pointer-events: none;
  transition: transform .4s cubic-bezier(.25, .8, .25, 1), width .4s cubic-bezier(.25, .8, .25, 1);
}
/* quand la pastille mobile est en place, elle remplace le fond du lien actif */
.menu.pastille-mobile a.actif { background: transparent; }

/* bouton burger (visible sur mobile seulement) : trois traits qui forment une croix une fois ouvert */
.burger {
  display: none;
  order: 2;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--encre);
  cursor: pointer;
}
.burger span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s ease, opacity .2s ease;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.entete.menu-ouvert .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.entete.menu-ouvert .burger span:nth-child(2) { opacity: 0; }
.entete.menu-ouvert .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Héros ---------- */

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding-top: var(--espace-section);
}
.hero-texte {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.hero-signature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--texte);
  font-size: 18px;
}
.hero-signature strong { font-weight: 700; }
/* signature → titre : 24 px (le reste de la colonne garde 32 px) */
.hero-signature { margin-bottom: -8px; }
.point-orange {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 5px rgba(255, 154, 48, .2);
}
@media (prefers-reduced-motion: no-preference) {
  .point-orange { animation: pulsation 2.4s ease-in-out infinite; }
}
@keyframes pulsation {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 154, 48, .22); }
  50%      { box-shadow: 0 0 0 9px rgba(255, 154, 48, 0); }
}
.hero-titre {
  font-family: var(--titres);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.02;
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.mot-cle { font-style: italic; color: var(--violet); }
.mot-cle-detache { display: inline-block; padding: 0 6px; }
.hero-intro {
  max-width: 520px;
  font-family: var(--texte);
  font-size: 20px;
  line-height: 1.55;
  color: var(--gris);
  text-wrap: pretty;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --e : échelle du cadre (0,5 → 1 au chargement, pilotée par app.js) ; règles et curseur suivent le coin supérieur droit */
.hero-portrait {
  --e: 1;
  --decalage: 26px;
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 340px;
}
.cadre-portrait {
  position: relative;
  background: var(--peche);
  border-radius: 36px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform: scale(var(--e));
  transform-origin: 50% 50%;
}
.cadre-portrait,
.regle { opacity: var(--apparition, 1); }

.regle {
  position: absolute;
  color: var(--violet-bouton);
  pointer-events: none;
}
.regle::before { content: ""; position: absolute; background: currentColor; }
/* agrandissement depuis le centre : chaque bord s'écarte de (1 - e) / 2 */
.regle-haut {
  left: calc((1 - var(--e)) * 50%);
  width: calc(var(--e) * 100%);
  top: calc((1 - var(--e)) * 50% - var(--decalage) - 5px);
  height: 11px;
  border-inline: 1px solid;
}
.regle-haut::before { left: 0; right: 0; top: 5px; height: 1px; }
.regle-droite {
  top: calc((1 - var(--e)) * 50%);
  bottom: calc((1 - var(--e)) * 50%);
  left: calc((1 + var(--e)) * 50% + var(--decalage) - 5px);
  width: 11px;
  border-block: 1px solid;
}
.regle-droite::before { top: 0; bottom: 0; left: 5px; width: 1px; }
.regle-valeur {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--violet-bouton);
  color: var(--blanc);
  font-family: var(--texte);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  padding: 4px 5px;
  border-radius: 4px;
}
.regle-droite .regle-valeur { writing-mode: vertical-rl; }

.curseur-figma {
  position: absolute;
  /* la pointe du curseur est à 4 px du coin de son image ; on la pose 12 px à l'intérieur de la photo */
  --dans-photo: 12px;
  left: calc((1 + var(--e)) * 50% - 4px - var(--dans-photo));
  top: calc((1 - var(--e)) * 50% - 4px + var(--dans-photo));
  display: flex;
  align-items: flex-start;
  color: var(--violet-bouton);
  opacity: var(--curseur-o, 0);
  transform: translate(var(--curseur-x, 0px), var(--curseur-y, 0px)) scale(var(--curseur-s, 1));
  transform-origin: 4px 4px;
  pointer-events: none;
  z-index: 2;
}
.curseur-figma svg { display: block; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .28)); }
.curseur-nom {
  margin: 16px 0 0 2px;
  background: var(--violet-bouton);
  color: var(--blanc);
  font-family: var(--texte);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .25);
}

/* état de départ tant que app.js n'a pas pris la main (aucun effet si le mouvement est réduit) */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-portrait:not(.anim-finie) { --e: .5; --apparition: 0; }
}
.cadre-legende {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  font-family: var(--texte);
  font-size: 14px;
  color: var(--gris);
}
/* le PNG du portrait a des marges transparentes : 82 % donne la même emprise que le prototype */
.cadre-portrait img { width: 82%; margin-bottom: 12.5%; }

/* ---------- Chiffres ---------- */

.chiffres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--filet-fort);
  border-bottom: 1px solid var(--filet-fort);
}
.chiffre {
  padding: 32px 24px;
  display: grid;
  justify-content: center;
  align-content: center;
  gap: 6px;
  text-align: center;
}
.chiffre + .chiffre { border-left: 1px solid var(--filet-fort); }
.chiffre-valeur {
  font-family: var(--titres);
  font-size: 40px;
  line-height: 1;
}
.chiffre-label {
  font-family: var(--texte);
  font-size: 16px;
  color: var(--gris);
}

/* ---------- En-têtes de section ---------- */

.entete-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 32px;
}
.surtitre {
  font-family: var(--texte);
  font-size: 16px;
  letter-spacing: .04em;
  color: var(--gris);
}
.titre-section {
  font-family: var(--titres);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.02;
  letter-spacing: -.01em;
}

/* ---------- Expertises ---------- */

/* un seul espacement entre toutes les sections de la page */
main > section + section { margin-top: var(--espace-section); }
.methode .entete-section,
.offres .entete-section { margin-bottom: 48px; }
/* exception : le bloc contact suit les offres de plus près (la moitié de l'espacement) */
main > .offres + .contact { margin-top: calc(var(--espace-section) / 2); }
/* les chiffres restent collés au héros, comme dans le prototype */
main > .hero + .chiffres { margin-top: 48px; }
.grille-expertises {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.carte-expertise {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: 30px;
  padding: 14px 14px 28px;
  color: var(--encre);
  transition: transform .25s ease, box-shadow .25s ease;
}
.carte-expertise:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -28px rgba(28, 25, 21, .35);
  color: var(--encre);
}
.carte-expertise img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 20px;
}
.carte-expertise-corps {
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.carte-expertise-ligne { display: flex; align-items: center; gap: 18px; }
.carte-expertise-titre {
  font-family: var(--titres);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.05;
}
.fleche-ronde {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--encre);
  color: var(--creme);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, color .2s ease;
}
/* toute la carte est le lien : le rond passe au violet dès qu'on la survole, comme les boutons sombres */
.carte-expertise:hover .fleche-ronde,
.carte-expertise:focus-visible .fleche-ronde { background: var(--violet); color: var(--blanc); }
.etiquettes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.etiquettes li {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--filet-fort);
  font-size: 16px;
}

/* ---------- Réalisations ---------- */

.realisations-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.realisations-tete .entete-section { margin-bottom: 0; }
.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px;
  background: var(--fond-filtres);
  border-radius: 999px;
}
.filtre {
  border: 0;
  cursor: pointer;
  font-family: var(--texte);
  font-size: 16px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 999px;
  background: transparent;
  color: var(--encre);
  transition: background-color .2s ease;
}
.filtre:hover { background: var(--filet-fort); }
.filtre.actif { background: var(--encre); color: var(--creme); }

.grille-projets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 24px;
}
.grille-projets.filtre-web .categorie-identite,
.grille-projets.filtre-identite .categorie-web { display: none; }

.projet {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--encre);
  transition: opacity .2s ease;
}
.projet:hover { color: var(--encre); opacity: .9; }
.projet-visuel { border-radius: 24px; overflow: hidden; }
.projet-visuel img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.projet-visuel-logo img { object-fit: contain; }
.fond-marine { background: #0B2E4A; }
.fond-encre { background: var(--encre); }
.fond-gris { background: #EEF0F1; }
.fond-peche { background: var(--peche); }
.fond-blanc { background: var(--blanc); border: 1px solid var(--filet); }

.projet-legende {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.projet-infos { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
/* titre + flèche : au survol du projet, le texte et la flèche passent au violet */
.projet-titre {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .2s ease;
}
.projet:hover .projet-titre,
.projet:focus-visible .projet-titre { color: var(--violet); }
.projet-nom {
  font-family: var(--titres);
  font-size: 20px;
  font-weight: 500;
}
.projet-meta {
  font-family: var(--texte);
  font-size: 16px;
  letter-spacing: .03em;
  color: var(--gris);
}
/* flèche 20 × 20 (img/fleche-diagonale.svg) à 8 px du nom : elle suit la couleur du texte
   (blanc dans la pastille). Au repos elle pointe à l'horizontale (rotation de 45°) ;
   au survol elle pivote sur son centre jusqu'à la diagonale, sans se déplacer. */
.projet-fleche {
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("img/fleche-diagonale.svg") center / 20px 20px no-repeat;
          mask: url("img/fleche-diagonale.svg") center / 20px 20px no-repeat;
  transform: rotate(45deg);
  transition: transform .25s ease;
}
.projet:hover .projet-fleche,
.projet:focus-visible .projet-fleche { transform: rotate(0deg); }
/* mobile (pas de survol) : les flèches des réalisations pointent d'emblée en diagonale vers le haut */
@media (max-width: 760px) {
  .realisations .projet-fleche { transform: rotate(0deg); }
}

/* ---------- Méthode ---------- */

.etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px 24px;
}
.etape {
  border-top: 1.5px solid var(--encre);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.etape-numero {
  font-family: var(--texte);
  font-size: 14px;
  color: var(--violet);
}
.etape-titre {
  font-family: var(--titres);
  font-size: 20px;
  font-weight: 500;
}
.etape-texte {
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.5;
  color: var(--gris);
  text-wrap: pretty;
}

/* ---------- Offres ---------- */

.grille-offres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.offre {
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-radius: 30px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: transform .25s ease, box-shadow .25s ease;
}
/* même montée que les cartes d'expertise */
.offre:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -28px rgba(28, 25, 21, .35);
}
.offre-tete {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 150px;
}
.offre-type {
  font-family: var(--texte);
  font-size: 16px;
  letter-spacing: .04em;
  color: var(--gris);
}
.offre-titre {
  font-family: var(--titres);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
}
.offre-accroche {
  font-family: var(--texte);
  font-size: 18px;
  line-height: 1.5;
  color: var(--gris);
  text-wrap: pretty;
}
.offre-prix { display: flex; align-items: baseline; gap: 8px; }
.prix-montant {
  font-family: var(--titres);
  font-size: 40px;
  line-height: 1;
}
.prix-ttc {
  font-family: var(--texte);
  font-size: 13px;
  color: var(--gris);
}
.bouton-offre { padding: 15px 20px; }
.offre-filet {
  border: 0;
  height: 1px;
  margin: 0;
  background: var(--filet);
}
.offre-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--texte);
  font-size: 18px;
  line-height: 1.45;
}
.offre-liste li { display: flex; gap: 12px; }
/* chevron d'ouverture : utilisé seulement sur mobile */
.offre-bascule { display: none; }
.offre-liste li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  background: var(--orange);
}

.offre-sombre {
  background: var(--encre);
  border: 0;
  color: var(--creme-sombre);
}
.offre-sombre .offre-type,
.offre-sombre .offre-accroche,
.offre-sombre .prix-ttc { color: var(--gris-sombre); }
.offre-sombre .offre-filet { background: var(--filet-sombre); }
.offre-sombre .offre-liste li::before { background: var(--violet-clair); }

/* ---------- Contact ---------- */

.contact-bloc {
  position: relative;
  background: var(--peche);
  border-radius: 40px;
  padding: 64px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 48px;
  row-gap: 40px;
  align-items: center;
  overflow: hidden;
}
.contact-texte { display: flex; flex-direction: column; }

/* trois projets posés en pile, légèrement tournés et écartés, comme des tirages sur une table */
.contact-pile {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4 / 3;
}
.pile-carte {
  position: absolute;
  width: 62%;
  margin: 0;
  padding: 6px;
  background: var(--blanc);
  border-radius: 18px;
  box-shadow: 0 18px 40px -18px rgba(28, 25, 21, .35);
}
.pile-carte img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
}
.pile-carte {
  width: 56%;
  transition: translate .7s cubic-bezier(.25, .8, .25, 1), rotate .7s cubic-bezier(.25, .8, .25, 1), scale .7s cubic-bezier(.25, .8, .25, 1);
}
/* --r : inclinaison de repos ; --px, --py, --pr : petite poussée cumulée au tap (app.js, bornée) */
.pile-carte { translate: var(--px, 0px) var(--py, 0px); rotate: calc(var(--r) + var(--pr, 0deg)); }
.pile-carte-1 { --r: -8deg; left: 0; top: 16%; z-index: 1; }
.pile-carte-2 { --r: 6deg; right: 0; top: 0; z-index: 2; }
.pile-carte-3 { --r: -3deg; left: 26%; bottom: 0; z-index: 3; }
/* sur écran tactile, la poussée arrive avec un léger rebond */
@media (hover: none) {
  .pile-carte { transition: translate .5s cubic-bezier(.3, 1.35, .5, 1), rotate .5s cubic-bezier(.3, 1.35, .5, 1); }
}

/* micro-interaction : au survol de la pile, les cartes s'écartent de 2-3 px ;
   la carte survolée se redresse à moitié et grossit à peine */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .contact-pile:hover .pile-carte-1 { translate: -3px 1.5px; rotate: -9deg; }
  .contact-pile:hover .pile-carte-2 { translate: 3px -2px; rotate: 7deg; }
  .contact-pile:hover .pile-carte-3 { translate: 0 2.5px; rotate: -3.5deg; }
  .contact-pile .pile-carte:hover { scale: 1.02; }
  .contact-pile .pile-carte-1:hover { rotate: -4deg; }
  .contact-pile .pile-carte-2:hover { rotate: 3deg; }
  .contact-pile .pile-carte-3:hover { rotate: -1.5deg; }
}
.pile-carte-3 img { object-fit: contain; padding: 6% 4%; }
/* espacements du bloc : surtitre → titre 32 px, titre → texte 24 px, texte → boutons 32 px */
.contact-bloc .surtitre { margin-bottom: 32px; }
.contact-titre { margin-bottom: 24px; }
.contact-titre {
  font-family: var(--titres);
  font-weight: 600;
  font-size: 40px;
  line-height: .95;
  letter-spacing: -.02em;
}
.contact-intro {
  max-width: 560px;
  font-family: var(--texte);
  font-size: 20px;
  line-height: 1.5;
  color: var(--gris-contact);
  text-wrap: pretty;
}
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.contact-actions .bouton-contour { padding-inline: 24px; }

/* ---------- Pop-up contact (app.js) ---------- */

.popup-ouverte { overflow: hidden; }
.popup-contact {
  width: min(var(--contenu), 100% - 2 * var(--gouttiere));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  background: transparent;
  overflow-y: auto;
}
.popup-contact[open] { animation: popup-entree .3s ease; }
.popup-contact::backdrop {
  background: rgba(28, 25, 21, .45);
  backdrop-filter: blur(4px);
}
@keyframes popup-entree {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .popup-contact[open] { animation: none; }
}
.popup-fermer {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--encre);
  color: var(--creme);
  cursor: pointer;
  z-index: 5;
  transition: background-color .2s ease;
}
.popup-fermer::before,
.popup-fermer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.popup-fermer::after { transform: translate(-50%, -50%) rotate(-45deg); }
.popup-fermer:hover { background: var(--violet); color: var(--blanc); }

/* ---------- Page Création visuelle ---------- */

main > .page-tete + .cv-section { margin-top: calc(var(--espace-section) / 2); }
.cv-section > .entete-section { margin-bottom: 32px; }

/* vidéos : un film mis en avant, puis une grille ; les formats courts en vignettes carrées */
.videos { display: grid; gap: 48px 24px; }
.videos-films { grid-template-columns: 1fr 1fr; }
.videos-courts { grid-template-columns: repeat(6, 1fr); gap: 32px 16px; }
/* vignette sur fond blanc : un filet pour la détacher de la page */
.video-claire .video-visuel { background: var(--blanc); border: 1px solid var(--filet); }
/* vignette horizontale dans une grille carrée : on la montre entière */
.video-entiere .video-visuel img { object-fit: contain; }
.videos-sous-titre {
  margin: 96px 0 24px;
  font-family: var(--titres);
  font-size: 24px;
  font-weight: 500;
}
.video {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--encre);
  cursor: pointer;
}
.video-visuel {
  position: relative;
  display: block;
  border-radius: 24px;
  overflow: hidden;
  background: var(--encre);
}
.video-visuel img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: scale .7s cubic-bezier(.25, .8, .25, 1);
}
.videos-courts .video-visuel { border-radius: 20px; }
.videos-courts .video-visuel img { aspect-ratio: 1 / 1; }
.video:hover .video-visuel img { scale: 1.03; }
/* bouton lecture : un disque blanc et un triangle, violet au survol */
.video-lecture {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45);
  transition: background-color .2s ease, transform .2s ease;
}
.video-lecture::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-35%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--encre);
  transition: border-color .2s ease;
}
.videos-courts .video-lecture { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
.videos-courts .video-lecture::before { border-width: 8px 0 8px 13px; }
.video:hover .video-lecture,
.video:focus-visible .video-lecture { background: var(--violet); transform: scale(1.06); }
.video:hover .video-lecture::before,
.video:focus-visible .video-lecture::before { border-left-color: var(--blanc); }
.video .projet-nom { transition: color .2s ease; }
.video:hover .projet-nom,
.video:focus-visible .projet-nom { color: var(--violet); }
.videos-courts .projet-nom { font-size: 18px; }
.videos-courts .projet-meta { font-size: 14px; }

/* lecteur vidéo (app.js) : la vidéo YouTube s'ouvre par-dessus la page */
.lecteur {
  width: min(1100px, 100% - 32px, (100dvh - 160px) * 16 / 9);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.lecteur.court { width: min(420px, 100% - 32px, (100dvh - 160px) * 9 / 16); }
.lecteur[open] { animation: popup-entree .3s ease; }
.lecteur::backdrop {
  background: rgba(28, 25, 21, .85);
  backdrop-filter: blur(4px);
}
.lecteur-cadre {
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
}
.lecteur.court .lecteur-cadre { aspect-ratio: 9 / 16; }
.lecteur-cadre iframe { display: block; width: 100%; height: 100%; border: 0; }
.lecteur .popup-fermer { top: -56px; right: 0; }

/* galerie : vignettes au même format, image entière dans la visionneuse */
.realisations-galerie .realisations-tete { margin-bottom: 32px; }
.galerie {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
}
.oeuvre { display: flex; flex-direction: column; gap: 12px; }
.oeuvre[hidden] { display: none; }
.oeuvre img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
  background: var(--fond-filtres);
  cursor: zoom-in;
  transition: transform .3s ease, box-shadow .3s ease;
}
.oeuvre:hover img { transform: translateY(-4px); box-shadow: 0 18px 30px -18px rgba(28, 25, 21, .45); }
.oeuvre figcaption {
  font-family: var(--texte);
  font-size: 16px;
  font-weight: 500;
  color: var(--encre);
}
.oeuvre .agrandir { display: none !important; }
@media (max-width: 1024px) {
  .galerie { grid-template-columns: repeat(3, 1fr); }
  .videos-courts { grid-template-columns: repeat(3, 1fr); gap: 32px 16px; }
}
@media (max-width: 760px) {
  .videos-films { grid-template-columns: 1fr; gap: 36px; }
  .videos-courts { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .videos-sous-titre { margin: 64px 0 24px; font-size: 20px; }
  .videos-courts .projet-nom { font-size: 16px; }
  .galerie { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .oeuvre img { border-radius: 14px; }
  .oeuvre figcaption { font-size: 14px; }
  .lecteur .popup-fermer { top: -52px; }
}
@media (prefers-reduced-motion: reduce) {
  .lecteur[open] { animation: none; }
}

/* ---------- Page À propos ---------- */

main > .page-tete + .apropos-section { margin-top: calc(var(--espace-section) / 2); }
.apropos-section > .entete-section { margin-bottom: 48px; }

/* parcours : « avant / aujourd'hui » à gauche, la frise des étapes à droite */
.parcours-grille {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: center;
}
.avant-apres { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.portrait-carte { display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* les deux portraits en quinconce */
.portrait-carte + .portrait-carte { margin-top: 56px; }
@media (max-width: 760px) { .portrait-carte + .portrait-carte { margin-top: 32px; } }
.portrait-carte img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  object-position: center;
  padding: 28px 24px;
  background: var(--peche);
  border-radius: 24px;
}

.parcours { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 36px; }
.parcours li { position: relative; padding-left: 44px; }
/* un point par étape, relié au suivant par un filet ; le dernier (aujourd'hui) est plein */
.parcours li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid var(--violet);
  background: var(--blanc);
  box-sizing: border-box;
}
.parcours li:last-child::before { background: var(--violet); }
.parcours li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 29px;
  bottom: -32px;
  width: 2px;
  background: var(--filet-fort);
}
.parcours-etape { font-family: var(--titres); font-size: 20px; font-weight: 500; }
.parcours-texte {
  margin-top: 6px;
  max-width: 560px;
  font-family: var(--texte);
  font-size: 18px;
  line-height: 1.55;
  color: var(--gris);
}

/* prestations : cinq cartes numérotées qui se soulèvent au survol */
.prestations {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.prestation {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--filet);
  border-radius: 24px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.prestation:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -18px rgba(28, 25, 21, .35); }
.prestation-numero { font-family: var(--texte); font-size: 14px; color: var(--violet); }
.prestation-titre { margin: 16px 0 0; font-family: var(--titres); font-size: 20px; font-weight: 500; }
.prestation p { font-family: var(--texte); font-size: 16px; line-height: 1.5; color: var(--gris); }

/* expériences et formation : deux colonnes de listes séparées par des filets */
.cv-grille { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
.cv-colonne-titre.comparatif-etiquette { display: inline-block; margin: 0 0 8px; padding: 8px 20px; font-family: var(--titres); font-size: 24px; font-weight: 500; line-height: normal; background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.cv-liste { list-style: none; margin: 0; padding: 0; }
.cv-liste li { padding: 24px 0; border-bottom: 1px solid var(--filet); }
.cv-dates { font-family: var(--texte); font-size: 14px; font-weight: 500; color: var(--violet); }
.cv-poste { margin-top: 6px; font-family: var(--titres); font-size: 20px; font-weight: 500; }
.cv-lieu { margin-top: 2px; font-family: var(--texte); font-size: 16px; color: var(--encre); }
.cv-texte { margin-top: 8px; font-family: var(--texte); font-size: 16px; line-height: 1.5; color: var(--gris); }

.apropos-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.apropos-cartes .etiquettes { flex-wrap: wrap; }
.apropos-liste { list-style: none; margin: 0; padding: 0; }
.apropos-liste li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--filet);
  font-family: var(--texte);
  font-size: 16px;
}
.apropos-liste li:last-child { border-bottom: 0; }
.apropos-liste li span:last-child { color: var(--gris); }

@media (max-width: 1024px) {
  .prestations { grid-template-columns: repeat(3, 1fr); }
  .apropos-cartes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .parcours-grille,
  .cv-grille { grid-template-columns: 1fr; gap: 48px; }
  .avant-apres { max-width: 480px; }
}
@media (max-width: 760px) {
  .apropos-section > .entete-section { margin-bottom: 32px; }
  .parcours-texte { font-size: 16px; }
  .prestations { grid-template-columns: 1fr; gap: 12px; }
  .prestation { padding: 20px; }
  .prestation-titre { margin-top: 8px; }
  .apropos-cartes { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- Visionneuse d'image (app.js) ---------- */

.agrandissable, .agrandissable-mobile { position: relative; }
.agrandissable img { cursor: zoom-in; }
/* sur ordinateur, les images « mobile seulement » restent de simples images */
.agrandissable-mobile .agrandir { display: none; }
.agrandir {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 14px;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* loupe (img/loupe.svg) en masque : elle prend la couleur du texte, y compris au survol */
.agrandir::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("img/loupe.svg") center / contain no-repeat;
  mask: url("img/loupe.svg") center / contain no-repeat;
}
.agrandir:hover { background: var(--violet); border-color: var(--violet); color: var(--blanc); }
/* mobile : bouton plus compact, en haut à droite pour ne pas gêner « Voir la page entière » */
@media (max-width: 760px) {
  .agrandissable-mobile img { cursor: zoom-in; }
  .agrandissable-mobile .agrandir { display: inline-flex; }
  .agrandir { top: 12px; right: 12px; bottom: auto; padding: 7px 14px 7px 12px; font-size: 14px; }
}

.visionneuse {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.visionneuse[open] { animation: popup-entree .3s ease; }
.visionneuse::backdrop {
  background: rgba(28, 25, 21, .8);
  backdrop-filter: blur(4px);
}
/* zone qui défile : l'image y est centrée tant qu'elle tient dans l'écran */
.visionneuse-scene {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 72px 24px 64px;
  overflow: auto;
  overscroll-behavior: contain;
}
/* la largeur est fixée par app.js (ajustée à l'écran, ou doublée en zoom) */
.visionneuse img {
  flex-shrink: 0;
  margin: auto;
  max-width: none;
  height: auto;
  border-radius: 20px;
  background: var(--blanc);
  cursor: zoom-in;
}
/* zoom : on se déplace dans l'image en faisant défiler */
.visionneuse.zoom img {
  border-radius: 12px;
  cursor: zoom-out;
}
.visionneuse-aide {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(28, 25, 21, .75);
  color: var(--blanc);
  font-family: var(--texte);
  font-size: 14px;
  white-space: nowrap;
  pointer-events: none;
}
.visionneuse .popup-fermer { top: 16px; right: 16px; }
@media (prefers-reduced-motion: reduce) {
  .visionneuse[open] { animation: none; }
}

/* ---------- Pied de page ---------- */

.pied {
  padding: var(--espace-section) 0 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.pied-marque {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--gris);
}
.pied-marque img { height: 30px; width: auto; }
.pied-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 14px;
}
.pied-menu .behance { font-weight: 700; }
/* survol : même orange que le menu d'en-tête (la page en cours garde son texte foncé, règle suivante) */
.pied-menu a { transition: color .2s ease; }
.pied-menu a:hover { color: var(--orange-fonce); }
/* page en cours : même capsule orange que dans le menu d'en-tête ; la marge négative garde le texte aligné */
.pied-menu a.actif {
  padding: 6px 12px;
  margin: -6px -12px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--encre);
  font-weight: 600;
}

/* ---------- Page Création de sites web ---------- */

.page-tete {
  padding-top: 96px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.page-tete .hero-titre { max-width: 820px; }
main > .page-tete + .fiches { margin-top: calc(var(--espace-section) / 2); }

.fiches {
  display: flex;
  flex-direction: column;
  gap: calc(var(--espace-section) / 2);
}
.fiche {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 48px;
  align-items: center;
  scroll-margin-top: 32px;
}
/* un projet sur deux, le visuel passe à droite */
.fiche:nth-child(even) { grid-template-columns: 5fr 7fr; }
.fiche:nth-child(even) .fiche-visuel { order: 2; }

.fiche-visuel {
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: 24px;
  overflow: hidden;
  background: var(--peche);
}
.fiche-visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale .7s cubic-bezier(.25, .8, .25, 1);
}
.fiche-visuel:hover img { scale: 1.02; }

/* mockups détourés posés côte à côte sur le fond pêche */
.fiche-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 3%;
}
/* les PNG ont de larges marges transparentes : on les agrandit pour qu'ils occupent le panneau */
.fiche-duo img { object-fit: contain; scale: 1.18; }
.fiche-duo:hover img { scale: 1.2; }

/* mise en scène studio : un mur, un sol en arrondi (cyclo) et des ombres portées en couches */
.scene-studio {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(90% 45% at 50% 100%, rgba(200, 140, 80, .20), transparent 70%),
    linear-gradient(180deg, #FFF4E8 0%, #FFEDD9 46%, #F7DABB 54%, #F2D0AC 100%);
}
/* lumière douce venant du haut à gauche */
.scene-studio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 50% at 22% 18%, rgba(255, 255, 255, .55), transparent 70%);
  pointer-events: none;
}
/* la tablette est posée : ombre de contact serrée puis ombre portée vers la droite */
.scene-studio img:first-child {
  filter:
    drop-shadow(0 2px 1px rgba(60, 30, 5, .38))
    drop-shadow(5px 10px 8px rgba(60, 30, 5, .22))
    drop-shadow(16px 30px 24px rgba(60, 30, 5, .18));
}
/* les téléphones sont surélevés : l'ombre s'éloigne et se diffuse */
.scene-studio img:last-child {
  filter:
    drop-shadow(0 2px 2px rgba(60, 30, 5, .28))
    drop-shadow(12px 26px 18px rgba(60, 30, 5, .18))
    drop-shadow(28px 56px 38px rgba(60, 30, 5, .16));
}

/* plusieurs captures dans le même cadre */
.fiche-trio,
.fiche-paire {
  display: grid;
  gap: 8px;
  background: var(--blanc);
}
.fiche-trio {
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 1fr 1fr;
}
.fiche-trio img:first-child { grid-row: span 2; }
.fiche-paire { grid-template-columns: 2fr 3fr; }
.fiche-trio img,
.fiche-paire img { min-height: 0; }

.fiche-texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.fiche-numero {
  font-family: var(--texte);
  font-size: 14px;
  color: var(--violet);
  margin-bottom: 12px;
}
.fiche-titre {
  font-family: var(--titres);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.15;
  margin-bottom: 16px;
}
.fiche-description {
  font-family: var(--texte);
  font-size: 18px;
  line-height: 1.55;
  color: var(--gris);
  margin-bottom: 20px;
}
.fiche-texte .etiquettes { margin-bottom: 28px; }

/* ---------- Étude de cas ---------- */

.cas-retour {
  align-self: flex-start;
  padding: 9px 18px 9px 14px;
}
.cas-retour::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("img/fleche.svg") center / 20px 20px no-repeat;
          mask: url("img/fleche.svg") center / 20px 20px no-repeat;
  transform: rotate(180deg);
  transition: transform .25s ease;
}
.cas-retour:hover::before,
.cas-retour:focus-visible::before { transform: translateX(-3px) rotate(180deg); }
.cas-tete .hero-intro { max-width: 720px; }
.cas-fiche {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
  margin: 8px 0 0;
}
.cas-fiche dt {
  font-family: var(--titres);
  font-size: 16px;
  color: var(--gris);
}
.cas-fiche dd {
  margin: 4px 0 0;
  font-family: var(--texte);
  font-weight: 500;
  font-size: 18px;
}

main > .cas-tete + .cas-couverture { margin-top: 48px; }
.cas-couverture img { width: 100%; border-radius: 30px; }
/* groupe de mots à ne jamais couper (passe en bloc à la ligne) */
.insecable { white-space: nowrap; }
/* couverture sur fond blanc : un filet pour la détacher de la page */
.cas-couverture img.couverture-claire { border: 1px solid var(--filet); }

.cas-duo-cartes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.cas-carte {
  border: 1px solid var(--filet);
  border-radius: 30px;
  padding: 36px 32px;
}
.cas-carte-peche { background: var(--peche); border-color: var(--peche); }
.cas-carte-titre {
  font-family: var(--titres);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  margin-bottom: 24px;
}

/* titre, puis paragraphe ou liste en dessous */
.cas-tete-section {
  display: grid;
  gap: 24px;
  margin-bottom: 48px;
}
.cas-tete-section .entete-section { margin-bottom: 0; }
.cas-tete-section .cas-texte,
.cas-tete-section .offre-liste { max-width: 720px; }
.cas-texte {
  font-family: var(--texte);
  font-size: 18px;
  line-height: 1.55;
  color: var(--gris);
}

.comparatif {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.comparatif-colonne {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}
.comparatif-etiquette {
  padding: 7px 14px;
  border: 1px solid var(--filet-fort);
  border-radius: 999px;
  font-size: 16px;
}
.etiquette-apres {
  background: var(--violet);
  border-color: var(--violet);
  color: var(--blanc);
}
.comparatif-legende {
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.5;
  color: var(--gris);
  min-height: 3em;
}

/* capture d'écran dans un cadre ; les plus longues sont repliées par app.js */
.cadre {
  position: relative;
  width: 100%;
  border: 1px solid var(--filet);
  border-radius: 20px;
  overflow: hidden;
  background: var(--blanc);
}
.cadre img { width: 100%; }
.cadre.repliable:not(.deplie) { max-height: 720px; }
.cadre.repliable:not(.deplie)::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 140px;
  background: linear-gradient(transparent, var(--blanc));
  pointer-events: none;
}
.cadre-bascule {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--encre);
  color: var(--creme);
  font-family: var(--texte);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease;
}
.cadre-bascule:hover { background: var(--violet); color: var(--blanc); }
.cadres-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  align-items: start;
}

/* capture détourée : sans cadre, centrée */
.cadre-libre {
  max-width: 860px;
  margin-inline: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.cadre-moyen { max-width: 600px; margin-inline: auto; }
/* image étroite : on ne l'étire pas au-delà de sa largeur réelle */
.cadre-etroit { max-width: 393px; }

/* maquettes page par page : les écrans à gauche, les mises en situation à droite */
.maquette + .maquette { margin-top: 96px; }
.maquette .cas-carte-titre { margin-bottom: 8px; }
.maquette-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 24px;
}
.maquette-visuels {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.maquette-visuels img { width: 100%; border-radius: 20px; }
.maquette-visuels figure img { display: block; }

.prototypes {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.prototype {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--filet);
  border-radius: 20px;
  overflow: hidden;
  background: var(--fond-filtres);
}
.prototype iframe { display: block; width: 100%; height: 100%; border: 0; }

/* planche de style : typographies et couleurs */
.specimen + .specimen { margin-top: 28px; }
.specimen-nom {
  font-family: var(--texte);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
}
.specimen-glyphes {
  margin-top: 8px;
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.5;
  color: var(--gris);
  overflow-wrap: anywhere;
}
.specimen-sora { font-family: var(--titres); }
.specimen-work { font-family: "Work Sans", sans-serif; }
.specimen-roboto { font-family: "Roboto", sans-serif; font-weight: 400; }
.specimen-role {
  font-family: var(--texte);
  font-size: 14px;
  color: var(--gris);
  margin-bottom: 4px;
}
.nuancier.nuancier-trois { grid-template-columns: repeat(3, 1fr); }
.specimen-antonio { font-family: "Antonio", sans-serif; font-weight: 500; letter-spacing: .02em; }
.specimen-poppins { font-family: "Poppins", sans-serif; font-weight: 400; }
/* police non disponible en web : l'alphabet est montré en image, découpé dans la planche */
.specimen-image { display: block; width: 100%; max-width: 400px; margin-top: 12px; mix-blend-mode: multiply; }
.specimen-montserrat { font-family: "Montserrat", sans-serif; font-weight: 600; }
/* pistes de logo : petites vignettes en grille */
.pistes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pistes .cadre img { display: block; }
@media (max-width: 860px) { .pistes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pistes { grid-template-columns: 1fr; gap: 12px; } }
.specimen-chillax { font-family: "Chillax", sans-serif; font-weight: 500; }
.specimen-lexend-giga { font-family: "Lexend Giga", sans-serif; font-weight: 400; }
.specimen-poiret { font-family: "Poiret One", sans-serif; font-weight: 400; }
.specimen-didact { font-family: "Didact Gothic", sans-serif; font-weight: 400; }
.cas-couverture .fiche-trio img,
.cas-couverture .fiche-paire img { border-radius: 0; }
/* logo présenté seul, à taille raisonnable */
.cas-logo { max-width: 560px; display: flex; flex-direction: column; gap: 16px; }
.prototypes > .comparatif-colonne { align-items: stretch; }
.prototypes .comparatif-etiquette { align-self: flex-start; }
.prototypes + .prototypes, .prototypes > .comparatif-colonne + .comparatif-colonne { margin-top: 48px; }
.prototype.prototype-mobile { aspect-ratio: 9 / 16; width: 100%; max-width: 420px; }
.cas-design-system { margin-top: 48px; }
/* couverture en panneau pêche, avec les mockups détourés */
.cas-couverture-duo { aspect-ratio: 16 / 9; border-radius: 30px; }
.nuancier {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.nuance {
  display: flex;
  align-items: flex-end;
  min-height: 180px;
  padding: 16px;
  border-radius: 20px;
  font-family: var(--texte);
  font-size: 16px;
  font-weight: 500;
}
.nuance-sombre { background: #1E1F22; color: var(--blanc); }
.nuance-claire { background: var(--blanc); border: 1px solid var(--filet-fort); }

.cas-mockup { margin-top: 48px; }
.cas-mockup img { width: 100%; border-radius: 30px; }

.cas-suivant {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.cas-suivant-lien {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 32px;
  border-top: 1.5px solid var(--encre);
  color: var(--encre);
}
.cas-suivant-titre {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--titres);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -.01em;
  transition: color .2s ease;
}
.cas-suivant-lien:hover,
.cas-suivant-lien:hover .cas-suivant-titre { color: var(--violet); }
.cas-suivant-lien:hover .projet-fleche,
.cas-suivant-lien:focus-visible .projet-fleche { transform: rotate(0deg); }
/* étude de cas : grand espacement entre les sections ; le bas de page (projet suivant, contact) reste à 96 px */
main > .cas-section { margin-top: var(--espace-section); }
main > .cas-suivant,
main > .cas-suivant + .contact { margin-top: 96px; }

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1000px) {
  .contact-bloc { grid-template-columns: 1fr; }
  .contact-pile { justify-self: center; max-width: 380px; }
  .grille-offres { grid-template-columns: 1fr; max-width: 560px; }
  .offre-tete { min-height: 0; }
}

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .cas-duo-cartes,
  .maquette-grille,
  .comparatif { grid-template-columns: 1fr; }
  .maquette + .maquette { margin-top: 64px; }
  .prototype { aspect-ratio: 3 / 4; }
  .cas-tete-section { margin-bottom: 32px; }
  .comparatif { gap: 40px; }
  .comparatif-legende { min-height: 0; }
  .cas-suivant-titre { font-size: 28px; }
  .fiche,
  .fiche:nth-child(even) { grid-template-columns: 1fr; gap: 24px; }
  .fiche:nth-child(even) .fiche-visuel { order: 0; }
  .grille-expertises { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --espace-section: 96px; }
  /* contenu peu utile sur petit écran (prototype Figma illisible en mobile) */
  .masque-mobile { display: none; }
  /* menu burger : logo à gauche, burger à droite ; ouvert, les liens puis « Contactez-moi » 48 px plus bas */
  .entete-enveloppe { gap: 0; padding: 6px 6px 6px 16px; }
  .burger { display: flex; }
  .menu,
  .bouton-entete { display: none; }
  /* ouvert, la capsule devient un panneau aux coins arrondis */
  .entete.menu-ouvert .entete-enveloppe { padding: 6px 6px 24px 16px; border-radius: 28px; }
  .entete.menu-ouvert .menu {
    display: flex;
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 20px;
  }
  .entete.menu-ouvert .bouton-entete {
    display: inline-flex;
    order: 4;
    margin-top: 48px;
  }

  /* l'ensemble carte + règle de droite occupe toute la largeur du contenu :
     la carte laisse à droite la place du décalage et de la règle (6 px, la moitié de ses 11 px) */
  .hero-portrait {
    order: -1;
    --decalage: 18px;
    max-width: none;
    width: calc(100% - var(--decalage) - 6px);
    justify-self: start;
  }
  .hero-titre { font-size: 28px; }
  .hero-intro { font-size: 18px; }

  .chiffres { grid-template-columns: 1fr; }
  /* mobile : le petit texte se place à côté du chiffre, sur la même ligne de base */
  .chiffre {
    padding: 24px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 4px 12px;
    text-align: left;
  }
  .chiffre + .chiffre { border-left: 0; border-top: 1px solid var(--filet-fort); }

  .titre-section, .contact-titre { font-size: 28px; }
  .carte-expertise-titre { font-size: 20px; }
  .page-tete { padding-top: 48px; }
  .fiches { gap: 96px; }
  .specimen-glyphes { font-size: 13px; }
  .cas-duo-cartes > * { min-width: 0; }
  .nuancier.nuancier-trois { grid-template-columns: 1fr; }
  .nuancier-trois .nuance { min-height: 96px; }
  .fiche-titre { font-size: 24px; }
  .etiquettes li { font-size: 14px; }
  .fiche-description { font-size: 16px; }
  .chiffre-valeur, .prix-montant { font-size: 32px; }
  /* filtres sur une ligne, défilement horizontal au doigt (barre de défilement masquée) */
  .filtres {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filtres::-webkit-scrollbar { display: none; }
  .filtre { flex: none; white-space: nowrap; }
  .grille-projets { grid-template-columns: 1fr; gap: 36px; }
  .offre { padding: 30px 24px; }

  /* offres compactes : le trait est remplacé par un chevron (img/chevron.svg, 24 × 24),
     tourné vers le bas quand la carte est fermée, vers le haut quand elle est ouverte */
  .offre { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .offre .offre-filet { display: none; }
  .offre-bascule {
    display: block;
    align-self: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: var(--encre);
    -webkit-mask: url("img/chevron.svg") center / 24px 24px no-repeat;
            mask: url("img/chevron.svg") center / 24px 24px no-repeat;
    cursor: pointer;
    transition: transform .4s cubic-bezier(.25, .8, .25, 1);
  }
  .offre-sombre .offre-bascule { background: var(--creme-sombre); }
  .offre.ouverte .offre-bascule { transform: rotate(180deg); }

  .offre-depliant {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: -24px;
    opacity: 0;
    transition: grid-template-rows .45s cubic-bezier(.25, .8, .25, 1), margin-top .45s cubic-bezier(.25, .8, .25, 1), opacity .3s ease;
  }
  .offre-depliant > div { overflow: hidden; min-height: 0; }
  .offre.ouverte .offre-depliant { grid-template-rows: 1fr; margin-top: 0; opacity: 1; }
  .contact-bloc { padding: 40px 24px; border-radius: 30px; }
  .contact-pile { max-width: 300px; }
  /* sur téléphone, la pop-up reste compacte : les cartes décoratives n'y apparaissent pas */
  .popup-contact .contact-pile { display: none; }
  /* la croix monte dans le coin, le titre descend : plus rien ne se chevauche */
  .popup-contact .popup-fermer { top: 12px; right: 12px; }
  .popup-contact .contact-titre { font-size: 28px; margin-top: 32px; }
  .popup-contact .contact-intro { font-size: 18px; }
  .pied { flex-direction: column; align-items: flex-start; }
  .pied-menu { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- Page networking (/uiux_designer/, lien des QR codes) ---------- */
/* carte de visite pêche centrée : portrait rond, signature, titre, actions, puis contacts */
.reseau { padding-top: 48px; }
.reseau-carte {
  max-width: 640px;
  margin-inline: auto;
  padding: 48px 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
  background: var(--peche);
  border-radius: 30px;
}
.reseau-portrait {
  width: 184px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blanc);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .55);
  position: relative;
}
/* zoom sur le visage et les épaules : la forme violette du bas de l'image sort du cercle */
.reseau-portrait img { position: absolute; left: 7.9%; top: 7.9%; width: 103.2%; max-width: none; height: auto; }
.reseau-texte { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.reseau-texte .hero-signature { margin-bottom: 0; font-size: 16px; }
/* le métier passe sous le nom, sur sa propre ligne */
.reseau-texte .hero-titre .mot-cle { display: block; }
.reseau-texte .hero-intro { font-size: 18px; max-width: 500px; text-align: left; }
.reseau-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.reseau-contact {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid rgba(28, 25, 21, .12);
}
.reseau-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.reseau-liens .bouton { padding: 10px 20px; }
@media (max-width: 760px) {
  .reseau { padding-top: 32px; }
  .reseau-carte { padding: 36px 20px 28px; gap: 28px; }
  .reseau-portrait { width: 152px; }
  .reseau-texte { gap: 20px; }
  .reseau-texte .hero-intro { font-size: 17px; }
  .reseau-actions { align-self: stretch; flex-direction: column; }
  .reseau-actions .bouton { width: 100%; }
  /* les trois contacts tiennent sur une ligne */
  .reseau-liens { gap: 6px; }
  .reseau-liens .bouton { padding: 10px 14px; }
}