/* ══════════════════════════════════════════════════════════════════════════
   home.css — page d'accueil seulement. Chargée après css/base.css.

   Refonte v6 « Organic ». Toutes les valeurs viennent des variables de
   styles.css — aucun hexadécimal en dur.
   ══════════════════════════════════════════════════════════════════════════ */

/* — écarts assumés au dossier de design —

   1. Pas de .washed. Le dossier demande que toutes les images de contenu
      passent par ce wrapper, qui applique
          filter: saturate(.6) contrast(.85) brightness(1.1) opacity(.94)
      Dans la maquette, ce filtre unifie des images bouche-trou disparates.
      Ici les images sont les peintures d'Evy : les délaver sur son propre
      portfolio va contre l'objet du site. La classe n'est posée nulle
      part ; styles.css n'est pas modifié pour autant.

   2. Pas de trait devant les sur-titres. Le dossier fait précéder chaque
      .kicker d'un trait de 26 × 2 px. Il se lit comme un tiret en tête de
      texte, et ceux-là ne sont pas voulus sur ce site.

   3. Les trois piliers gardent leur mise en page en escalier plutôt que la
      colonne à titre collant du dossier — chaque idée y est simplement
      encadrée. La grille des collections garde son fond crème plutôt que
      le chapitre sombre. Ces deux choix viennent du client.

   4. Pas de section « preuve » (.proof). Le dossier la livre volontairement
      vide, avec la mention « à compléter avec vos vraies dates » : elle n'a
      sa place en ligne qu'une fois remplie. */

.kicker {
  display: inline-block;
  font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--color-accent-700);
  margin: 0 0 18px;
}

/* ══ la couche décorative ══════════════════════════════════════════════
   Tresses, cercles, festons, peignes, éventails : des SVG au trait tirés
   des rampes accent et sauge, donc ils suivent tout changement d'accent.
   Ils sont posés dans les marges et les coins, jamais en travers d'une
   colonne de texte.

   vector-effect: non-scaling-stroke est ce qui les rend utilisables : les
   viewBox sont étirées par preserveAspectRatio="none" pour couvrir toute
   la largeur, et sans cette propriété l'épaisseur du trait s'étirerait
   avec, donnant des traits gras et déformés.
   ══════════════════════════════════════════════════════════════════════ */
.draw { position: absolute; z-index: 0; pointer-events: none; }
.draw svg { display: block; width: 100%; height: 100%; overflow: visible; }
.draw path, .draw circle {
  fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke;
}

