/* Polices hébergées sur le site (plus de requête vers Google).
   Les quatre graisses d'Inter et la plage de caractères reproduisent
   exactement ce que Google Fonts envoyait : même rendu, mêmes caractères
   confiés à la police de repli (les flèches, notamment). */
@font-face {
  /* « block » plutôt que « swap » : le fichier est hébergé ici et préchargé,
     il arrive en quelques dizaines de millisecondes. On évite ainsi que les
     grands titres s'affichent une fraction de seconde dans une police de
     substitution avant de basculer. */
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/bebas-neue-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 750;
  font-display: swap;
  src: url("../fonts/inter-750.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Palette : crème (fond), noir (texte), abricot et terracotta (accents). */
  --cream: #fff8ed;
  --ink: #000000;
  --sun: #edaa7e;
  --coral: #bf703d;
  --blush: #ffe0cb;
  --line: rgba(0, 0, 0, 0.18);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.14);
  /* La police d'émoji du système est ajoutée en dernier recours : les
     émojis des titres et des textes sont ainsi dessinés par l'appareil du
     visiteur — ceux d'Apple sur iPhone et Mac. */
  --display: "Bebas Neue", Impact, "Arial Narrow", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --serif: Georgia, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--blush); }

.skip-link {
  position: fixed;
  z-index: 100;
  left: 16px;
  top: -60px;
  padding: 10px 16px;
  background: var(--cream);
  color: var(--ink);
}
.skip-link:focus { top: 16px; }

.site-header {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 90px;
  padding: 9px clamp(22px, 5vw, 76px);
  transition: background .25s ease, box-shadow .25s ease, min-height .25s ease;
}
.site-header.is-scrolled {
  min-height: 70px;
  background: rgba(255, 248, 237, .93);
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  backdrop-filter: blur(14px);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; }
.brand-logo { width: auto; height: 50px; object-fit: contain; background: transparent; transition: height .25s ease; }
.site-header.is-scrolled .brand-logo { height: 40px; }
/* Les deux versions du logo coexistent ; seule celle qui convient au fond
   est affichée, ce qui préserve l'accent orange de l'identité. */
.brand-logo-light { display: none; }
.brand-logo-dark { display: block; }
/* Forcer l'image noire sur tous les en-têtes dès qu'ils passent au fond clair. */
.site-header.is-scrolled .brand-logo-light { display: none; }
.site-header.is-scrolled .brand-logo-dark { display: block; }
.site-nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 48px); }
.site-nav > a { font-size: 13px; font-weight: 650; text-decoration: none; position: relative; }
.site-nav > a::after { content: ""; position: absolute; height: 1px; background: currentColor; left: 0; right: 100%; bottom: -5px; transition: right .25s ease; }
.site-nav > a:hover::after, .site-nav > a:focus-visible::after { right: 0; }
.nav-cta { border: 0; border-radius: 999px; background: var(--ink); color: var(--cream); padding: 13px 18px; cursor: pointer; }
.menu-toggle { display: none; }

.hero {
  grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr);
  gap: clamp(30px, 5vw, 90px);
}
.eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 22px; font-size: 11px; font-weight: 750; letter-spacing: .19em; text-transform: uppercase; }
.eyebrow > span { width: 28px; height: 1px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
/* Un mot long dans un très grand titre ne doit jamais créer de défilement
   horizontal sur mobile : les colonnes de grille peuvent rétrécir, et le
   titre passe à la ligne plutôt que de déborder. */
h1, h2 { overflow-wrap: break-word; }
.hero > *, .prestation-hero > *, .tarifs-hero > *, .contact-hero > *, .creation-hero > *,
.experience-band > *, .page-cta > *, .cross-service-inner > *, .generic-cta > *,
.service-story > *, .story-content > *, .branch-row > *, .section-heading > * { min-width: 0; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: .012em; }
h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.035em; }
h1 { margin-bottom: 28px; font-size: clamp(48px, 6vw, 94px); line-height: .93; }
h1 em, h2 em { color: var(--coral); font-weight: 400; font-style: normal; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 27px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 52px;
  padding: 15px 20px;
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
}
.button:hover { transform: translateY(-2px); filter: brightness(1.05); }
.button-dark { background: var(--ink); color: var(--cream); }
.button-coral { background: var(--coral); color: var(--ink); }
.button-outline { border: 1px solid var(--ink); color: var(--ink); background: transparent; }
.text-link { font-size: 13px; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--ink); padding: 9px 0; }
.text-link span { margin-left: 14px; }
.photo { position: absolute; margin: 0; overflow: hidden; box-shadow: var(--shadow); }
.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 65%, rgba(0,0,0,.2)); pointer-events: none; }

