/* =========================================================
   Mop Création — feuille de style
   DA d'origine du site : jaune Mop, fond crème à lignes
   topographiques, Montserrat. Retour au jeu de pages lumineux
   (version préférée par Paul), avec les contenus actuels.
   ========================================================= */

/* Police de repli calée sur Montserrat : le texte ne bouge pas quand la vraie police arrive (CLS). */
@font-face { font-family: 'Montserrat repli'; src: local('Arial'), local('Helvetica'); size-adjust: 113%; ascent-override: 85%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-400.woff2') format('woff2'); font-weight: 400; font-display: optional; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-500.woff2') format('woff2'); font-weight: 500 600; font-display: optional; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-700.woff2') format('woff2'); font-weight: 700; font-display: optional; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-800.woff2') format('woff2'); font-weight: 800 900; font-display: optional; }

:root {
  --jaune: #FBBE21;
  --jaune-fonce: #7A5A00;     /* texte jaune lisible sur fond clair */
  --creme: #FFF1DA;
  --noir: #111111;
  --texte: #4D5258;
  --gris-clair: #F2F3F5;
  --blanc: #FFFFFF;
  --conteneur: 74rem;
  --rayon: 1.125rem;
  --entete: 4.75rem;
  --ombre: 0 .75rem 2rem rgba(17, 17, 17, .08);
  --matiere: rgba(255, 255, 255, .72);
  --flou: blur(20px) saturate(180%);
  --sortie: cubic-bezier(.2, .8, .2, 1);
  --appui: transform 100ms ease-out;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--entete); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: 'Montserrat', 'Montserrat repli', system-ui, sans-serif; font-size: 1rem; line-height: 1.7;
  color: var(--texte); background: var(--blanc);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3, h4 { color: var(--noir); margin: 0 0 .5em; font-weight: 800; text-wrap: balance; }
h1, h2 { line-height: 1.08; letter-spacing: -.02em; }
h3, h4 { line-height: 1.25; letter-spacing: -.01em; }

.icone { width: 1.25em; height: 1.25em; flex: none; }
.conteneur { width: 100%; max-width: var(--conteneur); margin: 0 auto; padding: 0 1.5rem; }
.conteneur--etroit { max-width: 57.5rem; }
.lien-evitement { position: absolute; left: .75rem; top: -4rem; z-index: 100; background: var(--noir); color: var(--blanc); padding: .625rem 1rem; border-radius: .5rem; }
.lien-evitement:focus { top: .75rem; }
:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; border-radius: 4px; }

/* ---------- En-tête : matière translucide, le contenu défile dessous ---------- */
.entete { position: sticky; top: 0; z-index: 50; margin-bottom: calc(-1 * var(--entete)); transition: box-shadow .3s var(--sortie); }
/* Le flou est porté par un pseudo-élément : sur .entete il piégerait le menu mobile (position: fixed). */
.entete::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--blanc); }
.entete.est-defile { box-shadow: 0 .5rem 1.5rem -.75rem rgba(0, 0, 0, .18); }
.entete__inner { display: flex; align-items: center; justify-content: space-between; height: var(--entete); }
.entete__logo { display: block; transition: var(--appui); }
.entete__logo:active { transform: scale(.95); }
.entete__logo img { width: 4.125rem; height: auto; }

.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2.25rem; }
.menu a {
  position: relative; display: block; padding: .5rem 0;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--noir); transition: color .2s, var(--appui);
}
.menu a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--jaune); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--sortie); }
.menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu a[aria-current="page"] { color: var(--jaune-fonce); }
.menu a:active { transform: scale(.96); }
.menu__reseaux { display: none; }

.burger { display: none; width: 2.75rem; height: 2.75rem; padding: .75rem .625rem; margin-right: -.625rem; background: none; border: 0; cursor: pointer; border-radius: 50%; transition: var(--appui), background .2s; }
.burger:active { transform: scale(.9); background: rgba(0, 0, 0, .06); }
.burger span { display: block; height: 2px; background: var(--noir); border-radius: 2px; transition: transform .35s var(--sortie), opacity .2s; }
.burger span + span { margin-top: 6px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Hero : photo plein cadre ---------- */
.hero { position: relative; overflow: hidden; color: var(--blanc); background: var(--noir); }
.hero__fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__fond--bas { object-position: center 78%; }
.hero__fond--haut { object-position: center 25%; }
.hero__voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.3), rgba(0,0,0,.55)); }
.hero .conteneur { position: relative; }
.hero h1, .hero h2 { color: var(--blanc); }

.hero--accueil { min-height: min(88vh, 50rem); display: flex; align-items: center; }
.hero .hero__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; padding-top: calc(var(--entete) + 4rem); padding-bottom: 5rem; }
.hero__logo { margin: 0; }
.hero__logo img { width: 100%; max-width: 32.5rem; }
.hero__surtitre { margin: 0 0 .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--jaune); }
.hero__texte h1 { font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: 900; letter-spacing: -.025em; }
.hero__texte p { font-size: .9375rem; font-weight: 500; line-height: 1.75; letter-spacing: .005em; color: rgba(255,255,255,.92); }
.hero__texte .hero__surtitre { font-size: .75rem; font-weight: 700; color: var(--jaune); }

.hero--page { min-height: min(64vh, 38rem); display: flex; align-items: center; justify-content: center; }
.hero--page .hero__voile { background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.5)); }
.hero .hero__centre { text-align: center; padding-top: calc(var(--entete) + 4rem); padding-bottom: 5rem; }
.hero__centre h1 { font-size: clamp(2.375rem, 11vw, 6rem); font-weight: 900; line-height: 1; letter-spacing: -.035em; margin-bottom: .25em; }
.hero__centre p { max-width: 38rem; margin: 0 auto; font-size: 1.125rem; font-weight: 500; line-height: 1.6; color: rgba(255,255,255,.92); }
.hero__h1-sous { display: block; margin-top: .75rem; font-size: clamp(.8125rem, 1.4vw, 1rem); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--jaune); line-height: 1.3; }

/* ---------- Sections ---------- */
.section { padding: 7rem 0; }
.section--topo { background: var(--creme) url('../img/site/fond-topo.jpg?v=2') center top / 100rem auto repeat; }
.section--sombre { background: #141414; color: rgba(255, 255, 255, .78); }
.section--sombre .titre-section { color: var(--blanc); }
.section--sombre .surtitre { color: var(--jaune); }
.section--sombre .texte { margin-bottom: 2.5rem; }
.section--sombre .bouton--lien { color: var(--blanc); }
.surtitre { margin: 0 0 .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--jaune-fonce); }
.titre-section { font-size: clamp(2rem, 4.4vw, 3.25rem); font-weight: 900; letter-spacing: -.03em; margin-bottom: 2.5rem; }
.titre-section--centre { text-align: center; }
.texte { max-width: 46rem; font-size: 1.0625rem; }
.lien-texte { color: var(--jaune-fonce); font-weight: 600; text-underline-offset: .2em; }

.pastille { display: inline-grid; place-items: center; flex: none; width: 4rem; height: 4rem; border-radius: 50%; background: var(--jaune); color: var(--noir); }
.pastille .icone { width: 1.75rem; height: 1.75rem; }
.pastille--petite { width: 3.25rem; height: 3.25rem; }
.pastille--petite .icone { width: 1.375rem; height: 1.375rem; }
.pastille--image { width: 6rem; height: 6rem; background: none; }
.pastille--image img { width: 6rem; height: 6rem; }