@keyframes flow      { to { stroke-dashoffset: -480; } }
@keyframes flowBack  { to { stroke-dashoffset: 480; } }
@keyframes spin      { to { transform: rotate(360deg); } }
@keyframes spinRev   { to { transform: rotate(-360deg); } }
@keyframes drift     { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(16px, -20px); } }
@keyframes shift     { to { background-position: 22px 22px; } }
@keyframes sway      { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-14px); } }
@keyframes sag       { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* La tresse : deux ondes en contre-phase, plus un fil droit. Les tirets
   coulent en sens opposés, ce qui donne l'illusion du tressage. */
.braid { left: 0; right: 0; height: 74px; }
.braid path {
  stroke: var(--color-accent-300); stroke-width: 1.4; opacity: .55;
  stroke-dasharray: 54 26; animation: flow 30s linear infinite;
}
.braid path:nth-child(2) { animation: flowBack 38s linear infinite; }
.braid path.thin {
  stroke: var(--color-accent-2-300); stroke-width: 1; opacity: .45;
  stroke-dasharray: 4 14; animation: flow 22s linear infinite;
}

/* La même, verticale, pour les marges latérales. */
.braid-v path {
  stroke: var(--color-accent-2-300); stroke-width: 1.3; opacity: .45;
  stroke-dasharray: 46 22; animation: flow 34s linear infinite;
}
.braid-v path:nth-child(2) { animation: flowBack 42s linear infinite; }
.braid-v path.thin {
  stroke: var(--color-accent-300); stroke-width: 1;
  stroke-dasharray: 3 12; opacity: .4;
}

.rings svg { animation: spin 120s linear infinite; }
.rings.rev svg { animation: spinRev 150s linear infinite; }
.rings circle { stroke: var(--color-accent-2-300); stroke-width: 1.3; opacity: .5; }
.rings circle:nth-child(2) { stroke-dasharray: 10 16; }

.scallop { left: 0; right: 0; height: 26px; }
.scallop path {
  stroke: var(--color-accent-300); stroke-width: 1.2; opacity: .45;
  animation: sway 18s ease-in-out infinite;
}

/* Le peigne : douze brins de hauteurs inégales, qui ondulent avec des
   retards décalés — d'où les trois règles nth-child. */
.comb path {
  stroke: var(--color-accent-300); stroke-width: 1.6; opacity: .5;
  animation: sag 7s ease-in-out infinite;
}
.comb path:nth-child(2n) { animation-delay: -1.4s; }
.comb path:nth-child(3n) { animation-delay: -2.8s; }
.comb path:nth-child(5n) { animation-delay: -.7s; }

.fan svg { transform-origin: 8% 92%; animation: spin 240s linear infinite; }
.fan path { stroke: var(--color-accent-2-300); stroke-width: 1.3; opacity: .45; }
.fan path:nth-child(2) { stroke-dasharray: 12 18; }

/* La trame de points, fondue par un masque radial : sans lui, elle
   s'arrêterait sur un bord net qui trahirait le carré. */
.lattice {
  background-image: radial-gradient(var(--color-accent-300) 1.2px, transparent 1.2px);
  background-size: 22px 22px; opacity: .34;
  animation: shift 26s linear infinite;
  -webkit-mask-image: radial-gradient(closest-side, #000 42%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 42%, transparent 100%);
}
.lattice.sage {
  background-image: radial-gradient(var(--color-accent-2-300) 1.2px, transparent 1.2px);
}

/* Cercles au trait et points en orbite. */
.orb {
  position: absolute; z-index: 0; border-radius: 50%;
  border: 1.4px solid var(--color-accent-300); opacity: .45;
  pointer-events: none; animation: drift 16s ease-in-out infinite;
}
.orb.sage { border-color: var(--color-accent-2-300); }
.orbit {
  position: absolute; z-index: 0; border-radius: 50%;
  pointer-events: none; animation: spin 46s linear infinite;
}
.orbit .dot {
  position: absolute; top: -3.5px; left: 50%; margin-left: -3.5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-accent-300); opacity: .75;
}
.orbit.sage .dot { background: var(--color-accent-2-300); }
.orbit.rev { animation: spinRev 62s linear infinite; }

/* Une seule règle coupe tout le mouvement de la couche décorative. Y
   ajouter tout nouveau motif. */
@media (prefers-reduced-motion: reduce) {
  .braid path, .braid-v path, .rings svg, .scallop path, .comb path,
  .fan svg, .lattice, .orb, .orbit, .band-track, .scroll-cue :is(i, svg) {
    animation: none;
  }
}

/* ── hero ──────────────────────────────────────────────────────────────
   Le débordement est coupé au bord de l'ÉCRAN, pas au bord de la section.
   C'est toute la différence : « overflow: clip » posé sur .hero trancherait
   les disques le long du conteneur, et ces arêtes droites dessineraient la
   boîte du hero au lieu de la faire oublier.

   Le rognage remonte donc sur html/body, en overflow-x seulement — clip,
   et non hidden, pour ne pas créer de conteneur de défilement et laisser
   le défilement vertical intact. */
html, body { max-width: 100%; overflow-x: clip; }

.hero {
  position: relative;
  padding: clamp(20px, 3vw, 44px) 0 0;
}

/* Les disques sont positionnés par rapport à l'ÉCRAN et non à la section.
   calc(50% - 50vw) vaut exactement la marge entre le bord du conteneur et
   le bord de la fenêtre : le disque affleure donc le bord de l'écran, et
   les pixels retranchés le poussent au-delà. Quelle que soit la largeur de
   la fenêtre, la coupe reste hors champ. */
.hero-blob { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.blob-a {
  width: 520px; height: 520px; background: var(--color-accent-2-200);
  right: calc(50% - 50vw - 110px); top: -190px;
}
.blob-b {
  width: 190px; height: 190px; background: var(--color-accent-200);
  left: calc(50% - 50vw - 80px); bottom: 60px;
}

/* Placement des motifs du hero.

   Toute la colonne de gauche est calée sur le bord de l'ÉCRAN, et non sur
   celui de la section : calc(50% - 50vw) vaut la gouttière entre les deux.
   Le dossier de design pose ces motifs à -120 px du bord de son hero, qui
   est pleine largeur ; ici .hero vit dans .wrap, et -120 px les auraient
   déposés en plein milieu du titre. Ils vivent dans la marge, jamais en
   travers d'un bloc de texte.

   Les bandes horizontales bordent l'écran entier, par le même calcul. */
.braid-hero   { left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: 104px; }
.scallop-hero { left: calc(50% - 50vw); right: calc(50% - 50vw); top: 4px; }
.scallop-hero path { stroke: var(--color-accent-2-300); opacity: .32; }
.rings-hero    { width: 320px; height: 320px; left: calc(50% - 50vw - 140px); top: 40px; }
.orb-hero-1    { width: 74px; height: 74px; right: 42%; top: 14%; animation-delay: -3s; }
.orb-hero-2    { width: 34px; height: 34px; right: 30%; bottom: 26%; animation-duration: 12s; }
.braid-v-hero  { width: 60px; left: calc(50% - 50vw - 14px); top: 14%; height: 54%; }
.fan-hero      { width: 200px; height: 200px; left: calc(50% - 50vw - 90px); bottom: 44px; }
.lattice-hero  { width: 250px; height: 250px; right: 1%; bottom: 44px; opacity: .26; }
.orbit-hero-1  { width: 344px; height: 344px; left: calc(50% - 50vw - 160px); top: 28px; }
.orbit-hero-2  { width: 150px; height: 150px; right: 27%; top: 27%; }
.comb-hero     { width: 240px; height: 64px; right: 34%; bottom: 138px; }

/* Les couches du hero passent près du texte : le dossier les plafonne à
   0,32 d'opacité, contre 0,45 à 0,55 ailleurs. C'est ce qui les fait lire
   comme un filigrane du papier et non comme un trait par-dessus les mots. */
.hero .draw path, .hero .draw circle { opacity: .3; }
.hero .orb { opacity: .34; }
.hero .orbit .dot { opacity: .55; }

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 33vw, 440px);
  gap: clamp(24px, 4vw, 60px); align-items: end;
}
/* z-index positifs sur le contenu : la couche décorative est en 0. */
.hero-copy { position: relative; z-index: 2; padding-bottom: clamp(20px, 3vw, 48px); }

