/* =========================================================
   Isabella Trautmann — feuille de style commune
   Toutes les pages utilisent ce fichier.
   ========================================================= */

:root{
  /* base */
  --paper:#F7F3EB;
  --paper-2:#EFE8DC;
  --ink:#191310;
  --muted:#8A7E70;
  --line:rgba(25,19,16,.13);

  /* palette */
  --cream:#FAE3B1;
  --olive:#998731;
  --blue:#5FA8C2;
  --orange:#CF5527;
  --red:#7D2027;
  --brown:#673C34;
  --pale:#FBF1DB;         /* crème pâlie — page d'ouverture */
  --pale-green:#E6DFC9;   /* l'olive éclairci — textes sur la couverture */
  --sage:#E0D9BE;         /* l'olive éclairci, un cran plus vert — panneau services */

  /* La signature : le nom, le soleil et la navigation de la barre du haut
     partagent cette couleur. Une seule ligne à changer pour les trois. */
  --signature:var(--ink);

  /* Le liseré de papier qui retient l'image de la couverture. */
  --cover-marge:clamp(8px, .9vw, 14px);

  /* À quelle hauteur flotte la barre de navigation. */
  --hdr-haut:calc(clamp(10px, 1.2vw, 16px) + 30px);

  /* rayons — une seule échelle pour tout le site */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:16px;
  --r-lg:clamp(14px, 1.5vw, 22px);
  --r-xl:clamp(20px, 2.4vw, 36px);
  --r-pill:999px;

  /* Typographie 07 : Petrona (serif douce, terminaisons molles) + Work Sans */
  --serif:'Petrona', Georgia, 'Times New Roman', serif;
  --sans:'Work Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --pad:clamp(20px, 5vw, 72px);
  --maxw:1440px;

  /* teinte par défaut, redéfinie par section
     --tint      : la couleur pleine (pastilles, pastille de numéro, survols)
     --on-tint   : le texte posé DESSUS
     --tint-text : la même famille, mais lisible en texte sur le papier */
  --tint:var(--orange);
  --on-tint:var(--paper);
  --tint-text:var(--olive);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
/* Si le navigateur impose malgré tout un soulignement (réglage
   d'accessibilité), il se dessine à 0,2 cm sous le texte au lieu de le coller. */
a{
  color:inherit;text-decoration:none;
  text-underline-offset:0.1cm;
  -webkit-text-underline-position:under;
  text-decoration-thickness:1px;
  text-decoration-skip-ink:auto;
}
::selection{background:var(--cream);color:var(--brown)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section[id],#travail{scroll-margin-top:134px}

/* ---------- typographie ---------- */
.eyebrow{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--tint-text);font-weight:400;margin:0}
.display{font-family:var(--serif);font-weight:300;line-height:1.05;letter-spacing:.01em;margin:0}
.display em{font-style:italic;color:var(--red)}
/* Sur la phrase d'accueil et dans « à propos », l'italique suffit : le mot se
   détache par sa forme, pas par sa couleur. Le rouge reste pour l'appel à
   collaborer, où il a une raison d'attirer l'œil. */
.statement .display em,
.about .display em{color:inherit}
h1.display{font-size:clamp(34px,4.4vw,60px)}
h2.display{font-size:clamp(26px,3.2vw,44px)}
.lede{font-size:clamp(15px,1.2vw,18px);color:#4A403A;max-width:44ch;margin:16px 0 0}
.small{font-size:12.5px;color:var(--muted);line-height:1.6;margin:0}

/* ---------- page d'ouverture ----------
   Visible dès le premier affichage (pas de fondu à l'entrée),
   puis fondu vers le site. Le <noscript> de la page la retire
   si JavaScript est désactivé, pour qu'elle ne bloque jamais. */
.intro{
  position:fixed;inset:0;z-index:100;background:var(--pale);
  display:grid;place-items:center;
  opacity:1;visibility:visible;
  transition:opacity 520ms ease, visibility 520ms ease;
}
.intro.done{opacity:0;visibility:hidden;pointer-events:none}
.intro-word{
  font-family:var(--sans);
  font-weight:300;font-size:15px;letter-spacing:.22em;text-transform:lowercase;
  color:var(--red);opacity:0;transition:opacity 100ms ease;
  user-select:none;
}
.intro-word.show{opacity:1}
body.intro-lock{overflow:hidden}

/* ---------- en-tête ----------
   Un verre dépoli : un voile de papier translucide, fortement flouté, qui
   laisse deviner la photo sans jamais la donner à lire. Comme le voile reste
   clair quoi qu'il y ait dessous, l'encre s'y lit toujours — sur une image
   sombre comme sur une image blanche. C'est ce qui permet de n'avoir ni halo
   sur les lettres, ni voile sur la photo. */
header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  margin:var(--hdr-haut) var(--pad) 0;
  padding:11px clamp(16px,2vw,26px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  border-radius:var(--r-pill);
  background:rgba(247,243,235,.58);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 10px 30px rgba(25,19,16,.14),
             inset 0 1px 0 rgba(255,255,255,.45);
  -webkit-backdrop-filter:saturate(1.7) blur(22px);
          backdrop-filter:saturate(1.7) blur(22px);
  transition:background .45s ease, border-color .45s ease,
             box-shadow .45s ease, color .45s ease;
}

/* Une fois la couverture passée, il n'y a plus d'image à laisser deviner :
   le verre se referme un peu pour porter le contenu qui glisse dessous. */
header.stuck{
  background:rgba(247,243,235,.86);
  border-color:rgba(25,19,16,.07);
  box-shadow:0 10px 30px rgba(25,19,16,.10);
}

/* Sur la couverture, le verre ne prend pas toute la largeur : il se resserre
   sur la navigation seule, en haut à droite. La barre elle-même redevient un
   simple support transparent, et c'est <nav> qui porte le panneau — les mots
   ne bougent pas d'un pixel, seul le verre autour d'eux change d'emprise. */
body.has-cover header:not(.stuck){
  background:none;border-color:transparent;box-shadow:none;padding:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
body.has-cover header:not(.stuck) nav{
  padding:11px clamp(16px,2vw,26px);
  border-radius:var(--r-pill);
  background:rgba(247,243,235,.58);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 10px 30px rgba(25,19,16,.14),
             inset 0 1px 0 rgba(255,255,255,.45);
  -webkit-backdrop-filter:saturate(1.7) blur(22px);
          backdrop-filter:saturate(1.7) blur(22px);
}
/* Le nom et le soleil n'entrent en scène qu'au défilement. */
body.has-cover header:not(.stuck) .brand{opacity:0;pointer-events:none}
/* Jamais de trait sous le nom, quel que soit l'état du lien.
   Le préfixe -webkit- est nécessaire : Safari ignore parfois la version
   non préfixée sur un lien. */
/* Même traitement que le nom sur la couverture : Petrona, bas de casse,
   approche resserrée — seule la taille change. */
.brand{
  color:var(--signature);
  font-family:var(--serif);font-weight:300;
  font-size:clamp(19px,1.6vw,23px);letter-spacing:-.012em;line-height:1;
  text-transform:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.46em;
}
/* Le logo prend la couleur du texte à côté duquel il se pose : encre dans
   la barre du haut, crème ou brun sur la couverture. */
.logo{width:1.12em;height:1.12em;flex:none;display:block}
.logo-cover{width:clamp(26px,2.6vw,42px);height:clamp(26px,2.6vw,42px)}
.brand,
.brand:link,
.brand:visited,
.brand:hover,
.brand:active,
.brand:focus{
  text-decoration:none !important;
  -webkit-text-decoration:none !important;
  text-underline-offset:0.1cm !important;
  border:0 !important;
  box-shadow:none !important;
  background-image:none !important;
}
.brand::before,.brand::after{content:none !important;display:none !important}
nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px);
  border:1px solid transparent;
  transition:background .45s ease, border-color .45s ease,
             box-shadow .45s ease, padding .45s ease}
/* Dans la barre du haut, la navigation porte la couleur de la signature :
   elle fait bloc avec le nom et le soleil. Sur la couverture, elle passe en
   crème — la couleur claire de la palette (règle plus bas). */
nav a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding-block:4px;
  color:var(--signature);transition:color .3s ease}