.services { background: var(--ink); color: var(--cream); padding: clamp(86px, 10vw, 150px) clamp(22px, 5vw, 76px); }
.section-heading { display: grid; grid-template-columns: 1fr 1.25fr; gap: 20px 50px; align-items: end; margin-bottom: clamp(44px, 6vw, 80px); }
.section-heading .eyebrow { grid-column: 1 / -1; margin: 0; color: var(--sun); }
.section-heading h2 { line-height: .95; margin: 0; }
.section-heading > p:last-child { max-width: 430px; margin: 0 0 9px; color: rgba(255,248,237,.67); }
.section-heading:not(:has(h2)) { grid-template-columns: 1fr; margin-bottom: clamp(32px, 4vw, 52px); }
.section-heading:not(:has(h2)) > p:last-child { max-width: 640px; font-size: clamp(19px, 1.7vw, 24px); }
.service-picker { display: grid; grid-template-columns: minmax(270px, .68fr) minmax(560px, 1.32fr); gap: clamp(30px, 5vw, 80px); }
.service-tabs { border-top: 1px solid rgba(255,248,237,.25); }
.service-tab {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 24px 5px;
  border: 0;
  border-bottom: 1px solid rgba(255,248,237,.25);
  color: var(--cream);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: color .2s ease, padding .2s ease;
}
.service-tab:hover, .service-tab.is-active { color: var(--blush); padding-left: 13px; }
.tab-index { font-size: 10px; letter-spacing: .12em; opacity: .6; }
.service-tab > span:nth-child(2) { display: grid; gap: 4px; }
.service-tab strong { font-family: var(--serif); font-size: 27px; font-weight: 400; }
.service-tab small { color: rgba(255,248,237,.7); font-size: 11px; }
.service-tab i { font-style: normal; font-size: 20px; opacity: 0; transform: translate(-6px, 6px); transition: opacity .2s ease, transform .2s ease; }
.service-tab.is-active i { opacity: 1; transform: translate(0); }

.service-panel { display: grid; grid-template-columns: minmax(230px, .72fr) minmax(300px, 1.28fr); scroll-margin-top: 82px; color: var(--ink); background: var(--cream); box-shadow: 0 30px 80px rgba(0,0,0,.18); outline: none; }
/* Refermé sur mobile : sans cette règle, le display: grid ci-dessus l'emporte sur [hidden]. */
.service-panel[hidden] { display: none; }
/* L'aperçu occupe toute la hauteur du panneau : l'image est recadrée
   plutôt que de laisser une bande vide sous elle. */