.bouton { display: inline-flex; align-items: center; gap: .625rem; font-weight: 700; font-size: .875rem; letter-spacing: .01em; text-decoration: none; transition: gap .3s var(--sortie), var(--appui); }
.bouton--lien { color: var(--noir); border-bottom: 2px solid var(--jaune); padding: .25rem 0; }
.bouton:active { transform: scale(.97); }
.bouton--plein {
  margin-top: 1.75rem; padding: .875rem 1.5rem; border-radius: 99px;
  background: var(--jaune); color: var(--noir); font-size: .9375rem;
  box-shadow: 0 .5rem 1.25rem -.5rem rgba(0, 0, 0, .45);
  transition: gap .3s var(--sortie), var(--appui), background .2s;
}

/* ---------- Accueil : prestations (carte entière cliquable) ---------- */
.prestations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.prestation { position: relative; display: flex; flex-direction: column; padding: 2.75rem 2rem 2.25rem; border-radius: 1.5rem; background: var(--creme) url('../img/site/fond-topo.jpg?v=2') center / 60rem auto; transition: transform .45s var(--sortie), box-shadow .45s var(--sortie); }
.prestation:active { transform: scale(.985); transition: var(--appui); }
.prestation__lien { text-decoration: none; text-align: center; }
.prestation__lien::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.prestation__image img { width: 8.25rem; height: 8.25rem; margin: 0 auto 1.5rem; border-radius: 50%; object-fit: cover; box-shadow: 0 .75rem 1.75rem -.75rem rgba(0, 0, 0, .35); }
.prestation__titre { font-size: 1.625rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .375rem; }
.prestation__accroche { font-weight: 700; color: var(--noir); font-size: 1rem; margin-bottom: 1.5rem; }
.prestation__texte { font-size: .9375rem; flex: 1; }
.prestation .bouton { position: relative; z-index: 1; align-self: flex-start; margin-top: .5rem; }

/* ---------- Accueil : à la une ---------- */
.une { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.une__carte { display: flex; flex-direction: column; overflow: hidden; border-radius: 1.5rem; background: var(--blanc); text-decoration: none; color: var(--texte); box-shadow: 0 .25rem 1rem rgba(17, 17, 17, .05); transition: transform .45s var(--sortie), box-shadow .45s var(--sortie); }
.une__carte:active { transform: scale(.985); transition: var(--appui); }
.une__visuels { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; aspect-ratio: 16 / 10; background: var(--blanc); }
.une__visuels img { width: 100%; height: 100%; object-fit: cover; }
.une__visuels img:first-child { grid-row: 1 / 3; }
.une__visuels--169 { background: #141414; }
.une__texte { display: flex; flex-direction: column; gap: .375rem; padding: 1.5rem 1.75rem 1.75rem; }
.une__titre { font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; color: var(--noir); }
.une__accroche { margin-bottom: .75rem; }
.une__texte .bouton { align-self: flex-start; }

/* ---------- Graphisme : services ---------- */
.services { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; text-align: center; }
.service .pastille { margin-bottom: 1rem; }
.service__titre { font-size: 1.125rem; font-weight: 800; letter-spacing: -.005em; }
.service p { font-size: .9375rem; }

/* ---------- Photographie : types ---------- */
.types-photo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.types-photo h3 { font-size: .9375rem; font-weight: 700; letter-spacing: 0; margin: .75rem 0 0; }

/* Intro « Ce que je photographie » : texte à gauche, types à droite */
.photo-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; align-items: center; }
.photo-intro .texte { margin-bottom: 1.75rem; }
.photo-intro__liens { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.type-photo {
  display: flex; align-items: center; gap: .875rem; height: 100%;
  padding: .75rem 1rem .75rem .75rem; border-radius: 1rem; text-decoration: none;
  background: var(--creme) url('../img/site/fond-topo.jpg?v=2') center / 40rem auto;
  font-weight: 700; font-size: .9375rem; color: var(--noir);
  transition: transform .45s var(--sortie), box-shadow .45s var(--sortie);
}
.type-photo__icone { width: 3.25rem; height: 3.25rem; flex: none; }
.type-photo__nom { flex: 1; min-width: 0; line-height: 1.3; }
.type-photo > .icone { color: var(--jaune-fonce); width: 1.125rem; height: 1.125rem; transition: transform .3s var(--sortie); }
a.type-photo:active { transform: scale(.97); transition: var(--appui); }

/* ---------- Points numérotés (mariage, accueil, web) ---------- */
.moments { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
.moments--3 { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.moment { position: relative; padding-top: 1.25rem; border-top: 2px solid var(--jaune); }
.moment__numero { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .1em; color: var(--jaune-fonce); margin-bottom: .5rem; }
.moment__titre { font-size: 1.0625rem; font-weight: 800; }
.moment p { font-size: .9375rem; margin: 0; }

/* ---------- Galeries ---------- */
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.galerie__item { display: block; aspect-ratio: 4 / 5; border-radius: .75rem; overflow: hidden; background: rgba(255, 255, 255, .6); cursor: zoom-in; transition: var(--appui); }
.galerie__item:active { transform: scale(.97); }
.galerie__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--sortie); }
.galerie__item.est-source { visibility: hidden; }
.galerie--169 .galerie__item { aspect-ratio: 16 / 9; border-radius: .625rem; }
.section--sombre .galerie__item { background: #222; }

/* Miniatures YouTube groupées par chaîne */
.chaine + .chaine { margin-top: 4rem; }
.chaine__entete { margin-bottom: 1.5rem; }
.chaine__nom { font-size: 1.5rem; font-weight: 900; color: var(--blanc); margin-bottom: .25rem; }
.chaine__entete p { margin-bottom: .5rem; }

/* ---------- Page Miniatures YouTube ---------- */
/* Mur de miniatures qui défile derrière le titre */
.hero--yt { min-height: min(82vh, 46rem); }
.mur { position: absolute; inset: -4rem -2rem; display: flex; flex-direction: column; justify-content: center; gap: 1rem; transform: rotate(-6deg); }
.mur__rangee { display: flex; gap: 1rem; width: max-content; animation: mur-defile 70s linear infinite; }
.mur__rangee--2 { animation-direction: reverse; animation-duration: 85s; }
.mur__rangee--3 { animation-duration: 60s; }
.mur__rangee img { width: clamp(12rem, 22vw, 20rem); aspect-ratio: 16 / 9; object-fit: cover; border-radius: .625rem; }
@keyframes mur-defile { to { transform: translateX(-50%); } }
.hero--yt .hero__voile { background: radial-gradient(ellipse at center, rgba(0,0,0,.82) 20%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.4)); }
.hero--yt .hero__surtitre { color: var(--jaune); }

/* Cartes façon fil YouTube */
.flux { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.25rem; }
.flux__video.galerie__item { aspect-ratio: auto; overflow: visible; background: none; border-radius: 0; text-decoration: none; color: var(--blanc); }
.flux__video.galerie__item img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .75rem; transition: transform .6s var(--sortie), border-radius .3s; }
.flux__infos { display: flex; gap: .75rem; align-items: flex-start; padding-top: .75rem; }
.flux__avatar { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--jaune); color: var(--noir); font-weight: 800; font-size: .875rem; }
.flux__titre { display: block; font-weight: 700; font-size: .9375rem; line-height: 1.35; color: var(--blanc); }
.flux__chaine { display: block; font-size: .8125rem; color: rgba(255, 255, 255, .6); margin-top: .125rem; }
.section--sombre .surtitre { color: var(--jaune); }
.section--sombre .moment p { color: rgba(255,255,255,.7); }