.display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(42px, 6.8vw, 100px); line-height: 0.88;
  letter-spacing: -0.032em; margin: 0;
}
/* « pra casa. » en terracotta : le seul mot coloré de la page. */
.display em { font-style: normal; color: var(--color-accent-700); }

.hero-what {
  font-size: clamp(16px, 1.3vw, 19px); line-height: var(--leading);
  max-width: 44ch; margin: 28px 0 0;
  color: color-mix(in srgb, var(--color-text) 84%, transparent);
}
.hero-what b { color: var(--color-text); font-weight: 700; }

.hero-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; align-items: center; }
.hero-row .btn { white-space: nowrap; }
/* L'action secondaire est un lien texte, pas un second bouton : deux
   boutons de même poids ne donnent aucune direction au visiteur. */
.hero-second {
  font-size: 15px; font-weight: 600; color: var(--color-accent-700);
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
  transition: gap .25s var(--ease);
}
.hero-second:hover { gap: 12px; }

/* Le portrait est un détourage sur fond transparent : ni cadre, ni arche,
   ni ombre. La silhouette se découpe directement sur le crème de la page.

   D'où l'absence d'aspect-ratio et d'object-fit, qui étaient là pour
   recadrer l'ancienne photo en paysage dans une arche verticale. Ici il
   n'y a rien à recadrer : le fichier est déjà cadré, et lui imposer un
   rapport ne ferait que rogner le détourage. */