.panel-visual { position: relative; height: 100%; min-height: 0; overflow: hidden; background: var(--coral); }
.panel-visual img { transition: opacity .25s ease, transform .55s ease; }
.panel-visual.is-changing img { opacity: .25; transform: scale(1.03); }
.panel-visual.is-graphic img { display: none; }
.panel-visual.is-graphic::before, .panel-visual.is-graphic::after { content: ""; position: absolute; border-radius: 50%; }
.panel-visual.is-graphic::before { width: 115%; aspect-ratio: 1; left: -48%; bottom: -33%; background: var(--sun); }
.panel-visual.is-graphic::after { width: 76%; aspect-ratio: 1; right: -34%; top: 8%; border: 24px solid rgba(255,248,237,.62); }
.panel-visual.is-famille { background: var(--sun); }
.panel-visual.is-entreprise { background: var(--coral); }
.panel-visual.is-entreprise::before { border-radius: 0; transform: rotate(17deg); background: var(--blush); }
.visual-label { position: absolute; z-index: 2; left: 18px; bottom: 18px; padding: 7px 10px; background: rgba(255,248,237,.9); font-size: 9px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.panel-content { align-self: center; padding: clamp(30px, 3.8vw, 60px); container-type: inline-size; }
.panel-kicker { color: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.panel-content h3 { font-size: clamp(29px, 9.2cqw, 56px); line-height: .99; margin-bottom: 24px; }
.panel-content > p:not(.panel-kicker) { color: rgba(0,0,0,.72); }
.panel-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.panel-actions .button { flex: 1 1 230px; white-space: nowrap; }

.approach { display: grid; gap: clamp(50px, 8vw, 120px); padding: clamp(86px, 11vw, 160px) clamp(22px, 8vw, 130px) 0; overflow: hidden; }
.approach-photo { position: relative; max-height: 72vw; box-shadow: var(--shadow); }
.approach-photo span { position: absolute; right: -42px; bottom: 44px; padding: 20px 23px; color: var(--ink); background: var(--coral); font-family: var(--serif); font-size: 23px; line-height: 1; transform: rotate(-3deg); }
.approach-copy { align-self: center; max-width: 650px; }
.approach-copy h2 { font-size: clamp(45px, 5vw, 78px); line-height: .98; margin-bottom: 32px; }
.approach-copy > p:not(.eyebrow) { max-width: 570px; color: rgba(0,0,0,.74); }
.personality-line { max-width: 560px; margin: 6px 0 22px; font-family: var(--serif); font-style: italic; font-size: 19px; color: rgba(0,0,0,.7); }
.award-note { display: grid; gap: 5px; max-width: 570px; margin: 18px 0 26px; padding: 17px 20px; color: var(--ink); background: var(--cream); border-left: 5px solid var(--coral); text-decoration: none; transition: transform .25s ease, background-color .25s ease; }
.award-note:hover { transform: translateX(4px); background: var(--blush); }
.award-note > span { color: var(--coral); font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.award-note strong { font-family: var(--serif); font-size: clamp(19px, 1.7vw, 25px); line-height: 1.05; }
.award-note small { font-size: 12px; line-height: 1.35; opacity: .7; }
.award-note i { font-style: normal; }
blockquote { max-width: 540px; margin: 38px 0; padding: 23px 0 0 28px; border-top: 1px solid var(--line); border-left: 0; font-family: var(--serif); font-size: 20px; line-height: 1.4; position: relative; }
blockquote::before { content: "“"; position: absolute; left: 0; top: 12px; color: var(--coral); font-size: 34px; }
blockquote cite { display: block; margin-top: 10px; font-family: var(--sans); font-size: 9px; font-style: normal; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.approach-footer { grid-column: 1 / -1; margin: clamp(80px, 11vw, 160px) calc(clamp(22px, 8vw, 130px) * -1) 0; padding: clamp(55px, 7vw, 100px) clamp(22px, 8vw, 130px); display: flex; align-items: center; justify-content: space-between; background: var(--sun); }
.approach-footer p { margin: 0; font-family: var(--serif); font-size: clamp(37px, 5vw, 70px); line-height: .96; }
.circle-button { width: 150px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 50%; color: var(--cream); background: var(--ink); cursor: pointer; transform: rotate(5deg); transition: transform .25s ease; }
.circle-button:hover { transform: rotate(0) scale(1.03); }
.circle-button span { font-size: 13px; font-weight: 750; line-height: 1.2; }
.circle-button i { font-style: normal; }

.site-footer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 28px; padding: 38px clamp(22px, 5vw, 76px); color: var(--cream); background: var(--ink); }
.brand-footer .brand-logo { height: 74px; }
.brand-icon { width: auto; height: 62px; object-fit: contain; background: transparent; }
.site-footer p { margin: 0; color: rgba(255,248,237,.74); font-size: 11px; }
.footer-reach { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px; }
.footer-contact-link { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border: 1px solid rgba(255,248,237,.28); border-radius: 999px; color: var(--cream); font-size: 12px; font-weight: 700; text-decoration: none; transition: background .2s ease, border-color .2s ease; }
.footer-contact-link:hover, .footer-contact-link:focus-visible { background: rgba(255,248,237,.1); border-color: rgba(255,248,237,.5); }
.footer-social { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid rgba(255,248,237,.28); border-radius: 50%; color: rgba(255,248,237,.85); transition: color .2s ease, border-color .2s ease; }
.footer-social:hover, .footer-social:focus-visible { color: var(--cream); border-color: rgba(255,248,237,.6); }
.footer-social svg { width: 19px; height: 19px; }
.site-footer > small { grid-column: 1 / -1; margin-top: 4px; padding-top: 20px; border-top: 1px solid rgba(255,248,237,.12); color: rgba(255,248,237,.58); font-size: 10px; letter-spacing: .08em; }
.site-footer > small a { color: inherit; text-decoration: underline; }

.floating-contact { position: fixed; z-index: 35; right: 20px; bottom: 20px; display: none; align-items: center; gap: 12px; border: 0; border-radius: 999px; padding: 13px 16px; color: var(--ink); background: var(--coral); box-shadow: 0 10px 35px rgba(0,0,0,.24); font-size: 12px; font-weight: 800; cursor: pointer; }
.floating-contact i { font-style: normal; }

/* Le contenu n’est masqué que si le JavaScript est actif : sans lui, tout
   reste visible au lieu de disparaître définitivement. */
.has-js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }
.has-js .reveal.is-visible { opacity: 1; transform: translateY(0); }
/* L'en-tête d'accueil est la première chose que l'on voit : son apparition
   est jouée en CSS, dès le premier affichage, au lieu d'attendre que le
   script du site soit chargé puis exécuté. Même mouvement, même durée. */
.has-js .hero-copy.reveal { animation: ltj-entree .38s ease both; }
@keyframes ltj-entree { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (max-width: 1020px) {
  .hero { grid-template-columns: 1fr 1fr; gap: 30px; }
  .service-picker { grid-template-columns: 1fr; }
  .service-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border: 0; gap: 7px; }
  .service-tab { min-height: 110px; border: 1px solid rgba(255,248,237,.25); padding: 15px; grid-template-columns: auto 1fr; }
  .service-tab:hover, .service-tab.is-active { padding-left: 15px; background: rgba(255,248,237,.08); }
  .service-tab i { display: none; }
  .service-tab small { display: none; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 72px; }
  .site-header { min-height: 72px; padding: 8px 18px; }
  .brand-logo, .site-header.is-scrolled .brand-logo { height: 38px; }
  .menu-toggle { width: 45px; height: 42px; display: grid; place-content: center; gap: 4px; border: 0; color: inherit; background: transparent; cursor: pointer; }
  .menu-toggle span { display: block; width: 23px; height: 1.5px; background: currentColor; transition: .2s ease; }
  .menu-toggle b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
  .site-nav { position: absolute; left: 0; right: 0; top: 71px; display: grid; gap: 0; padding: 16px 18px 22px; background: var(--cream); box-shadow: 0 22px 35px rgba(0,0,0,.12); transform: translateY(-125%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .25s ease, opacity .25s ease, visibility .25s; }
  .site-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
  .site-nav > a { padding: 14px 4px; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 22px; font-weight: 400; }

  .hero { grid-template-columns: 1fr; }
  h1 { font-size: clamp(51px, 15vw, 70px); }
  .services { padding: 76px 18px; }
  .section-heading { grid-template-columns: 1fr; gap: 18px; }
  .section-heading .eyebrow { grid-column: auto; }
  .section-heading h2 { font-size: 52px; }
  .service-tabs { grid-template-columns: 1fr; gap: 0; border-top: 1px solid rgba(255,248,237,.25); }
  .service-tab { min-height: 76px; border: 0; border-bottom: 1px solid rgba(255,248,237,.25); grid-template-columns: 30px 1fr auto; padding: 14px 6px; }
  .service-tab:hover, .service-tab.is-active { padding-left: 12px; background: transparent; }
  /* La flèche indique que la prestation se déroule ; elle pivote une fois
     ouverte. Toutes sont fermées au chargement. */
  .service-tab i { display: block; opacity: 1; transform: none; font-size: 0; }
  .service-tab i::after { content: "↓"; display: block; font-size: 19px; transition: transform .25s ease; }
  .service-tab.is-active i::after { transform: rotate(180deg); }
  .service-picker { display: block; }
  .service-tabs { display: block; }
  .service-panel { grid-template-columns: 1fr; min-height: 0; }
  .service-panel.is-inline { margin: 0 0 4px; box-shadow: none; border-bottom: 1px solid rgba(255,248,237,.25); }
  /* Le bouton flottant « On papote ? » ne recouvre plus le dernier bouton. */
  .panel-content { padding-bottom: 104px; }
  .panel-visual { height: auto; aspect-ratio: 4 / 5; }
  .panel-content { padding: 36px 25px 40px; }
  .panel-content h3 { font-size: 42px; }
  .approach { gap: 58px; padding: 76px 18px 0; }
  .approach-photo { height: 510px; max-height: none; margin-right: 24px; }
  .approach-photo span { right: -28px; font-size: 20px; }
  .approach-copy h2 { font-size: 50px; }
      .approach-footer { margin: 35px -18px 0; padding: 52px 20px; }
  .approach-footer p { font-size: 40px; }
  .circle-button { width: 112px; height: 112px; flex: 0 0 auto; }
  .site-footer { grid-template-columns: 1fr; align-items: start; padding: 38px 20px 95px; }
  .footer-reach { justify-content: flex-start; }
  .brand-footer .brand-logo { height: 62px; }
  .brand-icon { height: 52px; }
  .site-footer > small { grid-column: auto; }
  .floating-contact { display: flex; }
}

@media (max-width: 430px) {
  .approach-footer { display: grid; gap: 28px; }
  .circle-button { justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal, .has-js .reveal { opacity: 1; transform: none; }
}

/* Intégration WordPress */
.admin-bar .site-header { top: 32px; }
/* Les deux versions ont leurs propres pixels : aucun filtre CSS ne doit
   recolorer le logo (l'accent terracotta doit rester intact). */
.circle-button { text-decoration: none; }
.site-nav a[aria-current="page"]::after { right: 0; }
/* Menu déroulé sur petit écran : chaque entrée a déjà son filet de
   séparation, un second trait sous la page courante faisait doublon.
   La couleur suffit à indiquer où l'on se trouve. */
@media (max-width: 760px) {
  .site-nav > a[aria-current="page"] { color: var(--coral); }
  .site-nav > a[aria-current="page"]::after { content: none; }
}
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.navigation.pagination { margin-top: 48px; }

/* En-tête clair uniquement au-dessus d'un fond sombre : accueil, portfolio
   et page vidéo. Appliquée partout, cette règle rendait le menu illisible
   sur les pages à fond crème. */
.home .site-header:not(.is-scrolled),
.portfolio-header:not(.is-scrolled),
.video-page .site-header:not(.is-scrolled) { color: var(--cream); }
.home .site-header:not(.is-scrolled) .brand-logo-light,
.portfolio-header:not(.is-scrolled) .brand-logo-light,
.video-page .site-header:not(.is-scrolled) .brand-logo-light,
.brand-footer .brand-logo-light { display: block; }
.home .site-header:not(.is-scrolled) .brand-logo-dark,
.portfolio-header:not(.is-scrolled) .brand-logo-dark,
.video-page .site-header:not(.is-scrolled) .brand-logo-dark,
.brand-footer .brand-logo-dark { display: none; }
.home .site-header:not(.is-scrolled) .nav-cta,
.portfolio-header:not(.is-scrolled) .nav-cta,
.entreprise-page .site-header:not(.is-scrolled) .nav-cta,
.video-page .site-header:not(.is-scrolled) .nav-cta { color: var(--ink); background: var(--cream); }

/* « On papote ? » est une pastille, pas un lien de menu : au survol elle passe
   au terracotta au lieu d'hériter du soulignement des autres entrées. */
.site-nav > a.nav-cta::after { content: none; }
.nav-cta { transition: background-color .25s ease, color .25s ease; }
.nav-cta:hover,
.nav-cta:focus-visible,
.home .site-header:not(.is-scrolled) .nav-cta:hover,
.home .site-header:not(.is-scrolled) .nav-cta:focus-visible,
.entreprise-page .site-header:not(.is-scrolled) .nav-cta:hover,
.entreprise-page .site-header:not(.is-scrolled) .nav-cta:focus-visible,
.portfolio-header:not(.is-scrolled) .nav-cta:hover,
.portfolio-header:not(.is-scrolled) .nav-cta:focus-visible,
.video-page .site-header:not(.is-scrolled) .nav-cta:hover,
.video-page .site-header:not(.is-scrolled) .nav-cta:focus-visible { background: var(--coral); color: var(--ink); }
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 150px clamp(22px, 6vw, 96px) clamp(68px, 8vh, 100px);
  color: var(--cream);
  background: var(--ink);
  overflow: hidden;
}
.hero-backdrop { position: absolute; inset: 0; margin: 0; }
.hero-backdrop img { object-position: center 45%; animation: hero-breathe 12s ease-out both; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.3) 48%, rgba(0,0,0,.12) 100%), linear-gradient(0deg, rgba(0,0,0,.42), transparent 56%); }
.hero-copy { position: relative; z-index: 2; max-width: 820px; }
.hero h1 { margin-bottom: 24px; font-size: clamp(70px, 10vw, 148px); line-height: .84; }
.hero h1 em { color: #edaa7e; }
.hero-intro { max-width: 650px; margin-bottom: 0; font-size: clamp(16px, 1.25vw, 19px); color: rgba(255,248,237,.9); }
.hero-actions { margin-top: 28px; }
.hero .text-link { color: var(--cream); border-color: currentColor; }
.services { padding-top: clamp(78px, 8vw, 118px); padding-bottom: clamp(78px, 8vw, 118px); }
.section-heading h2 { font-size: clamp(48px, 5.4vw, 78px); }
.service-panel { min-height: 560px; }
.approach { grid-template-columns: 1.05fr .95fr; }
.approach-photo { height: 660px; }
.approach-copy > p:not(.eyebrow) { font-size: 16px; }
@keyframes hero-breathe { from { transform: scale(1.035); } to { transform: scale(1); } }

@media (max-width: 1020px) {
  .hero { display: flex; padding: 140px 34px 76px; }
  .approach { grid-template-columns: .95fr 1.05fr; gap: 54px; }
}

@media (max-width: 760px) {
  .site-header:not(.is-scrolled) .site-nav { color: var(--ink); }
  .site-header:has(.site-nav.is-open) .menu-toggle { color: var(--ink); }
  .hero { min-height: 100svh; display: flex; padding: 120px 18px 70px; }
  .hero-backdrop img { object-position: 58% center; }
  .hero-shade { background: linear-gradient(0deg, rgba(0,0,0,.76) 0%, rgba(0,0,0,.18) 74%); }
  .hero h1 { font-size: clamp(66px, 22vw, 94px); }
  .hero-intro { font-size: 16px; }
  .hero-actions { margin-top: 24px; gap: 16px; }
  .approach { grid-template-columns: 1fr; }
}
.page-numbers { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }
.page-numbers.current { color: var(--cream); background: var(--ink); }

.generic-hero { padding: 160px clamp(22px,8vw,130px) 80px; background: var(--blush); }
.generic-hero h1 { max-width: 1050px; margin: 0; font-size: clamp(60px,9vw,128px); line-height: .85; }
.generic-hero > p:last-child { max-width: 650px; margin-top: 28px; font-size: 19px; }
.generic-content { padding: clamp(65px,9vw,125px) clamp(22px,8vw,130px); }
.generic-cover { width: min(100%,1100px); height: min(70vh,760px); margin: 0 auto 65px; }
/* « anywhere » uniquement pour les chaînes insécables : sur mobile, les URL
   complètes des mentions légales dépassaient de l'écran. Les mots normaux
   continuent de se couper comme avant. */
.prose { max-width: 820px; margin: 0 auto; font-size: 18px; overflow-wrap: anywhere; }
.prose > * + * { margin-top: 1.25em; }
.prose h2 { margin-top: 1.2em; font-size: clamp(42px,5vw,70px); line-height: .95; }
.prose h3 { font-size: clamp(28px,3vw,39px); }

/* Informations légales : un texte qu’on consulte, pas une page éditoriale.
   Titres ramenés à une taille de lecture et interlignage resserré. */
.legal-page .generic-hero h1 { font-size: clamp(38px,4.4vw,62px); }
.legal-page .generic-content { padding: clamp(48px,6vw,78px) clamp(22px,8vw,130px); }
.legal-page .prose { max-width: 720px; font-size: 16px; }
.legal-page .prose h2 { margin: 2.4em 0 .2em; font-size: clamp(24px,2.3vw,30px); line-height: 1.2; }
.legal-page .prose > h2:first-child, .legal-page .prose > h3:first-child { margin-top: 0; }
.legal-page .prose h3 { margin: 2em 0 .6em; font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: .005em; }
.legal-page .prose p, .legal-page .prose li { margin-bottom: .75em; line-height: 1.6; }
.legal-page .prose ul { margin: 0 0 1.2em; padding-left: 1.1em; }
.legal-page .prose li { margin-bottom: .35em; }
.legal-page .prose hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--line); }
.legal-page .prose strong { font-weight: 700; }
.legal-page .prose blockquote { margin: 1.4em 0; padding: 16px 20px; border-left: 2px solid var(--coral); background: rgba(0,0,0,.025); font-size: 15px; }
.legal-page .prose blockquote p:last-child { margin-bottom: 0; }
.legal-page .prose a, .legal-page .prose code { overflow-wrap: anywhere; }
.legal-page .prose code { padding: 1px 5px; border-radius: 3px; background: rgba(0,0,0,.055); font-size: .92em; }
.prose img { height: auto; }
.generic-cta { display: flex; align-items: center; justify-content: space-between; gap: 35px; padding: clamp(60px,8vw,105px) clamp(22px,8vw,130px); background: var(--sun); }
.generic-cta p { margin: 0; font-family: var(--serif); font-size: clamp(33px,5vw,64px); line-height: 1; }
.search-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; max-width: 620px; }
.search-form input[type="search"] { flex: 1 1 240px; min-height: 52px; padding: 14px 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--cream); font: inherit; font-size: 15px; }
.search-form input[type="search"]:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(233,109,85,.12); outline: none; }
.pagination { display: flex; justify-content: center; gap: 10px; padding: 0 clamp(22px,7vw,112px) clamp(70px,9vw,110px); }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 700; }
.pagination .page-numbers.current { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.post-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 50px 28px; padding: clamp(70px,9vw,125px) clamp(22px,7vw,112px); }
.post-card > a:first-child { display: block; height: 460px; margin-bottom: 25px; }
.post-card h2 { font-size: clamp(38px,4vw,58px); line-height: .95; }
.post-card h2 a { text-decoration: none; }
.not-found { min-height: 80vh; display: grid; align-content: center; padding: 140px clamp(22px,8vw,130px); }
.not-found h1 { font-size: clamp(75px,12vw,170px); line-height: .8; }