/* Aperçu sur la page Graphisme (lien vers la page dédiée) */
.apercu { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .625rem; transition: var(--appui); }
.apercu:active { transform: scale(.98); }
.apercu img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--sortie); }
.youtube-teaser__lien { text-align: center; margin: 2.5rem 0 0; }

/* ---------- Page Web : sites réalisés ---------- */
.sites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.site__ecran { display: block; overflow: hidden; border-radius: .75rem; background: var(--blanc); box-shadow: var(--ombre); text-decoration: none; transition: transform .45s var(--sortie), box-shadow .45s var(--sortie); }
.site__ecran:active { transform: scale(.985); transition: var(--appui); }
.site__barre { display: flex; align-items: center; gap: .375rem; padding: .625rem .875rem; background: var(--gris-clair); }
.site__barre > span:not(.site__url) { width: .625rem; height: .625rem; border-radius: 50%; background: #D5D7DB; }
.site__url { margin-left: .75rem; padding: .125rem .75rem; border-radius: 99px; background: var(--blanc); font-size: .75rem; color: var(--texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site__ecran img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.site__activite { margin: 1.5rem 0 .25rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--jaune-fonce); }
.site__nom { font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; }

.types-photo--texte { margin: 2rem 0 3rem; gap: 1rem; grid-template-columns: repeat(4, 1fr); text-align: center; }
.types-photo--texte li { padding: 1rem; border-radius: 1rem; background: var(--creme); }
.types-photo--texte h3 { margin: .5rem 0 0; }
.moment__picto { margin-bottom: .75rem; }
/* ---------- Covering : comparateur avant / après ---------- */
.covering { margin-top: 5rem; }
.covering__titre { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 900; letter-spacing: -.02em; }
.covering__liste { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 40rem; gap: 1.25rem; margin-top: 2rem; }
.comparateur { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: .75rem; background: var(--gris-clair); touch-action: pan-y; }
.comparateur__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparateur__avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.comparateur__poignee { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--blanc); box-shadow: 0 0 .5rem rgba(0,0,0,.35); pointer-events: none; }
.comparateur__poignee::after { content: ''; position: absolute; top: 50%; left: 50%; width: 2.5rem; height: 2.5rem; margin: -1.25rem 0 0 -1.25rem; border-radius: 50%; background: var(--jaune); box-shadow: 0 .25rem .75rem rgba(0,0,0,.3); }
.comparateur__etiquette { position: absolute; top: .75rem; padding: .25rem .625rem; border-radius: 99px; background: rgba(17,17,17,.7); color: var(--blanc); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.comparateur__etiquette--avant { left: .75rem; }
.comparateur__etiquette--apres { right: .75rem; }
.comparateur__curseur { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.comparateur__curseur:focus-visible + .comparateur__poignee, .comparateur:focus-within .comparateur__poignee::after { outline: 3px solid var(--noir); outline-offset: 2px; }

.serie__accroche { margin-left: .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--jaune); vertical-align: middle; }

/* ---------- Questions fréquentes ---------- */
.faq__liste { border-top: 1px solid rgba(17, 17, 17, .1); }
.faq__item { border-bottom: 1px solid rgba(17, 17, 17, .1); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0; cursor: pointer; list-style: none; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.005em; color: var(--noir); transition: color .2s; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ''; flex: none; width: .625rem; height: .625rem; margin-right: .25rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg); transition: transform .35s var(--sortie); }
.faq__item[open] summary::after { transform: translateY(25%) rotate(-135deg); }
.faq__reponse { padding: 0 2rem 1.25rem 0; }
.faq__reponse p { margin: 0; }

/* ---------- Contact ---------- */
.contact .texte { margin: 0 auto 3rem; }
.contact__liens { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; max-width: 45rem; margin: 0 auto; }
.contact__carte { display: flex; flex-direction: column; align-items: center; gap: .375rem; padding: 2rem 1rem; border-radius: 1.5rem; text-decoration: none; background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background .3s, box-shadow .45s var(--sortie), var(--appui); }
.contact__carte:active { transform: scale(.97); }
.contact__carte .pastille { margin-bottom: .5rem; }
.contact__label { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; color: var(--noir); }
.contact__valeur { color: var(--jaune-fonce); font-weight: 600; }

/* ---------- Mentions légales ---------- */
.section--legal { padding-top: calc(var(--entete) + 4rem); }
.texte--legal { font-size: 1rem; }
.texte--legal h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.texte--legal h2 { font-size: 1.25rem; margin-top: 2.5rem; }
.texte--legal a { color: var(--jaune-fonce); }

/* ---------- Pied de page ---------- */
.pied__infos { background: var(--blanc); padding: 2.5rem 0; border-top: 1px solid var(--gris-clair); font-size: .9375rem; }
.pied__infos-grille { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem 3rem; flex-wrap: wrap; }
.pied__infos p { margin: 0 0 .25rem; }
.pied__nom { font-weight: 900; font-size: 1.125rem; letter-spacing: -.01em; color: var(--noir); }
.pied__coordonnees { display: flex; flex-direction: column; gap: .5rem; }
.pied__coordonnees a { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--noir); text-decoration: none; transition: var(--appui); }
.pied__coordonnees a:active { transform: scale(.97); }
.pied__coordonnees .icone { color: var(--jaune-fonce); }
.pied__haut { background: var(--gris-clair); padding: 1.5rem 0; }
.pied__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.pied__menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.pied__menu a { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--noir); }
.pied__menu a[aria-current="page"] { color: var(--jaune-fonce); }
.pied__reseaux { display: flex; gap: .375rem; }
.reseau { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--noir); transition: background .2s, var(--appui); }
.reseau:active { transform: scale(.9); background: var(--jaune); }
.pied__bas { background: var(--creme); padding: 1.125rem 0; font-size: .8125rem; letter-spacing: .01em; }
.pied__bas p { margin: 0; }
.pied__remonter { display: inline-flex; align-items: center; gap: .375rem; text-decoration: none; font-weight: 600; transition: var(--appui); }
.pied__remonter:active { transform: scale(.96); }
.pied__remonter .icone { width: 1rem; height: 1rem; }