nav a:hover{color:var(--orange)}

/* Aucun trait sous les liens : le texte est enfermé dans un <span> mis en
   bloc, et un soulignement — même imposé par le navigateur — ne traverse pas
   une boîte de ce type. C'est ce qui règle ce que text-decoration ne peut pas. */
.navlink > span,
.btn > span,
.cta > span,
.cta > .arw,
.cue > span,
.cue > i,
.brand > span,
.back > span{
  display:inline-block;
  text-decoration:none !important;
  -webkit-text-decoration:none !important;
}
/* Dernier recours. Si le navigateur impose le soulignement par un réglage
   d'accessibilité, aucune règle d'auteur ne peut le retirer : app.js remplace
   alors ces liens par des éléments qui n'en sont pas, et qui échappent donc
   au réglage. Ils doivent se comporter exactement comme des liens. */
[role="link"]{cursor:pointer;text-decoration:none}
[role="link"]:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.lang{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:4px 8px;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.lang button{all:unset;cursor:pointer;padding:2px 7px;border-radius:var(--r-pill);color:var(--muted);
  font:inherit;letter-spacing:inherit;transition:color .3s, background .3s}
.lang button[aria-pressed="true"]{color:var(--paper);background:var(--brown)}

/* ---------- cadres média ---------- */
.slot{position:relative;margin:0;overflow:hidden;background:var(--paper-2);border-radius:var(--r-lg)}
.slot img,
.slot video{width:100%;height:100%;object-fit:cover;display:block;
  object-position:var(--pos,50% 50%);
  transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
/* Une vidéo affichée avec ses commandes (lecture refusée, ou réglage
   « moins d'animations ») garde le cadre : la barre se pose dessus. */
.slot video[controls]{object-fit:cover}

/* ---- cadrage ----
   Par défaut l'image est centrée dans son cadre et rognée sur les bords.
   Pour décider quelle partie reste visible, ajoute data-pos sur la <figure> :
     data-pos="haut"   garde le haut de l'image
     data-pos="bas"    garde le bas
     data-pos="gauche" / "droite"
     data-pos="haut-gauche", "haut-droite", "bas-gauche", "bas-droite"
   Pour un réglage fin, mets plutôt style="--pos:50% 30%" sur la <figure>
   (1er chiffre = horizontal, 2e = vertical, 0% = haut/gauche). */
.slot[data-pos="haut"]        img{object-position:50% 0}
.slot[data-pos="bas"]         img{object-position:50% 100%}
.slot[data-pos="gauche"]      img{object-position:0 50%}
.slot[data-pos="droite"]      img{object-position:100% 50%}
.slot[data-pos="haut-gauche"] img{object-position:0 0}
.slot[data-pos="haut-droite"] img{object-position:100% 0}
.slot[data-pos="bas-gauche"]  img{object-position:0 100%}
.slot[data-pos="bas-droite"]  img{object-position:100% 100%}
.slot.is-empty img{display:none}
.slot.is-empty::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(140deg, color-mix(in srgb, var(--tint) 34%, transparent), transparent 62%), var(--paper-2);
}
.slot.is-empty::after{
  content:attr(data-label);position:absolute;inset:auto 0 0 0;padding:11px 13px;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  border-top:1px solid rgba(25,19,16,.08);
}
.zoom:hover img,
.zoom:hover video{transform:scale(1.045)}
.r-45{aspect-ratio:4/5}.r-32{aspect-ratio:3/2}.r-169{aspect-ratio:16/9}.r-916{aspect-ratio:9/16}

/* ---------- apparition au défilement ---------- */
.rv{opacity:0;transform:translateY(24px);
  transition:opacity .95s cubic-bezier(.2,.7,.3,1), transform .95s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---------- pastilles ---------- */
.dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--tint);
  box-shadow:inset 0 0 0 1px rgba(25,19,16,.14)}