.contact-hero { min-height: 100svh; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.72fr); grid-template-rows: auto auto; gap: clamp(34px,4vw,56px) clamp(45px,6vw,88px); align-items: center; padding: 140px clamp(22px,7vw,112px) 80px; background: var(--blush); }
.contact-copy { grid-column: 1; grid-row: 1; container-type: inline-size; }
.contact-details { grid-column: 1; grid-row: 2; }
/* Portrait vertical : il occupe toute la hauteur de la colonne de droite. */
.contact-portrait { grid-column: 2; grid-row: 1 / -1; align-self: stretch; margin: 0; min-height: 0; overflow: hidden; background: var(--coral); }
.contact-portrait img { width: 100%; height: 100%; min-height: clamp(380px, 52vw, 640px); object-fit: cover; object-position: center 32%; display: block; }
.contact-copy h1 { font-size: clamp(52px,14.6cqw,130px); line-height: .82; }
.contact-copy > p:not(.eyebrow) { max-width: 510px; font-size: 18px; }
.contact-mail { margin: 10px 20px 0 0; }
.contact-copy .text-link { display: inline-block; }

/* Informations pratiques : elles remplacent le formulaire, retiré pour que
   les demandes arrivent directement dans la boîte professionnelle. */
.contact-details { padding: clamp(30px,4vw,48px); background: var(--cream); box-shadow: var(--shadow); }
.contact-details dl { display: grid; gap: 26px; margin: 0; }
.contact-details dt { margin-bottom: 7px; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--coral); }
.contact-details dd { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.5; }
.contact-note { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--line); color: rgba(0,0,0,.62); font-size: 13px; }