.hero-portrait { position: relative; z-index: 1; margin: 0; align-self: end; }
.hero-portrait img { display: block; width: 100%; height: auto; }

/* Une pastille en verre dépoli posée sur le bord du portrait. */
.hero-badge {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--color-accent-300) 50%, transparent);
  border-radius: 999px; padding: 11px 20px 11px 14px;
  box-shadow: var(--shadow-md);
  font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.hero-badge :is(i, svg) { color: var(--color-accent-700); flex: none; }
.badge-1 { left: -34px; top: 22%; }

/* Les chiffres deviennent des pastilles cerclées, alignées sur une ligne
   avec l'invite de défilement au bout. */
.hero-meta {
  position: relative; z-index: 2;
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  padding: 24px 0 clamp(36px, 5vw, 64px);
}
.stat {
  display: flex; align-items: baseline; gap: 10px;
  border: 1px solid var(--color-accent-200); border-radius: 999px;
  padding: 10px 20px;
}
.stat b {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 21px; line-height: 1.05;
}
.stat span {
  font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}
.scroll-cue {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  text-decoration: none;
}
.scroll-cue :is(i, svg) { animation: nudge 1.9s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
/* Dès que le hero passe en une colonne, l'invite disparaît. Deux raisons :
   la section suivante est alors déjà visible sans descendre, et la ligne
   des pastilles n'a plus la largeur de l'accueillir — elle la renvoyait
   seule sur une deuxième ligne, où elle ne veut plus rien dire. */
@media (max-width: 940px) { .scroll-cue { display: none; } }

@media (max-width: 940px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-portrait { max-width: 340px; }
  /* La pastille passe à droite : à gauche, en une colonne, elle sortirait
     de l'écran au lieu de mordre sur la colonne de texte. */
  .badge-1 { left: auto; right: -18px; }
}

@media (max-width: 900px) {
  /* En une colonne, le disque n'a plus le portrait devant lui : à sa
     taille de bureau il devient un aplat vert derrière tout le titre,
     et non plus l'accent d'angle voulu. On le réduit et on le repousse
     dans le coin, toujours au-delà du bord de l'écran. */
  .blob-a { width: 300px; height: 300px; right: calc(50% - 50vw - 90px); top: -130px; }
  .blob-b { width: 140px; height: 140px; left: calc(50% - 50vw - 70px); bottom: 40px; }

  /* Les motifs calés sur la colonne du portrait n'ont plus de colonne où
     se tenir : ils tomberaient en travers du titre. */
  .orb-hero-1, .orb-hero-2, .orbit-hero-2, .comb-hero, .lattice-hero {
    display: none;
  }
}

/* ── bandeau défilant ──────────────────────────────────────────────────
   Les mots sont écrits deux fois dans le gabarit ; la piste se translate
   de -50 %, donc la seconde moitié arrive exactement là où était la
   première et la boucle est invisible. */
.band {
  background: var(--color-accent-2-100); overflow: hidden;
  padding: 18px 0; margin: 0 0 clamp(44px, 6vw, 92px);
}
.band-track {
  display: flex; gap: 44px; align-items: center; white-space: nowrap;
  width: max-content; animation: band-slide 38s linear infinite;
}
.band-item {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px; color: var(--color-accent-2-800);
  display: flex; align-items: center; gap: 44px;
}
.band-item::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-accent); flex: none;
}
@keyframes band-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── les trois piliers ─────────────────────────────────────────────────
   Chaque idée est encadrée : une carte à bords arrondis qui grossit au
   survol. Le dossier v6 propose ici une colonne à titre collant, écartée
   à la demande du client.

   Grille en escalier — chaque colonne part un peu plus bas que la
   précédente. align-items: start est ce qui rend l'escalier lisible une
   fois les cartes encadrées : par défaut une grille étire ses éléments sur
   toute la hauteur de la rangée, si bien que les trois cadres finissaient
   sur la même ligne du bas et que le premier se retrouvait avec 130 px de
   vide au fond. Chacun épouse maintenant son texte, et l'escalier descend
   franchement. Les décalages tombent à zéro en une colonne. */