/* ---------- bouton / lien d'action ---------- */
.cta{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 18px;
  transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.cta:hover{background:var(--tint);color:var(--on-tint);border-color:var(--tint)}
.cta .arw{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.cta:hover .arw{transform:translateX(3px)}
/* inline-block plutôt que flex : un enfant de conteneur flex devient une boîte
   de bloc, et un soulignement imposé par le navigateur traverse les boîtes de
   bloc. En inline-block, le <span> du libellé redevient une boîte atomique,
   que le trait ne peut pas traverser. */
.btn{display:inline-block;text-align:center;margin-top:30px;
  background:var(--orange);color:var(--cream);
  border:1px solid var(--orange);border-radius:var(--r-pill);padding:13px 28px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  transition:background .4s ease,color .4s ease,border-color .4s ease}
.btn:hover{background:var(--red);border-color:var(--red);color:var(--cream)}

/* ---------- accueil : couverture ----------
   L'image occupe presque tout l'écran, retenue par un mince liseré de papier,
   et la barre de navigation se pose dessus. Le nom vient en bas, comme sur
   une couverture de magazine. */
.cover{
  position:relative;
  height:100svh;min-height:560px;
  padding:var(--cover-marge);
  box-sizing:border-box;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
}
.cover > .cover-frame,
.cover > .cover-in{grid-area:1/1;min-width:0}
.cover-frame{
  position:relative;z-index:1;height:100%;
  border-radius:var(--r-md);
}
.cover-frame img{height:100%}
/* Voile léger : juste assez pour asseoir le menu en haut et le texte en bas.
   C'est l'ombre portée sur les lettres, plus bas, qui fait le gros du travail —
   elle agit autour du texte sans assombrir la photo. */
.scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  /* Rien en haut : c'est le verre dépoli de la barre qui porte sa propre
     lisibilité. Seul le bas est assombri, et uniquement pour le nom. */
  background:
    linear-gradient(180deg,
      rgba(25,19,16,0) 46%,
      rgba(25,19,16,.14) 66%,
      rgba(25,19,16,.36) 84%,
      rgba(25,19,16,.54));
}
.cover-in{
  position:relative;z-index:3;align-self:end;
  padding:0 clamp(22px,3.4vw,54px) clamp(22px,3vw,44px);
  display:flex;flex-direction:column;gap:clamp(10px,1.4vw,18px);
  color:var(--cream);
  /* halo sombre resserré autour des lettres : la lisibilité vient d'ici,
     pas d'un voile général sur l'image */
  text-shadow:
    0 1px 2px rgba(25,19,16,.6),
    0 2px 10px rgba(25,19,16,.75),
    0 6px 30px rgba(25,19,16,.5);
}
.cover-title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(46px,12.4vw,196px);line-height:.84;letter-spacing:-.012em;
  margin:0;
  text-shadow:none;   /* le nom reste net, sans halo */
}
/* La phrase et le bouton s'empilent au centre, sous le trait : les deux sont
   alors vraiment au milieu de la page, l'un sous l'autre, plutôt que l'un
   centré et l'autre repoussé dans un coin. */