/* Sous-navigation : chaque page de prestation montre ses voisines. Elle a
   son propre bandeau, pour ne pas se confondre avec la section suivante. */
/* Fond crème et filet haut et bas : la barre se détache quelle que soit la
   couleur des sections qui l'entourent, qui varie d'une page à l'autre. */
.section-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; padding: clamp(26px,3vw,36px) clamp(22px,7vw,112px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--cream); }
.section-nav-label { flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.section-nav ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.section-nav a { display: inline-block; padding: 11px 20px; border: 1px solid rgba(0,0,0,.22); border-radius: 999px; background: transparent; font-size: 14px; font-weight: 700; text-decoration: none; transition: background-color .22s ease, border-color .22s ease, color .22s ease; }
.section-nav a:hover, .section-nav a:focus-visible { color: var(--cream); background: var(--coral); border-color: var(--coral); }
.section-nav a[aria-current="page"] { color: var(--cream); background: var(--ink); border-color: var(--ink); }

/* Sous-menu compact et persistant sur les quatre pages professionnelles. */
:is(.entreprise-page, .video-page, .creation-page, .restauration-page) .section-nav {
  position: sticky;
  top: 70px;
  z-index: 39; /* L'en-tête principal reste au-dessus (z-index: 40). */
  flex-wrap: nowrap;
  align-items: center;
  gap: 18px;
  padding: 9px clamp(22px, 7vw, 112px);
}
:is(.entreprise-page, .video-page, .creation-page, .restauration-page) .section-nav ul {
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
:is(.entreprise-page, .video-page, .creation-page, .restauration-page) .section-nav li {
  flex: 0 0 auto;
}
:is(.entreprise-page, .video-page, .creation-page, .restauration-page) .section-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 7px 17px;
  white-space: nowrap;
}
/* WordPress ajoute .admin-bar à body. */
.admin-bar:is(.entreprise-page, .video-page, .creation-page, .restauration-page) .section-nav {
  top: 102px;
}
@media (max-width: 782px) {
  .admin-bar:is(.entreprise-page, .video-page, .creation-page, .restauration-page) .section-nav {
    top: 118px;
  }
}
@media (max-width: 760px) {
  :is(.entreprise-page, .video-page, .creation-page, .restauration-page) .section-nav {
    top: 72px;
    gap: 10px;
    padding: 8px 16px;
  }
  :is(.entreprise-page, .video-page, .creation-page, .restauration-page) .section-nav-label {
    display: none;
  }
  :is(.entreprise-page, .video-page, .creation-page, .restauration-page) .section-nav a {
    min-height: 34px;
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* Les trois métiers proposés aux pros. Une ligne chacun, photo d'un côté et
   texte de l'autre, en alternance : la page respire et laisse de la place
   aux images au lieu d'aligner trois encadrés de texte. */
.service-branches { padding: clamp(78px,9vw,120px) clamp(22px,7vw,112px); background: var(--cream); }
.branches-heading { max-width: 660px; margin-bottom: clamp(44px,5vw,70px); }
.branches-heading h2 { font-size: clamp(40px,5vw,70px); line-height: .96; }
.branches-list { display: grid; gap: clamp(40px,5vw,78px); }
.branch-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px,4vw,66px); }
.branch-row.is-reversed .branch-visual { order: 2; }
.branch-visual { position: relative; margin: 0; height: clamp(280px,30vw,420px); overflow: hidden; }
.branch-visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.75,.25,1); }
.branch-row:hover .branch-visual img { transform: scale(1.03); }
.branch-visual.is-typographic { display: grid; place-items: center; background: var(--blush); }
.branch-visual.is-typographic strong { font-family: var(--display); font-size: clamp(42px,5vw,76px); font-weight: 400; letter-spacing: .02em; text-align: center; }
.branch-index { margin-bottom: 14px; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--coral); }
.branch-copy h3 { margin-bottom: 16px; font-size: clamp(30px,3vw,44px); }
.branch-text { margin-bottom: 22px; max-width: 480px; color: rgba(0,0,0,.74); font-size: 16px; }
.branch-copy ul { margin: 0 0 26px; padding: 0; list-style: none; display: grid; gap: 10px; }
.branch-copy li { position: relative; padding-left: 20px; font-size: 15px; }
.branch-copy li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.branch-copy .text-link { display: inline-block; }