.pillars { padding: 0 0 clamp(44px, 6vw, 88px); }
.pillar-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px); margin-top: 34px;
  align-items: start;
}
.pillar {
  background: var(--color-neutral-100);
  border: 1.5px solid color-mix(in srgb, var(--color-accent-300) 60%, transparent);
  border-radius: calc(1.6 * var(--radius-lg));
  padding: clamp(24px, 2.6vw, 38px);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease);
}
/* « Grossir » plutôt que « se soulever » : c'est la carte entière qui
   avance vers le lecteur, et non un simple décalage vers le haut. */
.pillar:hover {
  transform: scale(1.035);
  border-color: var(--color-accent-300);
  box-shadow: var(--shadow-lg);
}
@media (prefers-reduced-motion: reduce) {
  .pillar { transition: none; }
  .pillar:hover { transform: none; }
}
.pillar:nth-child(2) { margin-top: clamp(0px, 2.4vw, 34px); }
.pillar:nth-child(3) { margin-top: clamp(0px, 4.8vw, 68px); }
.pillar-num {
  width: 66px; height: 66px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-heading); font-size: 22px;
  /* accent-200 et non 100 : sur le crème de la carte, le ton le plus
     clair de la rampe s'effacerait presque entièrement. */
  background: var(--color-accent-200); color: var(--color-accent-800);
  margin-bottom: 20px;
}
/* Le pilier du milieu prend le second accent : l'alternance évite une
   file de trois pastilles identiques. */
.pillar:nth-child(2) .pillar-num {
  background: var(--color-accent-2-200); color: var(--color-accent-2-800);
}
.pillar h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 23px; line-height: 1.15; margin: 0 0 10px;
}
.pillar p {
  font-size: 15.5px; line-height: var(--leading); margin: 0;
  color: color-mix(in srgb, var(--color-text) 76%, transparent);
  max-width: 34ch;
}
@media (max-width: 820px) {
  .pillar-grid { grid-template-columns: 1fr; }
  .pillar { margin-top: 0; }
}

/* ── sobre a artista : collage de deux images ──────────────────────────
   La petite photo mord sur la grande. Le réservoir de padding autour du
   collage lui laisse la place de dépasser sans rogner la grille. */
.about {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 80px); align-items: center;
  padding: 0 0 clamp(44px, 6vw, 92px);
}
.orb-about-1 { width: 56px; height: 56px; right: 6%; top: -20px; animation-delay: -6s; }
.orb-about-2 { width: 100px; height: 100px; left: 46%; bottom: -34px; animation-duration: 19s; }
.fan-about   { width: 200px; height: 200px; left: -62px; bottom: -44px; }

.collage { position: relative; z-index: 1; padding-bottom: 64px; padding-right: 48px; }
.collage-main {
  margin: 0; border-radius: calc(2.2 * var(--radius-lg));
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.collage-main img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
/* L'incrustation devient un rond plein, comme l'orbe du titre et celle de
   la citation : trois fois la même forme, et la page a une grammaire. */
.collage-inset {
  position: absolute; right: 0; bottom: 0; width: 46%; margin: 0;
  border-radius: 50%; overflow: hidden;
  /* La bordure crème détache l'incrustation de la photo du dessous. */
  border: 8px solid var(--color-bg); box-shadow: var(--shadow-md);
}
.collage-inset img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.about > div { position: relative; z-index: 1; }
.about-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; margin: 0;
}
.about p {
  font-size: 16px; line-height: var(--leading); margin: 22px 0 0;
  max-width: 46ch; color: color-mix(in srgb, var(--color-text) 80%, transparent);
}
.about .link-pill { margin-top: 24px; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } }

/* ── portfólio : grille éditoriale ─────────────────────────────────────
   Conservée telle quelle à la demande du client : le dossier v6 propose
   ici un chapitre sur fond terracotta sombre, écarté.

   Quatre colonnes, la première carte sur deux. Ces règles redéfinissent la
   grille régulière de base.css, pour cette page seulement — la page
   /portfolio/ garde la sienne. */
.portfolio { padding-bottom: clamp(44px, 6vw, 92px); }
.sec-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.sec-head h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(28px, 3vw, 40px); line-height: 1.1; margin: 0;
}
.portfolio .p-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 34px); margin-top: 34px;
}
.portfolio .p-card {
  display: flex; flex-direction: column; gap: 14px;
  text-decoration: none; color: inherit;
}
.portfolio .p-card.wide { grid-column: span 2; }
.portfolio .p-figure {
  margin: 0; border-radius: calc(1.6 * var(--radius-lg)); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
}
.portfolio .p-card:hover .p-figure {
  transform: translateY(-6px); box-shadow: var(--shadow-lg);
}
.portfolio .p-figure img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
}
.portfolio .p-card.wide .p-figure img { aspect-ratio: 16 / 11; }
.p-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.portfolio .p-card h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; line-height: 1.2; margin: 0;
}
.portfolio .p-card .arrow {
  color: var(--color-accent-700); flex: none; transition: transform .25s ease;
}
.portfolio .p-card:hover .arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .portfolio .p-figure, .portfolio .p-card .arrow { transition: none; }
}
@media (max-width: 900px) {
  .portfolio .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* En une colonne, les cartes larges doivent redevenir simples, sinon la
   grille déborde de son conteneur. */
@media (max-width: 560px) {
  .portfolio .p-grid { grid-template-columns: 1fr; }
  .portfolio .p-card.wide { grid-column: span 1; }
}

/* ── citation : la bande sauge pleine largeur ──────────────────────────
   Elle sort de .wrap par ses marges latérales. calc(50% - 50vw) vaut
   exactement la moitié de la différence entre la boîte de contenu et la
   fenêtre : la bande touche donc les deux bords de l'écran. La solution
   habituelle — 100vw et des marges négatives — provoque un défilement
   horizontal dès qu'une barre de défilement est présente, puisque 100vw
   la compte et pas 100 %.

   C'est le rythme de la refonte : la page alterne les fonds au lieu
   d'être crème d'un bout à l'autre. Ici la bande sépare le portfólio de
   la boutique, deux sections denses. */
.quote-band {
  position: relative; overflow: clip;
  margin: clamp(8px, 2vw, 24px) calc(50% - 50vw) clamp(52px, 7vw, 100px);
  padding: clamp(52px, 7vw, 104px) 0;
  background: var(--color-accent-2-100);
}
.braid-quote { top: 26px; }
.braid-quote path { stroke: var(--color-accent-2-400); opacity: .45; }
.braid-quote path.thin { stroke: var(--color-accent-300); opacity: .5; }
.scallop-quote { bottom: 22px; }
.scallop-quote path { stroke: var(--color-accent-2-400); opacity: .4; }
.braid-v-quote { width: 60px; right: 8px; top: 8%; height: 70%; }
.quote-dot {
  position: absolute; width: 170px; height: 170px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent-200) 50%, transparent);
  right: 6%; bottom: -70px; pointer-events: none;
}
/* La bande est pleine largeur, son contenu ne l'est pas : cette boîte
   rétablit la gouttière et la largeur maximale de .wrap. */
.quote-inner {
  position: relative; z-index: 1;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--edge);
  display: grid;
  grid-template-columns: clamp(120px, 16vw, 200px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
}
.quote-orb {
  margin: 0; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-md);
}
.quote-orb img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.quote-band blockquote {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(26px, 3.6vw, 52px); line-height: 1.12;
  max-width: 24ch; margin: 0; color: var(--color-accent-2-900);
}
.quote-band figcaption {
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent-2-800); margin-top: 24px;
}
@media (max-width: 700px) {
  .quote-inner { grid-template-columns: 1fr; }
  .quote-orb { max-width: 130px; }
}

