/* Coco Tattoo GVA — feuille de style partagée (accueil + pages artistes) */
/* Police des titres : Cormorant Garamond (Google Fonts, licence OFL) — esprit
« Nicolas Cochin » : française, très contrastée, fine. */
/* ---------- Tokens ---------- */
:root {
/* Identité du salon : une seule couleur, le bordeaux du logo. Chaque artiste
garde la sienne dans son chapitre (voir « Couleur de chaque artiste »). */
--bordeaux: #A2144E; /* prélevé dans le mot TATTOO du logo : couleur du salon */
--bordeaux-fonce: #7A0F3B;/* survol des boutons */
--fond: #FFFAF7; /* blanc cassé : menu, accueil, galerie, infos */
--peau: #FBEEF1; /* voile de bordeaux : survols du menu et des cartes */
--peau-2: var(--bordeaux); /* contour de la photo d'équipe et des vignettes */
--clair: #FFFAF7; /* texte clair sur les sections bordeaux */
--encre: #241528; /* aubergine sombre : titres et textes */
--encre-2: #3A2A42; /* texte secondaire */
--muet: #6B5A73; /* texte discret */
--accent: var(--bordeaux); /* étoiles, losanges, liens, petits détails */
--bouton: var(--bordeaux); /* boutons communs */
--bouton-texte: var(--fond);
--bouton-survol: var(--bordeaux-fonce);
--ligne: rgba(162, 20, 78, .18);
--ligne-nuit: rgba(255, 250, 247, .2);
--display: "Cormorant Garamond", "Cochin", "Times New Roman", Georgia, serif;
--body: "Karla", "Helvetica Neue", Arial, sans-serif;
--mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
--gutter: clamp(16px, 5vw, 64px);
--maxw: 1180px;
--ease: cubic-bezier(.2, .7, .2, 1);
--ease-out: cubic-bezier(.23, 1, .32, 1); /* entrées : démarre vite, se pose en douceur */
}
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
margin: 0;
background: var(--fond);
color: var(--encre);
font-family: var(--body);
font-size: 17px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
overflow-x: clip; /* jamais de défilement horizontal, quoi qu'il arrive */
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.14; margin: 0; text-wrap: balance; letter-spacing: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
em { font-style: italic; }
h1 em, h2 em { font-style: italic; } /* Cormorant a une vraie italique : on s'en sert pour le « & » et les mots accentués */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow {
font-family: var(--mono);
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muet);
display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); flex: none; }
.lead { font-size: 19px; line-height: 1.55; color: var(--encre-2); max-width: 34em; }
.muted { color: var(--muet); }
/* Boutons */
.btn {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--body); font-weight: 500; font-size: 15px; letter-spacing: .01em;
padding: 14px 22px; border-radius: 999px; border: 1px solid var(--bouton);
background: var(--bouton); color: var(--bouton-texte);
transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
cursor: pointer;
}
.btn:hover { background: var(--bouton-survol); color: var(--bouton-texte); border-color: var(--bouton-survol); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--encre); border-color: var(--bouton); }
.btn.ghost:hover { background: var(--bouton); color: var(--bouton-texte); border-color: var(--bouton); }
.btn svg { width: 16px; height: 16px; }
/* ---------- Header ---------- */
.site-header {
position: sticky; top: 0; z-index: 20;
background: color-mix(in srgb, var(--fond) 88%, transparent);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--ligne);
box-shadow: 0 8px 30px rgba(38, 29, 35, 0);
transition: box-shadow .3s var(--ease-out);
}
.site-header.scrolled { box-shadow: 0 8px 30px rgba(38, 29, 35, .07); } /* une fois qu'on a défilé, le header se détache */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 68px; }
.brand { display: flex; align-items: center; }
.brand img { height: 54px; width: auto; } /* logo de la cliente : version lettres aubergine sur fond clair */
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.nav-links > a { position: relative; padding-block: 4px; }
.nav-links > a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--accent); transition: right .3s var(--ease); }
.nav-links > a:hover::after { right: 0; }
/* Menu déroulant « Prestations » */
.has-menu { position: relative; }
.menu-btn {
background: none; border: 0; padding: 4px 0; font: inherit; font-weight: 500; color: inherit; cursor: pointer;
display: inline-flex; align-items: center; gap: 7px;
}
.menu-btn svg { width: 12px; height: 12px; transition: transform .25s var(--ease); }
.has-menu:hover .menu-btn svg, .has-menu.open .menu-btn svg { transform: rotate(180deg); }
.menu {
position: absolute; top: calc(100% + 12px); left: -14px; min-width: 260px;
background: var(--fond); border: 1px solid var(--ligne); border-radius: 18px; padding: 8px;
box-shadow: 0 18px 44px rgba(38,29,35,.14);
display: none; gap: 2px;
}
.menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* pont pour le survol */
.has-menu:hover .menu, .has-menu.open .menu, .has-menu:focus-within .menu { display: grid; }
.menu a { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 11px 14px; border-radius: 12px; }
.menu a:hover { background: var(--peau); }
.menu a b { font-weight: 500; }
.menu a span { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muet); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-cta .btn { padding: 11px 18px; font-size: 14px; }
.nav-toggle { display: none; background: none; border: 1px solid var(--ligne); border-radius: 999px; width: 42px; height: 42px; cursor: pointer; color: var(--encre); place-items: center; }
.nav-toggle svg { width: 18px; height: 18px; }
@media (max-width: 860px) {
.nav-links { display: none; }
.nav-toggle { display: grid; }
.site-header.open .nav-links {
display: flex; flex-direction: column; gap: 4px;
position: absolute; left: 0; right: 0; top: 68px;
background: var(--fond); border-bottom: 1px solid var(--ligne);
padding: 12px var(--gutter) 20px;
}
.site-header.open .nav-links > a { padding: 12px 0; border-bottom: 1px solid var(--ligne); font-size: 17px; }
.site-header.open .nav-links > a::after { display: none; }
/* Sur mobile, les prestations sont listées directement, sans menu déroulant */
.site-header.open .has-menu { border-bottom: 1px solid var(--ligne); padding-bottom: 8px; }
.site-header.open .menu-btn { pointer-events: none; padding: 12px 0 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muet); font-weight: 400; }
.site-header.open .menu-btn svg { display: none; }
.site-header.open .menu { display: grid; position: static; min-width: 0; border: 0; box-shadow: none; padding: 0; background: none; }
.site-header.open .menu a { padding: 10px 0; font-size: 17px; border-radius: 0; }
.nav-cta .btn span { display: none; }
.nav-cta .btn { padding: 11px 14px; }
.brand img { height: 38px; }
.foot .brand img { height: 54px; }
}
/* ---------- Hero ---------- */
.hero { background: var(--fond); padding-block: clamp(48px, 8vw, 96px) clamp(40px, 6vw, 72px); }
/* Bureau : texte à gauche (2 rangées : texte, puis notes), photo à droite sur les 2 rangées.
Mobile : une colonne dans l'ordre texte → photo → notes. */
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; column-gap: clamp(32px, 6vw, 80px); row-gap: 0; align-items: center; }
.hero-text { grid-column: 1; grid-row: 1; }
.hero-visual { grid-column: 2; grid-row: 1 / span 2; }
.hero h1 { font-size: clamp(2.3rem, 5vw, 4.1rem); margin-top: 22px; }
.hero h1 em { color: var(--accent); font-weight: 400; }
.hero .lead { margin-top: 26px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.proof { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 20px 32px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--ligne); }
.proof-item { display: flex; align-items: center; gap: 12px; }
.proof-num { font-family: var(--display); font-size: 40px; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.proof-num sup { font-size: 14px; font-family: var(--mono); color: var(--muet); vertical-align: top; top: 2px; position: relative; margin-left: 2px; }
/* Tablette / petit écran : on resserre pour garder les trois notes sur une ligne */
@media (min-width: 861px) and (max-width: 1100px) {
.proof { flex-wrap: nowrap; justify-content: space-between; gap: 12px; }
.proof-item { flex-direction: column; align-items: flex-start; gap: 4px; }
.proof-num { font-size: 34px; }
}
.proof-label { font-size: 13px; line-height: 1.35; color: var(--muet); }
.stars { color: var(--accent); letter-spacing: 1px; font-size: 13px; display: block; }
.hero-visual { position: relative; }
/* Cadre « miroir vague » : un fond rose poudré découpé en vagues, et la photo découpée pareil à l'intérieur.
Chaque photo a sa propre forme (--forme), toutes de la même famille. */
.arch {
--forme: url(#vague-equipe);
aspect-ratio: 4 / 5; width: 100%; max-width: 100%;
background: var(--peau-2);
padding: clamp(6px, 2.4%, 11px); /* épaisseur du contour ondulé */
clip-path: var(--forme);
position: relative;
}
.arch > img, .arch > .arch-in { clip-path: var(--forme); }
.arch > .arch-in { height: 100%; overflow: hidden; } /* cadre intérieur : la photo peut bouger dedans sans déformer la vague */
.arch.simone { --forme: url(#vague-simone); } /* grands lobes doux */
.arch.jade { --forme: url(#vague-jade); } /* festons fins */
.arch.axelle { --forme: url(#vague-axelle); } /* galet irrégulier */
/* Photo d'équipe (paysage) dans l'arche : cadrage un peu moins étroit, centré sur les visages */
.hero-visual .arch.equipe { aspect-ratio: 5 / 6; }
.hero-visual .arch.equipe img { object-position: 43% 20%; translate: 0 4px; } /* 4 px plus bas : la bordure rose est juste un poil plus épaisse en haut */ /* la photo est paysage, le cadre portrait : on choisit la bande visible pour centrer le trio */
.stamp {
position: absolute; left: -34px; bottom: 28px; width: 148px; height: 148px;
background: var(--fond); border-radius: 50%; padding: 10px;
box-shadow: 0 10px 30px rgba(38,29,35,.16);
}
.stamp svg { width: 100%; height: 100%; animation: spin 24s linear infinite; }
.stamp text { font-family: var(--mono); font-size: 8.4px; letter-spacing: .12em; fill: var(--encre); }
.stamp .spark { fill: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }
.sparkle { position: absolute; color: var(--accent); pointer-events: none; }
.sparkle svg { width: 100%; height: 100%; }
.s1 { top: -14px; right: 26px; width: 34px; height: 34px; }
.s2 { top: 34%; right: -18px; width: 18px; height: 18px; opacity: .8; }
.s3 { bottom: 70px; right: 40px; width: 12px; height: 12px; opacity: .6; }
/* Mobile : même composition que sur bureau, en miniature —
étiquette + titre à gauche, photo d'équipe à droite ; texte, boutons et notes en dessous sur toute la largeur. */
@media (max-width: 860px) {
.hero { padding-top: 36px; }
.hero-grid { grid-template-columns: 1.05fr .95fr; column-gap: 14px; align-items: center; }
.hero-text { display: contents; }
.hero-text > .eyebrow { grid-column: 1; grid-row: 1; align-self: end; }
.hero-text > .eyebrow .long { display: none; }
.hero-text > h1 { grid-column: 1; grid-row: 2; font-size: clamp(1.7rem, 7.4vw, 2.4rem); margin-top: 12px; }
.hero-visual { grid-column: 2; grid-row: 1 / span 2; }
.hero-text > .lead { grid-column: 1 / -1; grid-row: 3; margin-top: 28px; font-size: 17px; }
.hero-text > .hero-actions { grid-column: 1 / -1; grid-row: 4; margin-top: 24px; }
.proof { grid-column: 1 / -1; grid-row: 5; margin-top: 32px; flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
.proof-item { flex-direction: column; align-items: flex-start; gap: 2px; }
.proof-num { font-size: 26px; }
.proof-num sup { font-size: 11px; }
.proof-label { font-size: 11px; }
.stars { font-size: 11px; }
.stamp { left: -12px; bottom: -14px; width: 82px; height: 82px; padding: 6px; }
.s1 { top: -10px; right: 4px; width: 22px; height: 22px; }
.s2 { top: 30%; right: -8px; width: 12px; height: 12px; }
.s3 { display: none; }
}
@media (max-width: 400px) {
.hero-text > h1 { font-size: 1.6rem; }
.proof-label { font-size: 10px; }
}
/* Emplacements photo (à remplacer par ![]()
) */
.ph {
position: relative; overflow: hidden;
background:
radial-gradient(120% 80% at 30% 20%, #F6E2E8 0%, transparent 60%),
radial-gradient(90% 90% at 80% 90%, #C1748E 0%, transparent 55%),
linear-gradient(160deg, #F1D7DE 0%, #BE5981 100%);
color: var(--encre);
}
.ph::before {
content: ""; position: absolute; inset: 0; opacity: .22; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Étiquette posée sur une photo : emplacement vide, tuile de galerie, pièce de portfolio.
Même pastille partout ; seule la position (et l'opacité du fond) change. */
.ph-label, figure.tile figcaption, .work figcaption {
position: absolute;
font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--encre-2); background: color-mix(in srgb, var(--fond) 84%, transparent);
padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}
.ph-label { left: 50%; bottom: 18px; transform: translateX(-50%); background: color-mix(in srgb, var(--fond) 72%, transparent); }
figure.tile figcaption { left: 14px; bottom: 14px; }
.work figcaption { left: 16px; bottom: 16px; pointer-events: none; }
/* Vraies photos : même gabarit que les emplacements */
.arch > img, .arch-in > img, .tile > img { width: 100%; height: 100%; object-fit: cover; display: block; }
figure.tile { margin: 0; position: relative; }
/* ---------- Bandeau styles ---------- */
.strip { border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); padding-block: 16px; overflow: hidden; }
.strip ul { display: flex; gap: 0; white-space: nowrap; width: max-content; animation: slide 38s linear infinite; }
.strip li { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-2); padding-inline: 22px; display: flex; align-items: center; gap: 22px; }
.strip li::after { content: ""; width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg); }
@keyframes slide { to { transform: translateX(-50%); } }
/* Bandeau décoratif : il continue de défiler (plus lentement) même avec « réduire les animations » */
@media (prefers-reduced-motion: reduce) { .strip ul { animation: slide 70s linear infinite !important; } }
/* ---------- Sections ---------- */
.section { padding-block: clamp(64px, 9vw, 120px); }
.section-head { display: grid; grid-template-columns: 1fr; gap: 18px; max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.section-head .lead { font-size: 18px; }
/* Sections en aplat bordeaux : « Première fois », pied de page, « Prendre rendez-vous » */
.nuit-section { background: var(--bordeaux); color: var(--clair); --bouton: var(--fond); --bouton-texte: var(--bordeaux); --bouton-survol: var(--fond); }
/* Sur le bordeaux, les accents passent en blanc cassé */
.nuit-section, .site-footer { --accent: var(--clair); }
.nuit-section .eyebrow { color: var(--clair); }
.nuit-section .review-src { border-color: var(--ligne-nuit); }
.nuit-section .lead { color: color-mix(in srgb, var(--clair) 88%, transparent); }
/* Intro des prestations */
.intro { padding-block: clamp(56px, 8vw, 104px) clamp(40px, 5vw, 64px); }
.intro .section-head { margin-bottom: 0; }
/* Un chapitre par artiste : photo à gauche, ou à droite avec .flip (Axelle) */
.artiste { padding-block: clamp(56px, 8vw, 104px); }
.artiste-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.artiste.flip .artiste-visual { order: 2; }
.artiste.flip .artiste-grid { grid-template-columns: 1.15fr .85fr; } /* le texte garde la colonne large, photo à droite */
.artiste-visual .arch, .artiste-visual .arch-lien { aspect-ratio: 3 / 4; max-width: 440px; }
.artiste.flip .artiste-visual .arch, .artiste.flip .artiste-visual .arch-lien { margin-left: auto; }
/* La photo de chaque artiste mène à son portfolio (en plus du lien « Voir son portfolio ») */
.arch-lien { display: block; color: inherit; }
.arch-lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 40px; }
@media (hover: hover) and (pointer: fine) {
.arch-lien .arch-in > img { transition: scale .6s var(--ease-out); }
.arch-lien:hover .arch-in > img { scale: 1.05; }
}
.artiste .icon { width: 42px; height: 42px; color: currentColor; margin-bottom: 18px; }
/* Icônes dessinées (PNG blanc sur transparent) posées en masque : elles prennent la couleur du texte comme les icônes SVG */
.icon.icon-ongles, .icon.icon-tatouage, .icon.icon-piercing { display: block; background: currentColor; -webkit-mask: var(--dessin) center / contain no-repeat; mask: var(--dessin) center / contain no-repeat; }
.icon-ongles { --dessin: url(icones/axelle-ongles.png); }
.icon-tatouage { --dessin: url(icones/simone-tatouage.png); }
.icon-piercing { --dessin: url(icones/jade-piercing.png); }
.artiste .icon.icon-ongles, .artiste .icon.icon-tatouage, .artiste .icon.icon-piercing { width: 48px; height: 48px; margin-bottom: 14px; } /* un peu plus grands que les icônes SVG pour peser pareil */
.artiste .icon.icon-tatouage { width: 56px; height: 56px; margin-bottom: 10px; } /* dessin plus détaillé (main + machine) : encore un cran pour que les traits fins restent lisibles */
.artiste .eyebrow { color: var(--accent); }
.artiste h1, .artiste h2 { font-size: clamp(2.3rem, 4.6vw, 3.8rem); margin-top: 14px; }
.artiste .role { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muet); margin-top: 12px; }
.artiste .lead { margin-top: 22px; }
.prestations { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; font-size: 15px; }
.prestations li { display: flex; gap: 12px; align-items: baseline; }
.prestations li::before { content: ""; width: 14px; height: 1px; background: var(--accent); flex: none; position: relative; top: -4px; }
.artiste .actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* Écrans moyens : boutons un peu plus compacts pour rester côte à côte */
@media (min-width: 861px) and (max-width: 1000px) { .artiste .actions .btn { font-size: 14px; padding: 12px 18px; } }
.artiste .note { margin-top: 18px; font-size: 13px; color: var(--muet); }
/* ---------- Couleur de chaque artiste ----------
Un fond pastel par artiste (aplat pleine largeur, sans dégradé) + sa couleur
signature sur le contour de la photo, les petits éléments et les accents.
Texte aubergine #241528, boutons aubergine à texte ivoire #FFF8F5.
Les mêmes classes servent sur l'accueil et sur leur page dédiée.
--peau-2 = la couleur signature telle quelle : c'est le contour de la photo.
--accent = la même couleur, assombrie quand il le faut, pour tout ce qui est
écrit ou fin (étiquette, tirets, icône, liens) — un fuchsia ou un
rose sorbet purs ne sont pas lisibles en petit sur un pastel. */
.artiste.simone, .artiste.axelle, .artiste.jade {
--encre: #241528; /* textes */
--clair: #FFF8F5; /* ivoire */
--bouton: #241528; /* dans leurs espaces, les boutons restent aubergine */
--bouton-texte: #FFF8F5;
--bouton-survol: var(--accent);
color: var(--encre);
}
.artiste.simone .icon, .artiste.axelle .icon, .artiste.jade .icon { color: var(--accent); }
.artiste.simone .btn.ghost, .artiste.axelle .btn.ghost, .artiste.jade .btn.ghost { border-color: var(--accent); }
/* Simone — l'aplat rose sorbet, son fuchsia sur le contour de la photo.
Sur ce fond plus soutenu le fuchsia pur ne serait pas lisible en petit :
les accents écrits passent au fuchsia foncé (5:1) et les petits textes au
gris aubergine (7:1). */
.artiste.simone {
background: #FFC4D6;
--peau-2: #F20089;
--accent: #B00066;
--muet: #4A3A4F;
--ligne: rgba(242, 0, 137, .28);
}
/* Axelle — rose très clair, son rose sorbet sur le contour des photos,
titres, textes et petits accents en aubergine (15:1 sur ce fond) */
.artiste.axelle {
background: #FFF0F7;
--peau-2: #FFC4D6;
--accent: #241528;
--encre-2: #241528;
--muet: #4A3A4F; /* même aubergine éclaircie : garde la hiérarchie des petits textes */
--bouton-survol: #4A3A4F; /* son accent est déjà l'aubergine : survol un cran plus clair */
--ligne: rgba(36, 21, 40, .22);
}
/* Jade — lavande clair + violet : le seul cas où la couleur signature passe partout
sans retouche (8,6:1 sur la lavande) */
.artiste.jade {
background: #EFE5FA;
--peau-2: #5603AD;
--accent: #5603AD;
--ligne: rgba(86, 3, 173, .22);
}
/* Mobile : la photo reste à côté du nom (à gauche, ou à droite pour .flip), le reste passe dessous */
@media (max-width: 860px) {
.artiste-grid { grid-template-columns: 44% 1fr; column-gap: 16px; row-gap: 0; align-items: center; }
.artiste-body { display: contents; }
.artiste-visual { grid-column: 1; grid-row: 1 / span 4; }
.artiste.flip .artiste-visual { grid-column: 2; }
.artiste-visual .arch, .artiste.flip .artiste-visual .arch,
.artiste-visual .arch-lien, .artiste.flip .artiste-visual .arch-lien { max-width: none; margin-left: 0; aspect-ratio: 4 / 5; }
.artiste-body > .icon { grid-column: 2; grid-row: 1; width: 32px; height: 32px; margin-bottom: 10px; }
.artiste-body > .icon.icon-ongles, .artiste-body > .icon.icon-piercing { width: 37px; height: 37px; margin-bottom: 7px; }
.artiste-body > .icon.icon-tatouage { width: 42px; height: 42px; margin-bottom: 5px; }
.artiste-body > .eyebrow { grid-column: 2; grid-row: 2; }
.artiste-body > h1, .artiste-body > h2 { grid-column: 2; grid-row: 3; font-size: clamp(1.7rem, 7.4vw, 2.4rem); margin-top: 10px; }
.artiste-body > .role { grid-column: 2; grid-row: 4; margin-top: 8px; font-size: 11px; }
.artiste.flip .artiste-body > .icon, .artiste.flip .artiste-body > .eyebrow,
.artiste.flip .artiste-body > h1, .artiste.flip .artiste-body > h2, .artiste.flip .artiste-body > .role { grid-column: 1; }
.artiste-body > .lead { grid-column: 1 / -1; grid-row: 5; margin-top: 28px; font-size: 17px; }
.artiste-body > .prestations { grid-column: 1 / -1; grid-row: 6; gap: 8px 16px; font-size: 14px; } /* on garde les 2 colonnes (3 par 3) comme sur grand écran */
.prestations li { gap: 10px; }
.artiste-body > .actions { grid-column: 1 / -1; grid-row: 7; margin-top: 24px; }
.artiste-body > .note { grid-column: 1 / -1; grid-row: 8; }
}
@media (max-width: 480px) { .artiste .actions .btn { width: 100%; justify-content: center; } }
/* Galerie */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 12px; }
.tile { --forme: url(#vague-tuile); clip-path: var(--forme); overflow: hidden; }
.tile:nth-child(3) { --forme: url(#vague-tuile-2); } /* les deux carrés n'ont pas la même forme */
.tile.tall { grid-row: span 2; --forme: url(#vague-haute); }
.tile.wide { grid-column: span 2; --forme: url(#vague-large); }
.gallery-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--ligne); }
/* Mobile : même mosaïque que sur bureau (4 colonnes, mêmes emplacements), réduite proportionnellement */
@media (max-width: 860px) {
.gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: calc(19vw - 8px); gap: 8px; }
.gallery .ph-label, .gallery figcaption { display: none; } /* trop petit pour une légende */
}
/* Première fois : étapes */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); counter-reset: step; }
.step { position: relative; padding-top: 22px; border-top: 1px solid var(--encre); }
.step::before {
counter-increment: step; content: counter(step, decimal-leading-zero);
font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--accent);
position: absolute; top: -8px; left: 0; background: var(--fond); padding-right: 12px;
}
.step h3 { font-size: 26px; }
.step p { margin-top: 12px; color: var(--encre-2); font-size: 16px; }
/* Les mêmes étapes sur fond aubergine (section « Première fois ») */
.nuit-section .step { border-top-color: var(--ligne-nuit); }
.nuit-section .step::before { background: var(--bordeaux); }
.nuit-section .step p { color: color-mix(in srgb, var(--clair) 88%, transparent); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
/* Avis */
.reviews { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.rating-big { display: flex; align-items: baseline; gap: 14px; }
.rating-big .n { font-family: var(--display); font-size: clamp(5rem, 11vw, 8.5rem); line-height: .9; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.03em; }
.rating-big .d { font-family: var(--mono); font-size: 14px; color: var(--clair); letter-spacing: .1em; }
.rating-big .stars { font-size: 22px; letter-spacing: 3px; margin-top: 10px; }
.review-cols { display: grid; gap: 22px; }
.review-src { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 18px; border-top: 1px solid var(--ligne); }
.review-src:last-of-type { border-bottom: 1px solid var(--ligne); }
.review-src strong { font-weight: 600; }
.review-src .val { font-family: var(--mono); font-size: 14px; }
.review-src .val b { font-family: var(--display); font-weight: 500; font-size: 27px; font-variant-numeric: lining-nums tabular-nums; margin-right: 6px; }
@media (max-width: 860px) { .reviews { grid-template-columns: 1fr; } }
/* Infos pratiques */
.infos { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 56px); }
.info-list { display: grid; gap: 0; }
.info-row { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding-block: 18px; border-top: 1px solid var(--ligne); }
.info-row:last-child { border-bottom: 1px solid var(--ligne); }
.info-row dt { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muet); padding-top: 3px; }
.info-row dd { margin: 0; }
.info-row a.line { border-bottom: 1px solid var(--encre); }
.info-row a.line:hover { color: var(--accent); border-color: var(--accent); }
.hours { display: grid; gap: 6px; font-variant-numeric: tabular-nums; }
.hours div { display: flex; justify-content: space-between; gap: 16px; max-width: 320px; }
.hours .closed { color: var(--muet); }
.map { width: 100%; max-width: 100%; border-radius: 24px; overflow: hidden; border: 1px solid var(--ligne); aspect-ratio: 4 / 3; min-height: 320px; background: var(--peau-2); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: sepia(.25) saturate(.7); }
.infos .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 860px) { .infos { grid-template-columns: 1fr; } .info-row { grid-template-columns: 96px 1fr; } }
/* CTA final */
.cta-final { text-align: center; padding-block: clamp(56px, 8vw, 96px); border-top: 1px solid var(--ligne); }
.cta-final h2 { font-size: clamp(2rem, 5vw, 4rem); max-width: 16em; margin-inline: auto; }
.cta-final .nowrap { white-space: nowrap; }
.cta-final h2 em { color: var(--accent); }
.cta-final .hero-actions { justify-content: center; }
/* Footer */
.site-footer { background: var(--bordeaux); color: var(--clair); padding-block: 48px 32px; }
.foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.foot .brand img { height: 62px; } /* version ivoire, sur le bordeaux du footer */
.foot p { font-size: 14px; color: color-mix(in srgb, var(--clair) 84%, transparent); margin-top: 12px; max-width: 30em; }
.foot h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--clair); margin: 0 0 14px; font-weight: 500; }
.foot ul { display: grid; gap: 9px; font-size: 15px; }
.foot li a:hover { color: var(--clair); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--ligne-nuit); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: color-mix(in srgb, var(--clair) 80%, transparent); }
@media (max-width: 860px) { .foot { grid-template-columns: 1fr 1fr; } .foot > div:first-child { grid-column: 1 / -1; } }
/* ============================================================
Liens texte « → » (troisième niveau après bouton plein et bouton ghost)
============================================================ */
.more { font-weight: 500; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; padding-block: 4px; }
.more::after { content: "→"; transition: transform .25s var(--ease); }
.more:hover { color: var(--accent); }
.more:hover::after { transform: translateX(3px); }
.artiste .actions .more { flex-basis: 100%; margin-top: 2px; } /* toujours sur sa propre ligne, sous les boutons */
@media (max-width: 480px) { .artiste .actions .more { justify-content: center; margin-top: 4px; } }
/* Page courante dans le menu Prestations */
.menu a[aria-current="page"] { background: var(--peau); }
.menu a[aria-current="page"] b { color: var(--accent); }
/* Galerie de l'accueil : les tuiles renvoient vers les portfolios */
a.tile { display: block; position: relative; color: inherit; }
a.tile .ph-label { transition: background .25s var(--ease), color .25s var(--ease); }
a.tile:hover .ph-label { background: var(--encre); color: var(--clair); }
.gallery-cta .portfolios { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; }
/* ============================================================
Pages artistes
============================================================ */
/* En-tête de page : même chapitre que sur l'accueil, promu en h1 */
.artiste.page { padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 104px); }
.artiste.page h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); }
.artiste.page .lead + .lead { margin-top: 14px; }
@media (max-width: 860px) { .artiste.page .eyebrow .long { display: none; } } /* à côté de la photo, l'étiquette reste sur une ligne */
/* Portfolio : toutes les cases au format 4:5 (celui des photos Instagram), donc chaque photo est vue
entière ; une pièce mise en avant occupe 2×2. Formes ondulées alternées, agrandissement au clic. */
.portfolio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; grid-auto-flow: dense; }
.work { position: relative; margin: 0; aspect-ratio: 4 / 5; --forme: url(#vague-tuile); }
.work:nth-child(3n+2) { --forme: url(#vague-tuile-2); }
.work:nth-child(3n) { --forme: url(#vague-haute); }
.work.grand { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; --forme: url(#vague-equipe); }
/* Le contenu est posé en absolu : la grande case prend la hauteur de ses deux rangées sans que l'image ne l'étire */
.work > a, .work > .ph { position: absolute; inset: 0; display: block; clip-path: var(--forme); overflow: hidden; }
.work img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
@media (hover: hover) and (pointer: fine) { .work > a:hover img { transform: scale(1.04); } } /* pas de zoom fantôme au tap sur mobile */
/* Le contour de focus serait rogné par le clip-path : on le met sur la figure, qui ne l'est pas */
.work:focus-within { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 28px; }
.work > a:focus-visible { outline: none; }
.portfolio-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--ligne); }
@media (max-width: 860px) {
.portfolio { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.work.grand { grid-row: auto; aspect-ratio: 4 / 5; } /* pleine largeur, même format */
.work figcaption { left: 12px; bottom: 12px; font-size: 10px; padding: 5px 10px; }
}
@media (max-width: 420px) { .work figcaption { display: none; } }
/* Lightbox : un