@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 760px) {
  .generic-hero { padding: 120px 18px 60px; }
  .generic-content { padding: 60px 18px; }
  .generic-cover { height: 500px; margin-bottom: 42px; }
  .generic-cta { align-items: flex-start; flex-direction: column; }
  .post-list { grid-template-columns: 1fr; padding: 65px 18px; }
  .contact-hero { min-height: auto; grid-template-columns: 1fr; padding: 120px 18px 65px; }
  .contact-copy, .contact-details, .contact-portrait { grid-column: 1; }
  .contact-hero { grid-template-rows: none; }
  .contact-copy, .contact-details, .contact-portrait { grid-row: auto; }
  .contact-portrait img { min-height: 0; aspect-ratio: 4 / 5; height: auto; }
  .branch-row, .branch-row.is-reversed { grid-template-columns: 1fr; }
  .branch-row.is-reversed .branch-visual { order: 0; }
  .branch-visual { height: 260px; }
  .service-branches { padding: 64px 18px; }
  .section-nav { padding: 22px 18px; gap: 10px 16px; }
  .section-nav a { padding: 10px 14px; font-size: 12px; }
  .section-nav ul { gap: 6px; }
  .prestation-hero-actions { flex-wrap: wrap; }
  .prestation-hero-actions .button { flex: 1 1 auto; justify-content: center; }
  .contact-details { padding: 28px 22px; }
}

