/* =====================================================================
   Studio Photo de la Baie — Design System
   Site statique autonome — feuille de style unique, sans dépendance.
   ===================================================================== */

:root{
  --ink:#1b1815; --charcoal:#26221d; --charcoal-2:#2f2a24;
  --cream:#f4eee4; --paper:#fbf8f2; --paper-2:#f7f2ea;
  --gold:#b08b4c; --gold-2:#c9a86c; --gold-soft:#d8c4a0;
  --text:#332f28; --muted:#857c6f; --line:rgba(43,38,30,.14);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1240px; --radius:0px;
  --shadow:0 22px 44px -26px rgba(43,38,30,.4);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-weight:300;color:var(--text);background:var(--paper);line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:.005em;color:var(--ink)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
strong{font-weight:500;color:var(--ink)}
::selection{background:var(--gold);color:#fff}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 32px}
.overline{font-family:var(--sans);font-weight:500;font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.center{text-align:center}

/* ---------- BUTTONS ---------- */
.btn{display:inline-block;line-height:1.35;font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.16em;text-transform:uppercase;padding:15px 30px;border:1px solid var(--gold);background:var(--gold);color:#fff;transition:.35s;cursor:pointer;text-align:center}
.btn .arrow{margin-left:.5em}
.btn:hover{background:transparent;color:var(--gold)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-light{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.btn-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.arrow{transition:transform .35s;display:inline-block}
.btn:hover .arrow{transform:translateX(4px)}

/* ---------- BANDEAU PHOTO D'IDENTITÉ ---------- */
/* Fond encre pour trancher franchement avec l'en-tête crème : c'est la
   première chose que voit un visiteur, sur chaque page. Toute la bande est
   cliquable. */
.topbar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 18px;
  background:var(--ink);color:#e4ddd0;padding:11px 24px;text-align:center;
  font-family:var(--sans);font-weight:400;font-size:13.5px;letter-spacing:.03em;line-height:1.4;
  transition:background .3s}
.topbar:hover{background:#241f1b}
.topbar .tb-short{display:none}
.topbar .tb-cta{font-weight:500;color:var(--gold-2);letter-spacing:.09em;text-transform:uppercase;font-size:12px;
  border-bottom:1px solid rgba(201,168,108,.45);padding-bottom:2px;white-space:nowrap}
.topbar:hover .tb-cta{color:#fff;border-bottom-color:#fff}
.topbar:hover .arrow{transform:translateX(4px)}
@media(max-width:760px){
  .topbar{gap:4px 12px;padding:10px 16px;font-size:12.5px}
  .topbar .tb-long{display:none}
  .topbar .tb-short{display:inline}
  .topbar .tb-cta{font-size:11.5px;letter-spacing:.07em}
}

/* ---------- HEADER ---------- */
header.site .wrap{max-width:1320px}
header.site{position:sticky;top:0;z-index:100;background:rgba(251,248,242,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:22px;height:82px}
.brand{display:flex;align-items:center;gap:13px}
/* Le blason de la marque, en image vectorielle : net à toutes les tailles
   et sur tous les écrans. flex:none pour qu'il ne se laisse jamais écraser
   par le texte à côté de lui sur les petits écrans. */
.emblem{width:44px;height:44px;flex:none;display:block}
.brand-txt b{display:block;white-space:nowrap;font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:.02em;color:var(--ink);line-height:1.05}
.brand-txt small{display:block;font-family:var(--sans);font-weight:400;font-size:10px;letter-spacing:.26em;color:var(--muted);text-transform:uppercase;margin-top:2px}
.menu{display:flex;align-items:center;gap:16px}
.menu a.link{font-family:var(--sans);font-weight:400;font-size:12.5px;white-space:nowrap;letter-spacing:.07em;text-transform:uppercase;color:var(--text);position:relative;padding:4px 0}
.menu a.link:after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--gold);transition:width .3s}
.menu a.link:hover,.menu a.link[aria-current]{color:var(--ink)}
.menu a.link:hover:after,.menu a.link[aria-current]:after{width:100%}
.nav-cta{display:flex;align-items:center;gap:15px}
/* Le bouton d'en-tête porte un libellé long (« Parlons de votre projet »).
   On lui interdit de passer sur deux lignes — un en-tête qui grandit d'un
   coup fait bancal — et on resserre légèrement la barre sur les écrans où
   le menu et le bouton se disputent la place. */
.nav-cta .btn{white-space:nowrap;padding-left:19px;padding-right:19px;letter-spacing:.09em}
header.site .tel{font-size:13px}
.tel{display:flex;align-items:center;min-height:40px;font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:.04em;color:var(--ink);white-space:nowrap}
.tel span{color:var(--gold)}
.burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-width:40px;min-height:40px;background:none;border:none;cursor:pointer;padding:6px}
.burger i{width:24px;height:1.5px;background:var(--ink);display:block;transition:.3s}
.mobile-menu{position:fixed;inset:0;background:var(--charcoal);z-index:200;display:none;flex-direction:column;padding:30px 34px;color:#fff}
.mobile-menu.open{display:flex}
.mobile-menu .close{align-self:flex-end;background:none;border:none;color:#fff;font-size:34px;font-family:var(--serif);cursor:pointer;line-height:1}
.mobile-menu a{font-family:var(--serif);font-size:29px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.1);color:#efe9df}
.mobile-menu .btn{margin-top:24px;justify-content:center}

/* ---------- HERO (home) ---------- */
.hero{display:grid;grid-template-columns:1.05fr 1fr;min-height:620px;padding:0}
.hero-img{position:relative;background:#ddd6ca center/cover no-repeat}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Signature en surimpression sur la grande image d'accueil.
   Inutilisée depuis que la photo choisie porte le filigrane de Frédéric —
   conservée ici si une image sans signature revenait un jour. */
.hero-sign{position:absolute;right:26px;bottom:22px;font-family:var(--serif);font-style:italic;font-size:20px;color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.4)}
.hero-txt{background:var(--charcoal);color:#efe9df;display:flex;flex-direction:column;justify-content:center;padding:70px 76px}
.hero-txt .overline{margin-bottom:26px}
.hero-txt h1{font-size:64px;font-weight:500;color:#fff;letter-spacing:.01em}
.hero-txt p{margin:28px 0 38px;color:#c3bcae;font-size:17.5px;max-width:30em}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero{background:var(--charcoal);color:#efe9df;padding:74px 0 66px;position:relative;overflow:hidden}
.page-hero.with-img{padding:120px 0 96px}
.page-hero .bg{position:absolute;inset:0;z-index:0}
.page-hero .bg img{width:100%;height:100%;object-fit:cover;opacity:.32}
.page-hero .bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,24,21,.6),rgba(27,24,21,.86))}
.page-hero .wrap{position:relative;z-index:1}
.breadcrumb{font-family:var(--sans);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);margin-bottom:20px}
.breadcrumb a{color:var(--gold-2);opacity:.8}
.breadcrumb a:hover{opacity:1}
.breadcrumb span{opacity:.5;margin:0 8px}
.page-hero h1{font-size:56px;color:#fff;max-width:16em}
.page-hero .lead{margin-top:20px;color:#c3bcae;font-size:18px;max-width:40em}
.page-hero .price-flag{display:inline-block;margin-top:26px;font-family:var(--serif);font-size:22px;color:var(--gold-2)}
.page-hero .price-flag b{font-weight:600;color:#fff}

/* ---------- TRUST STRIP ---------- */
.trust{background:var(--ink);color:#d9d2c5}
.trust .wrap{display:flex;align-items:center;justify-content:center;gap:14px 40px;flex-wrap:wrap;padding:20px 32px}
.trust .item{display:flex;align-items:center;gap:9px;font-size:13.5px;letter-spacing:.04em;white-space:nowrap}
.trust .item b{font-weight:500;color:#fff}
.trust .star{color:var(--gold-2)}
.trust .dot{width:3px;height:3px;border-radius:50%;background:var(--gold);opacity:.6}

/* ---------- SECTIONS ---------- */
section{padding:110px 0}
section.tight{padding:80px 0}
.sec-head{text-align:center;max-width:680px;margin:0 auto 62px}
.sec-head .overline{margin-bottom:20px;display:block}
.sec-head h2{font-size:46px}
.sec-head p{margin-top:20px;color:var(--muted);font-size:17.5px}
/* Phrase de chute d'une section : même traitement « signature » que dans
   les blocs texte — serif, italique, doré. */
.sec-head p.sig{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.35;color:var(--gold);margin-top:24px}
@media(max-width:560px){.sec-head p.sig{font-size:19px}}
.bg-cream{background:var(--paper-2)}
.bg-dark{background:var(--charcoal);color:#e8e1d5}
.bg-dark h2,.bg-dark h3{color:#fff}
.bg-dark .sec-head p{color:#b3ab9d}

/* ---------- SPLIT (image + text) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split.rev .split-img{order:2}
.split-img{position:relative;aspect-ratio:4/3;background:#e6dece;overflow:hidden}
/* Variante verticale : pour une photo en portrait, le cadre 4/3 couché
   couperait le sujet. Le format 4/5 la respecte. */
.split-img.tall{aspect-ratio:4/5}
.split-img img{width:100%;height:100%;object-fit:cover}
.split-img.framed:after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.5);pointer-events:none}
.split-txt .overline{display:block;margin-bottom:20px}
.split-txt h2{font-size:44px;margin-bottom:24px}
.split-txt p{color:#4a453c;margin-bottom:18px}
.bg-dark .split-txt p{color:#c3bcae}
.split-txt .sig{font-family:var(--serif);font-style:italic;font-size:23px;color:var(--gold);margin-top:26px}
.split-txt ul{list-style:none;margin:22px 0}
.split-txt ul li{padding:9px 0 9px 30px;position:relative;color:#4a453c}
.split-txt ul li:before{content:"✦";position:absolute;left:0;color:var(--gold);font-family:var(--serif)}
.bg-dark .split-txt ul li{color:#c9c2b4}

/* ---------- PRESTATION CARDS ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--paper);border:1px solid var(--line);overflow:hidden;transition:.4s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card-img{aspect-ratio:4/5;overflow:hidden;background:#e6dece}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.card:hover .card-img img{transform:scale(1.05)}
.card-body{padding:24px 24px 28px;flex:1;display:flex;flex-direction:column}
.card-body h3{font-size:25px;margin-bottom:8px}
.card-body .cat{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.card-body p{font-size:14.5px;color:var(--muted);margin-bottom:18px;flex:1}
.card-price{display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid var(--line);padding-top:16px}
.card-price .from{font-size:12px;color:var(--muted);letter-spacing:.05em}
.card-price .amt{font-family:var(--serif);font-size:26px;color:var(--ink);font-weight:600}
.card-price .amt small{font-size:15px}

/* ---------- SERVICE MINI-CARDS ---------- */
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.services.s3{grid-template-columns:repeat(3,1fr)}
.svc{border:1px solid var(--line);padding:26px 24px;display:flex;flex-direction:column;gap:8px;background:var(--paper-2);transition:.35s}
.svc:hover{border-color:var(--gold);background:var(--paper)}
.svc .ic{font-family:var(--serif);font-size:23px;color:var(--gold);font-style:italic}
.svc h4{font-size:20px}
.svc p{font-size:13px;color:var(--muted)}
.svc .p{margin-top:4px;font-family:var(--sans);font-weight:500;font-size:13px;color:var(--ink);letter-spacing:.04em}

/* ---------- STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.steps.s4{grid-template-columns:repeat(4,1fr)}
.step{padding:0 20px;position:relative}
.step:not(:last-child):after{content:"";position:absolute;top:14px;right:-4px;width:8px;height:8px;border-top:1px solid var(--gold);border-right:1px solid var(--gold);transform:rotate(45deg);opacity:.5}
.step .num{font-family:var(--serif);font-size:34px;color:var(--gold-2);font-weight:500;margin-bottom:14px}
.step h4{color:#fff;font-size:22px;margin-bottom:10px}
.step p{font-size:14px;color:#aaa294}

/* ---------- PORTFOLIO STRIP ---------- */
.pf-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.pf-strip a{aspect-ratio:3/4;overflow:hidden;background:#e6dece;position:relative}
.pf-strip img{width:100%;height:100%;object-fit:cover;transition:.7s}
.pf-strip a:hover img{transform:scale(1.07)}
.center-cta{text-align:center;margin-top:48px}
/* auto-fit (et non auto-fill) : avec 4 photos, les colonnes vides sont
   supprimées et les images occupent toute la largeur au lieu de rester
   tassées à gauche. */
.mini-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.mini-gallery img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#e6dece;transition:.5s}
.mini-gallery img:hover{opacity:.9}

/* ---------- PORTFOLIO GALLERY ---------- */
.pf-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:44px}
.pf-filters button{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:9px 20px;border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer;transition:.3s}
.pf-filters button.active,.pf-filters button:hover{border-color:var(--gold);color:var(--gold)}
.gallery{columns:4;column-gap:14px}
.gallery figure{break-inside:avoid;margin-bottom:14px;overflow:hidden;background:#e6dece;position:relative}
.gallery img{width:100%;transition:.6s}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px;font-size:12px;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);opacity:0;transition:.3s}
.gallery figure:hover figcaption{opacity:1}

/* ---------- TOWNS ---------- */
.towns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:840px;margin:34px auto 0}
.towns a{font-family:var(--sans);font-size:14px;letter-spacing:.04em;color:var(--text);border:1px solid var(--line);padding:9px 18px;border-radius:40px;transition:.3s}
.towns a:hover{border-color:var(--gold);color:var(--gold);background:var(--paper)}
.towns span{font-family:var(--sans);font-size:14px;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);padding:9px 18px;border-radius:40px}

/* ---------- REVIEWS ---------- */
.reviews-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;max-width:960px;margin:0 auto}
.reviews-grid.g3{grid-template-columns:repeat(3,1fr);max-width:none}
.reviews-grid.g1{grid-template-columns:1fr;max-width:640px;text-align:center}
.review{background:var(--paper);border:1px solid var(--line);padding:36px 38px}
.bg-cream .review{background:#fff}
.review .stars{color:var(--gold-2);letter-spacing:3px;font-size:15px;margin-bottom:18px}
.review q{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.5;color:var(--ink);display:block;margin-bottom:22px}
.review .who{font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:.03em}
.review .meta{font-size:12.5px;color:var(--muted);letter-spacing:.04em}

/* ---------- GIFT BANNER ---------- */
.gift{position:relative;color:#fff;overflow:hidden}
.gift-bg{position:absolute;inset:0}
.gift-bg img{width:100%;height:100%;object-fit:cover}
.gift-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,18,15,.86),rgba(20,18,15,.5))}
.gift .wrap{position:relative;padding:104px 32px}
.gift .inner{max-width:540px}
.gift .overline{color:var(--gold-2);display:block;margin-bottom:20px}
.gift h2{color:#fff;font-size:44px;margin-bottom:20px}
.gift p{color:#d8d2c6;margin-bottom:32px}

/* ---------- FINAL CTA ---------- */
.final{background:var(--ink);color:#e8e1d5;text-align:center}
.final h2{color:#fff;font-size:50px;margin-bottom:22px}
.final p{color:#b3ab9d;max-width:520px;margin:0 auto 38px}
.final-info{display:flex;justify-content:center;gap:14px 46px;flex-wrap:wrap;margin-top:52px;padding-top:40px;border-top:1px solid rgba(255,255,255,.12)}
.final-info div{font-size:14px;color:#c3bcae}
.final-info b{display:block;font-family:var(--sans);font-weight:500;color:#fff;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:7px}
.final-info a{color:#c3bcae}
.final-info a:hover{color:var(--gold-2)}

/* ---------- PROSE (blog, legal) ---------- */
.prose{max-width:760px;margin:0 auto}
.prose p{margin-bottom:20px;color:#403b33}
.prose h2{font-size:34px;margin:44px 0 18px}
.prose h3{font-size:25px;margin:32px 0 14px}
.prose ul,.prose ol{margin:0 0 22px 22px}
.prose li{margin-bottom:9px}
.prose a{color:var(--gold);border-bottom:1px solid var(--gold-soft)}
.prose strong{color:var(--ink)}
.prose blockquote{border-left:2px solid var(--gold);padding-left:24px;margin:26px 0;font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink)}
/* Photos placées dans le corps d'un article, avec légende facultative. */
.prose figure{margin:34px 0}
/* Document reproduit (planche, capture) : jamais agrandi au-delà de sa
   taille réelle, sinon il devient flou. Centré, sur fond clair. */
.prose figure.doc{text-align:center;background:var(--paper-2);border:1px solid var(--line);padding:26px 20px 18px}
.prose figure.doc img{width:auto;max-width:100%;margin:0 auto;background:none}
.prose figure.doc figcaption{border:0;padding-top:14px;margin-top:0}
.prose figure img{width:100%;display:block;background:#e6dece}
.prose figure.large{margin-left:calc(-1 * clamp(0px,4vw,70px));margin-right:calc(-1 * clamp(0px,4vw,70px))}
.prose figcaption{font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--muted);padding-top:10px;border-top:1px solid var(--line);margin-top:10px}
/* Deux photos côte à côte : même hauteur imposée pour que les légendes
   s'alignent, quel que soit le format d'origine des fichiers. */
.prose .duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:34px 0;align-items:start}
.prose .duo figure{margin:0}
.prose .duo figure img{aspect-ratio:4/5;object-fit:cover}
@media(max-width:640px){.prose .duo{grid-template-columns:1fr}}
.prose table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14.5px}
/* Tableaux comparatifs : sur mobile ils deviennent défilables horizontalement
   au lieu de déborder de l'écran (l'ombre à droite indique qu'il y a
   la suite). */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0}
.table-scroll table{margin:0;min-width:540px}
@media(max-width:640px){
  .table-scroll{background:linear-gradient(to right,transparent 92%,rgba(28,26,23,.07))}
  .table-scroll table{font-size:13.5px}
}
.prose th,.prose td{border:1px solid var(--line);padding:10px 13px;text-align:left;vertical-align:top}
.prose th{background:var(--paper-2);font-family:var(--sans);font-weight:500;color:var(--ink)}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{font-family:var(--serif);font-size:23px;color:var(--ink);padding:22px 40px 22px 0;cursor:pointer;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:6px;top:20px;font-size:26px;color:var(--gold);font-family:var(--sans);font-weight:300;transition:.3s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{padding:0 40px 24px 0;color:#4a453c}

/* ---------- BLOG CARDS ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.post{background:var(--paper);border:1px solid var(--line);overflow:hidden;transition:.4s;display:flex;flex-direction:column}
.post:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.post-img{aspect-ratio:16/10;background:#e6dece;overflow:hidden}
.post-img img{width:100%;height:100%;object-fit:cover;transition:.7s}
.post:hover .post-img img{transform:scale(1.05)}
.post-body{padding:26px;flex:1;display:flex;flex-direction:column}
.post-body .tag{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.post-body h3{font-size:23px;margin-bottom:12px;line-height:1.2}
.post-body p{font-size:14px;color:var(--muted);flex:1}
.post-body .more{margin-top:16px;font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}

/* ---------- FORMS ---------- */
/* ---------- RÈGLE DE SÉCURITÉ DES GRILLES ----------
   Par défaut, une case de grille ne peut pas devenir plus étroite que son
   contenu : un mot long, une adresse email ou la largeur native d'un champ
   de formulaire élargit alors la case, et la page déborde sur le côté —
   invisible sur grand écran, très gênant sur un petit téléphone.
   Ces deux lignes autorisent les cases à se réduire et les longs mots à
   se couper. */
.step,.info-card,.field,.pack,.card,.review,.post,.svc,.lab-item{min-width:0}
.info-card p,.info-card a,.foot-contact,.foot-grid a{overflow-wrap:anywhere}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:720px;margin:0 auto}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:16px;padding:14px 16px;border:1px solid var(--line);background:var(--paper);color:var(--text)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.field textarea{resize:vertical;min-height:130px}

/* ---------- CONTACT INFO CARDS ---------- */
.info-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.info-card{border:1px solid var(--line);padding:32px 30px;text-align:center}
.info-card .ic{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--gold);margin-bottom:12px}
.info-card h4{font-size:21px;margin-bottom:10px}
.info-card p{font-size:15px;color:var(--muted);line-height:1.6}
.info-card a{color:var(--text)}
.info-card a:hover{color:var(--gold)}

/* ---------- EMBED (booking / map) ---------- */
.embed-box{max-width:960px;margin:0 auto;border:1px solid var(--line);background:var(--paper-2);min-height:520px;display:grid;place-items:center;text-align:center;padding:40px}
.embed-box .ph{max-width:440px}
.embed-box .ph .ic{font-size:40px;color:var(--gold);font-family:var(--serif);font-style:italic}
.embed-box .ph h3{font-size:26px;margin:14px 0 12px}
.embed-box .ph p{color:var(--muted);margin-bottom:22px}
/* ---------- Plan d'accès (chargé au clic, RGPD) ---------- */
.map-box{max-width:960px;margin:0 auto;border:1px solid var(--line);background:var(--paper-2);min-height:460px;display:grid;place-items:center;text-align:center;padding:40px}
.map-box.loaded{padding:0;border-color:var(--line);min-height:0;display:block}
.map-box iframe{display:block;width:100%;height:460px;border:0}
.map-ph{max-width:460px}
.map-ph .ic{font-size:40px;color:var(--gold);font-family:var(--serif);font-style:italic}
.map-ph h3{font-size:26px;margin:12px 0 14px}
.map-ph p{color:var(--text);margin-bottom:6px;line-height:1.6}
.map-ph p strong{font-family:var(--serif);font-size:19px;color:var(--ink)}
.map-ph .map-sub{color:var(--muted);font-size:15px;margin-bottom:24px}
.map-ph .map-note{color:var(--muted);font-size:12.5px;line-height:1.5;margin:16px auto 0;max-width:380px}
.map-links{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 26px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.map-links a{font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--text);border-bottom:1px solid var(--gold);padding-bottom:2px;transition:.25s}
.map-links a:hover{color:var(--gold)}
@media(max-width:560px){
  .map-box{padding:32px 20px;min-height:0}
  .map-box iframe{height:340px}
  .map-links{flex-direction:column;gap:12px}
}

/* ---------- FOOTER ---------- */
footer.site{background:var(--charcoal);color:#a49b8d;padding:66px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.5fr .9fr .8fr 1fr .9fr;gap:36px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-contact{font-size:14px;line-height:1.7;padding:5px 0}
.foot-contact b{display:block;font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:14px 0 4px}
.foot-grid h5{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:20px}
.foot-grid a{display:block;font-size:14px;color:#a49b8d;padding:5px 0;transition:.25s}
.foot-grid a:hover{color:var(--gold-2)}
.foot-brand .fb{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.foot-brand b{font-family:var(--serif);font-size:20px;color:#fff}
.foot-brand p{font-size:14px;line-height:1.7}
.foot-brand .social{display:flex;gap:12px;margin-top:18px}
.foot-brand .social a{width:38px;height:38px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:grid;place-items:center;padding:0;color:#e8e2d6;transition:.25s}
.foot-brand .social svg{display:block}
.foot-brand .social a:hover{border-color:var(--gold);color:var(--gold-2);background:rgba(201,168,108,.1)}
.foot-intl{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 22px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-intl h5{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);margin:0}
.foot-intl p{font-size:14px;margin:0;color:#a49b8d}
.foot-intl a{font-size:14px;color:#fff;border-bottom:1px solid rgba(201,168,108,.5);padding-bottom:2px;transition:.25s}
.foot-intl a:hover{color:var(--gold-2);border-color:var(--gold-2)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:26px;font-size:12.5px;letter-spacing:.03em}
.foot-bottom a:hover{color:var(--gold-2)}

/* ---------- REVEAL ANIMATION (subtle, content visible by default) ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
}

/* ---------- CARTES : lien « en savoir plus » ---------- */
.card-more{font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.06em;color:var(--gold);border-top:1px solid var(--line);padding-top:16px;display:flex;align-items:center;gap:.5em}
.card:hover .card-more .arrow{transform:translateX(4px)}

/* ---------- BANDEAU PORTFOLIO LÉGENDÉ ---------- */
.pf-strip.captioned a:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,18,15,.68),rgba(20,18,15,0) 55%);opacity:.9;transition:.4s}
.pf-strip.captioned .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 12px;font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-align:center}
.pf-strip.captioned a:hover:after{opacity:1}

/* ---------- SERVICES : variante lien ---------- */
.services.s3{grid-template-columns:repeat(3,1fr)}
a.svc{color:inherit}
a.svc:hover h4{color:var(--gold)}

/* ---------- AUTRES SERVICES (page prestations) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start}
.svc-card{background:#fff;border:1px solid var(--line);padding:34px 32px;display:flex;flex-direction:column;gap:14px;height:100%}
.svc-card h3{font-size:25px}
.svc-card p{font-size:14.5px;color:var(--muted)}
.svc-prices{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}
.svc-prices li{font-family:var(--sans);font-size:14px;color:var(--ink);padding:5px 0}
.svc-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:6px}
.svc-ctas .btn{padding:12px 20px;font-size:12px}
.btn-text{background:transparent;border-color:transparent;color:var(--gold);padding-left:0;padding-right:0}
.btn-text:hover{background:transparent;color:var(--ink)}

/* ---------- KLARNA / PAIEMENT FACILITÉ ---------- */
.klarna{border:1px solid var(--line);background:var(--paper-2);padding:44px 46px;text-align:center}
.klarna .overline{display:block;margin-bottom:16px}
.klarna h2{font-size:34px;margin-bottom:12px}
.klarna .sig{font-family:var(--serif);font-style:italic;font-size:21px;color:var(--gold);margin-bottom:18px}
.klarna p{color:var(--muted);max-width:620px;margin:0 auto}

/* ---------- TARIFS : compris / en supplément ----------
   Deux colonnes volontairement dissemblables : la colonne « compris »
   est pleine et bordée d'or, celle du supplément reste sobre. Le client
   doit voir la différence avant même d'avoir lu. */
.tarif-duo{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;max-width:940px;margin:0 auto}
.tarif-col{border:1px solid var(--line);padding:38px 34px;background:var(--paper)}
.tarif-col.in{border-color:var(--gold);background:#fff}
.tarif-col h3{font-size:22px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.tarif-col.in h3{border-bottom-color:var(--gold-soft)}
.tarif-col ul{list-style:none;margin:0}
.tarif-col li{position:relative;padding-left:28px;margin-bottom:13px;color:#403b33;line-height:1.55}
.tarif-col li:last-child{margin-bottom:0}
.tarif-col.in li:before{content:"✓";position:absolute;left:0;top:0;color:var(--gold);font-weight:500}
.tarif-col.out li{color:var(--muted)}
.tarif-col.out li:before{content:"+";position:absolute;left:2px;top:0;color:var(--muted)}
.tarif-note{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink)}
/* Page de séance : le bloc « en supplément », visuellement détaché de la
   liste des éléments compris pour qu'aucune confusion ne soit possible. */
.presta-extra{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.presta-extra h3{font-family:var(--sans);font-weight:500;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.presta-extra ul li{color:var(--muted)}
/* Marqueur différent des éléments compris : un « + » sobre, jamais l'étoile
   dorée, sinon les deux listes se ressemblent et l'effort est perdu. */
.presta-extra ul li:before{content:"+";color:var(--muted);font-family:var(--sans);font-weight:500}
.presta-note{margin-top:20px;padding:16px 20px;background:var(--paper-2);border-left:2px solid var(--gold);font-size:15px;color:#403b33}
.presta-lien{margin-top:20px;font-family:var(--sans);font-size:13px;letter-spacing:.09em}
.presta-lien a{color:var(--gold);border-bottom:1px solid var(--gold-soft)}
.bg-dark .presta-note{background:rgba(255,255,255,.05);color:#c9c2b4}
/* La prose sur fond sombre : le gris foncé par défaut y serait illisible. */
.bg-dark .prose p{color:#c9c2b4}
.bg-dark .prose strong,.bg-dark .prose em{color:#fff}

/* ---------- FORFAITS (demande en mariage) ---------- */
.packs{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;max-width:900px;margin:0 auto}
.pack{position:relative;background:var(--paper);border:1px solid var(--line);padding:44px 38px;display:flex;flex-direction:column;gap:12px}
.pack.popular{border-color:var(--gold);box-shadow:var(--shadow)}
.pack-flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--gold);color:#fff;font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:7px 18px;white-space:nowrap;max-width:calc(100% - 24px)}
/* Une étiquette longue (« ★ Coffret Signature — pièce unique ») dépassait
   du cadre de la carte sur petit écran : elle passe sur deux lignes. */
@media(max-width:560px){
  .pack-flag{white-space:normal;text-align:center;line-height:1.35;padding:6px 12px;font-size:12px;letter-spacing:.08em}
}
.pack .overline{display:block}
.pack h3{font-size:30px}
.pack-price{font-family:var(--serif);font-size:46px;font-weight:600;color:var(--ink);line-height:1;margin-bottom:8px}
.pack ul{list-style:none;margin:0;padding:16px 0 8px;border-top:1px solid var(--line);flex:1}
.pack li{position:relative;padding-left:22px;margin-bottom:11px;font-size:14.5px;color:#403b33}
.pack li:before{content:"✦";position:absolute;left:0;color:var(--gold);font-family:var(--serif)}
.pack .btn{margin-top:8px;justify-content:center}
.note{text-align:center;font-size:13.5px;color:var(--muted);margin-top:28px}

/* ---------- ENCARTS DEUX COLONNES ---------- */
.two-col{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.note-card{border:1px solid var(--line);border-left:2px solid var(--gold);background:var(--paper-2);padding:32px 34px}
.note-card h3{font-size:24px;margin-bottom:12px}
.note-card p{font-size:14.5px;color:#403b33}
.note-card .ic{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--gold);margin-bottom:10px}
.note-card .sig{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--gold);margin-bottom:10px}

/* ---------- CARTES CADEAUX ---------- */
.packs.p3{grid-template-columns:repeat(3,1fr);max-width:1140px}
.packs.p1{grid-template-columns:1fr;max-width:520px}
.pack-lt{font-family:var(--sans);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.pack-lt+ul{padding-top:10px}
.pack .sig{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--gold);line-height:1.4}
.pack-pay{font-family:var(--sans);font-size:12px;letter-spacing:.05em;color:var(--muted);text-align:center;margin-top:2px}
.gift-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:34px}
.gift-tabs a{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:10px 20px;transition:.3s;background:var(--paper)}
.gift-tabs a:hover{border-color:var(--gold);color:var(--gold)}
.free-amounts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:720px;margin:0 auto}
.free-amounts span{font-family:var(--serif);font-size:26px;font-weight:600;color:#fff;border:1px solid rgba(255,255,255,.22);padding:16px 26px;min-width:118px;text-align:center}
.seo-text{max-width:760px;margin:0 auto}
.seo-text h2{font-size:30px;margin-bottom:20px;text-align:center}
.seo-text p{color:var(--muted);font-size:15.5px;margin-bottom:16px}

/* ---------- LABORATOIRE D'IMPRESSION ---------- */
.lab-list{display:flex;flex-direction:column;gap:0}
.lab-item{display:grid;grid-template-columns:96px 1fr;gap:30px;padding:38px 0;border-top:1px solid var(--line)}
.lab-item:last-child{border-bottom:1px solid var(--line)}
.lab-n{font-family:var(--serif);font-size:48px;font-weight:500;color:var(--gold-2);line-height:1}
.lab-txt .overline{display:block;margin-bottom:12px}
.lab-txt h3{font-size:30px;margin-bottom:8px}
.lab-txt .sig{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--gold);margin-bottom:14px}
.lab-txt p{color:#403b33}

/* ---------- FORMULAIRE : case à cocher ---------- */
.field.check label{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--muted);line-height:1.6;text-transform:none;letter-spacing:0}
/* Case à cocher des CGV : 20 px, pour être visée sans effort au doigt. */
.field.check input{width:24px;height:24px;margin-top:0;flex:none;accent-color:var(--gold)}
.field.check a{color:var(--gold);border-bottom:1px solid var(--gold-soft)}

/* ---------- CONFORT TACTILE ----------
   Sur téléphone, un lien doit offrir une zone touchable d'au moins 24 px
   de haut (recommandation WCAG 2.2). Quelques liens secondaires — fil
   d'Ariane, bas de page, coordonnées — n'étaient hauts que de 15 à 16 px :
   on les rend plus faciles à viser sans changer leur apparence. */
@media(max-width:860px){
  .breadcrumb a,
  .foot-bottom a,
  .final-info a,
  .foot-intl a,
  .map-links a{display:inline-block;padding-top:6px;padding-bottom:6px}
  .breadcrumb{margin-bottom:14px}
}

/* ---------- RESPONSIVE ---------- */
/* Le menu complet ne tient plus sous ~1320px : bascule vers le menu burger. */
@media(max-width:1320px){
  .menu{display:none}
  .burger{display:flex}
}
@media(max-width:1080px){
  .hero-txt h1{font-size:52px}
  .cards,.services,.services.s3{grid-template-columns:repeat(2,1fr)}
  .cards.c3{grid-template-columns:repeat(2,1fr)}
  .steps,.steps.s4{grid-template-columns:repeat(2,1fr);gap:36px 20px}
  .step:after{display:none}
  .pf-strip{grid-template-columns:repeat(3,1fr)}
  .gallery{columns:3}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .info-cards{grid-template-columns:1fr}
  .reviews-grid.g3{grid-template-columns:1fr}
  .services.s3,.svc-grid{grid-template-columns:1fr}
  .packs.p3{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:34px}
}
@media(max-width:860px){
  .hero{grid-template-columns:1fr}
  .hero-img{min-height:56vh}
  .hero-txt{padding:56px 34px}
  .split,.split.rev{grid-template-columns:1fr;gap:36px}
  .split.rev .split-img{order:0}
  .reviews-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .form-grid{grid-template-columns:1fr}
  .page-hero h1{font-size:44px}
  .packs,.two-col,.packs.p3,.tarif-duo{grid-template-columns:1fr}
  .tarif-col{padding:30px 24px}
  .klarna{padding:34px 24px}
  .lab-item{grid-template-columns:60px 1fr;gap:20px}
  .lab-n{font-size:36px}
  .free-amounts span{font-size:21px;padding:13px 18px;min-width:96px}
  .nav-cta .btn{display:none}
  .nav-cta{gap:14px}
}
@media(max-width:560px){
  body{font-size:16px}
  .wrap,.wrap-narrow{padding:0 20px}
  section{padding:70px 0}
  .hero-txt h1{font-size:42px}
  .sec-head h2{font-size:34px}
  .cards,.services,.cards.c3,.blog-grid{grid-template-columns:1fr}
  .gallery{columns:2}
  .final h2{font-size:36px}
  .nav{height:70px}
  .nav-cta{gap:10px}
  .tel span{display:none}
  .foot-grid{grid-template-columns:1fr}
  .foot-intl{flex-direction:column;gap:6px}
  .page-hero h1{font-size:38px}
}

/* ---------- PETITS TÉLÉPHONES (≤ 430 px) ----------
   Sous cette largeur, le nom du studio écrit sur une seule ligne
   poussait le bouton menu hors de l'écran : sur un iPhone SE il devenait
   carrément intouchable. Le nom passe donc sur deux lignes, l'emblème
   et les espacements se resserrent, et le bouton menu revient dans le
   cadre avec de la marge. */
@media(max-width:430px){
  header.site .wrap{padding:0 16px}
  .nav{gap:10px}
  .brand{gap:9px}
  .emblem{width:38px;height:38px}
  .brand-txt b{white-space:normal;font-size:15px;line-height:1.14;max-width:8.6em}
  .brand-txt small{font-size:8.5px;letter-spacing:.18em;margin-top:1px}
  .nav-cta{gap:12px}
  /* sous-titre du logo : élément graphique, pas du texte de lecture */
  .brand-txt small{font-size:10px}
  /* Les blocs « étapes » passent sur une seule colonne : à deux colonnes,
     un mot comme « Personnalisez » ne tient pas dans 130 px. */
  .steps,.steps.s4{grid-template-columns:1fr;gap:30px}
  .step{padding:0}
  .steps .step .num{font-size:30px}
}

/* ---------- AVIS GOOGLE EN DIRECT (widget facultatif) ---------- */
.avis-live{max-width:960px;margin:0 auto;border:1px solid var(--line);background:#fff;min-height:280px;display:grid;place-items:center;text-align:center;padding:44px 24px}
.avis-live[data-charge]{display:block;padding:20px;min-height:0;border-color:var(--line)}
.avis-ph{max-width:520px}
.avis-ph .ic{font-size:30px;color:var(--gold);line-height:1;margin-bottom:16px}
.avis-ph p{color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:22px}
@media(max-width:560px){.avis-live{padding:34px 18px}}

/* ---------- PRÉSENTATION D'UN OBJET (album, coffret) ----------
   Une grande image et deux plans de détail. L'objet occupe toute la
   largeur utile avant la carte tarifaire : sur un album à 349 €, c'est
   ce qu'on voit qui décide, pas ce qu'on lit. */
.objet{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;max-width:1100px;margin:0 auto 54px}
.objet figure{margin:0;overflow:hidden;background:#e6dece}
.objet figure img{width:100%;height:100%;object-fit:cover;display:block}
.objet-1{aspect-ratio:3/2}
.objet-2{display:grid;grid-template-rows:1fr 1fr;gap:16px;min-width:0}
.objet-2 figure{aspect-ratio:16/11}
.objet-lg{grid-column:1/-1;text-align:center;color:var(--muted);font-size:15px;line-height:1.6;padding-top:6px;max-width:640px;margin:0 auto}
@media(max-width:860px){
  .objet{grid-template-columns:1fr;margin-bottom:44px}
  .objet-2{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .objet-2 figure{aspect-ratio:4/3}
}
@media(max-width:560px){
  .objet-2{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------
   Séquence de reportage (cas client) — images légendées
   Grille 6 colonnes : 3 photos par ligne, sauf celles marquées .w6
   qui occupent toute la largeur. Les portraits passent en 3/4.
   --------------------------------------------------------------- */
.repo{display:grid;grid-template-columns:repeat(6,1fr);gap:20px 18px;margin:44px auto 0;max-width:1180px;align-items:start}
.repo figure{margin:0;grid-column:span 2;min-width:0}
.repo figure.w6{grid-column:span 6}
.repo img{width:100%;display:block;aspect-ratio:3/2;object-fit:cover;background:#e6dece}
.repo figure.w6 img{aspect-ratio:2/1}
.repo figure.tall{grid-row:span 2}
.repo figure.tall img{aspect-ratio:3/4}
.repo figcaption{font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--muted);padding-top:9px;margin-top:9px;border-top:1px solid var(--line)}
@media(max-width:900px){
  .repo{grid-template-columns:repeat(4,1fr)}
  .repo figure{grid-column:span 2}
  .repo figure.w6{grid-column:span 4}
  .repo figure.w6 img{aspect-ratio:16/9}
}
@media(max-width:560px){
  .repo{grid-template-columns:1fr;gap:28px}
  .repo figure,.repo figure.w6{grid-column:span 1}
  .repo figure.tall{grid-row:auto}
  .repo figure.w6 img{aspect-ratio:3/2}
}
/* Sous-titre d'une séquence de reportage, à l'intérieur d'une section */
.sec-head.sub{margin:70px auto 0;max-width:720px}
.sec-head.sub h3{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.22;margin-top:16px}
.sec-head.sub p{margin-top:16px}
@media(max-width:560px){.sec-head.sub h3{font-size:25px}.sec-head.sub{margin-top:52px}}
/* Variante paysage de la mini-galerie (reportages, événements) */
.mini-gallery.wide{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.mini-gallery.wide img{aspect-ratio:3/2}

/* ---------------------------------------------------------------
   Bandeau de consentement aux cookies
   N'apparaît que si un traceur Google est activé dans config.mjs.
   Les deux boutons ont le même poids visuel : refuser doit être
   aussi simple qu'accepter (exigence CNIL).
   --------------------------------------------------------------- */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--ink);color:#e8e2d6;border-top:1px solid rgba(201,168,108,.35);box-shadow:0 -10px 40px rgba(0,0,0,.25)}
.cookies[hidden]{display:none}
.cookies-in{max-width:1180px;margin:0 auto;padding:20px clamp(16px,4vw,40px);display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.cookies p{font-family:var(--sans);font-size:14.5px;line-height:1.6;margin:0;flex:1 1 360px;min-width:0;color:#cec7b9}
.cookies p a{color:var(--gold2);text-decoration:underline;text-underline-offset:3px}
.cookies-btn{display:flex;gap:12px;flex:0 0 auto}
.cookies-btn .btn,.cookies-btn .btn-ghost{font-size:12px;padding:13px 24px;white-space:nowrap;cursor:pointer;border:1px solid var(--gold);background:transparent;color:var(--gold2);min-width:132px;text-align:center}
.cookies-btn .btn:hover,.cookies-btn .btn-ghost:hover{background:rgba(201,168,108,.14);color:#fff}
@media(max-width:560px){
  .cookies-in{gap:16px;padding:18px 16px}
  .cookies-btn{width:100%}
  .cookies-btn .btn{flex:1;text-align:center;padding:13px 10px}
}

/* Message de retour d'un formulaire (erreur d'envoi, champ manquant) */
.form-note{grid-column:1/-1;font-family:var(--sans);font-size:15px;line-height:1.6;padding:15px 18px;border-left:3px solid var(--gold);background:var(--paper-2);color:var(--ink)}
.form-note[hidden]{display:none}
.form-note.ko{border-left-color:#94402f;background:#f9efec}
.form-note.warn{border-left-color:#b08b4c;background:#f7f2ea}

/* Encart « vous cherchez autre chose » sous les cartes cadeaux */
.autres{text-align:center;border:1px solid var(--line);background:var(--paper-2);padding:38px 34px;max-width:760px;margin:0 auto}
.autres h3{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.2}
.autres p{margin:14px auto 24px;max-width:52em;color:var(--muted);font-size:16px;line-height:1.7}
@media(max-width:560px){.autres{padding:30px 22px}.autres h3{font-size:24px}}


/* =====================================================================
   POINTS FOCAUX DES PHOTOS
   =====================================================================
   Le site affiche la même photo dans des cadres de proportions
   différentes : carré sur le portfolio, vertical sur les cartes,
   panoramique en haut des pages. Le navigateur recadre donc chaque
   photo automatiquement, et par défaut il garde le CENTRE — ce qui
   coupe régulièrement le haut des visages.

   Chaque ligne ci-dessous dit au navigateur quel point de la photo il
   doit garder dans le cadre, en pourcentage : le premier chiffre est
   horizontal (0 % = bord gauche, 100 % = bord droit), le second est
   vertical (0 % = haut, 100 % = bas). Les valeurs pointent le visage,
   ou le centre du groupe de visages.

   Frédéric : si un cadrage ne te plaît pas, change juste les deux
   chiffres de la ligne concernée, puis relance « node build.mjs ».
   Baisser le second chiffre remonte le cadrage, l'augmenter le descend.
   ===================================================================== */

/* — Famille & enfants — */
img[src$="photo-enfants-studio-dol-de-bretagne.webp"]{object-position:51% 30%}
img[src$="photo-famille-enfants-studio-dol-de-bretagne.webp"]{object-position:55% 36%}
img[src$="photo-freres-studio-dol-de-bretagne.webp"]{object-position:50% 15%}
img[src$="photo-soeurs-enfants-studio-dol-de-bretagne.webp"]{object-position:56% 38%}
img[src$="portrait-enfant-reveur-dol-de-bretagne.webp"]{object-position:55% 38%}
img[src$="portrait-enfant-studio-dol-de-bretagne.webp"]{object-position:50% 30%}
img[src$="portrait-fratrie-freres-dol-de-bretagne.webp"]{object-position:55% 33%}
img[src$="portrait-parents-studio-dol-de-bretagne.webp"]{object-position:53% 23%}
img[src$="seance-famille-bebe-dol-de-bretagne.webp"]{object-position:48% 27%}
img[src$="seance-famille-exterieur-dol-de-bretagne.webp"]{object-position:55% 42%}
img[src$="seance-photo-famille-noir-et-blanc-dol-de-bretagne.webp"]{object-position:55% 33%}
img[src$="seance-photo-famille-studio-dol-de-bretagne.webp"]{object-position:53% 30%}
img[src$="photographe-portraitiste-dol-de-bretagne.webp"]{object-position:50% 27%}

/* — Grossesse & nouveau-né — */
img[src$="maternite-grossesse-couleur-dol-de-bretagne.webp"]{object-position:50% 15%}
img[src$="photo-grossesse-couple-maternite-dol-de-bretagne.webp"]{object-position:51% 16%}
img[src$="photo-grossesse-noir-et-blanc-dol-de-bretagne.webp"]{object-position:50% 15%}
img[src$="photo-nouveau-ne-bebe-dol-de-bretagne.webp"]{object-position:45% 30%}
img[src$="photo-nouveau-ne-papa-bebe-dol-de-bretagne.webp"]{object-position:52% 25%}
img[src$="seance-photo-grossesse-maternite-dol-de-bretagne.webp"]{object-position:51% 24%}
img[src$="silhouette-grossesse-studio-dol-de-bretagne.webp"]{object-position:50% 16%}

/* — Portrait Elle & portrait féminin — */
img[src$="boudoir-portrait-feminin-dol-de-bretagne.webp"]{object-position:43% 18%}
img[src$="portrait-adolescente-studio-dol-de-bretagne.webp"]{object-position:43% 25%}
img[src$="portrait-elle-femme-studio-dol-de-bretagne.webp"]{object-position:53% 30%}
img[src$="portrait-elle-glamour-dol-de-bretagne.webp"]{object-position:50% 27%}
img[src$="portrait-feminin-artistique-dol-de-bretagne.webp"]{object-position:52% 30%}
img[src$="portrait-femme-creatif-dol-de-bretagne.webp"]{object-position:50% 22%}
img[src$="portrait-femme-quarantaine-studio-dol-de-bretagne.webp"]{object-position:47% 27%}
img[src$="seance-photo-boudoir-dol-de-bretagne.webp"]{object-position:55% 22%}

/* — Stage Nath Sakura — */
img[src$="stage-nath-sakura-direction-modele-studio.webp"]{object-position:50% 14%}
img[src$="stage-nath-sakura-portrait-main-premier-plan.webp"]{object-position:33% 40%}
img[src$="stage-nath-sakura-portrait-serre-lumiere-studio.webp"]{object-position:50% 25%}
img[src$="stage-nath-sakura-gelatine-bleue-contre-plongee.webp"]{object-position:45% 32%}
img[src$="stage-nath-sakura-coulisses-flash-deporte-perche.webp"]{object-position:55% 40%}
img[src$="stage-nath-sakura-portrait-gelatines-couleur-escalier.webp"]{object-position:50% 42%}

/* — Portrait corporate & professionnel — */
img[src$="portrait-artiste-musicien-dol-de-bretagne.webp"]{object-position:66% 15%}
img[src$="portrait-corporate-femme-dol-de-bretagne.webp"]{object-position:50% 17%}
img[src$="portrait-corporate-professionnel-dol-de-bretagne.webp"]{object-position:62% 25%}
img[src$="portrait-homme-corporate-dol-de-bretagne.webp"]{object-position:55% 30%}
img[src$="portrait-homme-studio-dol-de-bretagne.webp"]{object-position:48% 20%}
img[src$="portrait-jeune-homme-studio-dol-de-bretagne.webp"]{object-position:50% 17%}
img[src$="portrait-adolescents-studio-dol-de-bretagne.webp"]{object-position:50% 25%}

/* — Seniors — */
img[src$="portrait-senior-femme-dol-de-bretagne.webp"]{object-position:47% 30%}
img[src$="portrait-senior-personne-agee-dol-de-bretagne.webp"]{object-position:50% 38%}

/* — Couples & Mont Saint-Michel — */
img[src$="photo-couple-amoureux-mont-saint-michel.webp"]{object-position:37% 44%}
img[src$="photo-famille-plage-coucher-de-soleil-baie-mont-saint-michel.webp"]{object-position:60% 60%}
img[src$="portrait-couple-complice-dol-de-bretagne.webp"]{object-position:52% 25%}
img[src$="seance-couple-jeune-studio-dol-de-bretagne.webp"]{object-position:53% 31%}
img[src$="seance-photo-couple-mont-saint-michel.webp"]{object-position:48% 42%}
img[src$="seance-photo-couple-studio-dol-de-bretagne.webp"]{object-position:50% 22%}

/* — Iris & animaux — */
img[src$="photographie-iris-dol-de-bretagne.webp"]{object-position:50% 47%}
img[src$="seance-photo-animal-compagnie-dol-de-bretagne.webp"]{object-position:55% 33%}
img[src$="seance-photo-animaux-chien-dol-de-bretagne.webp"]{object-position:47% 30%}

/* photographie-iris-macro et studio-photo-de-la-baie restent centrées :
   ce sont des images sans visage, le centre est le bon cadrage. */

/* — Portrait de Frédéric — */
img[src$="frederic-renaud-photographe-portraitiste-dol-de-bretagne.webp"]{object-position:50% 22%}

/* — Album de la Collection Studio 18.20 — */
img[src$="album-20-ans-double-page-portraits-dol-de-bretagne.webp"]{object-position:50% 45%}
img[src$="album-20-ans-couverture-bois-dol-de-bretagne.webp"]{object-position:50% 50%}
img[src$="album-20-ans-faconnage-tranche-dol-de-bretagne.webp"]{object-position:50% 42%}

/* ---------------------------------------------------------------------
   Séries ajoutées depuis le dossier photo de Frédéric.
   Points focaux relevés photo par photo, comme pour les précédentes.
   --------------------------------------------------------------------- */
img[src$="portrait-femme-blonde-studio-dol-de-bretagne.webp"]{object-position:50% 22%}
img[src$="portrait-elle-noir-et-blanc-dol-de-bretagne.webp"]{object-position:50% 18%}
img[src$="portrait-femme-sourire-lumiere-douce-dol-de-bretagne.webp"]{object-position:52% 25%}
img[src$="portrait-elle-assise-studio-dol-de-bretagne.webp"]{object-position:50% 15%}
img[src$="portrait-elle-chemise-noir-et-blanc-dol-de-bretagne.webp"]{object-position:50% 18%}
img[src$="portrait-jeune-femme-noir-et-blanc-dol-de-bretagne.webp"]{object-position:50% 22%}
img[src$="portrait-elle-robe-rouge-dol-de-bretagne.webp"]{object-position:52% 20%}
img[src$="portrait-elle-robe-brodee-studio-dol-de-bretagne.webp"]{object-position:50% 18%}
img[src$="portrait-homme-lunettes-noir-et-blanc-dol-de-bretagne.webp"]{object-position:50% 24%}
img[src$="portrait-duo-adolescents-studio-dol-de-bretagne.webp"]{object-position:55% 30%}
img[src$="seance-boudoir-lumiere-rouge-dol-de-bretagne.webp"]{object-position:50% 25%}
img[src$="photo-famille-nombreuse-exterieur-baie-mont-saint-michel.webp"]{object-position:50% 45%}
img[src$="photo-famille-plage-bateaux-bretagne.webp"]{object-position:40% 45%}
img[src$="photo-famille-adultes-studio-noir-et-blanc-dol-de-bretagne.webp"]{object-position:50% 30%}
img[src$="photo-famille-quatre-noir-et-blanc-dol-de-bretagne.webp"]{object-position:52% 35%}
img[src$="photo-famille-jeunes-enfants-studio-dol-de-bretagne.webp"]{object-position:52% 40%}
img[src$="photo-famille-complice-studio-dol-de-bretagne.webp"]{object-position:50% 40%}
img[src$="photo-mere-et-filles-studio-dol-de-bretagne.webp"]{object-position:50% 32%}
img[src$="portrait-fillette-studio-noir-et-blanc-dol-de-bretagne.webp"]{object-position:50% 22%}
img[src$="photo-mere-et-fille-complices-dol-de-bretagne.webp"]{object-position:52% 30%}
img[src$="photo-pere-et-fille-studio-dol-de-bretagne.webp"]{object-position:50% 28%}
img[src$="portrait-garcon-cinq-ans-studio-dol-de-bretagne.webp"]{object-position:52% 30%}
img[src$="portrait-trois-freres-studio-dol-de-bretagne.webp"]{object-position:50% 32%}
img[src$="photo-maman-et-nouveau-ne-dol-de-bretagne.webp"]{object-position:50% 35%}
img[src$="photo-parents-nouveau-ne-contre-jour-dol-de-bretagne.webp"]{object-position:50% 45%}
img[src$="portrait-nouveau-ne-visage-dol-de-bretagne.webp"]{object-position:50% 40%}
img[src$="photo-grossesse-studio-fond-sombre-dol-de-bretagne.webp"]{object-position:50% 20%}
img[src$="photo-grossesse-drape-ombres-dol-de-bretagne.webp"]{object-position:48% 25%}
img[src$="photo-grossesse-couple-contre-jour-dol-de-bretagne.webp"]{object-position:50% 30%}
img[src$="photo-couple-noir-et-blanc-studio-dol-de-bretagne.webp"]{object-position:50% 30%}
img[src$="photo-couple-regard-complice-studio-dol-de-bretagne.webp"]{object-position:50% 32%}
img[src$="photo-jeune-couple-enlace-studio-dol-de-bretagne.webp"]{object-position:50% 30%}
img[src$="photo-couple-parapluie-bretagne.webp"]{object-position:50% 38%}
img[src$="portrait-corporate-femme-fond-blanc-dol-de-bretagne.webp"]{object-position:50% 22%}
img[src$="portrait-corporate-homme-veste-dol-de-bretagne.webp"]{object-position:50% 20%}
img[src$="portrait-corporate-femme-decontracte-dol-de-bretagne.webp"]{object-position:50% 18%}
img[src$="reportage-entreprise-restauratrice-dol-de-bretagne.webp"]{object-position:62% 40%}
img[src$="portrait-musicien-guitare-graphique-dol-de-bretagne.webp"]{object-position:60% 35%}
img[src$="portrait-chiot-border-collie-studio-dol-de-bretagne.webp"]{object-position:50% 40%}
img[src$="photo-famille-avec-chien-studio-dol-de-bretagne.webp"]{object-position:50% 42%}
img[src$="demande-en-mariage-genou-a-terre-mont-saint-michel.webp"]{object-position:45% 50%}
img[src$="demande-en-mariage-genou-a-terre-campagne-mont-saint-michel.webp"]{object-position:50% 50%}
img[src$="demande-en-mariage-surprise-emotion-mont-saint-michel.webp"]{object-position:50% 45%}
img[src$="couple-devant-le-mont-saint-michel.webp"]{object-position:48% 45%}
img[src$="couple-assis-face-au-mont-saint-michel.webp"]{object-position:55% 50%}

/* — Reportage entreprise « Maison Guisnel » (3 mai 2024) — */
img[src$="reportage-entreprise-maison-guisnel-atelier-poids-lourds-dol-de-bretagne.webp"]{object-position:52% 48%}
img[src$="reportage-entreprise-maison-guisnel-arrivee-des-invites-dol-de-bretagne.webp"]{object-position:48% 38%}
img[src$="reportage-entreprise-maison-guisnel-mise-en-place-ceremonie-dol-de-bretagne.webp"]{object-position:50% 45%}
img[src$="reportage-entreprise-maison-guisnel-collaborateurs-dol-de-bretagne.webp"]{object-position:45% 62%}
img[src$="reportage-entreprise-maison-guisnel-public-inauguration-dol-de-bretagne.webp"]{object-position:50% 48%}
img[src$="reportage-entreprise-maison-guisnel-invites-ceremonie-dol-de-bretagne.webp"]{object-position:50% 52%}
img[src$="reportage-entreprise-maison-guisnel-assemblee-invites-dol-de-bretagne.webp"]{object-position:55% 45%}
img[src$="reportage-entreprise-maison-guisnel-prise-de-parole-officielle-dol-de-bretagne.webp"]{object-position:55% 55%}
img[src$="reportage-entreprise-maison-guisnel-coupe-du-ruban-dol-de-bretagne.webp"]{object-position:48% 50%}
img[src$="reportage-entreprise-maison-guisnel-inauguration-nouvel-espace-dol-de-bretagne.webp"]{object-position:42% 50%}
img[src$="reportage-entreprise-maison-guisnel-moteur-hydrogene-dol-de-bretagne.webp"]{object-position:40% 60%}
img[src$="reportage-entreprise-maison-guisnel-devoilement-moteur-hydrogene-dol-de-bretagne.webp"]{object-position:52% 52%}