.cover-foot{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(12px,1.6vw,20px);
  border-top:1px solid rgba(230,223,201,.4);padding-top:clamp(14px,1.6vw,20px);
}
.cover-foot .cover-meta{text-align:center}
.cover-meta{font-size:12.5px;line-height:1.55;color:var(--pale-green);max-width:42ch}
/* le nom du fichier attendu passe en haut, pour ne pas croiser le nom */
.cover-frame.is-empty::after{inset:0 0 auto 0;border-top:0;border-bottom:1px solid rgba(25,19,16,.08)}

/* ---- en attendant la photo ----
   Un aplat franc du même vert que le panneau Services : pas de dégradé,
   pas de halo, pas de voile. Comme le fond devient clair, tout ce qui
   s'écrit dessus passe en brun pour rester lisible. La classe est posée
   par app.js quand le fichier cover.jpg n'existe pas encore. */
.cover-frame.is-empty::before{background:var(--sage)}
body.cover-empty .scrim{display:none}
body.cover-empty .cover-in{color:var(--brown);text-shadow:none}
body.cover-empty .cover-meta{color:var(--brown)}
body.cover-empty .cover-foot{border-top-color:rgba(103,60,52,.32)}


/* Le verre dépoli reste clair sur n'importe quelle photo : le nom, le soleil
   et la navigation gardent donc l'encre de la signature partout. */
.brand{transition:color .45s ease, opacity .45s ease}

/* ---------- accueil : la phrase d'introduction ---------- */
/* La proposition ouvre chaque bloc : c'est elle qui dit de quoi on parle,
   il n'y a plus de titre au-dessus. Assez d'air pour qu'elle respire, un peu
   plus en dessous pour la relier aux images qu'elle annonce. */
