/* ==========================================================================
   Version épurée (nov. 2026) — chargée APRÈS style.css sur toutes les pages.
   Pour revenir au style d'origine : retirer la ligne <link ... epure.css> des pages
   (outils/appliquer-epure.py --retirer).
   ========================================================================== */

:root {
  --encre: #111;
  --gris: #6f6f6f;
  --filet: #e6e6e6;
  --fond: #fff;
  --fond-doux: #f6f6f5;
  --pad-x: max(5vw, 20px);
}

body { background: var(--fond); color: var(--encre); font-weight: 300; letter-spacing: .005em; }
p, li { line-height: 1.75; }
strong, b { font-weight: 500; }
h1, h2, h3, h4 { font-weight: 500; letter-spacing: .01em; }

/* --- Sections : fonds unis, sans bandes grises ---------------------------- */
.theme-white, .theme-white-bold, .theme-light, .theme-light-bold {
  --bg: var(--fond); --fg: var(--encre); --heading: var(--encre);
  --btn-bg: var(--encre); --btn-fg: #fff; --field-bg: var(--fond-doux);
}
.theme-bright { --bg: var(--fond-doux); --fg: var(--encre); --heading: var(--encre); --btn-bg: var(--encre); --btn-fg: #fff; }

/* --- Liens dans le texte : fins, sans gras ------------------------------- */
.text-block a, .accordion-body a, .blog-item-content a {
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color .2s, opacity .2s;
}
.text-block a:hover, .accordion-body a:hover, .blog-item-content a:hover { text-decoration-color: currentColor; }
.text-block a strong, .text-block strong a { font-weight: 500; }

/* --- En-tête : nom à gauche, menu à droite -------------------------------- */
.site-header { padding-left: var(--pad-x); padding-right: var(--pad-x); }
.site-title {
  display: inline-block;
  font-size: .78rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fg); margin-right: auto; white-space: nowrap;
}
.site-nav { flex: 0 1 auto; justify-content: flex-end; gap: .4em 2em; }
.site-nav a, .site-nav .lang { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; text-decoration: none; opacity: .72; transition: opacity .2s; }
.site-nav a:hover, .site-nav a.active { opacity: 1; }
.site-nav a.active { border-bottom: 0; }
.site-nav a:nth-child(5) { margin-left: 0; }
.site-nav .lang { display: none; }
@media (max-width: 767px) {
  .site-title { font-size: .72rem; letter-spacing: .14em; }
  .site-nav { justify-content: center; }
  .site-nav a { font-size: 1.2rem; letter-spacing: .12em; opacity: 1; }
}

/* --- Boutons : rectangles fins ---------------------------------------- */
.btn { font-size: .74rem !important; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; padding: 1.1em 2.2em !important; }
.btn-secondary { border-radius: 0; }
.btn-primary { border-width: 1px; }
.btn-tertiary { border-bottom-width: 1px; }

/* --- Grille vidéo de l'accueil ------------------------------------------- */
.video-wall-grid { gap: 2.4rem 1.6rem !important; }
.video-caption { margin-top: 1rem; }
.video-caption h3 { font-size: .82rem !important; font-weight: 500 !important; letter-spacing: .08em; }
.video-caption p { color: var(--gris) !important; font-size: .7rem !important; letter-spacing: .12em; margin-top: .3em; }
.view-btn { font-size: .7rem !important; letter-spacing: .2em !important; border: 1px solid #fff !important; border-radius: 0 !important; background: transparent !important; }

/* --- Bandes défilantes (logos, galeries) : sans barre de défilement ------- */
.gallery.gallery-slideshow { scrollbar-width: none; }
.gallery.gallery-slideshow::-webkit-scrollbar { display: none; }

/* --- Blog -------------------------------------------------------------- */
.blog-author { display: none; }
.blog-item-meta { color: var(--gris); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; opacity: 1; }
.blog-item-top .entry-title, .blog-item-top h1 { font-weight: 500; letter-spacing: .02em; }
.blog-title { font-size: 1rem; font-weight: 500; letter-spacing: .04em; }
.blog-meta { color: var(--gris); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: 1; }
.blog-more { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.item-pagination { border-top: 1px solid var(--filet); }
.pag-label { color: var(--gris); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.pag-title { font-weight: 500; }

/* --- Formulaire (page contact) ------------------------------------------ */
.contact-form label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.contact-form input, .contact-form textarea { border: 0; border-bottom: 1px solid var(--filet); background: transparent !important; border-radius: 0; padding: .8em 0; font: inherit; color: var(--encre); }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-bottom-color: var(--encre); }
.contact-form .btn { border-radius: 0 !important; }

/* --- Navigation entre projets : sans soulignement ------------------------ */
.item-pagination a { text-decoration: none; }
.item-pagination a:hover .pag-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; }

/* --- Pages Services : listes « En vidéo / En photo » --------------------- */
.services-titre { font-size: .72rem !important; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); text-align: center; margin: 0 0 1.2rem; }
.services-liste { list-style: none; padding: 0; margin: 0; text-align: center; }
.services-liste li { font-size: 1.05rem; font-weight: 300; line-height: 1.6; padding: .7em 0; border-top: 1px solid var(--filet); }
.services-liste li:last-child { border-bottom: 1px solid var(--filet); }