/* ---------- Survol : seulement avec une souris ---------- */
@media (hover: hover) and (pointer: fine) {
  .menu a:hover::after { transform: scaleX(1); }
  .bouton--lien:hover, .bouton--plein:hover { gap: .875rem; }
  .bouton--plein:hover { background: #FFCB45; }
  .prestation:hover { transform: translateY(-.375rem); box-shadow: var(--ombre); }
  .prestation:hover .bouton { gap: .875rem; }
  .une__carte:hover { transform: translateY(-.375rem); box-shadow: var(--ombre); }
  .une__carte:hover .bouton { gap: .875rem; }
  .faq__item summary:hover { color: var(--jaune-fonce); }
  .site__ecran:hover { transform: translateY(-.375rem); }
  a.type-photo:hover { box-shadow: var(--ombre); transform: translateY(-.125rem); }
  a.type-photo:hover > .icone { transform: translateX(.25rem); }
  .galerie__item:hover img, .apercu:hover img { transform: scale(1.04); }
  .flux__video.galerie__item:hover img { transform: scale(1.02); border-radius: 0; }
  .contact__carte:hover { background: rgba(255, 255, 255, .85); box-shadow: var(--ombre); }
  .pied__coordonnees a:hover, .pied__menu a:hover { color: var(--jaune-fonce); }
  .reseau:hover { background: var(--jaune); }
}

/* ---------- Visionneuse ----------
   Pilotée en JS par des ressorts : s'ouvre depuis la vignette, suit le doigt 1:1,
   se lance d'un geste, se referme en tirant vers le bas, et peut être rattrapée en vol. */
.visionneuse {
  position: fixed; inset: 0; z-index: 200;
  touch-action: none; user-select: none; -webkit-user-select: none;
  overflow: hidden;
}
.visionneuse[hidden] { display: none; }
.visionneuse__fond { position: absolute; inset: 0; background: rgb(12, 12, 12); opacity: 0; }
.visionneuse__piste { position: absolute; inset: 0; will-change: transform; }
.visionneuse__vue { position: absolute; inset: 0; }
.visionneuse__img {
  position: absolute; left: 0; top: 0; max-width: none;
  border-radius: .5rem; transform-origin: 0 0;
  will-change: transform, clip-path;
  -webkit-user-drag: none;
}
.visionneuse__chrome { opacity: 0; }
.visionneuse__legende {
  position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
  max-width: calc(100% - 2rem); margin: 0; padding: .5rem 1rem; border-radius: 99px;
  display: flex; gap: .5rem; align-items: baseline;
  color: var(--blanc); font-size: .875rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  background: rgba(40, 40, 40, .55); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou);
}
.visionneuse__texte { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.visionneuse__compteur { flex: none; opacity: .65; font-weight: 500; font-variant-numeric: tabular-nums; }
.visionneuse__btn {
  position: absolute; display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%; border: 0; cursor: pointer;
  color: var(--blanc);
  background: rgba(40, 40, 40, .55); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou);
  transition: background .2s, color .2s, var(--appui), opacity .2s;
}
.visionneuse__btn:active { transform: scale(.9); }
.visionneuse__btn[disabled] { opacity: .3; cursor: default; }
.visionneuse__fermer { top: 1.25rem; right: 1.25rem; }
.visionneuse__prec { left: 1.25rem; top: calc(50% - 1.5rem); }
.visionneuse__suiv { right: 1.25rem; top: calc(50% - 1.5rem); }
@media (hover: hover) and (pointer: fine) {
  .visionneuse__btn:not([disabled]):hover { background: var(--jaune); color: var(--noir); }
}
@media (hover: none) { .visionneuse__prec, .visionneuse__suiv { display: none; } } /* au doigt, on glisse */
body.visionneuse-active, body.menu-actif { overflow: hidden; }

/* ---------- Apparition au défilement : courte et discrète ---------- */
.js .revele { opacity: 0; transform: translateY(.75rem); transition: opacity .5s var(--sortie), transform .5s var(--sortie); }
.js .revele.est-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 64rem) {
  .services { grid-template-columns: repeat(2, 1fr); }
  .moments { grid-template-columns: repeat(2, 1fr); }
  .une { grid-template-columns: 1fr; max-width: 38.75rem; margin: 0 auto; }
  .prestations { grid-template-columns: 1fr; max-width: 38.75rem; margin: 0 auto; }
}