/* Menu déroulant du mobile. Placé en fin de feuille pour passer devant les
   variantes d'en-tête de l'accueil, qui donnaient à la pastille un fond crème
   — invisible sur le fond crème du menu — et la règle des entrées de menu,
   qui ne lui laissait que 4 px à gauche. */
@media (max-width: 760px) {
  .site-header .site-nav.is-open > a.nav-cta {
    margin-top: 20px;
    padding: 17px 24px;
    border-bottom: 0;
    color: var(--cream);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
  }
  .site-header .site-nav.is-open > a.nav-cta:hover,
  .site-header .site-nav.is-open > a.nav-cta:focus-visible { color: var(--ink); background: var(--coral); }
}

/* En-têtes posés sur un fond terracotta : l'accent orange du logo s'y
   confondait avec le fond et le « o » disparaissait. Un bandeau crème rend
   la marque lisible sans toucher à la couleur des pages. */
.restauration-page .site-header,
.creation-page .site-header {
  color: var(--ink);
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.restauration-page .site-header .brand-logo-light,
.creation-page .site-header .brand-logo-light { display: none; }
.restauration-page .site-header .brand-logo-dark,
.creation-page .site-header .brand-logo-dark { display: block; }

/* Émojis en pleine couleur. Un glyphe d'émoji est peint avec l'alpha de la
   couleur du texte : dans un paragraphe écrit en couleur translucide, il
   ressortait délavé. On remet l'alpha à 1 en gardant exactement la teinte
   héritée, donc rien d'autre ne change. Les navigateurs qui ne connaissent
   pas cette écriture ignorent la ligne et affichent comme avant. */
/* Cette balise est un simple emballage posé autour des émojis : elle ne
   doit rien changer à la typographie. Le thème comporte des règles qui
   visent « un span dans tel bloc » (libellés en capitales, sous-titres…)
   et qui l'attraperaient au passage, d'où le !important — c'est ici le
   moyen de la rendre réellement neutre, où qu'elle tombe. */
.ltj-emoji {
  /* « contents » plutôt que « inline » : dans un conteneur flex (les
     sur-titres, par exemple) une boîte inline deviendrait un élément flex
     à part entière et récupérerait le gap, ce qui décollait l'emoji du
     texte. Sans boîte, il reste collé à sa phrase. */
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
  opacity: 1 !important;
  background: none !important;
  border: 0 !important;
  color: rgb(from currentColor r g b / 1);
}