/* --- Bande de logos clients : une seule image, sans vide dessous ---------- */
/* Le 2e « slide » (ancien mur de logos) était caché hors écran et étirait la section. */
.gallery-slideshow .gallery-item + .gallery-item { display: none; }
section:has(.gallery-slideshow) .fluid-engine { --row-height-scaling-factor: 0 !important; }

/* ==========================================================================
   Inspiration eizo.framer.website (nov. 2026) : grotesque serrée, grands titres
   en majuscules avec un point, grille vidéo serrée, pied de page noir.
   La vidéo plein écran en haut de l'accueil est conservée.
   ========================================================================== */
:root {
  --heading-font: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --body-font: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --encre: #0f0f0f; --gris: #757575;
}
body { font-weight: 400; letter-spacing: -.01em; }
h1, h2, h3, h4 { letter-spacing: -.03em; }
.site-title, .site-nav a { letter-spacing: .04em !important; font-weight: 500; }

/* Grands titres de section : « PROJETS RÉCENTS. » */
.titre-section {
  font-size: clamp(2.2rem, 5vw, 4.2rem) !important; line-height: 1 !important;
  font-weight: 500 !important; letter-spacing: -.045em !important; text-transform: uppercase;
  text-align: left !important; margin: 0; padding-bottom: .25em;
  border-bottom: 1px solid #cfcfcf; width: 100%;
}
.titre-section::after { content: "."; }
.fe-block:has(.titre-section) .sqs-block-alignment-wrapper, .fe-block:has(.titre-section) .text-block { width: 100%; }

/* Grille vidéo de l'accueil : serrée, légende « TITRE  Catégorie » */
.video-wall-grid { gap: 2.2rem .4rem !important; }
.video-container { border-radius: 0 !important; }
.video-caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .6em; margin-top: .55rem; text-align: left !important; }
.video-caption h3 { font-size: .78rem !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: uppercase; margin: 0 !important; }
.video-caption p { font-size: .78rem !important; letter-spacing: 0 !important; color: var(--gris) !important; text-transform: none !important; margin: 0 !important; }