.statement{padding-block:clamp(56px,9vh,120px) clamp(44px,6.5vh,90px);text-align:center}
.statement h2.display{font-size:clamp(34px,4.4vw,60px)}
.statement h1,
.statement h2{margin:0 auto;max-width:16ch}
/* Assez large pour que la phrase se coupe après une virgule plutôt qu'au
   milieu d'un groupe de mots. */
.statement .lede{margin:18px auto 0;text-align:center;max-width:52ch}

/* ---------- accueil : sections par catégorie ---------- */
.cats{padding-block:clamp(20px,3vh,40px)}
.cat{padding-block:clamp(30px,4.5vh,64px)}
.cat + .cat{border-top:0}
.cat-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:clamp(18px,3vh,30px)}
/* Un liseré tiré de la couleur du texte : invisible sur les teintes franches,
   il donne un contour à la crème, trop pâle sinon pour se détacher du papier. */
.cat-num{
  background:var(--tint);color:var(--on-tint);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--on-tint) 26%, transparent);
  border-radius:var(--r-pill);padding:5px 12px;
  font-size:11px;letter-spacing:.16em;line-height:1;
}
.cat-head h2{font-size:clamp(20px,2vw,30px);max-width:24ch}
.cat-head .cta{margin-left:auto}
.cat-peek{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.2vw,34px) clamp(12px,1.8vw,26px)}
.cat-peek .slot:nth-child(3n+2){transform:translateY(clamp(12px,2.4vw,34px))}

/* ---------- à propos ---------- */
.about{padding-block:clamp(50px,8vh,120px)}
.about-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,3vw,48px);align-items:center}
.about-img{grid-column:1 / 6}
.about-txt{grid-column:7 / 13}
.sig{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--brown);margin:20px 0 0}

/* ---------- Instagram : les chiffres ----------
   Quatre nombres alignés, rien autour. Le chiffre est en serif et grand parce
   que c'est lui qu'on vient chercher ; l'étiquette reste discrète en dessous.
   Un filet en haut les détache de ce qui précède sans créer un panneau de
   plus, le panneau Services arrivant juste après. */
.stats{
  padding-block:clamp(40px,6.5vh,86px) clamp(30px,5vh,64px);
  border-top:1px solid var(--line);
}
.stats .eyebrow{margin-bottom:clamp(22px,3.4vh,38px)}
.stats-row{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3vw,48px);
}
.stat{min-width:0}
.stat-n{
  font-size:clamp(34px,4.6vw,64px);line-height:1;letter-spacing:-.01em;
  color:var(--ink);margin:0;
}
.stat-l{
  margin:clamp(8px,1.2vh,14px) 0 0;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tint-text);
}

/* ---------- services ---------- */
.services{padding-block:clamp(28px,5vh,72px)}
.svc-panel{background:var(--sage);border-radius:var(--r-xl);padding:clamp(28px,4.5vw,72px)}
/* Deux offres : deux colonnes, plus larges, avec de la place pour une
   vraie phrase sous chaque titre. */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(26px,4vw,64px);margin-top:clamp(24px,4vh,48px)}

/* Ce qui est livré, en une ligne sous les deux offres : des formats, pas des
   promesses. Un trait les sépare du reste, des points les séparent entre eux. */
.svc-formats{
  list-style:none;margin:clamp(26px,4vh,44px) 0 0;padding:clamp(18px,2.4vh,26px) 0 0;
  border-top:1px solid rgba(103,60,52,.22);
  display:flex;flex-wrap:wrap;align-items:center;
  gap:10px clamp(16px,2.4vw,34px);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brown);
}
.svc-formats li{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px)}
.svc-formats li + li::before{
  content:"";width:4px;height:4px;border-radius:50%;
  background:rgba(103,60,52,.4);flex:none;
}
.svc h3{margin:0 0 10px;font-size:clamp(20px,1.9vw,27px)}

/* Les modalités pratiques, sous la ligne des formats : ce qu'on demande juste
   avant d'écrire — d'où je pars, et ce qui se règle au contrat. Discrètes,
   mais présentes, parce que leur absence fait hésiter. */
