/* Portes de l'accueil — trois objets posés sur le bureau, chacun avec son propre
   univers graphique (choisis en Impeccable live, 14 sept. 2026) :
   Projet AP = risographie, Portfolio = cahier Seyès, Contact = enveloppe par avion.
   Les couleurs sont propres à chaque objet et ne suivent pas le thème du site. */

.cartes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 14px var(--pad) clamp(40px, 8vh, 96px);
}
.cartes > a {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  text-decoration: none;
  container-type: inline-size;
}

@media (max-width: 900px) {
  .cartes { grid-template-columns: 1fr; }
  .cartes > a { min-height: 240px; }
}

/* ── Projet AP · Risographie ─────────────────────── */
.riso__card {
  --ink1: #0e7c86;
  --ink2: #ff4fa3;
  --shift: 3px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  border-radius: 10px;
  background: #f5f1e8;
  color: var(--ink1);
  border: 2px solid var(--ink1);
  transition: transform 320ms var(--ease);
}
/* Même poids que la révélation de studio.css, chargé après : garde ses transitions et ajoute la nôtre */
html.js .riso__card { transition: opacity 800ms var(--ease), translate 800ms var(--ease), transform 320ms var(--ease); }
.riso__card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: radial-gradient(var(--ink2) 0.6px, transparent 0.7px);
  background-size: 5px 5px;
  transition: transform 600ms var(--ease);
}
.riso__card:hover { transform: rotate(-0.6deg); }
.riso__card:hover::after { transform: translate(var(--shift), calc(var(--shift) * -1)); }

.riso__tag {
  align-self: flex-start;
  padding: 5px 10px;
  border: 2px solid var(--ink2);
  color: var(--ink2);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.riso__title {
  display: block;
  margin-top: 20px;
  font-size: clamp(2.2rem, 11cqw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.92;
}
.riso__title span { position: relative; display: inline-block; }
.riso__title span::before {
  content: attr(data-t);
  position: absolute;
  inset: 0;
  color: var(--ink2);
  mix-blend-mode: multiply;
  transition: transform 600ms var(--ease);
}
.riso__card:hover .riso__title span::before { transform: translate(calc(var(--shift) * -1), var(--shift)); }

.riso__desc { display: block; margin-top: 10px; font-size: 0.9375rem; line-height: 1.4; color: #2b2b2b; }
.riso__foot {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Portfolio · Cahier Seyès ────────────────────── */
.cahier {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px 22px 22px 46px;
  background-color: #fdfdfb;
  color: #26324a;
  border-radius: 4px;
  border: 1px solid #d9dfe8;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 7px, #d5e0f0 7px 8px),
    repeating-linear-gradient(to bottom, transparent 0 31px, #9fb7d9 31px 32px);
  background-position: 0 6px;
}
.cahier::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 34px;
  width: 1px;
  background: #e2555c;
}

.cahier__label {
  position: absolute;
  top: 20px; right: 22px;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6a7a94;
}

.cahier__title {
  position: relative;
  isolation: isolate;          /* contexte d'empilement : le surligneur reste derrière le texte, devant le papier */
  align-self: flex-start;
  padding: 0 4px;
  font-size: clamp(2rem, 9cqw, 3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #1d2a44;
}
.cahier__title::before {
  content: "";
  position: absolute;
  inset: 12% 0 8%;
  z-index: -1;
  background: #fff46a;
  mix-blend-mode: multiply;
  transform: skewX(-6deg);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 460ms var(--ease);
}
.cahier:hover .cahier__title::before { clip-path: inset(0); }

.cahier__desc { margin-top: 10px; font-size: 0.9375rem; line-height: 1.4; color: #3e4a63; }
.cahier__url {
  margin-top: 14px;
  font-size: 0.8125rem;
  color: #6a7a94;
  text-decoration: underline;
  text-decoration-color: #9fb7d9;
  text-underline-offset: 3px;
}

/* ── Contact · Enveloppe par avion ───────────────── */
.env {
  border-radius: 8px;
  background: #f6f1e4;
  color: #2a2620;
  border: 1px solid #d9d0bb;
  perspective: 900px;
}
.env::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  border: 7px solid transparent;
  border-image: repeating-linear-gradient(45deg, #c8102e 0 12px, #f6f1e4 12px 24px, #1d3fa8 24px 36px, #f6f1e4 36px 48px) 7;
}

.env__letter {
  position: absolute;
  left: 34px; right: 34px; bottom: 44px;
  z-index: 1;
  padding: 18px 18px 16px;
  background: #fff;
  border: 1px solid #e3ddcf;
  border-radius: 4px;
  transform: translateY(44px);
  transition: transform 520ms var(--ease);
}
.env:hover .env__letter { transform: none; }
.env__letter > * { display: block; }

.env__flap {
  position: absolute;
  inset: 0 0 auto;
  height: 52%;
  z-index: 2;
  background: #ebe4d2;
  border-bottom: 1px solid #d9d0bb;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top;
  transition: transform 520ms var(--ease);
}
.env:hover .env__flap { transform: rotateX(-160deg); }

.env__stamp {
  position: absolute;
  top: 18px; right: 20px;
  z-index: 4;
  width: 44px; height: 52px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px dashed #b9ad92;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-align: center;
  color: #1d3fa8;
}
.env__from {
  position: absolute;
  left: 22px; top: 18px;
  z-index: 4;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a7d62;
}

.env__kicker { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: #8a7d62; }
.env__title { margin-top: 4px; font-size: clamp(1.7rem, 8cqw, 2.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: #1f1b16; }
.env__desc { margin-top: 8px; font-size: 0.875rem; line-height: 1.4; color: #4a4338; }
.env__mail { margin-top: 10px; font-size: 0.8125rem; color: #1d3fa8; text-decoration: underline; text-underline-offset: 3px; }

/* Transitions déjà coupées par studio.css ; ici on retire les mouvements eux-mêmes */
@media (prefers-reduced-motion: reduce) {
  .riso__card:hover, .env:hover .env__flap, .env__letter { transform: none; }
}