/* ── loja : panneau avec trois pièces ──────────────────────────────────*/
.shop {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 72px); align-items: center;
  background: var(--color-accent-100);
  border-radius: calc(3 * var(--radius-lg));
  padding: clamp(32px, 4vw, 64px);
  margin-bottom: clamp(44px, 6vw, 92px);
}
/* Hachures diagonales sur tout le panneau : elles donnent au fond une
   matière, là où un aplat de couleur reste plat. */
.shop::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--color-accent-300) 60%, transparent) 0 1px,
    transparent 1px 15px);
  opacity: .5;
}
.shop > div { position: relative; z-index: 1; }
.fan-shop { width: 220px; height: 220px; right: -72px; bottom: -72px; }
.fan-shop path {
  stroke: color-mix(in srgb, var(--color-accent-600) 60%, transparent); opacity: .6;
}
.shop h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(26px, 3vw, 42px); line-height: 1.1; margin: 0;
}
.shop > div > p {
  font-size: 15.5px; line-height: var(--leading); margin: 18px 0 26px;
  max-width: 40ch; color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.shop-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}
.shop-card {
  background: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-accent-300) 45%, transparent);
  border-radius: calc(1.4 * var(--radius-lg));
  padding: 12px; text-decoration: none; color: inherit;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.shop-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) {
  .shop-card { transition: none; }
  .shop-card:hover { transform: none; }
}
.shop-card figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.shop-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.shop-card b {
  display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; margin: 12px 4px 2px;
}
.shop-card span {
  display: block; font-size: 13px; margin: 0 4px 6px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
@media (max-width: 880px) { .shop { grid-template-columns: 1fr; } }

/* ── press : une seule ligne ───────────────────────────────────────────*/
.press {
  display: flex; align-items: end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-bottom: clamp(44px, 6vw, 88px);
  border-bottom: 1px solid var(--color-accent-200);
  margin-bottom: clamp(44px, 6vw, 88px);
}
.press h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(26px, 2.8vw, 36px); margin: 0 0 12px;
}
.press p {
  font-size: 15.5px; line-height: var(--leading); margin: 0; max-width: 44ch;
  color: color-mix(in srgb, var(--color-text) 76%, transparent);
}

/* ── contato : le bloc plein qui ferme la page ─────────────────────────
   Terracotta plein sur texte crème. Le titre est une question parce que la
   section demande un choix, et non un formulaire : quatre chemins nommés,
   chacun ouvrant un message déjà rempli. */
.contact {
  background: var(--color-accent-700); color: var(--color-accent-100);
  border-radius: calc(3 * var(--radius-lg));
  padding: clamp(36px, 5vw, 84px) clamp(24px, 5vw, 72px);
  position: relative; overflow: clip;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.contact-dot, .contact-dot-2 { position: absolute; border-radius: 50%; pointer-events: none; }
.contact-dot {
  width: 340px; height: 340px; right: -130px; top: -140px;
  background: color-mix(in srgb, var(--color-accent-600) 66%, transparent);
}
.contact-dot-2 {
  width: 150px; height: 150px; left: -66px; bottom: -76px;
  background: color-mix(in srgb, var(--color-accent-600) 52%, transparent);
}
/* Les motifs du bloc sont repris dans les tons foncés de la rampe : sur ce
   fond, les tons clairs des sections crème disparaîtraient. */
.rings-contact { width: 360px; height: 360px; left: -140px; top: -120px; }
.rings-contact circle { stroke: var(--color-accent-600); opacity: .75; }
.braid-contact { bottom: 30px; }
.braid-contact path { stroke: var(--color-accent-600); stroke-width: 1.5; opacity: .9; }
.braid-contact path.thin { stroke: var(--color-accent-800); opacity: .8; }
.lattice-contact {
  width: 260px; height: 260px; right: 4%; bottom: -50px; opacity: .8;
  background-image: radial-gradient(var(--color-accent-600) 1.3px, transparent 1.3px);
}
.braid-v-contact { width: 60px; left: 12px; top: 10%; height: 70%; }
.braid-v-contact path { stroke: var(--color-accent-600); opacity: .85; }
.braid-v-contact path.thin { stroke: var(--color-accent-800); opacity: .8; }
.comb-contact { width: 200px; height: 60px; right: 7%; bottom: 24px; }
.comb-contact path { stroke: var(--color-accent-600); opacity: .85; }

/* position: relative sur le contenu, pour qu'il passe au-dessus des motifs */
.contact .kicker, .contact h2, .contact .contact-grid { position: relative; z-index: 1; }
.contact .kicker { color: var(--color-accent-200); }
.contact h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(30px, 3.8vw, 54px); line-height: 1.04;
  margin: 0; color: var(--color-bg);
}
.contact .contact-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 64px); margin-top: 34px;
}
.contact-lead {
  font-size: 16px; line-height: var(--leading); margin: 0 0 24px;
  max-width: 38ch; color: color-mix(in srgb, var(--color-bg) 88%, transparent);
}
/* Le délai de réponse est un engagement, pas un ornement : il n'a sa place
   ici que s'il est tenu. Retirer contacto_promessa dans le gabarit le fait
   disparaître, ici comme sur la pastille du portrait. */