.svc-notes{
  margin-top:clamp(16px,2.4vh,26px);
  display:flex;flex-direction:column;gap:6px;
}
.svc-notes p{
  margin:0;font-size:12.5px;line-height:1.6;color:var(--brown);max-width:70ch;
}

/* ---------- contact ---------- */
.contact{padding-block:clamp(64px,11vh,150px);text-align:center}
.contact h2{margin:16px auto 0;max-width:14ch}
.contact-lines{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:24px}
.contact-lines a{display:inline-flex;align-items:center;gap:9px;
  font-size:13px;color:var(--muted);transition:color .3s}
.contact-lines a .ico{width:17px;height:17px;flex:none;display:block;overflow:visible}
.contact-lines a span{border-bottom:1px solid transparent;transition:border-color .3s}
.contact-lines a:hover{color:var(--blue)}
.contact-lines a:hover span{border-color:var(--blue)}

/* ---------- pied de page ---------- */
footer{padding:22px var(--pad) 30px;border-top:1px solid var(--line)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
/* La mention de droits ne se coupe jamais entre le © et l'année. */
.foot-droits{white-space:nowrap}
@media (max-width:520px){
  .foot{justify-content:flex-start;gap:6px}
  .foot-droits{white-space:normal}
}

/* =========================================================
   Pages de catégorie
   ========================================================= */
.page-hero{padding-top:clamp(122px,16vh,180px);padding-bottom:clamp(22px,4vh,48px);
  background:linear-gradient(180deg, color-mix(in srgb, var(--tint) 15%, var(--paper)), var(--paper) 88%);
  max-width:none}
.page-hero > *{max-width:var(--maxw);margin-inline:auto}
.back{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:8px 16px;transition:color .3s,border-color .3s}
.back:hover{color:var(--ink);border-color:var(--ink)}
.page-title{display:flex;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap}
.page-title h1{font-size:clamp(26px,3.2vw,46px);max-width:22ch}

/* Une galerie se lit, elle ne s'explore pas : largeur tenue, colonnes
   alignées, aucune image posée de travers. Le rythme vient de l'alternance
   des formats, pas de décalages. */
.gallery{display:grid;gap:clamp(16px,2vw,30px);
  max-width:1060px;margin-inline:auto;padding-bottom:clamp(40px,7vh,90px)}

/* mixte — deux verticales côte à côte, puis une horizontale pleine largeur */
.gallery.mixte{grid-template-columns:repeat(2,1fr)}
.gallery.mixte .slot:nth-child(3n){grid-column:1 / -1}

/* portraits — six verticales 4:5, trois par rangée */
.gallery.portraits{grid-template-columns:repeat(3,1fr)}

/* reels — trois par rangée, au format natif 9:16 */
.gallery.reels{grid-template-columns:repeat(3,1fr)}

.next{border-top:1px solid var(--line);padding-block:clamp(30px,5vh,60px);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.next .lbl{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.next .to{font-family:var(--serif);font-size:clamp(22px,2.4vw,34px)}
.next .cta{margin-left:auto}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .about-img,.about-txt{grid-column:1 / 13}
  .about-txt{margin-top:22px}
  .svc-grid{grid-template-columns:1fr;gap:28px}
  /* Sur téléphone, trois colonnes tiendraient mal « 12 000+ » : on empile. */
  .stats-row{grid-template-columns:1fr;gap:clamp(18px,4vw,28px)}
  .stat{display:flex;align-items:baseline;gap:14px}
  .stat-n{font-size:clamp(28px,8vw,38px)}
  .stat-l{margin:0}
}
@media (max-width:760px){
  nav .navlink{display:none}
  .cover-in{padding:0 18px 20px}
  .cover-title{font-size:clamp(40px,13.5vw,90px)}
  .cover-foot{gap:12px}
  .glow{filter:blur(60px)}
  .cat-peek{grid-template-columns:repeat(2,1fr)}
  .cat-peek .slot:nth-child(3n+2){transform:none}
  .cat-peek .slot:nth-child(2n){transform:translateY(clamp(12px,3vw,34px))}
  .cat-head .cta{margin-left:0;width:100%;justify-content:center}
  .gallery.mixte{grid-template-columns:1fr}
  .gallery.portraits{grid-template-columns:repeat(2,1fr)}
  .gallery.reels{grid-template-columns:repeat(2,1fr)}
}