@media (max-width: 56.25rem) {
  :root { --entete: 4rem; }
  .burger { display: block; }
  /* Menu mobile : feuille givrée qui se matérialise sous la barre */
  .menu {
    position: fixed; inset: var(--entete) 0 0 0; z-index: 40;
    display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem 1.5rem 2.5rem;
    background: var(--blanc);
    transform-origin: top right; transform: scale(.98) translateY(-.5rem); opacity: 0; visibility: hidden;
    transition: opacity .3s var(--sortie), transform .4s var(--sortie), visibility 0s .4s;
  }
  .menu.est-ouvert { opacity: 1; transform: none; visibility: visible; transition: opacity .3s var(--sortie), transform .4s var(--sortie), visibility 0s; }
  .menu ul { flex-direction: column; gap: 0; }
  .menu li { opacity: 0; transform: translateY(.5rem); transition: opacity .3s var(--sortie), transform .4s var(--sortie); }
  .menu.est-ouvert li { opacity: 1; transform: none; }
  .menu.est-ouvert li:nth-child(2) { transition-delay: 30ms; } .menu.est-ouvert li:nth-child(3) { transition-delay: 60ms; }
  .menu.est-ouvert li:nth-child(4) { transition-delay: 90ms; } .menu.est-ouvert li:nth-child(5) { transition-delay: 120ms; } .menu.est-ouvert li:nth-child(6) { transition-delay: 150ms; }
  .menu a { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; text-transform: none; padding: .625rem 0; transform-origin: left center; }
  .menu a::after { display: none; }
  .menu a:active { transform: scale(.97); }
  .menu__reseaux { display: flex; gap: .375rem; }

  .hero .hero__grille { grid-template-columns: 1fr; gap: 2rem; }
  .hero__logo img { max-width: 17.5rem; }
  .galerie { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .galerie__item { border-radius: .625rem; }
  .photo-intro { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .types-photo--texte { grid-template-columns: 1fr 1fr; }
  .type-photo { padding: .5rem .625rem .5rem .5rem; gap: .5rem; font-size: .8125rem; }
  .type-photo__icone { width: 2.5rem; height: 2.5rem; }
  .flux { grid-template-columns: repeat(2, 1fr); }
  .sites { grid-template-columns: minmax(0, 1fr); }
  .covering__liste { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 37.5rem) {
  .section { padding: 4.5rem 0; }
  .conteneur { padding: 0 1.25rem; }
  .services { grid-template-columns: 1fr; }
  .moments, .moments--3 { grid-template-columns: 1fr; }
  .flux { grid-template-columns: 1fr 1fr; gap: 1.25rem .75rem; }
  .flux__avatar { display: none; }
  .flux__titre { font-size: .8125rem; }
  .hero--yt { min-height: 34rem; }
  .mur { justify-content: space-around; transform: rotate(-8deg); }
  .mur__rangee { gap: .75rem; }
  .mur__rangee img { width: 16rem; } /* mobile : miniatures 1,6x plus grandes */
  .contact__liens { grid-template-columns: 1fr; }
  .prestation { padding: 2.25rem 1.375rem 2rem; }
  .hero--page { min-height: 26rem; }
  .hero .hero__grille, .hero .hero__centre { padding-top: calc(var(--entete) + 2.5rem); padding-bottom: 3.5rem; }
  .texte { font-size: 1rem; }
  .pied__inner { justify-content: center; text-align: center; }
}

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-property: opacity, color, background-color !important; transition-duration: .2s !important; animation: none !important; }
  .js .revele { transform: none; }
  .menu, .menu li { transform: none !important; }
  .mur__rangee { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .entete::before { background: var(--blanc); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu { background: var(--blanc) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .contact__carte { background: var(--blanc); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .visionneuse__btn, .visionneuse__legende { background: rgb(40, 40, 40); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --texte: #222; --matiere: rgba(255, 255, 255, .97); }
  .entete { border-bottom: 1px solid var(--noir); }
  .contact__carte, .prestation { outline: 1px solid var(--noir); }
}

/* Très petits écrans : types de photo sur une colonne */
@media (max-width: 25rem) { .types-photo { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================
   Inspiration 2D Publicité (2026-10-30) : header avec téléphone
   et bouton devis, badge et chiffres clés, métiers en cartes
   photo, cartes « ce qui me différencie », titres centrés avec
   un mot surligné au jaune.
   ========================================================= */
:root { --ombre-douce: 0 .25rem 1.25rem rgba(17, 17, 17, .06); }

/* Header : actions à droite */
.entete__inner { gap: 2rem; }
.menu { margin-left: auto; }
.menu ul { gap: .25rem; }
.menu a { padding: .5rem .875rem; border-radius: 99px; transition: background .2s, color .2s, var(--appui); }
.menu a::after { display: none; }
.menu a[aria-current="page"] { background: var(--creme); color: var(--noir); }
.menu .menu__devis { display: none; }
.entete__actions { display: flex; align-items: center; gap: 1.25rem; }
.entete__tel { display: inline-flex; align-items: center; gap: .375rem; font-weight: 700; font-size: .875rem; color: var(--noir); text-decoration: none; white-space: nowrap; }
.entete__tel .icone { width: 1rem; height: 1rem; color: var(--jaune-fonce); }
.entete__devis.bouton--plein { margin-top: 0; padding: .625rem 1.125rem; font-size: .8125rem; box-shadow: none; }

/* Titres de section : surtitre encadré de filets, mot clé surligné */
.surtitre--centre { display: flex; align-items: center; justify-content: center; gap: .875rem; text-align: center; }
.surtitre--centre::before, .surtitre--centre::after { content: ''; width: 2.5rem; height: 2px; border-radius: 2px; background: var(--jaune); }
.entete-section { text-align: center; max-width: 46rem; margin: 0 auto 3rem; }
.entete-section .titre-section { margin-bottom: 1rem; }
.entete-section__intro { color: var(--texte); font-size: 1.0625rem; margin: 0; }
.accent { font-style: normal; background: linear-gradient(transparent 62%, rgba(251, 190, 33, .55) 62%, rgba(251, 190, 33, .55) 92%, transparent 92%); padding: 0 .1em; }
.hero .accent { color: var(--jaune); background: none; padding: 0; }

/* Hero accueil : badge, deux boutons, chiffres clés */
.hero .badge, .badge { display: inline-block; margin: 0 0 1rem; padding: .3125rem .75rem; border-radius: 99px; border: 0; background: rgba(255, 255, 255, .16); font-size: .6875rem; font-weight: 700; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--blanc); }
.hero__texte h1 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 1.05; letter-spacing: -.035em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.hero__actions .bouton { margin-top: 0; }
.bouton--clair { padding: .875rem 1.5rem; border-radius: 99px; background: rgba(255, 255, 255, .14); color: var(--blanc); border: 1px solid rgba(255, 255, 255, .4); font-size: .9375rem; }
.bouton--clair .icone { width: 1rem; height: 1rem; }
.chiffres { list-style: none; display: flex; gap: .75rem; margin: 2rem 0 0; padding: 0; flex-wrap: wrap; }
.chiffres { flex-wrap: nowrap; }
.chiffres li { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: .875rem 1.125rem; border-radius: 1rem; background: rgba(255, 255, 255, .95); color: var(--texte); }
.chiffres strong { font-size: 1.75rem; font-weight: 900; letter-spacing: -.03em; line-height: 1; color: var(--noir); }
.chiffres span { margin-top: .375rem; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* Métiers : cartes photo */
.metiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.metier { position: relative; display: flex; align-items: flex-end; min-height: 22rem; overflow: hidden; border-radius: 1.25rem; color: var(--blanc); text-decoration: none; background: var(--noir); box-shadow: var(--ombre-douce); transition: transform .45s var(--sortie), box-shadow .45s var(--sortie); }
.metier:active { transform: scale(.985); transition: var(--appui); }
.metier__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--sortie); }
.metier::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.92)); }
.metier__picto { position: absolute; z-index: 1; top: 1rem; right: 1rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .875rem; background: var(--jaune); color: var(--noir); }
.metier__picto .icone { width: 1.25rem; height: 1.25rem; }
.metier__contenu { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .625rem; padding: 1.5rem; }
.metier__etiquette { padding: .25rem .75rem; border-radius: 99px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .35); font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.metier__titre { font-size: 1.375rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.metier__lien { display: inline-flex; align-items: center; gap: .5rem; margin-top: .25rem; padding-bottom: .125rem; border-bottom: 2px solid var(--jaune); font-size: .875rem; font-weight: 700; transition: gap .3s var(--sortie); }
.metier__lien .icone { width: 1rem; height: 1rem; }

/* Ce qui me différencie */
.atouts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.atout { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.75rem; border-radius: 1.25rem; background: var(--blanc); box-shadow: var(--ombre-douce); border: 1px solid rgba(17, 17, 17, .05); }
.atout__picto { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .875rem; background: var(--jaune); color: var(--noir); }
.atout__picto .icone { width: 1.375rem; height: 1.375rem; }
.atout__titre { font-size: 1.125rem; font-weight: 800; margin-bottom: .375rem; }
.atout p { margin: 0; font-size: .9375rem; }

@media (hover: hover) and (pointer: fine) {
  .menu a:not([aria-current]):hover { background: var(--gris-clair); }
  .entete__tel:hover { color: var(--jaune-fonce); }
  .metier:hover { transform: translateY(-.375rem); box-shadow: var(--ombre); }
  .metier:hover .metier__image { transform: scale(1.05); }
  .metier:hover .metier__lien { gap: .875rem; }
  .bouton--clair:hover { background: rgba(255, 255, 255, .24); }
}

@media (max-width: 75rem) { .entete__tel { display: none; } }
@media (max-width: 64rem) {
  .metiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atouts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 56.25rem) {
  .entete__actions { display: none; }
  .menu { margin-left: 0; }
  .menu a { border-radius: .75rem; padding: .5rem .75rem; margin-left: -.75rem; }
  .menu .menu__devis { display: inline-flex; align-self: flex-start; }
}
@media (max-width: 37.5rem) {
  .metiers { grid-template-columns: minmax(0, 1fr); }
  .metier { min-height: 18rem; }
  .chiffres li { min-width: 0; flex: 1; padding: .75rem; }
  .chiffres strong { font-size: 1.375rem; }
  .atout { padding: 1.25rem; }
}

/* Graphisme : vitrine miniatures YouTube (carte sombre intégrée) */
.vitrine-yt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3rem; align-items: center; padding: 3rem; border-radius: 1.75rem; background: #141414; color: rgba(255, 255, 255, .78); box-shadow: var(--ombre); overflow: hidden; }
.vitrine-yt__titre { color: var(--blanc); font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 1rem; }
.accent--sombre { color: var(--jaune); background: none; padding: 0; }
.badge--sombre { border-color: rgba(255, 255, 255, .25); }
.vitrine-yt__chaines { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 1.75rem; padding: 0; }
.vitrine-yt__chaines li { padding: .375rem .875rem; border-radius: 99px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); color: var(--blanc); font-size: .8125rem; font-weight: 700; }
.vitrine-yt .bouton--plein { margin-top: 0; }
.vitrine-yt__mosaique { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; transform: rotate(-3deg) scale(1.04); }
.vitrine-yt__mosaique img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .75rem; box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .4); transition: transform .5s var(--sortie); }
.vitrine-yt__mosaique img:nth-child(2n) { transform: translateY(1.5rem); }
@media (hover: hover) and (pointer: fine) { .vitrine-yt__mosaique:hover img { transform: translateY(-.25rem); } .vitrine-yt__mosaique:hover img:nth-child(2n) { transform: translateY(1.25rem); } }
@media (max-width: 56.25rem) { .vitrine-yt { grid-template-columns: minmax(0, 1fr); padding: 2rem 1.5rem; } .vitrine-yt__mosaique { transform: none; padding-bottom: 1.5rem; } }

/* Graphisme : illustrations seules, sur une rangée */
.galerie--illus { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.galerie--illus .galerie__item { aspect-ratio: 1; }
@media (max-width: 56.25rem) { .galerie--illus { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Mot surligné sur fond sombre : jaune plein plutôt que surligneur */
.section--sombre .accent { color: var(--jaune); background: none; padding: 0; }

/* Extension du style 2D Publicité aux autres pages (2026-11-05) */
.hero__actions--centre { justify-content: center; }
.entete-section + .texte { margin: 0 auto 2.5rem; max-width: 40rem; }

/* Points numérotés et services : cartes blanches à ombre douce, picto jaune carré */
.moment { padding: 1.75rem 1.5rem; border-top: 0; border-radius: 1.25rem; background: var(--blanc); box-shadow: var(--ombre-douce); border: 1px solid rgba(17, 17, 17, .05); }
.moment__picto.pastille { border-radius: .875rem; }
.section--topo .moment, .section--sombre .moment { background: var(--blanc); }
.services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; text-align: left; }
.service { padding: 1.75rem; border-radius: 1.25rem; background: var(--blanc); box-shadow: var(--ombre-douce); border: 1px solid rgba(17, 17, 17, .05); }
.service .pastille { border-radius: .875rem; }
@media (max-width: 64rem) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 37.5rem) { .services { grid-template-columns: minmax(0, 1fr); } }

/* Passe apple-design (2026-11-05) */
/* Lisibilité : les longs paragraphes restent alignés à gauche, sur une largeur de lecture confortable */
.texte { max-width: 40rem; }
.contact .texte { max-width: 40rem; margin-left: auto; margin-right: auto; }
/* Simplicité : le picto suffit, le petit numéro faisait doublon */
.moment__picto + .moment__numero { display: none; }
/* Cibles tactiles d'au moins 44 px */
.entete__logo { display: flex; align-items: center; min-height: 2.75rem; }
.menu a, .pied__menu a, .bouton--lien { min-height: 2.75rem; display: inline-flex; align-items: center; }
.faq__item summary { min-height: 2.75rem; }
.menu a { display: flex; }
.bouton--lien { padding: .5rem 0 .25rem; }
.chiffres span { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 37.5rem) { .chiffres span { font-size: .625rem; letter-spacing: .04em; } }

/* Page Web : cartes façon blog (koul.io) — capture encadrée, méta, titre, extrait, lien en pied */
.sites { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.site { display: flex; flex-direction: column; transition: transform .45s var(--sortie); }
.site .site__ecran { border-radius: 1rem; box-shadow: var(--ombre); background: var(--gris-clair); }
.site .site__ecran img { aspect-ratio: 16 / 9; }
.site__corps { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 0 0; }
.site__meta { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .5rem; font-size: .75rem; }
.site__meta .site__activite { margin: 0; }
.site__domaine { color: var(--texte); white-space: nowrap; }
@media (max-width: 37.5rem) { .site__domaine { display: none; } }
.site .site__nom { font-size: 1.25rem; margin-bottom: .5rem; }
.site__texte { flex: 1; margin: 0 0 1rem; font-size: .9375rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.site__pied { display: flex; margin: 0; }
/* Le premier site à la une : capture à gauche, texte à droite */
.site:first-child { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
.site:first-child .site__ecran { flex: 1.2; }
.site:first-child .site__ecran img { height: 100%; aspect-ratio: 16 / 10; }
.site:first-child { gap: 2.5rem; align-items: center; margin-bottom: 1.5rem; }
.site:first-child .site__corps { flex: 1; justify-content: center; padding: 0; }
.site:first-child .site__nom { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.site:first-child .site__texte { flex: 0 1 auto; -webkit-line-clamp: 4; }
@media (hover: hover) and (pointer: fine) { .site:hover .site__ecran { transform: translateY(-.25rem); } }
@media (max-width: 56.25rem) {
  .sites { grid-template-columns: minmax(0, 1fr); }
  .site:first-child { flex-direction: column; }
  .site:first-child { gap: 0; }
  .site:first-child .site__corps { padding: 1.25rem 0 0; }
}

/* Marque « Paul Morice » (2026-11-06) : le nom en avant, le M au pinceau en signature */
.entete__logo { gap: .75rem; text-decoration: none; }
.entete__logo img { width: 3.25rem; }
.entete__nom { padding-left: .75rem; border-left: 2px solid var(--jaune); font-weight: 800; font-size: 1.0625rem; letter-spacing: -.02em; color: var(--noir); white-space: nowrap; }
.signature { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; }
.signature__m { position: absolute; top: 0; right: -2.5rem; width: 12rem; aspect-ratio: 600 / 273; background: var(--jaune); -webkit-mask: url('../img/site/logo-mop-creation-noir.png') center / contain no-repeat; mask: url('../img/site/logo-mop-creation-noir.png') center / contain no-repeat; transform: rotate(-8deg); }
.signature__nom { position: relative; font-size: clamp(3rem, 6.5vw, 5.75rem); font-weight: 900; line-height: .95; letter-spacing: -.045em; color: var(--blanc); }
.signature__metier { margin-top: 1rem; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
@media (max-width: 56.25rem) {
}
@media (max-width: 37.5rem) { .entete__nom { font-size: .9375rem; } }
/* Header : tout sur une ligne malgré le nom ajouté */
.menu a, .entete__devis, .entete__tel { white-space: nowrap; }
@media (max-width: 92rem) { .entete__tel { display: none; } }
@media (max-width: 80rem) and (min-width: 56.3rem) { .menu a { padding: .5rem .5rem; letter-spacing: .04em; } .entete__inner { gap: 1.25rem; } }


/* Graphisme : faire-part et papeterie de mariage (maquettes en paysage) */
.galerie--papeterie { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.galerie--papeterie .galerie__item { aspect-ratio: 4 / 3; }
@media (max-width: 56.25rem) { .galerie--papeterie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Accueil : le nom est le titre principal (h1), le slogan est un paragraphe */
h1.signature { margin: 0; }
.hero__texte .hero__titre { margin: 0 0 .5em; max-width: none; color: var(--blanc); font-size: clamp(2.25rem, 4.6vw, 3.75rem); font-weight: 900; line-height: 1.05; letter-spacing: -.035em; text-wrap: balance; }
.metiers__aussi { max-width: 44rem; margin: 2rem auto 0; text-align: center; color: var(--texte); line-height: 1.7; }

/* Photos protégées : pas de glisser-déposer ni de menu « Enregistrer » au toucher long (iOS) */
img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.galerie__item, .visionneuse { -webkit-touch-callout: none; }

/* Toutes les galeries en mur : chaque visuel entier dans son format (portrait ou paysage), sans recadrage */
.galerie:not(.galerie--illus) { display: block; columns: 3; column-gap: 1.25rem; }
.galerie:not(.galerie--illus) .galerie__item { aspect-ratio: auto; margin-bottom: 1.25rem; break-inside: avoid; box-shadow: 0 .5rem 1.5rem rgba(17, 17, 17, .08); }
.galerie:not(.galerie--illus) .galerie__item img { height: auto; object-fit: contain; display: block; }
@media (max-width: 56.25rem) { .galerie:not(.galerie--illus) { columns: 2; column-gap: .75rem; } .galerie:not(.galerie--illus) .galerie__item { margin-bottom: .75rem; } }
.galerie.galerie--rangee { display: flex; align-items: flex-start; gap: 1.25rem; columns: auto; }
.galerie__colonne { flex: 1 1 0; min-width: 0; }
.galerie--rangee .galerie__item:last-child { margin-bottom: 0; }
@media (max-width: 56.25rem) { .galerie.galerie--rangee { gap: .75rem; } }

/* Accueil (inspiration La Freelancerie) : bloc manifeste et études de cas en onglets */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.section--manifeste { padding-top: 0; }
.manifeste { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); padding: clamp(2.5rem, 6vw, 5rem); border-radius: 2rem; background: var(--noir); color: var(--blanc); }
.manifeste__logo { display: flex; justify-content: center; padding-right: clamp(0rem, 4vw, 4rem); border-right: 1px solid rgba(255, 255, 255, .2); }
.manifeste__logo img { width: min(100%, 18rem); height: auto; }
.manifeste__texte p { margin: 0 0 2rem; font-size: clamp(1.25rem, 2.1vw, 1.75rem); font-weight: 500; line-height: 1.4; letter-spacing: -.01em; }
.manifeste__texte strong { color: var(--jaune); font-weight: 700; }

.bouton-oblique, .onglet-oblique { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.5rem; border: 1.5px solid currentColor; transform: skewX(-14deg); font: inherit; font-size: .9375rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.bouton-oblique > span, .onglet-oblique > span { transform: skewX(14deg); }
.bouton-oblique { color: var(--jaune); }
.bouton-oblique:active, .onglet-oblique:active { transform: skewX(-14deg) scale(.97); }

.cas__entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(17, 17, 17, .25); }
.cas__titre { margin: 0; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.03em; }
.cas__sous-titre { margin: 0; color: var(--texte); font-size: 1.0625rem; }
.cas__intro { max-width: 52rem; margin: 1.5rem 0 1.75rem; line-height: 1.7; }
.cas__onglets { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 2.5rem; padding-left: .5rem; }
.onglet-oblique { background: transparent; color: var(--noir); }
.onglet-oblique[aria-selected="true"] { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.cas { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.cas[hidden] { display: none; }
.cas__label { margin: 1.25rem 0 .375rem; font-size: .8125rem; font-weight: 600; color: var(--texte); }
.cas__label:first-child { margin-top: 0; }
.cas__probleme { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; }
.cas__texte p { margin-top: 0; line-height: 1.65; }
.cas__solution { margin: 0 0 1.25rem; padding-left: 1.1rem; line-height: 1.65; }
.cas__solution li::marker { color: var(--jaune); content: '▪  '; }
.cas__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.cas__tags li { padding: .375rem .875rem; border-radius: 99px; background: var(--jaune); font-size: .8125rem; font-weight: 700; color: var(--noir); }
.cas__images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.cas__images img { width: 100%; height: clamp(16rem, 32vw, 26rem); object-fit: cover; border-radius: 1rem; }
.cas__images img:nth-child(2) { margin-top: 2.5rem; }

@media (hover: hover) {
  .bouton-oblique:hover { background: var(--jaune); color: var(--noir); }
  .onglet-oblique:hover:not([aria-selected="true"]) { background: rgba(17, 17, 17, .06); }
}
@media (max-width: 56.25rem) {
  .manifeste { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .manifeste__logo { justify-content: flex-start; padding: 0 0 1.5rem; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .2); }
  .manifeste__logo img { width: 11rem; }
  .cas { grid-template-columns: minmax(0, 1fr); }
  .cas__images { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .cas__images img { height: 11rem; border-radius: .75rem; }
  .cas__images img:nth-child(2) { margin-top: 1rem; }
}
.section--manifeste + #etudes-de-cas { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.cas__texte .cas__label { margin: 1.5rem 0 .375rem; }
.cas__texte .cas__label:first-child { margin-top: 0; }

/* Onglets des études de cas : pastilles arrondies, comme le reste du site (plus de biseaux) */
.onglet-oblique { transform: none; border-radius: 99px; border: 1.5px solid rgba(17, 17, 17, .18); background: var(--blanc); padding: 0 1.25rem; }
.onglet-oblique > span { transform: none; }
.onglet-oblique:active { transform: scale(.97); }
.onglet-oblique[aria-selected="true"] { border-color: var(--noir); }
.cas__onglets { padding-left: 0; gap: .625rem; }

/* Header : bandeau noir fin (téléphone, mail) + menu centré dans une pastille crème */
:root { --bandeau: 2.25rem; --entete: calc(4.75rem + var(--bandeau)); }
.entete { display: flex; flex-direction: column; }
.entete__inner { height: 4.75rem; width: 100%; }
.entete__bandeau { height: var(--bandeau); background: var(--noir); color: rgba(255, 255, 255, .85); font-size: .8125rem; }
.entete__bandeau-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.entete__bandeau p { margin: 0; }
.entete__bandeau a { color: var(--blanc); text-decoration: none; font-weight: 600; }
@media (min-width: 56.3rem) {
  .entete__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .menu { margin: 0; justify-self: center; }
  .menu ul { gap: .125rem; padding: .3125rem; border-radius: 99px; background: var(--creme); }
  .menu a { padding: .5rem 1rem; }
  .menu a[aria-current="page"] { background: var(--noir); color: var(--blanc); }
  .entete__actions { justify-self: end; }
}
@media (hover: hover) and (min-width: 56.3rem) {
  .menu a:not([aria-current]):hover { background: rgba(17, 17, 17, .07); }
  .entete__bandeau a:hover { color: var(--jaune); }
}
@media (max-width: 80rem) and (min-width: 56.3rem) { .menu a { padding: .5rem .625rem; } }
@media (max-width: 56.25rem) {
  :root { --bandeau: 0rem; --entete: 4rem; }
  .entete__bandeau { display: none; }
  .entete__inner { height: var(--entete); }
}

/* Bandeau du header, affiné : icônes jaunes, séparateurs fins, réseaux sociaux, cibles de 44 px */
:root { --bandeau: 2.75rem; }
.entete__bandeau { font-size: .8125rem; letter-spacing: .01em; }
.entete__bandeau .icone { width: .9375rem; height: .9375rem; color: var(--jaune); flex-shrink: 0; }
.entete__bandeau-lieu { display: flex; align-items: center; gap: .5rem; color: rgba(255, 255, 255, .78); }
.entete__bandeau-liens { display: flex; align-items: stretch; height: 100%; }
.entete__bandeau-liens > a { display: inline-flex; align-items: center; gap: .5rem; padding: 0 1rem; font-weight: 600; }
.entete__bandeau-liens > a + a, .entete__bandeau-reseaux { border-left: 1px solid rgba(255, 255, 255, .16); }
.entete__bandeau-reseaux { display: flex; align-items: center; gap: .25rem; padding-left: .75rem; margin-right: -.625rem; }
.entete__bandeau-reseaux .reseau { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; color: rgba(255, 255, 255, .8); }
.entete__bandeau-reseaux .reseau .icone { color: inherit; width: 1rem; height: 1rem; }
@media (hover: hover) { .entete__bandeau-reseaux .reseau:hover { color: var(--jaune); } }
@media (max-width: 75rem) { .entete__bandeau-lieu { font-size: 0; gap: 0; } .entete__bandeau-lieu::after { content: 'Pornic · Loire-Atlantique'; font-size: .8125rem; margin-left: .5rem; } }
@media (max-width: 56.25rem) { :root { --bandeau: 0rem; } }

/* Accueil, composition A : tout centré sur la photo du VIP */
.hero__centre-accueil { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; padding-top: calc(var(--entete) + 4rem); padding-bottom: 5rem; }
.hero--centre-accueil .hero__voile { background: rgba(0, 0, 0, .5); }
.signature--centre { align-items: center; }
.signature--centre .signature__nom { font-size: clamp(3.25rem, 9vw, 7.5rem); }
.signature--centre .signature__metier { color: var(--jaune); }
.hero__intro { max-width: 36rem; margin: 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.7; color: rgba(255, 255, 255, .92); }
.chiffres--centre { margin: .5rem 0 0; justify-content: center; }
.chiffres--centre li { flex: 0 1 11rem; text-align: left; }
@media (max-width: 37.5rem) { .hero__centre-accueil { gap: 1.25rem; } .hero__intro { font-size: 1rem; } }

/* Accueil : « Et aussi », cartes avec icône comme sur la page Photographie */
.aussi { margin-top: 3rem; text-align: center; }
.aussi__titre { margin: 0 0 1rem; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--texte); }
.types-photo--aussi { grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: left; }
@media (max-width: 56.25rem) { .types-photo--aussi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 25rem) { .types-photo--aussi { grid-template-columns: minmax(0, 1fr); } }

/* Manifeste : photo de tournage en fond, assombrie pour garder le texte lisible */
.manifeste { position: relative; overflow: hidden; isolation: isolate; }
.manifeste__fond { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.manifeste::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(17, 17, 17, .78), rgba(17, 17, 17, .9) 55%, rgba(17, 17, 17, .94)); }
.manifeste::before { background: linear-gradient(90deg, rgba(17, 17, 17, .5), rgba(17, 17, 17, .78) 50%, rgba(17, 17, 17, .88)); }

/* Études de cas v2 : en-tête centré comme les autres sections, onglets centrés, projet dans une carte blanche */
#etudes-de-cas.section--manifeste, .section--manifeste + #etudes-de-cas { padding-top: var(--section, clamp(4rem, 8vw, 7rem)); }
.cas__onglets { justify-content: center; margin-bottom: 2rem; }
.cas { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, .75fr); gap: 1.25rem; padding: 1.25rem; border-radius: 1.75rem; background: var(--blanc); box-shadow: 0 1.5rem 3rem -1.5rem rgba(17, 17, 17, .18); align-items: stretch; }
.cas__texte { padding: 1.5rem 1rem 1.5rem 1.25rem; }
.cas__images { display: contents; }
.cas__images img { height: 100%; min-height: 0; border-radius: 1.125rem; margin: 0; }
.cas__images img:nth-child(1) { grid-column: 2; grid-row: 1 / span 2; min-height: 30rem; }
.cas__images img:nth-child(2) { grid-column: 3; grid-row: 1; margin-top: 0; }
.cas__images img:nth-child(3) { grid-column: 3; grid-row: 2; }
.cas__texte { grid-column: 1; grid-row: 1 / span 2; }
@media (max-width: 56.25rem) {
  .cas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 1rem; }
  .cas__texte { grid-column: 1 / -1; grid-row: auto; padding: .75rem .5rem 0; }
  .cas__images img:nth-child(1) { grid-column: 1 / -1; grid-row: auto; min-height: 0; height: 15rem; }
  .cas__images img:nth-child(2), .cas__images img:nth-child(3) { grid-column: auto; grid-row: auto; height: 9rem; margin-top: 0; }
}
.cas__images img[src$=".png"] { object-fit: contain; padding: 1.5rem; background: var(--creme); }

/* Études de cas : photos dans leur format d'origine, alignées sur une même hauteur (largeurs proportionnelles) */
.cas { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); align-items: center; }
.cas__texte { grid-column: 1; grid-row: auto; }
.cas__images { display: flex; gap: .75rem; align-items: flex-start; grid-column: 2; }
.cas__images img, .cas__images img:nth-child(1), .cas__images img:nth-child(2), .cas__images img:nth-child(3) { flex-basis: 0; flex-shrink: 1; width: 0; min-width: 0; height: auto; min-height: 0; margin: 0; object-fit: contain; grid-column: auto; grid-row: auto; border-radius: 1rem; }
.cas__images img[src$=".png"] { padding: 0; background: none; }
@media (max-width: 56.25rem) {
  .cas { grid-template-columns: minmax(0, 1fr); }
  .cas__texte, .cas__images { grid-column: 1; }
  .cas__images img, .cas__images img:nth-child(1), .cas__images img:nth-child(2), .cas__images img:nth-child(3) { height: auto; }
}
/* Études de cas : texte au-dessus (en deux colonnes), photos en grand sur toute la largeur de la carte */
.cas { grid-template-columns: minmax(0, 1fr); padding: clamp(1rem, 2.5vw, 2rem); gap: 1.75rem; }
.cas__texte { grid-column: 1; padding: .5rem .5rem 0; columns: 2; column-gap: 3rem; }
.cas__texte > .cas__label:first-child, .cas__texte > .cas__probleme { column-span: all; }
.cas__texte > .cas__probleme { max-width: 44rem; margin-bottom: .5rem; }
.cas__texte > * { break-inside: avoid; }
.cas__images { grid-column: 1; }
@media (max-width: 56.25rem) { .cas__texte { columns: 1; } .cas__images { flex-wrap: nowrap; gap: .5rem; } }
.cas__texte > p.cas__label:nth-of-type(4) { break-before: column; margin-top: 0; }
@media (max-width: 56.25rem) { .cas__texte > p.cas__label:nth-of-type(4) { break-before: auto; margin-top: 1.5rem; } }
.cas__texte > .cas__probleme { margin-bottom: 1.5rem; }
.cas__texte > p.cas__label:nth-of-type(2) { margin-top: 0; }

.mur img { background: rgba(255, 255, 255, .06); }
.mur img:not([src]) { visibility: hidden; }
.pied__remonter { min-height: 2.75rem; display: inline-flex; align-items: center; }