/* Listes de services : style Eizo (titres à gauche, puces discrètes) */
.services-titre { font-size: 1.25rem !important; font-weight: 500; letter-spacing: -.03em; text-transform: none; color: var(--encre); text-align: left; margin-bottom: .6rem; }
.services-liste { text-align: left; }
.services-liste li { font-size: .92rem; color: var(--gris); padding: .15em 0 .15em 1em; border: 0 !important; position: relative; line-height: 1.5; }
.services-liste li::before { content: "•"; position: absolute; left: 0; color: #b5b5b5; }

/* --- Pied de page noir ------------------------------------------------- */
.pied { background: #0f0f0f; color: #fff; padding: 7rem var(--pad-x) 2rem; text-align: left; }
.pied a { color: inherit; text-decoration: none; }
.pied__haut { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; padding-bottom: 1.4rem; border-bottom: 1px solid #3a3a3a; }
.pied__titre { font-size: clamp(2.4rem, 6.5vw, 5.6rem); line-height: .95; font-weight: 500; letter-spacing: -.05em; text-transform: uppercase; transition: opacity .2s; }
.pied__titre:hover { opacity: .7; }
.pied__note { margin: 0; color: #bdbdbd; font-size: .9rem; }
.pied__ligne { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; padding: 1.2rem 0 4.5rem; }
.pied__coord { display: flex; flex-wrap: wrap; gap: .4rem 2.2rem; margin: 0; }
.pied__coord a, .pied__reseaux a { font-size: .8rem; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; }
.pied__reseaux { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.pied__coord a:hover, .pied__reseaux a:hover, .pied__liens a:hover, .pied__legal a:hover { color: #fff; opacity: 1; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.pied__liens { display: flex; flex-wrap: wrap; gap: .5em 1.6em; margin-bottom: 1.4rem; }
.pied__liens a { font-size: .74rem; color: #9a9a9a; }
.pied__legal { font-size: .74rem; color: #7a7a7a; margin: 0; }

/* ==========================================================================
   Police « éditorial cinéma » (choix du propriétaire, option 1) :
   titres en Instrument Serif (dernier mot en italique), texte en Inter Tight.
   ========================================================================== */
:root {
  --heading-font: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --body-font: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
}
h1, h2, h3, h4, .entry-title { font-weight: 400 !important; letter-spacing: -.015em; }
h1 em, h2 em, h3 em, .titre-section em, .pied__titre em { font-style: italic; }
.titre-section { text-transform: none; font-weight: 400 !important; letter-spacing: -.02em !important; font-size: clamp(2.6rem, 6vw, 5rem) !important; }
.pied__titre { font-family: var(--heading-font); text-transform: none; font-weight: 400; letter-spacing: -.02em; font-size: clamp(2.8rem, 7.5vw, 6.4rem); }
/* Éléments d'interface : restent en sans-serif */
.site-title, .site-nav, .site-nav a, .btn, .view-btn, .video-caption h3, .services-titre,
.pag-title, .pag-label, .blog-title, .blog-meta, .blog-item-meta, .contact-form, .pied__coord a, .pied__reseaux a { font-family: var(--sans) !important; }
.video-caption h3 { font-weight: 500 !important; letter-spacing: .01em !important; }
.services-titre { font-family: var(--heading-font) !important; font-size: 1.6rem !important; font-weight: 400; letter-spacing: -.01em; }

/* --- Formulaire de contact (pied de page + page contact) --------------- */
.piege { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.form-etat { margin: .8rem 0 0; font-size: .85rem; min-height: 1.2em; }
.form-etat.ok { color: #2e7d4f; }
.form-etat.erreur { color: #b3261e; }
.pied .form-etat.ok { color: #8fd6a8; }
.pied .form-etat.erreur { color: #ff9b8f; }
.pied__form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem;
  padding: 2.6rem 0 1rem; border-bottom: 1px solid #3a3a3a; max-width: 980px;
}
.pied__form label { display: flex; flex-direction: column; gap: .5rem; }
.pied__form label.large { grid-column: 1 / -1; }
.pied__form label span { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #9a9a9a; font-family: var(--sans); }
.pied__form input, .pied__form textarea {
  background: transparent; border: 0; border-bottom: 1px solid #555; color: #fff;
  font: inherit; font-size: 1.05rem; padding: .5em 0; border-radius: 0; resize: vertical;
}
.pied__form input:focus, .pied__form textarea:focus { outline: none; border-bottom-color: #fff; }
.pied__form button {
  justify-self: start; background: #fff; color: #0f0f0f; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: .76rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  padding: 1.1em 2.4em; transition: opacity .2s;
}
.pied__form button:hover { opacity: .8; }
.pied__form button:disabled { opacity: .5; cursor: wait; }
.pied__form .form-etat { grid-column: 1 / -1; margin: 0; }
.pied__ligne { padding-top: 2rem; }
@media (max-width: 640px) { .pied__form { grid-template-columns: 1fr; } }

/* --- Pages Services restructurées (sections aérées + lignes fines) ------- */
.svc { padding: clamp(4.5rem, 9vw, 8rem) var(--pad-x) 0; max-width: 1500px; margin: 0 auto; }
.svc:last-of-type { padding-bottom: clamp(4.5rem, 9vw, 8rem); }
.svc .titre-section { margin-bottom: 2.4rem; }
.svc-intro { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem 6vw; }
.svc-texte p { font-size: 1rem; line-height: 1.7; color: var(--gris); margin: 0 0 1.1em; max-width: 52ch; }
.svc-texte .svc-lead { font-family: var(--heading-font); font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.25; color: var(--encre); letter-spacing: -.01em; max-width: 28ch; margin-bottom: 1.4em; }
.svc-listes { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-content: start; }
.svc-col .services-titre { margin-top: 0; padding-bottom: .6rem; border-bottom: 1px solid #d6d6d6; }
.svc-col .services-liste li { padding: .55em 0 .55em 1em; }
.svc-video video { width: 100%; aspect-ratio: 1.85; object-fit: cover; display: block; background: #000; }
.svc-logos img { width: 100%; max-width: 1200px; display: block; margin: 1rem auto 0; opacity: .85; }
.svc-galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.svc-galerie .gallery-item { margin: 0; }
.svc-galerie img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: opacity .3s; }
.svc-galerie a:hover img { opacity: .85; }
@media (max-width: 900px) {
  .svc-intro { grid-template-columns: 1fr; }
  .svc-galerie { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) { .svc-listes { grid-template-columns: 1fr; } }
.svc-col .services-liste li { font-size: .98rem; color: #4a4a4a; }
.svc-col .services-titre { font-size: 1.5rem !important; }
/* Pied de page : pas de ligne sous « Travaillons ensemble. » */
.pied__haut { border-bottom: 0; }
.pied__note { text-align: right; line-height: 1.5; }
@media (max-width: 640px) { .pied__note { text-align: left; } }
/* Pas de ligne sous « En vidéo » / « En photo » */
.svc-col .services-titre { border-bottom: 0; padding-bottom: 0; }
/* Formulaire du pied : pleine largeur, lignes alignées avec le reste du pied */
.pied__form { max-width: none; }

/* Page À propos (/fr/contact) : sans l'ancien formulaire, la grille se resserre ;
   icônes des réseaux sous les coordonnées au lieu de les chevaucher. */
#s-6941eab6998aa6424ead1b93 .fluid-engine { --row-height-scaling-factor: 0 !important; }
#s-6941eab6998aa6424ead1b93 .content-wrapper { padding-bottom: 6rem !important; }
@media (min-width: 768px) {
  #s-6941eab6998aa6424ead1b93 .fe-block-c999807d6b3aaae36317 { grid-area: 8 / 2 / 9 / 12 !important; margin-top: 1rem; }
}
#s-6941eab6998aa6424ead1b93 .fe-block-43434d886795637d06b5 h2 { font-family: var(--sans) !important; font-size: 1rem !important; line-height: 1.7 !important; letter-spacing: 0 !important; font-weight: 600 !important; }
#s-6941eab6998aa6424ead1b93 .fe-block-43434d886795637d06b5 h2 a { text-decoration: none; border: 0; }
#s-6941eab6998aa6424ead1b93 .fe-block-c999807d6b3aaae36317 .sqs-block, #s-6941eab6998aa6424ead1b93 .fe-block-c999807d6b3aaae36317 .social-links { justify-content: flex-start !important; }
#s-6941eab6998aa6424ead1b93 .fe-block-c999807d6b3aaae36317 .social-links { flex-wrap: nowrap; gap: 1.1em; }
#s-6941eab6998aa6424ead1b93 .fe-block-c999807d6b3aaae36317 .social-links a { width: 20px; height: 20px; }
#s-6941eab6998aa6424ead1b93 .fe-block-6b5ed2deb40a9d865d9e { margin-top: 2.5rem; }
@media (max-width: 767px) {
  #s-6941eab6998aa6424ead1b93 .fe-block-c999807d6b3aaae36317 { grid-area: auto !important; }
  #s-6941eab6998aa6424ead1b93 .fluid-engine { display: flex !important; flex-direction: column; gap: 1.2rem; padding: 0 var(--pad-x); }
  #s-6941eab6998aa6424ead1b93 .fe-block { order: 0; }
}
/* Texte « Un projet en tête? » sous le grand titre, à gauche, au-dessus du formulaire */
.pied__haut { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1.2rem; }
.pied__note { text-align: left !important; font-size: 1rem; color: #bdbdbd; }
.pied__form { padding-top: 2rem; }
/* Pied de page : gris très foncé plutôt que noir */
.pied { background: #222222; }
.pied__form button { color: #222222; }
.pied__ligne, .pied__form { border-color: #3d3d3d; }

/* --- Bannière Loi 25 (cookies) ------------------------------------------- */
.loi25 {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  display: flex; align-items: center; gap: 1.2rem 2.5rem;
  padding: 1.1rem var(--pad-x); background: #222222; color: #d6d6d6;
  border-top: 1px solid #3d3d3d; font-family: var(--sans);
  transform: translateY(100%); transition: transform .3s ease;
}
.loi25--visible { transform: translateY(0); }
.loi25--fermee { transform: translateY(100%); }
.loi25__texte { margin: 0; flex: 1; font-size: .8rem; line-height: 1.55; max-width: 110ch; }
.loi25__texte a { color: #fff; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.loi25__boutons { display: flex; gap: .7rem; flex-shrink: 0; }
.loi25 button {
  font-family: var(--sans); font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  padding: .95em 1.8em; cursor: pointer; border-radius: 0; transition: opacity .2s, background .2s, color .2s;
}
.loi25__refuser { background: transparent; color: #fff; border: 1px solid #6a6a6a; }
.loi25__refuser:hover { border-color: #fff; }
.loi25__accepter { background: #fff; color: #222; border: 1px solid #fff; }
.loi25__accepter:hover { opacity: .85; }
@media (max-width: 700px) {
  .loi25 { flex-direction: column; align-items: stretch; }
  .loi25__boutons button { flex: 1; }
}

/* Sélecteur de langue en fin de menu */
.site-nav a.lang-switch { opacity: .55; margin-left: -.8em; }
.site-nav a.lang-switch:hover { opacity: 1; }
@media (max-width: 767px) { .site-nav a.lang-switch { margin-left: 0; } }

/* Bande du bas du pied de page (liens + mentions) : gris moins foncé, plus discrète */
.pied { padding-bottom: 0; }
.pied__ligne { padding-bottom: 3.5rem; }
.pied__bas {
  background: #333333; margin: 0 calc(-1 * var(--pad-x)); padding: 1.8rem var(--pad-x) 1.6rem;
}
.pied__bas .pied__liens { margin-bottom: 1rem; }
.pied__bas .pied__liens a { color: #a8a8a8; }
.pied__bas .pied__legal { color: #8c8c8c; }
/* Bande du bas : blanche finalement */
.pied__bas { background: #ffffff; }
.pied__bas .pied__liens a { color: #6f6f6f; }
.pied__bas .pied__liens a:hover, .pied__bas .pied__legal a:hover { color: #111; }
.pied__bas .pied__legal, .pied__bas .pied__legal a { color: #9a9a9a; }
/* Bande du bas : gris très pâle */
.pied__bas { background: #f3f3f2; }

/* --- « Voir toutes les pages + » (plan du site repliable) ---------------- */
.plan { margin-bottom: 1.1rem; }
.plan summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--sans); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #6f6f6f;
  user-select: none;
}
.plan summary::-webkit-details-marker { display: none; }
.plan summary:hover { color: #111; }
.plan__signe::before { content: "+"; font-size: 1.15em; letter-spacing: 0; }
.plan[open] .plan__signe::before { content: "−"; }
.plan__liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 3rem; padding: 1.8rem 0 1rem; }
.plan__titre { margin: 0 0 .8rem; font-family: var(--heading-font); font-size: 1.25rem; color: #222; }
.plan__liste ul { list-style: none; margin: 0; padding: 0; }
.plan__liste li { margin: 0; padding: .22em 0; line-height: 1.4; }
.plan__liste a { font-size: .8rem; color: #6f6f6f; text-decoration: none; }
.plan__liste a:hover { color: #111; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
@media (max-width: 800px) { .plan__liste { grid-template-columns: 1fr; gap: 1.6rem; } }

/* --- Lien « Information pour les IA et LLMs → » (pied de page) ----------- */
.pied__ia { display: inline-block; margin-bottom: .9rem; font-family: var(--sans); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #6f6f6f; text-decoration: none; }
.pied__ia:hover { color: #111; }

/* --- Page « Information pour les IA et LLMs » (/ia/) ---------------------- */
.ia-entete { padding-top: clamp(7rem, 12vw, 10rem); }
.ia-surtitre { font-family: var(--sans); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin: 0 0 1.2rem; }
.ia-titre { font-family: var(--heading-font); font-weight: 400 !important; font-size: clamp(2.4rem, 5.5vw, 4.6rem); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 1.6rem; max-width: 18ch; }
.ia-note { color: var(--gris); max-width: 70ch; font-size: .95rem; line-height: 1.7; }
.ia-note a, .ia a { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.ia { max-width: 1100px; }
.ia > p { max-width: 70ch; line-height: 1.75; color: #3d3d3d; }
.ia .ia-lead { font-family: var(--heading-font); font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.3; color: var(--encre); max-width: 40ch; }
.ia-h2 { font-family: var(--heading-font); font-weight: 400 !important; font-size: 1.7rem; margin: 3.2rem 0 1.1rem; padding-bottom: .5rem; border-bottom: 1px solid #e2e2e2; }
.ia-fiche { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 2rem; margin: 0; }
.ia-fiche dt { font-family: var(--sans); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); padding-top: .2em; }
.ia-fiche dd { margin: 0; line-height: 1.6; }
.ia-liste { padding-left: 1.1em; margin: 0; }
.ia-liste li { line-height: 1.6; padding: .25em 0; color: #3d3d3d; }
.ia-liste strong { color: var(--encre); font-weight: 500; }
.ia-q { padding: 1.1rem 0; border-bottom: 1px solid #efefef; max-width: 80ch; }
.ia-q h3 { font-family: var(--sans) !important; font-size: 1.02rem !important; font-weight: 500 !important; letter-spacing: 0 !important; margin: 0 0 .45rem; }
.ia-q p { margin: 0; color: #4a4a4a; line-height: 1.7; }
.ia-liens { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.ia-liens a { font-size: .95rem; }
#english { border-top: 1px solid #e2e2e2; margin-top: clamp(4rem, 8vw, 6rem); }
@media (max-width: 640px) { .ia-fiche { grid-template-columns: 1fr; gap: .2rem; } .ia-fiche dd { margin-bottom: .7rem; } }
.pied__bas .pied__ia { color: #6f6f6f; }
.pied__bas .pied__ia:hover { color: #111; }
.ia-note-ia { margin: 2.6rem 0 0; padding: 1.4rem 1.6rem; background: #f3f3f2; border-left: 2px solid #222; max-width: 80ch; }
.ia-note-titre { font-family: var(--sans); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #222; margin: 0 0 .7rem; }
.ia-note-ia ul { margin: 0; padding-left: 1.1em; }
.ia-note-ia li { line-height: 1.6; padding: .15em 0; color: #3d3d3d; font-size: .95rem; }

/* --- Page Vidéos : grille en deux colonnes, légendes discrètes ------------ */
.summary-grid.grille-2 { --cols: 2; gap: 3.2rem .5rem; }
.grille-2 .summary-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: opacity .3s; }
.grille-2 .summary-thumb:hover img { opacity: .85; }
.grille-2 .summary-title { font-family: var(--sans) !important; font-size: .82rem !important; font-weight: 500 !important; letter-spacing: .02em !important; text-transform: uppercase; margin: .7rem 0 .2rem; }
.grille-2 .summary-title a { text-decoration: none; color: var(--encre); }
.grille-2 .summary-more { font-size: .78rem; color: var(--gris); text-decoration: none; }
.grille-2 .summary-more:hover { color: var(--encre); }
@media (max-width: 767px) { .summary-grid.grille-2 { grid-template-columns: 1fr; gap: 2.4rem; } }
/* Page Vidéos : vidéos vedettes (Vimeo) en deux colonnes aussi */
#s-69716bc693884b01d7846584 .fluid-engine { display: grid !important; grid-template-columns: 1fr 1fr; gap: 3rem .5rem; padding: 0 var(--pad-x); max-width: 1500px; margin: 0 auto; }
#s-69716bc693884b01d7846584 .fe-block { grid-area: auto !important; }
#s-69716bc693884b01d7846584 .video-caption p { font-size: .8rem; color: var(--gris); margin-top: .6rem; }
@media (max-width: 767px) { #s-69716bc693884b01d7846584 .fluid-engine { grid-template-columns: 1fr; } }

/* --- Couverture vidéo + petit bouton lecture ------------------------------ */
.video-couverture { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; margin: 0; background: #111; cursor: pointer; display: block; overflow: hidden; }
.video-embed { position: relative; }
.video-couverture img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease, opacity .3s; }
.video-couverture:hover img { transform: scale(1.02); opacity: .92; }
.video-play {
  position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px;
  border-radius: 50%; background: rgba(255,255,255,.92); transition: transform .25s ease, background .25s;
}
.video-play::after {
  content: ""; position: absolute; left: 23px; top: 19px;
  border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #111;
}
.video-couverture:hover .video-play { transform: scale(1.08); background: #fff; }
.video-couverture:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.video-embed iframe.video-lancee { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#s-69716bc693884b01d7846584 .fluid-engine { grid-template-rows: none !important; grid-auto-rows: auto; align-items: start; }
#s-69716bc693884b01d7846584 .content-wrapper { padding-bottom: 2rem !important; }

/* Page Vidéos : vidéos en vedette fusionnées dans la grille des projets */
.summary-item--video .video-block { margin: 0; }
.summary-item--video .video-embed { position: relative; padding-bottom: 56.25% !important; height: 0; overflow: hidden; }
.summary-item--video .video-embed > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.summary-item--video .video-couverture img { width: 100%; height: 100%; object-fit: cover; }
.summary-item--video .video-caption p { font-size: .8rem; color: var(--gris); margin-top: .6rem; }
/* Page Photos : titre de section au-dessus de la galerie (même style que la page Vidéos) */
.entete-galerie { padding: 6.5rem var(--sqs-site-gutter, 4vw) 0; margin: 0 auto 2.5rem; max-width: var(--sqs-site-max-width, 1500px); }
@media (min-width:768px){ .fe-block-92d8a20b83e977648e79 { grid-area: 1/2/259/26 !important; } }
@media (max-width:767px){ .fe-block-92d8a20b83e977648e79 { grid-area: 1/1/4/11 !important; } .entete-galerie { padding-top: 5.5rem; } }
/* Page Fiction : grille comme la page Vidéos */
.fiction { max-width: var(--sqs-site-max-width, 1500px); margin: 0 auto; padding: 0 var(--sqs-site-gutter, 4vw) 5rem; }
.fiction .entete-galerie { padding-left: 0; padding-right: 0; }
.fiction-film .video-embed img { width: 100%; height: 100%; object-fit: cover; }
.fiction-titre { font-family: var(--sans) !important; font-size: .82rem !important; font-weight: 500 !important; letter-spacing: .02em !important; text-transform: uppercase; margin: .8rem 0 .25rem !important; line-height: 1.4 !important; }
.fiction-info { font-size: .8rem; color: var(--gris); margin: 0; }
.fiction-generique { margin-top: .5rem; font-size: .78rem; color: var(--gris); }
.fiction-generique summary { cursor: pointer; text-decoration: underline; text-underline-offset: .2em; width: fit-content; }
.fiction-generique p { font-size: .78rem; line-height: 1.6; margin-top: .6rem; }
/* Pied : téléphone et courriel sous « Contactez-moi » */
.pied__direct { display: block; margin-top: .8rem; }
.pied__direct a { display: block; color: #fff; font-family: var(--sans); font-size: .9rem; font-weight: 500; }
.pied__direct a:hover { text-decoration: underline; text-underline-offset: .25em; }
.fiction-sans-image { background: #1c1c1c; display: flex; align-items: center; justify-content: center; }
.fiction-sans-image span { color: #fff; font-family: var(--heading-font); font-style: italic; font-size: clamp(1.4rem, 2.6vw, 2.2rem); }
/* Accueil : les liens « Voir plus de projets… » sous la galerie, sans chevauchement */
.fe-block-81bb8cbb8a4f64067d1e { grid-area: 124/2/125/10 !important; padding-top: 2.5rem; }
@media (min-width:768px){ .fe-block-81bb8cbb8a4f64067d1e { grid-area: 102/2/103/26 !important; padding-top: 3rem; } }
/* Visionneuse photo : flèches, compteur */
.lightbox-dialog img { cursor: pointer; padding: 3.5rem 4.5rem; box-sizing: border-box; }
.lightbox-dialog .lb-fermer { z-index: 2; }
.lightbox-dialog .lb-prec, .lightbox-dialog .lb-suiv { position: fixed; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; font-size: 2.2rem; line-height: 1; padding: 1rem; cursor: pointer; opacity: .75; transition: opacity .2s; }
.lightbox-dialog .lb-prec { left: .5rem; right: auto; } .lightbox-dialog .lb-suiv { right: .5rem; left: auto; }
.lightbox-dialog .lb-prec:hover, .lightbox-dialog .lb-suiv:hover { opacity: 1; }
.lightbox-dialog .lb-compte { position: fixed; bottom: 1rem; left: 0; right: 0; text-align: center; color: #bdbdbd; font-family: var(--sans); font-size: .78rem; letter-spacing: .08em; margin: 0; }
.lightbox-dialog.lb-seule .lb-prec, .lightbox-dialog.lb-seule .lb-suiv { display: none; }
@media (max-width: 767px) { .lightbox-dialog img { padding: 3.5rem .5rem; } .lightbox-dialog .lb-prec, .lightbox-dialog .lb-suiv { top: auto; bottom: .2rem; transform: none; font-size: 1.8rem; } }
/* ---------- Pages de projet : gabarit commun ---------- */
.projet { max-width: var(--sqs-site-max-width, 1500px); margin: 0 auto; padding: 6.5rem var(--sqs-site-gutter, 4vw) 4rem; }
.projet-tete { border-bottom: 1px solid #cfcfcf; padding-bottom: 1.1rem; margin-bottom: 2.5rem; }
.projet-tete .titre-section { border-bottom: 0; padding-bottom: .1em; }
.projet-client { margin: .6rem 0 0; font-family: var(--sans); font-size: .85rem; letter-spacing: .02em; color: var(--encre); }
.projet-client span { color: var(--gris); text-transform: uppercase; font-size: .74rem; letter-spacing: .08em; margin-right: .3em; }
.projet-medias { display: flex; flex-direction: column; gap: .5rem; }
.projet-video .video-embed { position: relative; padding-bottom: 56.25% !important; height: 0; overflow: hidden; background: #111; }
.projet-video .video-embed > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.projet-video .video-couverture img { width: 100%; height: 100%; object-fit: cover; }
.projet-video video { object-fit: cover; }
.projet-galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.projet-galerie--une { grid-template-columns: 1fr; }
.projet-galerie .gallery-item { margin: 0; }
.projet-galerie img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: opacity .3s; }
.projet-galerie--une img { aspect-ratio: auto; }
.projet-galerie a:hover img { opacity: .88; }
.projet-infos { margin-top: 2.2rem; font-family: var(--sans); font-size: .85rem; line-height: 1.7; color: var(--encre); columns: 2 22rem; column-gap: 3rem; }
.projet-infos p { margin: 0 0 1rem; break-inside: avoid; }
.projet-infos a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.projet-texte { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #cfcfcf; max-width: 46rem; }
.projet-texte h2 { font-family: var(--sans) !important; font-size: .74rem !important; font-weight: 500 !important; letter-spacing: .08em !important; text-transform: uppercase; color: var(--gris); margin: 0 0 1rem; }
.projet-texte p { font-size: 1.02rem; line-height: 1.7; margin: 0 0 1rem; }
.projet .item-pagination { max-width: none; margin-top: 3.5rem; }
@media (max-width: 767px) { .projet { padding-top: 5.5rem; } .projet-galerie { grid-template-columns: 1fr; } .projet-galerie img { aspect-ratio: auto; } }
.projet-retour { margin: 0 0 1.2rem; font-family: var(--sans); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.projet-retour a { color: var(--gris); text-decoration: none; transition: color .2s; }
.projet-retour a:hover { color: var(--encre); }
/* Menu : reste sur une ligne sur tablette et petit portable */
@media (min-width: 768px) and (max-width: 1180px) { .site-nav { gap: .4em 1.2em; flex-wrap: nowrap; } .site-nav a { font-size: .66rem; white-space: nowrap; } .site-title { font-size: .7rem; } }
@media (min-width: 768px) and (max-width: 900px) { .site-nav { gap: .4em .85em; } .site-nav a { font-size: .6rem; } .site-title { white-space: nowrap; } }

/* Fiche « À propos du projet » (SEO / GEO) */
.projet-resume { font-size: 1.08rem; line-height: 1.65; margin: 0 0 1.4rem; color: var(--encre); }
.projet-fiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 2rem; margin: 0 0 1.8rem; padding: 1.2rem 0; border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; font-family: var(--sans); }
.projet-fiche div { margin: 0; }
.projet-fiche dt { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); margin: 0 0 .2rem; }
.projet-fiche dd { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--encre); }
.projet-liens { margin: 1.6rem 0 0; font-family: var(--sans); font-size: .85rem; line-height: 1.8; }
.projet-liens span { color: var(--gris); text-transform: uppercase; font-size: .68rem; letter-spacing: .08em; margin-right: .3em; }
.projet-liens a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
@media (max-width: 600px) { .projet-fiche { grid-template-columns: 1fr; } }
/* Menu : CONTACT en bouton carré, fond blanc, texte noir */
.site-nav a:nth-child(6):not(.lang-switch) { background: #fff; color: #111 !important; border: 1px solid #111; border-radius: 0; padding: .7em 1.15em; opacity: 1; line-height: 1; transition: background .2s, color .2s; }
.site-nav a:nth-child(6):not(.lang-switch):hover, .site-nav a:nth-child(6):not(.lang-switch).active { background: #111; color: #fff !important; }
@media (max-width: 767px) { .site-nav a:nth-child(6):not(.lang-switch) { padding: .6em 1.2em; } }
/* Menu : lien « | StudioD » avant « | EN » */
.site-nav a.nav-studiod { opacity: .55; margin-left: -.8em; text-transform: none; }
.site-nav a.nav-studiod:hover { opacity: 1; }
@media (max-width: 767px) { .site-nav a.nav-studiod { margin-left: 0; } }
/* Titre réservé aux lecteurs d'écran et aux moteurs de recherche */
.sr-seul { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Accueil : bouton « Démo reel » ---------- */
.demo-reel { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 1rem;
  background: none; border: 0; padding: .4rem .6rem; color: #fff; cursor: pointer; font-family: var(--sans); }
.demo-reel__rond { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 1px solid rgba(255,255,255,.85); display: grid; place-items: center;
  background: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .25s, transform .25s; }
.demo-reel__rond svg { width: 22px; height: 22px; fill: #fff; margin-left: 2px; transition: fill .25s; }
.demo-reel__rond::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); animation: reel-onde 2.4s ease-out infinite; }
@keyframes reel-onde { from { transform: scale(1); opacity: .7; } to { transform: scale(1.55); opacity: 0; } }
.demo-reel__texte { font-size: .74rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; border-bottom: 1px solid transparent; padding-bottom: .15em; transition: border-color .25s; }
.demo-reel:hover .demo-reel__rond, .demo-reel:focus-visible .demo-reel__rond { background: #fff; transform: scale(1.06); }
.demo-reel:hover .demo-reel__rond svg, .demo-reel:focus-visible .demo-reel__rond svg { fill: #111; }
.demo-reel:hover .demo-reel__texte { border-bottom-color: rgba(255,255,255,.8); }
.demo-reel:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .demo-reel__rond::after { animation: none; } }
@media (max-width: 767px) { .demo-reel { top: 57%; } .demo-reel__rond { width: 52px; height: 52px; } }
/* Lecteur plein écran du démo reel */
.reel-dialog { border: 0; padding: 0; margin: 0; background: #000; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; }
.reel-dialog::backdrop { background: #000; }
.reel-cadre { width: 100%; height: 100%; display: grid; place-items: center; }
.reel-cadre video, .reel-cadre iframe { width: 100%; height: 100%; max-height: 100vh; border: 0; background: #000; object-fit: contain; }
.reel-fermer { position: fixed; top: 14px; right: 18px; z-index: 2; background: none; border: 0; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; opacity: .8; }
.reel-fermer:hover { opacity: 1; }
/* Bouton Démo reel : plus petit et plus discret */
.demo-reel { gap: .8rem; }
.demo-reel__rond { width: 42px; height: 42px; }
.demo-reel__rond svg { width: 15px; height: 15px; margin-left: 1px; }
.demo-reel__texte { font-size: .68rem; letter-spacing: .2em; }
@media (max-width: 767px) { .demo-reel__rond { width: 40px; height: 40px; } }

/* Bouton Démo reel, version finale : rectangle à contour blanc, triangle + texte */
.demo-reel { gap: .7rem; padding: .85em 1.3em; border: 1px solid rgba(255,255,255,.9); border-radius: 0; background: transparent; line-height: 1;
  transition: background .25s, color .25s; }
.demo-reel__triangle { width: 11px; height: 11px; fill: currentColor; flex: none; }
.demo-reel__texte { font-size: .7rem; letter-spacing: .2em; border: 0 !important; padding: 0; }
.demo-reel:hover, .demo-reel:focus-visible { background: #fff; color: #111; }
/* Lecteur du démo reel : fenêtre par-dessus le site, fond sombre translucide */
.reel-dialog { background: transparent; width: 100vw; height: 100vh; display: none; }
.reel-dialog[open] { display: grid; place-items: center; }
.reel-dialog::backdrop { background: rgba(10,10,10,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.reel-cadre { width: min(88vw, 176vh); height: auto; aspect-ratio: 2 / 1; display: block; box-shadow: 0 30px 80px rgba(0,0,0,.5); background: #000; }
.reel-cadre video, .reel-cadre iframe { width: 100%; height: 100%; max-height: none; display: block; }
@media (max-width: 767px) { .reel-cadre { width: 100vw; } }

/* Flèche vers le bas : au bas de la section d'ouverture (hero), créée par site.js */
.fleche-bas { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); z-index: 3; width: 44px; height: 34px; padding: 6px;
  background: none; border: 0; cursor: pointer; color: #fff; opacity: .9; transition: opacity .3s, transform .3s; }
.fleche-bas svg { width: 100%; height: 100%; display: block; }
.fleche-bas:hover { opacity: 1; transform: translateX(-50%) translateY(3px); }
/* l'ancienne flèche posée dans les pages est remplacée par celle-ci */
img[src*="icons8-down-arrow"] { display: none !important; }

/* Vidéos d'arrière-plan : remplissent toujours toute la section, quel que soit le navigateur ou la taille du fichier */
.section-background { overflow: hidden; }
.section-background .bg-video { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; }