.promise {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 600;
  background: color-mix(in srgb, var(--color-accent-600) 60%, transparent);
  color: var(--color-bg); border-radius: 999px;
  padding: 9px 16px; margin-bottom: 22px;
}
.promise :is(i, svg) { flex: none; }
.contact .info-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  font-size: 15px; color: color-mix(in srgb, var(--color-bg) 92%, transparent);
}
.contact .info-row svg { color: var(--color-accent-300); flex: none; }

/* Les pastilles sociales de partes/socials.html, retournées pour le fond
   sombre : le style clair de base.css disparaîtrait dessus. */
.contact .socials { margin-top: 24px; }
.contact .social-btn {
  width: 42px; height: 42px;
  background: color-mix(in srgb, var(--color-accent-600) 70%, transparent);
  color: var(--color-bg);
  transition: background .25s var(--ease), color .25s var(--ease),
              transform .25s var(--ease);
}
.contact .social-btn:hover {
  background: var(--color-bg); color: var(--color-accent-800);
  transform: translateY(-3px);
}

/* — les quatre chemins —
   Chacun est une grande cible : pastille d'icône, libellé et sous-titre,
   flèche. Au survol la carte s'éclaircit entièrement plutôt que de changer
   d'un seul détail — sur un fond aussi dense, un survol discret ne se voit
   pas. */
.routes { display: flex; flex-direction: column; gap: 12px; }
.route {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 16px; align-items: center;
  padding: 18px 22px; border-radius: calc(1.6 * var(--radius-lg));
  text-decoration: none;
  background: color-mix(in srgb, var(--color-accent-600) 45%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--color-accent-300) 30%, transparent);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.route:hover { transform: translateY(-3px); background: var(--color-bg); }
.route-ico {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--color-accent-800) 55%, transparent);
  color: var(--color-accent-200);
}
.route:hover .route-ico { background: var(--color-accent-100); color: var(--color-accent-800); }
.route b {
  display: block; font-family: var(--font-heading);
  font-weight: var(--font-heading-weight); font-size: 19px; color: var(--color-bg);
}
.route > span > span {
  display: block; font-size: 13.5px; line-height: 21px; margin-top: 3px;
  color: color-mix(in srgb, var(--color-bg) 78%, transparent);
}
.route > :is(i, svg) { color: var(--color-accent-200); transition: transform .3s var(--ease); flex: none; }
.route:hover b, .route:hover > span > span, .route:hover > :is(i, svg) { color: var(--color-accent-800); }
.route:hover > :is(i, svg) { transform: translate(4px, -4px); }
@media (prefers-reduced-motion: reduce) {
  .route, .route > :is(i, svg), .contact .social-btn, .hero-second { transition: none; }
  .route:hover { transform: none; }
  .route:hover > :is(i, svg) { transform: none; }
}

@media (max-width: 880px) { .contact .contact-grid { grid-template-columns: 1fr; } }