/* =====================================================================
   Lillysou — couche de mouvement
   Tout est actif seulement quand <html> porte la classe .lm (posée avant
   l'affichage, jamais si l'utilisateur a choisi « réduire les animations »).
   On n'anime que transform / translate / scale / opacity / clip-path.
   ===================================================================== */

:root {
  --lm-ease: cubic-bezier(.21, 1, .4, .98);   /* départ vif, arrivée très douce */
  --lm-dur: 1.1s;
  --lm-y: 32px;     /* déplacement des apparitions */
  --lm-st: 28ms;    /* décalage entre deux mots */
}
@media (max-width: 767px) {
  :root {
    --lm-dur: .8s;
    --lm-y: 16px;
    --lm-st: 22ms;
  }
}

/* pas de « rebond » en haut ni en bas de page (Firefox, pavé tactile, Mac) :
   il laissait voir le fond gris-violet du site au-dessus du menu */
html, body { overscroll-behavior-y: none; }

/* ---------- Masquage avant préparation (modules autrefois animés par Divi) ---------- */
html.lm .lm-anim:not(.lm-ok) > .et_pb_text_inner,
html.lm .lm-anim:not(.lm-ok) > .et_pb_heading_container,
html.lm .lm-anim:not(.lm-ok) > .et_pb_image_wrap,
html.lm .lm-anim:not(.lm-ok):is(.et_pb_row, .et_pb_column, .et_pb_section) {
  opacity: 0;
}

/* ---------- Mots qui montent à travers un masque ---------- */
html.lm .lm-words .lm-w {
  display: inline-block;
  /* masque : le mot est caché tant qu'il est sous sa ligne (marges pour accents et jambages) */
  clip-path: inset(-.45em -.25em -.22em -.25em);
  text-decoration: inherit;
}
html.lm .lm-words .lm-wi {
  display: inline-block;
  text-decoration: inherit;
  opacity: 0;
  transform: translate3d(0, 140%, 0);
  transition:
    transform var(--lm-dur) var(--lm-ease),
    opacity calc(var(--lm-dur) * .6) var(--lm-ease);
  transition-delay: calc(var(--lm-d0, 0ms) + var(--i, 0) * var(--lm-st) + var(--x, 0) * 120ms);
}
html.lm .lm-words .lm-caps { --x: 1; }
html.lm .lm-words.lm-in .lm-wi {
  opacity: 1;
  transform: none;
}
html.lm .lm-words.lm-done .lm-w { clip-path: none; }

/* ---------- Lettres (titre d'un seul mot, ex. « CREATIVE ») ---------- */
/* lettres en blocs : aucune coupure de ligne possible entre elles */
html.lm .lm-chars :is(h1, h2, h3, h4, h5, h6) { white-space: nowrap; }
html.lm .lm-chars .lm-c {
  display: inline-block;
  clip-path: inset(-.3em -.15em -.12em -.15em);
}
html.lm .lm-chars .lm-ci {
  display: inline-block;
  transform: translate3d(0, 115%, 0);
  transition: transform calc(var(--lm-dur) * 1.15) var(--lm-ease);
  transition-delay: calc(var(--lm-d0, 0ms) + var(--i, 0) * 45ms);
}
html.lm .lm-chars.lm-in .lm-ci { transform: none; }
html.lm .lm-chars.lm-done .lm-c { clip-path: none; }

/* ---------- Bloc qui apparaît en montant ---------- */
html.lm .lm-block {
  opacity: 0;
  translate: 0 var(--lm-y);
  transition:
    opacity var(--lm-dur) var(--lm-ease),
    translate calc(var(--lm-dur) * 1.15) var(--lm-ease);
  transition-delay: var(--lm-d0, 0ms);
}
html.lm .lm-block.lm-small { translate: 0 calc(var(--lm-y) * .5); }
html.lm .lm-block.lm-in {
  opacity: 1;
  translate: none;
}

/* ---------- Pages projets : les visuels remontent en apparaissant (comme chez Studio Moiré) ---------- */
html.lm .lm-rise {
  opacity: 0;
  translate: 0 100px;
  transition:
    opacity 1.5s var(--lm-ease),
    translate 1.5s var(--lm-ease);
  transition-delay: var(--lm-d0, 0ms);
}
@media (max-width: 767px) {
  html.lm .lm-rise { translate: 0 50px; }
}
html.lm .lm-rise.lm-in {
  opacity: 1;
  translate: none;
}

/* ---------- Images et vidéos : dévoilement du bas vers le haut, l'image « se pose » ---------- */
html.lm .lm-media {
  clip-path: inset(100% 0 0 0);
  transition: clip-path calc(var(--lm-dur) * 1.1) var(--lm-ease);
  transition-delay: var(--lm-d0, 0ms);
}
html.lm .lm-media > a > *,
html.lm .lm-media > img,
html.lm .lm-media > video {
  transform: scale(1.08);
  transition: transform calc(var(--lm-dur) * 1.5) var(--lm-ease), scale .9s var(--lm-ease);
  transition-delay: var(--lm-d0, 0ms), 0ms;
}
html.lm .lm-media.lm-in { clip-path: inset(0 0 0 0); }
html.lm .lm-media.lm-in > a > *,
html.lm .lm-media.lm-in > img,
html.lm .lm-media.lm-in > video { transform: none; }
html.lm .lm-media.lm-done { clip-path: none; }
html.lm .lm-media.lm-done > a > *,
html.lm .lm-media.lm-done > img,
html.lm .lm-media.lm-done > video { transition-delay: 0ms; }

/* visuels des projets (accueil) : cadre fixe pour le léger zoom au survol */
html.lm .colonne-projet .et_pb_code_inner { overflow: hidden; }

/* ---------- Vidéos en lecture automatique : fondu dès la première image ---------- */
html.lm video.lm-v {
  opacity: 0;
  transition: opacity 1.2s var(--lm-ease) .15s;
}
html.lm video.lm-v.lm-vready { opacity: 1; }

/* ---------- Grille des noms de projets ---------- */
html.lm .project-grid.lm-grid .project-item a {
  opacity: 0;
  transform: translate3d(0, 45%, 0);
  transition:
    opacity .9s var(--lm-ease),
    transform 1.1s var(--lm-ease),
    translate .5s var(--lm-ease);
  transition-delay:
    calc(var(--lm-d0, 0ms) + var(--i, 0) * 60ms),
    calc(var(--lm-d0, 0ms) + var(--i, 0) * 60ms),
    0ms;
}
html.lm .project-grid.lm-grid.lm-in .project-item a {
  opacity: 1;
  transform: none;
}
html.lm .project-grid.lm-grid .project-item::before {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.3s var(--lm-ease);
  transition-delay: calc(var(--lm-d0, 0ms) + var(--i, 0) * 60ms + 120ms);
}
html.lm .project-grid.lm-grid.lm-in .project-item::before { transform: none; }
html.lm .project-grid.lm-grid.lm-done .project-item a { transition-delay: 0ms; }

/* ---------- En-tête : arrivée douce à l'ouverture du site ---------- */
html.lm.lm-intro .et-l--header .et_pb_menu__logo-wrap,
html.lm.lm-intro .et-l--header .et_pb_menu__menu {
  opacity: 0;
  translate: 0 -10px;
}
/* (pas de déplacement ici : le menu mobile plein écran est à l'intérieur) */
html.lm.lm-intro .et-l--header .et_mobile_nav_menu { opacity: 0; }
html.lm.lm-intro.lm-go .et-l--header .et_pb_menu__logo-wrap,
html.lm.lm-intro.lm-go .et-l--header .et_pb_menu__menu,
html.lm.lm-intro.lm-go .et-l--header .et_mobile_nav_menu {
  opacity: 1;
  translate: none;
  transition: opacity .9s var(--lm-ease), translate 1.1s var(--lm-ease);
}
html.lm.lm-intro.lm-go .et-l--header .et_pb_menu__menu,
html.lm.lm-intro.lm-go .et-l--header .et_mobile_nav_menu { transition-delay: .12s; }

/* ---------- Survols (souris uniquement) — pas de soulignement des liens ---------- */
@media (hover: hover) and (pointer: fine) {
  /* visuel de projet : zoom très léger dans son cadre (la règle .lm-media, plus précise, prend le relais) */
  html.lm :where(.colonne-projet .et_pb_code_inner) > a > * { transition: scale .9s var(--lm-ease); }
  html.lm .colonne-projet:hover .et_pb_code_inner > a > * { scale: 1.03; }

  /* grille des noms : le nom glisse de quelques pixels */
  .project-grid .project-item a { transition: translate .5s var(--lm-ease); }
  .project-grid .project-item a:hover { translate: 8px 0; }
}

/* ---------- Curseur (souris uniquement) : toujours #6745F7, grossit sur ce qui est cliquable ---------- */
html.lm-cursor-on #custom-cursor { display: none !important; }
.lm-cursor,
.lm-cursor-label {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.lm-cursor.is-visible { opacity: 1; }
.lm-cursor i {
  position: absolute;
  left: -55px;
  top: -55px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #6745F7;
  transform: scale(.1818);              /* 20px */
  transition: transform .5s var(--lm-ease);
}
.lm-cursor[data-state="link"] i { transform: scale(.5455); }   /* 60px */
.lm-cursor.is-down i { transform: scale(.15); }
.lm-cursor[data-state="link"].is-down i { transform: scale(.48); }
.lm-cursor[data-state="voir"] i { transform: scale(1); }       /* 110px */
/* menu : la boule grossit et passe derrière le texte des liens (texte net, sans contour)
   — sous la rangée de l'en-tête (z-index 3 dans Divi), au-dessus de son fond */
.lm-cursor[data-state="menu"] { z-index: 1; }   /* sous les colonnes Divi (z-index 2) et la rangée du menu (3), au-dessus des fonds */
/* l'en-tête Divi regroupait fond et texte dans un même calque (z-index 2) : la boule ne pouvait pas
   s'intercaler. La rangée du menu garde son propre calque (z-index 3), toujours au-dessus du contenu. */
html.lm-cursor-on .et-l--header > .et_builder_inner_content { z-index: auto; }
/* pied de page : même principe que l'en-tête (la boule passe derrière les liens et le logo).
   Son calque Divi (z-index 2) est retiré : il recouvrait aussi l'image de la grille des projets au survol. */
.et-l--footer > .et_builder_inner_content { z-index: auto; }
html.lm-cursor-on .et-l--footer a {
  position: relative;
  z-index: 3;
}
/* liens soulignés du pied de page : le soulignement suit le texte qui bascule */
.et-l--footer .lm-flip > span,
.et-l--footer .lm-flip::after {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* liens du menu (Studio, Contact) : texte un peu plus grand (20px dans Divi) */
html body .et-l--header .et_pb_menu .et_pb_menu__menu .et-menu > li > a { font-size: 23px !important; }

/* texte du lien survolé bien net sur la boule (Divi l'atténue à 70 %) */
html.lm-cursor-on .et-l--header .et_pb_menu__menu .et-menu > li > a:hover { opacity: 1 !important; }
.lm-cursor[data-state="menu"] i { transform: scale(.5818); }   /* 64px */
.lm-cursor[data-noir] i { background: #000; }

/* boule « derrière le texte » posée dans l'élément survolé (voir motion.js) */
.lm-under-host {
  position: relative;
  isolation: isolate;   /* la boule (z-index -1) passe au-dessus du fond de l'élément, sous son contenu */
}
.lm-under {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: -1;
  pointer-events: none;
}
.lm-under i {
  position: absolute;
  left: -55px;
  top: -55px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #6745F7;
  transform: scale(.1818);
  transition: transform .5s var(--lm-ease);
}
.lm-under.is-on i { transform: scale(.5818); }   /* 64px, comme sur le menu */
.lm-under[data-noir] i { background: #000; }
.lm-cursor.is-under { opacity: 0 !important; }   /* la boule globale s'efface pendant ce temps */

/* formulaire de contact : champs sans fond, pour laisser voir la boule sous le texte */
html body .et_pb_contact_form .et_pb_contact_field .input,
html body .et_pb_contact_form .et_pb_contact_field textarea { background-color: transparent !important; }

/* bouton « Envoyer » (Contact) : pilule fine, comme sur Woopsite ; identique au repos et au survol
   (au survol : bascule du texte et boule derrière, comme sur le menu)
   (sélecteurs plus précis que ceux de Divi, qui incluent #page-container) */
html body #page-container .et_pb_section .et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button,
html body #page-container .et_pb_section .et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:hover {
  font-family: 'Inter Tight', Helvetica, Arial, sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  color: #000 !important;
  background: transparent !important;
  border: 1px solid #000 !important;
  border-radius: 50px !important;
  padding: 12px 50px !important;
}
html body .et_pb_contact_submit.et_pb_button::after { display: none !important; }
button:hover > .lm-flip > span,
button:hover > .lm-flip::after { transform: translateY(-100%); }

/* liens du menu : le texte bascule vers le haut, sa copie arrive par dessous */
.lm-flip {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: top;
}
.lm-flip > span {
  display: inline-block;
  transition: transform .5s var(--lm-ease);
}
.lm-flip::after {
  content: attr(data-t);
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  text-align: center;
  transition: transform .5s var(--lm-ease) .1s;
}
a:hover > .lm-flip > span,
a:hover > .lm-flip::after { transform: translateY(-100%); }
.lm-cursor-label span {
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% -50%;
  padding-left: .14em;                  /* compense l'espacement après la dernière lettre */
  color: #fff;
  font-family: 'Inter Tight', Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity .3s ease, transform .5s var(--lm-ease);
}
.lm-cursor-label.is-visible { opacity: 1; }
.lm-cursor-label[data-state="voir"] span {
  opacity: 1;
  transform: none;
}

/* tactile : le rond au toucher prend aussi la couleur d'accent */
html.is-touch .touch-ripple {
  background: #6745F7 !important;
  mix-blend-mode: normal !important;
}

/* =====================================================================
   Couleurs : haut de l'accueil sur fond noir, accent #6745F7
   (le reste du site garde ses fonds blancs)
   ===================================================================== */
/* fond de page noir sur l'accueil : visible quand les sections du haut reculent au défilement
   (les sections blanches gardent leur propre fond) */
body.home,
body.home #page-container,
body.home #et-main-area,
body.home #main-content,
body.home .et-l--post {
  background-color: #000 !important;
}
body.home .et-l--header .et_pb_section,
body.home .et-l--post .et_pb_section_0 {
  background-color: #000 !important;
}
/* 2e section : dégradé d'un noir légèrement plus clair (haut) vers le noir (bas) */
body.home .et-l--post .et_pb_section_1 {
  background: linear-gradient(180deg, #1c1c1c 0%, #000 100%) !important;
}
/* espace réduit entre le menu et « CREATIVE » */
body.home .et-l--post .et_pb_section.et_pb_section_0 { padding-top: 0 !important; }
@media (max-width: 980px) {
  body.home .et-l--post .et_pb_section.et_pb_section_0 { padding-top: 30px !important; }
}
/* vidéo du haut : au départ, elle remonte derrière le bas des lettres de « CREATIVE » (grand écran) */
@media (min-width: 981px) {
  /* décalage appliqué au bloc vidéo, à l'intérieur de la rangée animée par Divi
     (sur la rangée elle-même, l'effet de défilement Divi le compensait) */
  body.home .et-l--post .et_pb_section_0 .et_pb_row_2 .et_pb_code_0 { translate: 0 -3vw; }
}

/* ---------- Accueil : la section projets se découvre sous la 2e section (effet « porte de garage ») ---------- */
/* la section projets remonte d'un écran sous la précédente ; son contenu reste fixé en haut
   pendant que la 2e section s'en va, puis défile normalement (hauteur totale de page inchangée) */
html.lm body.home .lm-garage-front {
  display: flow-root;   /* leurs colonnes flottantes restent chez elles et ne repoussent pas le contenu glissé dessous */
  position: relative;
  z-index: 2;
}
html.lm body.home .et_pb_section.lm-garage {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
  margin-top: -100lvh;
  transform: none !important;   /* effet de défilement Divi de la section : remplacé par celui-ci */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.lm-garage-wrap {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
}
.lm-garage-spacer {
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
}
.lm-garage-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
  height: 100lvh;
  z-index: 20;
  background: #000;
  pointer-events: none;
}
/* liste « Animation, Art Direction… » : sans soulignement, en majuscules, interligne serré */
.liste-expertises span,
.liste-expertises .lm-w,
.liste-expertises .lm-wi { text-decoration: none !important; }
.liste-expertises.et_pb_text,
.liste-expertises p {
  line-height: 1em !important;
  text-align: left !important;
}
/* en Inter (Inter Tight, la police des textes du site) au lieu de Space Grotesk */
html body .liste-expertises.et_pb_text,
html body .liste-expertises p,
html body .liste-expertises p * { font-family: 'Inter Tight', Helvetica, Arial, Lucida, sans-serif !important; font-weight: 600 !important; }   /* semi-gras */
/* tablette et smartphone (liste au-dessus de l'image) : tailles fixées ici (avant : 56px, 7vw, 27px) */
@media (min-width: 768px) and (max-width: 980px) {
  html body .liste-expertises.et_pb_text,
  html body .liste-expertises p { font-size: 9vw !important; text-align: center !important; }   /* tablette : liste centrée, comme l'image en dessous */
}
@media (min-width: 420px) and (max-width: 767px) {
  html body .liste-expertises.et_pb_text,
  html body .liste-expertises p { font-size: 11.8vw !important; }   /* limite : « Art Direction » doit tenir sur une ligne */
}
@media (max-width: 419px) {
  html body .liste-expertises.et_pb_text,
  html body .liste-expertises p { font-size: 11.8vw !important; }   /* limite : « Art Direction » doit tenir sur une ligne */
}

/* Espace entre le menu et le premier texte : le même sur toutes les pages que sur l'accueil
   (environ 70px sur ordinateur, 35px sur tablette, 30px sur smartphone, du bas du logo au haut des lettres).
   Pages projets non concernées : elles commencent par une vidéo. */
body.page-id-936 .et-l--post .et_pb_section.et_pb_section_0 { padding-top: 20px !important; }                     /* Contact */
body.search .et-l--body .et_pb_section.et_pb_section_0_tb_body { padding-top: 0 !important; margin-top: -21px; }   /* Recherche */
@media (max-width: 980px) {
  body.page-id-936 .et-l--post .et_pb_section.et_pb_section_0 { padding-top: 4px !important; }
  body.search .et-l--body .et_pb_section.et_pb_section_0_tb_body { padding-top: 3px !important; margin-top: 0; }
}
@media (max-width: 767px) {
  body.page-id-936 .et-l--post .et_pb_section.et_pb_section_0 { padding-top: 0 !important; margin-top: -11px; }
  body.search .et-l--body .et_pb_section.et_pb_section_0_tb_body { padding-top: 0 !important; margin-top: -2px; }
}

/* =====================================================================
   Page Studio, dans l'esprit de Studio Moiré (wearemoire.com/about)
   grand titre qui défile, portrait centré, phrase manifeste, grille 1/3 + 2/3,
   présentation sur la moitié droite, texte du calisson
   ===================================================================== */
.studio-moire.et_pb_section {
  --studio-g: clamp(20px, 3vw, 44px);
  padding: 0 !important;
  background: #fff !important;
}
.studio-moire .et_pb_row {
  width: calc(100% - 2 * var(--studio-g)) !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}
.studio-moire .et_pb_column { margin-bottom: 0 !important; }
.studio-moire .et_pb_module { margin-bottom: 0 !important; }
.studio-moire .et_pb_text_inner p { padding-bottom: 0 !important; }

/* 1. grand titre qui défile en continu, sur toute la largeur */
.studio-moire .et_pb_row.studio-r-defile {
  width: 100% !important;
  /* rogné sur les côtés seulement : le bas des parenthèses, du Q, etc. reste visible */
  overflow-x: clip;
  overflow-y: visible;
  /* comme chez Studio Moiré : le titre reste collé en haut de l'écran,
     la photo et les textes remontent et passent devant lui */
  position: sticky !important;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 10px);   /* compense le décalage de 10px ci-dessous */
  z-index: 0;
  translate: 0 -10px;             /* même espace sous le menu que sur les autres pages (70px) */
  margin-bottom: clamp(24px, 3vw, 50px) !important;
}
.studio-moire .et_pb_row:not(.studio-r-defile) {
  position: relative;
  z-index: 1;
}
@media (max-width: 980px) {
  .studio-moire .et_pb_row.studio-r-defile { translate: none; top: var(--wp-admin--admin-bar--height, 0px); margin-top: 27px !important; }   /* 35px */
}
@media (max-width: 767px) {
  .studio-moire .et_pb_row.studio-r-defile { margin-top: 24px !important; }   /* 30px */
}
/* menu et logo : d'abord fixes en haut, puis ils remontent en même temps que le grand titre
   (le décalage est appliqué par motion.js). Fond transparent, comme chez Studio Moiré :
   la photo et les textes passent sous le logo et les liens, qui restent devant. */
body.page-id-10 .et-l--header,
body.error404 .et-l--header,
body:has(.studio-moire-entete) .et-l--header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 2;
}
body.page-id-10 .et-l--header .et_pb_section,
body.error404 .et-l--header .et_pb_section,
body:has(.studio-moire-entete) .et-l--header .et_pb_section { background-color: transparent !important; }
/* smartphone et tablette : même mouvement que sur ordinateur (menu et grand titre restent en place pendant que
   la photo passe devant, puis remontent ensemble avec la fin de la photo) — demande du 16/10 */

/* fond blanc sous les sections de la page (pas de bande grise entre elles) */
body.page-id-10,
body.page-id-10 #page-container,
body.page-id-10 #main-content,
body.error404,
body.error404 #page-container,
body.error404 #main-content,
body:has(.studio-moire-entete),
body:has(.studio-moire-entete) #page-container,
body:has(.studio-moire-entete) #main-content { background-color: #fff !important; }
/* 404 sur le modèle de Studio : la liste devient des liens ; de l'air avant le pied de page */
body.error404 .studio-moire .et_pb_row.studio-r-manifeste { margin-bottom: clamp(70px, 9vw, 150px) !important; }
/* 404 sans photo : le grand titre ne reste pas collé (rien ne passerait devant lui) */
body.error404 .studio-moire .et_pb_row.studio-r-defile,
body.single-project .studio-moire .et_pb_row.studio-r-defile { position: relative !important; top: auto !important; }   /* pages projets : le titre et le menu remontent avec le reste */
body.single-project .studio-moire .et_pb_row.studio-r-defile { margin-bottom: clamp(8px, 1.8vw, 28px) !important; }   /* espace sous le grand titre, plus serré que sur Studio */
html body #page-container .studio-liste .et_pb_text_inner a,
html body.et-db #et-boc .et-l .studio-liste.et_pb_text .et_pb_text_inner a { color: inherit !important; text-decoration: none !important; }   /* plus fort que la couleur de lien du Theme Builder */
.studio-defile .et_pb_text_inner,
.studio-defile p {
  font-family: 'Space Grotesk', Helvetica, Arial, Lucida, sans-serif !important;
  font-weight: 500 !important;   /* entre le normal (400) et le gras (700) */
  text-transform: uppercase;
  font-size: clamp(64px, 11vw, 170px) !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
  color: #000 !important;
  white-space: nowrap;
}
.studio-defile-piste {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
  animation: studio-defile var(--studio-duree, 30s) linear infinite;
}
.studio-defile-piste > span { padding-right: .5em; }
@keyframes studio-defile { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .studio-defile-piste { animation: none; }
}

/* 2. portrait centré */
.studio-moire .et_pb_row.studio-r-photo { width: min(42vw, 620px) !important; }
.studio-r-photo .et_pb_image,
.studio-r-photo .et_pb_image_wrap,
.studio-r-photo img { width: 100% !important; max-width: none !important; display: block; }

/* 3. phrase manifeste */
.studio-moire .et_pb_row.studio-r-manifeste { margin-top: clamp(50px, 6vw, 90px) !important; margin-bottom: clamp(40px, 5vw, 80px) !important; }
.studio-manifeste .et_pb_text_inner,
.studio-manifeste p,
.studio-calisson .et_pb_text_inner,
.studio-calisson p,
.studio-calisson p span {
  font-family: 'Space Grotesk', Helvetica, Arial, Lucida, sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  color: #000 !important;
  text-align: left !important;
}
.studio-manifeste p {
  font-weight: 500 !important;   /* entre le normal (400) et le gras (700) */
  font-size: clamp(34px, 5.4vw, 80px) !important;
  line-height: .98 !important;
  letter-spacing: -.01em !important;
  max-width: 16em;
}

/* 4. grille : liste à gauche (1/3), texte sur deux colonnes à droite (2/3) ; 5. présentation à droite */
.studio-moire .et_pb_row.studio-r-grille,
.studio-moire .et_pb_row.studio-r-bio {
  display: grid !important;
  grid-template-columns: 1fr 2fr;
  column-gap: 30px;
}
.studio-moire .et_pb_row.studio-r-bio { margin-top: clamp(48px, 6vw, 90px) !important; margin-bottom: clamp(32px, 4vw, 60px) !important; }
/* la présentation reste dans la colonne de droite, même quand Divi masque la colonne vide de gauche
   (tablette, 768 à 980px : elle glissait sinon dans la colonne étroite) */
@media (min-width: 560px) {
  .studio-moire .et_pb_row.studio-r-bio > .et_pb_column:last-child { grid-column: 2; }
}
.studio-r-grille .et_pb_column,
.studio-r-bio .et_pb_column {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}
.studio-liste p,
.studio-colonnes p,
.studio-bio p {
  font-family: 'Inter Tight', Helvetica, Arial, Lucida, sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(18px, 1.7vw, 24px) !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  color: #000 !important;
  text-align: left !important;
}
/* un seul texte continu, réparti sur deux colonnes de même hauteur */
/* passage de la présentation : même graisse que le reste du paragraphe */
.studio-bio p strong { font-weight: inherit !important; }
.studio-colonnes .et_pb_text_inner { column-count: 2; column-gap: 30px; column-fill: balance; }
.studio-colonnes p { margin: 0 !important; }

/* 6. texte du calisson */
.studio-moire .et_pb_row.studio-r-calisson { margin-bottom: clamp(60px, 8vw, 120px) !important; }
.studio-calisson .et_pb_text_inner,
.studio-calisson .et_pb_text_inner * {
  font-size: clamp(26px, 3vw, 44px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}
.studio-calisson .et_pb_text_inner { max-width: 22em; }

/* grand téléphone et petite tablette (560 à 767px) : la liste reste à gauche du texte,
   mais le texte n'est plus coupé en deux colonnes */
@media (max-width: 767px) {
  .studio-moire .et_pb_row.studio-r-photo { width: calc(100% - 2 * var(--studio-g)) !important; }
  .studio-moire .et_pb_row.studio-r-grille,
  .studio-moire .et_pb_row.studio-r-bio { grid-template-columns: minmax(130px, 1fr) 2.4fr; column-gap: 24px; }
  .studio-colonnes .et_pb_text_inner { column-count: 1; }
  .studio-r-bio .et_pb_column:empty { display: none; }
}
/* smartphone (moins de 560px) : une seule colonne */
@media (max-width: 559px) {
  .studio-moire .et_pb_row.studio-r-grille,
  .studio-moire .et_pb_row.studio-r-bio { grid-template-columns: 1fr; }
  .studio-colonnes { margin-top: 28px !important; }
}

/* sous-titre du haut de l'accueil (« Studio. Graphic. Web. Motion. ») : centré */
html body .hero-sous-titre.et_pb_module {
  margin-left: auto !important;
  margin-right: auto !important;
}
html body .hero-sous-titre,
html body .hero-sous-titre p { text-align: center !important; }

/* légendes des visuels de projets : plus petites (36px, 34px, 4,6vw, 18px dans Divi) */
html body .legende-projet.et_pb_text,
html body .legende-projet p,
html body .legende-projet a { font-size: 27px !important; }
@media (max-width: 980px) {
  html body .legende-projet.et_pb_text,
  html body .legende-projet p,
  html body .legende-projet a { font-size: 25px !important; }
}
@media (min-width: 420px) and (max-width: 767px) {
  html body .legende-projet.et_pb_text,
  html body .legende-projet p,
  html body .legende-projet a { font-size: 4.6vw !important; }
}
@media (max-width: 419px) {
  html body .legende-projet.et_pb_text,
  html body .legende-projet p,
  html body .legende-projet a { font-size: 19px !important; }
}

/* texte « IDENTITÉS. SITES… » : plus d'air au-dessus et en dessous */
.texte-projets.et_pb_module {
  padding-top: 40px !important;
  padding-bottom: 80px !important;
}
@media (max-width: 980px) {
  .texte-projets.et_pb_module {
    padding-top: 24px !important;
    padding-bottom: 48px !important;
  }
}

/* pied de page : « STUDIO. TRÈS CRÉATIF. AIX-EN-PROVENCE. » en Space Grotesk, majuscules */
.et-l--footer .et_pb_text_0_tb_footer p {
  font-family: 'Space Grotesk', Helvetica, Arial, Lucida, sans-serif !important;
  font-weight: 700 !important;   /* le plus gras chargé pour Space Grotesk */
  text-transform: uppercase;
}
/* tablette : « AIX-EN-PROVENCE. » (insécable) dépassait de 3px de sa colonne */
@media (min-width: 768px) and (max-width: 980px) {
  .et-l--footer .et_pb_text_0_tb_footer p { letter-spacing: .5px !important; }
}
/* plus grand, autant que la colonne le permet : « AIX-EN-PROVENCE. » doit tenir sur une ligne
   (avant : 38px sur ordinateur, 32px sur tablette, 22px sur smartphone) */
html body .et-l--footer .et_pb_text_0_tb_footer,
html body .et-l--footer .et_pb_text_0_tb_footer p { font-size: clamp(46px, 5vw, 100px) !important; line-height: 1.12em !important; }
@media (max-width: 980px) {
  html body .et-l--footer .et_pb_text_0_tb_footer,
  html body .et-l--footer .et_pb_text_0_tb_footer p { font-size: max(36px, 4.9vw) !important; }
}
@media (max-width: 767px) {
  html body .et-l--footer .et_pb_text_0_tb_footer,
  html body .et-l--footer .et_pb_text_0_tb_footer p { font-size: clamp(26px, 8.3vw, 56px) !important; }   /* « STUDIO. TRÈS CRÉATIF. » tient sur une ligne avec la même marge des deux côtés */
}

/* recherche de l'accueil : plus discrète */
.custom-search {
  max-width: 360px !important;
  border-bottom-width: 3px !important;
}
.custom-search input {
  font-size: clamp(20px, 2vw, 28px) !important;
  font-weight: 500 !important;
  padding: 6px 0 !important;
}
.custom-search button svg { width: clamp(26px, 2.2vw, 34px) !important; }
/* mot plus long dans la pastille du curseur (« Chercher ») */
.lm-cursor-label[data-long] span {
  font-size: 18px;
  letter-spacing: .08em;
  padding-left: .08em;
}

/* légendes des projets : toujours centrées sous leur visuel, sur tous les écrans
   (Divi les alignait à droite sur smartphone, dans un bloc de 264px) */
html body .colonne-projet .legende-projet.et_pb_text {
  text-align: center !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html body .colonne-projet .legende-projet .et_pb_text_inner,
html body .colonne-projet .legende-projet p { text-align: center !important; }

/* page de résultats : mot cherché, nombre de projets, nouvelle recherche */
.lm-search-head {
  margin: 0 0 64px;
  text-align: center;
}
.lm-search-label {
  font-family: 'Inter Tight', Helvetica, Arial, sans-serif;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.2;
  color: #000;
  padding-bottom: 24px !important;
}
/* aucun résultat : l'en-tête le dit déjà, on garde seulement la suggestion, centrée */
.search .not-found-title { display: none; }
.search .et-l--body .entry {
  text-align: center;
  font-family: 'Inter Tight', Helvetica, Arial, sans-serif;
  font-size: 18px;
  color: #9a9a9a;
}

/* 2e section de l'accueil : titre « ON CRÉE. ON RACONTE. ON COLORE. » en majuscules, interligne serré,
   puis un texte plus petit, en graisse normale et en gris (comme le sous-titre de Woopsite) */
body.home .et-l--post .et_pb_section_1 .et_pb_text_inner p:first-child,
.texte-projets .et_pb_text_inner p:first-child {
  text-transform: uppercase;
  line-height: 1em !important;
  padding-bottom: .4em !important;
}
/* « On CRÉE. On RACONTE. On COLORE. » : plus grand sur tous les écrans (avant : 82px, 48px, 28px) ;
   le texte gris en dessous garde sa taille (il se cale sur la taille du module, pas sur celle-ci) */
html body.home .et-l--post .et_pb_section_1 .et_pb_text_inner p:first-child { font-size: clamp(100px, 8.4vw, 160px) !important; }
@media (max-width: 980px) {
  html body.home .et-l--post .et_pb_section_1 .et_pb_text_inner p:first-child { font-size: clamp(72px, 11.5vw, 104px) !important; }
}
@media (max-width: 767px) {
  html body.home .et-l--post .et_pb_section_1 .et_pb_text_inner p:first-child { font-size: clamp(38px, 12.5vw, 92px) !important; }
  /* smartphone : titre et texte alignés à gauche */
  html body.home .et-l--post .et_pb_section_1 .et_pb_text,
  html body.home .et-l--post .et_pb_section_1 .et_pb_text_inner,
  html body.home .et-l--post .et_pb_section_1 .et_pb_text_inner p { text-align: left !important; }
}
/* « Identités. Sites. Images. Animations… » : agrandi de la même façon (avant : 82px, 48px, 28px) */
html body .texte-projets .et_pb_text_inner p:first-child { font-size: clamp(100px, 8.4vw, 160px) !important; }
@media (max-width: 980px) {
  html body .texte-projets .et_pb_text_inner p:first-child { font-size: clamp(66px, 10.5vw, 96px) !important; }
}
/* tablette : titre et texte centrés (Divi les alignait à gauche sur ce format seulement) */
@media (min-width: 768px) and (max-width: 980px) {
  html body .texte-projets.et_pb_text,
  html body .texte-projets .et_pb_text_inner,
  html body .texte-projets .et_pb_text_inner p { text-align: center !important; }
}
@media (max-width: 767px) {
  html body .texte-projets .et_pb_text_inner p:first-child { font-size: clamp(36px, 12vw, 92px) !important; }   /* limite : « ANIMATIONS… » doit tenir sur une ligne */
}
body.home .et-l--post .et_pb_section_1 .et_pb_text_inner p + p,
.texte-projets .et_pb_text_inner p + p {
  font-family: 'Inter Tight', Helvetica, Arial, Lucida, sans-serif;   /* police du corps de texte du site */
  font-size: max(22px, .58em);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3em !important;
  color: #fff !important;   /* accueil : plus de gris, blanc comme le titre au-dessus */
}
/* texte des projets (fond blanc) : sous-texte noir, comme sur Woopsite */
.texte-projets .et_pb_text_inner p + p { color: #000 !important; }

/* 2e section de l'accueil : l'effet de défilement Divi (montée puis redescente) faisait un rebond */
html.lm body.home .et-l--post .et_pb_section.et_pb_section_1 { transform: none !important; }

/* grille des noms de projets : un peu plus d'air en haut et en bas (s'ajoute aux marges Divi) */
.et_pb_column:has(> .et_pb_module .project-grid) {
  padding-top: 40px;
  padding-bottom: 40px;
}
@media (max-width: 980px) {
  .et_pb_column:has(> .et_pb_module .project-grid) {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

/* grille des noms de projets : l'image au survol passe au-dessus des sections voisines */
.et_pb_section:has(.project-zone) {
  position: relative;
  z-index: 3;
}

/* l'ancien violet devient l'accent : menu mobile et liens e-mail */
html body .et-l--header .et_pb_menu .et_mobile_menu,
html body .et-l--header .et_pb_menu .et_mobile_menu ul,
/* page 404 : Divi y écrit ses règles avec #et-boc, plus fortes ; il faut l'être encore plus */
html body.et-db #et-boc .et-l.et-l--header .et_pb_module.et_pb_menu .et_mobile_menu,
html body.et-db #et-boc .et-l.et-l--header .et_pb_module.et_pb_menu .et_mobile_menu ul {
  background-color: #6745F7 !important;
}
html body.et-db #et-boc .et-l .et_pb_module.et_pb_text a[href^="mailto:"] { color: #6745F7 !important; }
html body.et-db #et-boc .et-l .et_pb_module.et_pb_text span:has(> a[href^="mailto:"]) { color: #6745F7 !important; text-decoration-color: #6745F7 !important; }
html body .et-l a[href^="mailto:"],
html body a[href^="mailto:"] { color: #6745F7 !important; }
/* le soulignement du lien e-mail est porté par l'élément qui l'entoure : même couleur */
html body .et-l span:has(> a[href^="mailto:"]) {
  color: #6745F7 !important;
  text-decoration-color: #6745F7 !important;
}

/* ---------- Accueil : sections qui se superposent au défilement ---------- */
.lm-stack {
  transform-origin: 50% 100%;
}
.lm-stack > .lm-dim {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Menu mobile : ouverture animée ---------- */
@keyframes lm-fade-in { from { opacity: 0; } }
@keyframes lm-rise-in { from { opacity: 0; transform: translate3d(0, 28px, 0); } }
@media (max-width: 980px) {
  html.lm .et_pb_menu .mobile_nav.opened .et_mobile_menu {
    animation: lm-fade-in .35s ease both !important;
  }
  html.lm .et_pb_menu .mobile_nav.opened .et_mobile_menu li {
    animation: lm-rise-in .7s var(--lm-ease) both !important;
  }
  html.lm .et_pb_menu .mobile_nav.opened .et_mobile_menu li:nth-child(1) { animation-delay: .08s !important; }
  html.lm .et_pb_menu .mobile_nav.opened .et_mobile_menu li:nth-child(2) { animation-delay: .14s !important; }
  html.lm .et_pb_menu .mobile_nav.opened .et_mobile_menu li:nth-child(3) { animation-delay: .2s !important; }
  html.lm .et_pb_menu .mobile_nav.opened .et_mobile_menu li:nth-child(4) { animation-delay: .26s !important; }
  html.lm .et_pb_menu .mobile_nav.opened .et_mobile_menu li:nth-child(n+5) { animation-delay: .32s !important; }
}

/* ---------- Transitions entre les pages (Chrome, Edge, Safari récents) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: lm-vt-out .28s cubic-bezier(.39, .01, .89, .12) both;
}
::view-transition-new(root) {
  animation: lm-vt-in .6s cubic-bezier(.21, 1, .4, .98) both;
}
@keyframes lm-vt-out { to { opacity: 0; } }
@keyframes lm-vt-in { from { opacity: 0; transform: translate3d(0, 16px, 0); } }

/* ---------- « Réduire les animations » ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  /* effets de défilement Divi de l'accueil : figés dans leur état final */
  body.home .et-l--post .et_pb_row_2,
  body.home .et-l--post .et_pb_section_1,
  body.home .et-l--post .et_pb_section_2,
  body.home .et-l--post .hero-sous-titre {
    transform: none !important;
    opacity: 1 !important;
  }
  .lm-cursor i,
  .lm-cursor-label span { transition: none; }
}

/* =====================================================================
   Pages projets, dans l'esprit de Studio Moiré (wearemoire.com/work/…)
   nom du projet qui défile, grande vidéo qui passe devant, titre à droite,
   prestations + texte sur deux colonnes, grands visuels, projet suivant
   ===================================================================== */
/* l'ancienne règle « body.single-project .et_pb_section_0 » (espace au-dessus de la vidéo) ne s'applique plus */
html body.single-project .et_pb_section_0.studio-moire { padding-top: 0 !important; }
.studio-moire .et_pb_row.projet-r-hero { width: 100% !important; }
.projet-r-hero .et_pb_code { margin: 0 !important; }
.projet-r-hero video { display: block; width: 100% !important; height: auto; }
/* en-tête des pages projets : la vidéo occupe tout l'écran, le menu et le logo posés dessus */
body.single-project:has(.projet-entete) .et-l--header {
  position: absolute;
  top: var(--wp-admin--admin-bar--height, 0px);
  left: 0;
  right: 0;
  z-index: 2;
}
body.single-project:has(.projet-entete) .et-l--header .et_pb_section { background-color: transparent !important; }
.projet-entete .projet-r-hero video {
  height: 100vh !important;
  height: 100svh !important;
  object-fit: cover;
  background: var(--projet-fond, #eee7e9);   /* fond de la vidéo (réglable par projet sur la balise vidéo) */
}
/* écran vertical (téléphone, tablette debout) : la vidéo garde ses proportions, entière, sans bande de couleur
   au-dessus ni en dessous (avant : hauteur de l'écran, vidéo au milieu entre deux bandes) — demande du 18/10 */
@media (max-aspect-ratio: 1/1) {
  .projet-entete .projet-r-hero video { height: auto !important; aspect-ratio: auto; object-fit: cover; }
}

.studio-moire .et_pb_row.projet-r-titre { margin-top: clamp(20px, 2.4vw, 38px) !important;   /* espace sous la vidéo, plus serré que sous la photo de Studio */ margin-bottom: clamp(16px, 2.3vw, 40px) !important; }   /* accroche juste en dessous */
.projet-titre .et_pb_text_inner,
.projet-titre p {
  font-family: 'Space Grotesk', Helvetica, Arial, Lucida, sans-serif !important;
  font-weight: 480 !important;   /* police variable chargée sur les pages projets (graisses intermédiaires possibles) */
  text-transform: uppercase;
  font-size: clamp(44px, 8vw, 130px) !important;
  line-height: .95 !important;
  letter-spacing: -.01em !important;
  color: #000 !important;
  text-align: right !important;
}
/* accroche sous le titre, à gauche, un peu plus petite (comme chez Studio Moiré) */
.studio-moire .et_pb_row.projet-r-accroche { margin-bottom: clamp(40px, 5.5vw, 90px) !important; }
.projet-accroche .et_pb_text_inner,
.projet-accroche p {
  font-family: 'Space Grotesk', Helvetica, Arial, Lucida, sans-serif !important;
  font-weight: 440 !important;
  text-transform: uppercase;
  font-size: clamp(34px, 5.4vw, 90px) !important;
  line-height: .95 !important;
  letter-spacing: -.01em !important;
  color: #000 !important;
  text-align: left !important;
}
.projet-intro .et_pb_row.studio-r-grille { margin-bottom: clamp(40px, 5vw, 80px) !important; }   /* espace avant les visuels */

/* grands visuels : presque toute la largeur, espacés régulièrement */
.projet-medias .et_pb_row.projet-r-large {
  width: calc(100% - 2 * clamp(20px, 3vw, 44px)) !important;
  max-width: none !important;
}
.projet-medias .projet-r-large .et_pb_image,
.projet-medias .projet-r-large .et_pb_image_wrap,
.projet-medias .projet-r-large .et_pb_image img { width: 100% !important; max-width: none !important; }
/* même espace entre tous les visuels, dans une rangée comme d'une rangée à l'autre */
.projet-medias { --projet-ecart: clamp(48px, 5.5vw, 100px); }
html body .projet-medias .et_pb_row.projet-r-large { padding-top: 0 !important; padding-bottom: 0 !important; margin-bottom: var(--projet-ecart) !important; }
html body .projet-medias .projet-r-large .et_pb_module.et_pb_image:not(:last-child) { margin-bottom: var(--projet-ecart) !important; }
/* palette de couleurs : un grand visuel comme les autres, 6 aplats avec leur rôle et leur code */
html body .projet-medias .projet-r-large .et_pb_module.projet-palette:not(:last-child) { margin-bottom: var(--projet-ecart) !important; }
.projet-medias .projet-video video { display: block; width: 100% !important; height: auto; }
/* accordéon : la zone survolée (ou touchée) s'élargit et montre son rôle et son code ;
   par défaut, la première zone est la plus large (motion.js gère la classe is-actif) */
.projet-palette-bandes {
  display: flex;
  height: clamp(110px, 9vw, 170px);
}
.projet-palette-bande {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .2em;
  padding: clamp(12px, 1.4vw, 24px);
  color: #000;
  /* valeurs : même style que les légendes des projets de l'accueil */
  font-family: 'Inter Tight', Helvetica, Arial, Lucida, sans-serif;
  font-weight: 500;
  font-size: 27px;
  letter-spacing: 1px;
  line-height: 1.2;
  cursor: pointer;
  outline: none;
  transition: flex-grow .7s var(--lm-ease);
}
.projet-palette-bande.is-fonce { color: #fff; }
.projet-palette-bande span {
  display: block;
  white-space: nowrap;
  opacity: 0;
  translate: 0 8px;
  transition: opacity .3s ease, translate .3s ease;
}
.projet-palette-bande.is-actif,
.projet-palette-bandes:not([data-palette]) .projet-palette-bande:first-child { flex-grow: 5; }
.projet-palette-bande.is-actif span,
.projet-palette-bandes:not([data-palette]) .projet-palette-bande:first-child span {
  opacity: 1;
  translate: none;
  transition-delay: .25s;   /* les valeurs apparaissent une fois la zone ouverte */
}
.projet-palette-bande:focus-visible { box-shadow: inset 0 0 0 2px currentColor; }
@media (max-width: 980px) {
  .projet-palette-bande { font-size: 25px; }
}
@media (max-width: 767px) {
  .projet-palette-bandes { height: clamp(90px, 26vw, 130px); }
  .projet-palette-bande { padding: 10px; font-size: 3.6vw; font-weight: 600; }
  .projet-palette-bandes[data-palette] .projet-palette-bande:not(.is-actif) { padding-inline: 0; }   /* les zones fermées ne prennent pas de place inutile */
  .projet-palette-bande.is-actif,
  .projet-palette-bandes:not([data-palette]) .projet-palette-bande:first-child { flex-grow: 10; }
}
@media (max-width: 419px) {
  .projet-palette-bande { font-size: 15px; }
  .projet-palette-bande.is-actif,
  .projet-palette-bandes:not([data-palette]) .projet-palette-bande:first-child { flex-grow: 9; }
}
@media (prefers-reduced-motion: reduce) {
  .projet-palette-bande, .projet-palette-bande span { transition: none; }
}

/* projet suivant */
.studio-moire .et_pb_row.projet-r-suivant-label { margin-top: clamp(80px, 10vw, 160px) !important; margin-bottom: clamp(10px, 1.5vw, 24px) !important; }
.projet-suivant-label p {
  font-family: 'Inter Tight', Helvetica, Arial, Lucida, sans-serif !important;
  font-size: clamp(18px, 1.8vw, 26px) !important;
  text-align: center !important;
  color: #000 !important;
}
.studio-moire .et_pb_row.projet-r-suivant-defile { width: 100% !important; overflow-x: clip; margin-bottom: clamp(24px, 3vw, 50px) !important; }
.studio-moire .et_pb_row.projet-r-suivant-media { width: 100% !important; }
.projet-r-suivant-media .et_pb_code { margin: 0 !important; }
.projet-r-suivant-media video { display: block; width: 100% !important; height: auto; }
html body #page-container .studio-defile a.studio-defile-lien { color: inherit !important; text-decoration: none !important; display: block; }
/* en-tête sur vidéo sombre (ex. Frigerio Avocat) : logo, menu et bouton du menu mobile en blanc */
body.single-project:has(.projet-entete-sombre) .et-l--header .et_pb_menu__logo img { filter: brightness(0) invert(1); }
body.single-project:has(.projet-entete-sombre) .et-l--header .et-menu > li > a,
body.single-project:has(.projet-entete-sombre) .et-l--header .et-menu > li > a .lm-flip,
body.single-project:has(.projet-entete-sombre) .et-l--header .mobile_menu_bar::before { color: #fff !important; }
/* =====================================================================
   Page Contact : textes proportionnels à la largeur de l'écran, sans palier
   Les tailles passent exactement par celles d'avant à 390px (smartphone), 820px (tablette)
   et 1574px (référence validée sur ordinateur), et évoluent en continu entre et au-delà.
   Avant : tailles fixes de 981 à 2560px, puis deux paliers (tablette, smartphone).
   ===================================================================== */
body.page-id-936 {
  --ct-titre: max(28px, calc(22.6px + 1.395vw));    /* 28 → 34 */
  --ct-champ: max(32px, 7.62vw);                     /* 32 → 62 */
  --ct-lien:  max(42px, calc(18.4px + 6.05vw));      /* 42 → 68 */
  --ct-mail:  max(32px, calc(3px + 7.44vw));         /* 32 → 64 */
  --ct-bouton: 18px;
}
@media (min-width: 768px) { body.page-id-936 { --ct-bouton: 26px; } }
@media (min-width: 821px) {
  body.page-id-936 {
    --ct-titre: calc(23.1px + 1.326vw);              /* 34 → 44 */
    --ct-lien:  calc(22.3px + 5.57vw);               /* 68 → 110 */
    --ct-mail:  calc(14px + 6.1vw);                  /* 64 → 110 */
    --ct-bouton: calc(21.65px + .53vw);              /* 26 → 30 */
  }
}
@media (min-width: 1575px) {
  body.page-id-936 { --ct-titre: 2.8vw; --ct-lien: 6.99vw; --ct-mail: 6.99vw; --ct-bouton: 1.906vw; }
}
/* EMAIL / MESSAGE (demande du 14/10) : même rapport qu'à 390px avec le texte du bouton ENVOYER placé
   dessous (32px pour 24px, soit × 1,33) — tablette : bouton 26px → 35px ; ordinateur : bouton 60px → 80px */
@media (min-width: 768px) { body.page-id-936 { --ct-champ: 35px; } }
@media (min-width: 981px) { body.page-id-936 { --ct-champ: 80px; } }
/* « Retrouvez-moi sur » et INSTAGRAM / YOUTUBE : tailles de wearemoire.com/contact (demande du 14/10) —
   phrase 26px partout ; liens 60px à 352px de large → 140px à 1920px, en continu entre les deux, 140px au-delà */
html body.page-id-936 { --ct-titre: 26px !important; --ct-lien: clamp(60px, calc(42px + 5.102vw), 140px) !important; }
/* petits titres « Envoyez-moi un email », « Retrouvez-moi sur » */
html body.page-id-936 #page-container .et_pb_heading .et_pb_heading_container :is(h1, h2, h3, h4, h5, h6) {
  font-size: var(--ct-titre) !important;
  letter-spacing: -.068em !important;
}
/* champs EMAIL et MESSAGE */
html body.page-id-936 #page-container .et_pb_contact_form .et_pb_contact_field .input,
html body.page-id-936 #page-container .et_pb_contact_form .et_pb_contact_field textarea { font-size: var(--ct-champ) !important; line-height: 1.1 !important; }   /* interligne proportionnel : sinon le texte est rogné */
/* le texte indicatif (« EMAIL », « MESSAGE ») a sa propre taille dans Divi : il suit celle du champ */
html body.page-id-936 #page-container .et_pb_contact_form .et_pb_contact_field .input::placeholder,
html body.page-id-936 #page-container .et_pb_contact_form .et_pb_contact_field textarea::placeholder { font-size: var(--ct-champ) !important; line-height: 1.1 !important; }
html body.page-id-936 #page-container .et_pb_contact_form .et_pb_contact_field .input::-webkit-input-placeholder,
html body.page-id-936 #page-container .et_pb_contact_form .et_pb_contact_field textarea::-webkit-input-placeholder { font-size: var(--ct-champ) !important; line-height: 1.1 !important; }
html body.page-id-936 #page-container .et_pb_contact_form .et_pb_contact_field .input::-moz-placeholder,
html body.page-id-936 #page-container .et_pb_contact_form .et_pb_contact_field textarea::-moz-placeholder { font-size: var(--ct-champ) !important; line-height: 1.1 !important; }
/* grands liens INSTAGRAM / YOUTUBE : un par ligne, centrés (plus de largeur de bloc à régler) */
/* (bloc ajusté à son texte : « display: table » ne masquait plus la copie du mot utilisée au survol) */
html body.page-id-936 #page-container .reveal-link { font-size: var(--ct-lien) !important; display: block; width: -moz-fit-content; width: fit-content; margin-inline: auto; overflow: hidden; }
html body.page-id-936 #page-container .reveal-link + .reveal-link { margin-top: .064em; }
html body.page-id-936 #page-container .bloc-1-contact .et_pb_code { max-width: none !important; }
/* « Nous écrire » et l'adresse e-mail */
html body.page-id-936 #page-container .et-l--post .et_pb_section_1 .et_pb_text,
html body.page-id-936 #page-container .et-l--post .et_pb_section_1 .et_pb_text p,
html body.page-id-936 #page-container .et-l--post .et_pb_section_1 .et_pb_text a { font-size: var(--ct-mail) !important; }
/* adresse e-mail sur deux lignes : interligne proportionnel. Sur smartphone, Divi le règle à 0 et l'écart
   entre les lignes venait d'une valeur fixe de 28px (bon à 390px, chevauchement au-delà) */
html body.page-id-936 #page-container .et-l--post .et_pb_section_1 .et_pb_text a { line-height: 1.1 !important; display: inline-block; }
@media (max-width: 767px) {
  html body.page-id-936 #page-container .et-l--post .et_pb_section_1 .et_pb_text a { line-height: .9 !important; }
}
/* bouton ENVOYER */
html body.page-id-936 #page-container .et_pb_section .et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button,
html body.page-id-936 #page-container .et_pb_section .et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:hover { font-size: var(--ct-bouton) !important; }
@media (min-width: 981px) {
  html body.page-id-936 #page-container .et_pb_contact_form .et_pb_contact_field textarea { height: 1.25em !important; min-height: 1.25em !important; }
  html body.page-id-936 #page-container .et_pb_section .et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button,
  html body.page-id-936 #page-container .et_pb_section .et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:hover { padding: .4em 1.67em !important; }
}
/* =====================================================================
   Menu mobile et tablette : liens plus gros, proportionnels à l'écran
   Avant : entre 46 et 64px. La taille suit maintenant la largeur (le mot le plus long,
   INSTAGRAM, occupe environ 80 % de l'écran) sans que les 5 liens dépassent en hauteur.
   Téléphone à l'horizontale (moins de 500px de haut) : réglage existant conservé.
   ===================================================================== */
@media (max-width: 980px) and (min-height: 501px) {
  html body .et-l--header .et_pb_menu .et_mobile_menu li a,
  html body.et-db #et-boc .et-l.et-l--header .et_pb_module.et_pb_menu .et_mobile_menu li a {
    font-size: clamp(40px, min(15vw, 12.5svh), 160px) !important;
  }
}
/* souris sur le menu ouvert (fenêtre étroite sur ordinateur) :
   rond noir, visible sur le fond violet, glissé SOUS les liens (motion.js le pose dans le menu) ;
   blanc sous le lien de la page en cours, qui est écrit en noir ; petit entre les liens */
html.menu-mobile-ouvert .lm-cursor i { background: #000 !important; }
.lm-under[data-blanc] i { background: #fff; }
.lm-under.is-on.is-petit i { transform: scale(.1818); }
html body .et-l--header .et_mobile_menu.lm-under-host { position: fixed !important; }   /* le menu reste plein écran */
/* pas de rectangle sombre ni de texte atténué au survol d'un lien du menu mobile (réglage Divi par défaut) */
html body .et-l--header .et_pb_menu .et_mobile_menu li a:hover,
html body .et-l--header .et_pb_menu .et_mobile_menu li a:focus,
html body.et-db #et-boc .et-l.et-l--header .et_pb_module.et_pb_menu .et_mobile_menu li a:hover,
html body.et-db #et-boc .et-l.et-l--header .et_pb_module.et_pb_menu .et_mobile_menu li a:focus {
  background-color: transparent !important;
  opacity: 1 !important;
}
/* ---------- Menu mobile : centrage et fermeture ---------- */
@keyframes lm-fade-out { to { opacity: 0; } }
@media (max-width: 980px) {
  /* le rond du curseur est ajouté à la fin de la liste : le dernier LIEN reste bien celui qui porte
     la marge de centrage (la règle d'origine visait « le dernier élément », qui devenait le rond) */
  html.menu-mobile-ouvert .et_pb_menu .et_mobile_menu li:first-of-type,
  html.lm-menu-fermeture .et_pb_menu .et_mobile_menu li:first-of-type { margin-top: auto !important; }
  html.menu-mobile-ouvert .et_pb_menu .et_mobile_menu li:last-of-type,
  html.lm-menu-fermeture .et_pb_menu .et_mobile_menu li:last-of-type { margin-bottom: auto !important; }

  /* fermeture : le menu garde sa mise en page et s'efface en fondu… */
  html.lm-menu-fermeture .et_pb_menu .mobile_nav .et_mobile_menu {
    display: flex !important;
    flex-direction: column;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding-top: 120px !important;
    padding-bottom: 120px !important;
    animation: lm-fade-out .3s ease both !important;
    pointer-events: none;
  }
  /* …pendant que le logo et la croix repassent du blanc au noir au même rythme */
  /* (à la fermeture seulement : à l'ouverture, le fond arrive d'un coup et ils changent en même temps que lui) */
  html.lm-menu-fermeture .et-l--header .et_pb_menu .et_pb_menu__logo img { transition: filter .3s ease; }
  html.lm-menu-fermeture body .et-l--header .et_pb_menu .mobile_nav .mobile_menu_bar::before { transition: color .3s ease !important; }   /* une règle du thème l'interdisait */
}
@media (max-width: 980px) and (max-height: 500px) {
  html.lm-menu-fermeture .et_pb_menu .mobile_nav .et_mobile_menu { padding-top: 80px !important; padding-bottom: 80px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html.lm-menu-fermeture .et_pb_menu .mobile_nav .et_mobile_menu { animation-duration: .01s !important; }
  .et-l--header .et_pb_menu .et_pb_menu__logo img,
  html body .et-l--header .et_pb_menu .mobile_nav .mobile_menu_bar::before { transition: none !important; }
}
/* menu mobile : le lien de la page ouverte est en noir sur TOUTES les pages.
   Sur l'accueil, c'est « Projets » (les projets sont sur l'accueil) ; l'en-tête de l'accueil le mettait
   en blanc, et le rond blanc du curseur le faisait disparaître. */
@media (max-width: 980px) {
  html body .et-l--header .et_pb_menu .et_mobile_menu li.current-menu-item > a,
  html body .et-l--header .et_pb_menu .et_mobile_menu li.current_page_item > a,
  html body.et-db #et-boc .et-l.et-l--header .et_pb_module.et_pb_menu .et_mobile_menu li.current-menu-item > a,
  html body.et-db #et-boc .et-l.et-l--header .et_pb_module.et_pb_menu .et_mobile_menu li.current_page_item > a { color: #000 !important; }
}
/* =====================================================================
   Pied de page noir sur tout le site : chaque page se termine comme l'accueil commence
   (noir → blanc → noir). Logo, textes, trait et liens en blanc ; l'adresse e-mail reste
   dans le violet du site.
   ===================================================================== */
/* fond : dégradé du plus sombre (haut) au plus clair (bas), voir « NOIRS DU SITE » en fin de fichier */
html body .et-l--footer .et_pb_section,
html body.et-db #et-boc .et-l.et-l--footer .et_pb_section { background-color: var(--lm-noir, #1b1b1b) !important; background-image: linear-gradient(180deg, var(--lm-noir-profond, #0d0d0d) 0%, var(--lm-noir-clair, #262626) 100%) !important; }
html body .et-l--footer .et_pb_text,
html body .et-l--footer .et_pb_text p,
html body .et-l--footer .et_pb_text span,
html body .et-l--footer .et_pb_text a:not([href^="mailto:"]),
html body.et-db #et-boc .et-l.et-l--footer .et_pb_module.et_pb_text,
html body.et-db #et-boc .et-l.et-l--footer .et_pb_module.et_pb_text p,
html body.et-db #et-boc .et-l.et-l--footer .et_pb_module.et_pb_text span:not(:has(> a[href^="mailto:"])),
html body.et-db #et-boc .et-l.et-l--footer .et_pb_module.et_pb_text a:not([href^="mailto:"]) { color: #fff !important; }
/* logo noir affiché en blanc, trait de séparation blanc */
html body .et-l--footer .et_pb_image img { filter: brightness(0) invert(1); }
html body .et-l--footer .et_pb_divider::before,
html body.et-db #et-boc .et-l.et-l--footer .et_pb_divider::before { border-top-color: #fff !important; }
/* l'e-mail et son soulignement gardent le violet */
html body .et-l--footer .et_pb_text span:has(> a[href^="mailto:"]) { color: #6745F7 !important; text-decoration-color: #6745F7 !important; }
/* curseur sous l'e-mail du pied de page : blanc */
.lm-cursor[data-blanc] i { background: #fff !important; }
/* ---------- Pied de page découvert par le contenu (classe lm-pied posée par motion.js) ---------- */
/* la page passe devant : il lui faut un fond opaque et un calque au-dessus du pied de page */
html.lm-pied #main-content { position: relative; z-index: 1; }
html.lm-pied body:not(.home) #main-content { background-color: #fff; }
/* le pied de page reste collé en bas de l'écran, sous la page, jusqu'à ce qu'elle le découvre */
html.lm-pied .et-l--footer { position: sticky; bottom: 0; z-index: 0; }
/* voile noir qui s'efface pendant la découverte (opacité réglée par motion.js) */
.lm-pied-voile {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #000;
  opacity: 0;
  pointer-events: none;
}
.et-l--footer .et_pb_section { position: relative; }
/* =====================================================================
   Page Studio : mêmes tailles de texte que la page « about » de Studio Moiré
   (mesurées : titre 200px, grande phrase 90px, textes 26px ; sur smartphone 120px, 44px, 22px
   et liste alignée à droite). Les tailles passent en continu d'un format à l'autre.
   ===================================================================== */
/* grand titre qui défile : 120px sur smartphone → 200px à partir de 650px de large */
html body.page-id-10 .studio-defile .et_pb_text_inner,
html body.page-id-10 .studio-defile p,
html body.error404 .studio-defile .et_pb_text_inner,
html body.error404 .studio-defile p,
html body.search .studio-defile .et_pb_text_inner,
html body.search .studio-defile p { font-size: clamp(120px, 30.8vw, 200px) !important; }   /* 404 et recherche : mêmes tailles que Studio */
/* grande phrase : 44px sur smartphone → 90px à partir de 800px de large */
html body.page-id-10 .studio-manifeste .et_pb_text_inner,
html body.page-id-10 .studio-manifeste p,
html body.error404 .studio-manifeste .et_pb_text_inner,
html body.error404 .studio-manifeste p { font-size: clamp(44px, 11.3vw, 90px) !important; }
/* liste, texte et présentation : 22px, puis 26px à partir de la tablette */
html body.page-id-10 .studio-liste p,
html body.page-id-10 .studio-colonnes p,
html body.page-id-10 .studio-bio p { font-size: 22px !important; line-height: 1.2 !important; }
@media (min-width: 768px) {
  html body.page-id-10 .studio-liste p,
  html body.page-id-10 .studio-colonnes p,
  html body.page-id-10 .studio-bio p { font-size: 26px !important; line-height: 1.23 !important; }
}
/* à 26px, deux colonnes de texte ne tiennent qu'à partir de 1200px de large */
@media (max-width: 1199px) {
  html body.page-id-10 .studio-colonnes .et_pb_text_inner { column-count: 1; }
}
/* smartphone : la liste « Branding, Digital… » alignée à droite, comme chez Studio Moiré */
@media (max-width: 559px) {
  html body.page-id-10 .studio-liste p { text-align: right !important; }
}
/* =====================================================================
   Page Contact : section « Nous écrire / hello@lillysou.com » en noir,
   découverte par le formulaire comme le pied de page (classe posée par motion.js)
   ===================================================================== */
html body.page-id-936 #page-container .et-l--post .et_pb_section.et_pb_section_1 {
  background-color: #000 !important;
  /* dégradé : noir en haut, un peu plus clair en bas (mêmes teintes que la section « On CRÉE… » de l'accueil, inversées) */
  background-image: linear-gradient(180deg, #000 0%, #1c1c1c 100%) !important;
}
html body.page-id-936 #page-container .et-l--post .et_pb_section_1 .et_pb_text,
html body.page-id-936 #page-container .et-l--post .et_pb_section_1 .et_pb_text p { color: #fff !important; }
/* les effets de défilement Divi de cette section (fondu, déplacement) se calent sur sa position à l'écran :
   collée en bas, elle resterait à moitié transparente. Ils sont remplacés par l'effet de découverte. */
html.lm body.page-id-936 .et-l--post .et_pb_section.et_pb_section_1,
html.lm body.page-id-936 .et-l--post .et_pb_section_1 .et_pb_row { transform: none !important; opacity: 1 !important; filter: none !important; }
html.lm-contact-dessous body.page-id-936 .et-l--post .et_pb_section.et_pb_section_0 { position: relative; z-index: 100; }
html.lm-contact-dessous body.page-id-936 .et-l--post .et_pb_section.et_pb_section_1 { position: sticky !important; bottom: 0; z-index: 0 !important; }
html body.page-id-936 .et-l--post .et_pb_section_1 { position: relative; }
/* section plus haute : de l'air au-dessus de « Nous écrire » et sous l'adresse e-mail */
html body.page-id-936 #page-container .et-l--post .et_pb_section.et_pb_section_1 {
  padding-top: min(clamp(90px, 10vw, 190px), 18vh) !important;      /* agrandi le 14/10 (avant : 40px, 5vw, 90px) */
  padding-bottom: min(clamp(130px, 15vw, 280px), calc(22vh - clamp(24px, 3.2vw, 64px))) !important;  /* agrandi le 14/10 (avant : 80px, 10vw, 180px) — limité à la hauteur d'écran : la section doit tenir dans l'écran pour l'effet de découverte */
}
/* page 404, très petit téléphone : « DÉCOUVERTES » est plus long que le plus long mot de la page Studio */
@media (max-width: 359px) {
  html body.error404 .studio-manifeste .et_pb_text_inner,
  html body.error404 .studio-manifeste p { font-size: 40px !important; }
}
/* =====================================================================
   Pages projets (jdtravaux, Frigerio…) : mêmes tailles que la page Studio,
   calées sur la page projet de Studio Moiré (titre 160px, accroche 90px, textes 26px,
   projet suivant 200px ; sur smartphone 44px, 22px, 120px et liste à droite).
   ===================================================================== */
/* nom du projet, à droite : grandit avec l'écran jusqu'à 160px.
   Sur smartphone il reste à 44px pour que « CINDY FRIGERIO » tienne sur une ligne. */
html body.single-project .projet-titre .et_pb_text_inner,
html body.single-project .projet-titre p { font-size: clamp(38px, 11.1vw, 160px) !important; }
/* accroche, à gauche : comme la grande phrase de Studio (un peu moins sur smartphone,
   pour que « IDENTITÉ SOLIDE » et « CLARTÉ, RIGUEUR » tiennent sur une ligne) */
html body.single-project .projet-accroche .et_pb_text_inner,
html body.single-project .projet-accroche p { font-size: clamp(30px, 8.6vw, 90px) !important; }   /* toujours nettement plus petite que le nom du projet */
/* prestations et texte de présentation : 22px, puis 26px à partir de la tablette */
html body.single-project .studio-liste p,
html body.single-project .studio-colonnes p { font-size: 22px !important; line-height: 1.2 !important; }
@media (min-width: 768px) {
  html body.single-project .studio-liste p,
  html body.single-project .studio-colonnes p { font-size: 26px !important; line-height: 1.23 !important; }
}
@media (max-width: 1199px) {
  html body.single-project .studio-colonnes .et_pb_text_inner { column-count: 1; }
}
/* smartphone : prestations alignées à droite, comme sur Studio */
@media (max-width: 559px) {
  html body.single-project .studio-liste p { text-align: right !important; }
}
/* « Projet suivant » : son nom qui défile à la taille du grand titre de Studio */
html body.single-project .projet-suivant .studio-defile .et_pb_text_inner,
html body.single-project .projet-suivant .studio-defile p { font-size: clamp(120px, 30.8vw, 200px) !important; }
html body.single-project .projet-suivant-label p { font-size: 24px !important; }
@media (min-width: 768px) { html body.single-project .projet-suivant-label p { font-size: 26px !important; } }
/* grille de projets : un nom sans page (pas de lien) ne réagit pas comme un lien */
.project-grid .project-item a:not([href]) { cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .project-grid .project-item a:not([href]):hover { translate: none; }
}
/* palette : taille des valeurs et hauteur calculées par motion.js d'après la largeur de la zone ouverte */
.projet-palette-bandes[data-palette] { height: var(--pal-h, auto) !important; min-height: 70px; }
.projet-palette-bandes[data-palette] .projet-palette-bande { font-size: var(--pal-fs, 27px) !important; }
.projet-palette-bandes.lm-pal-mesure .projet-palette-bande { transition: none !important; }
/* pied de page, ordinateur et tablette : le texte « Studio. Très créatif. Aix-en-Provence. » n'est plus
   limité à sa colonne étroite ; son bloc s'élargit dans l'espace libre avant les liens, ce qui permet
   de l'afficher beaucoup plus grand sans débordement (il passe à la ligne entre les phrases) */
@media (min-width: 768px) {
  html body .et-l--footer .et_pb_text_0_tb_footer { width: 56vw !important; max-width: none !important; }
}
@media (min-width: 981px) {
  html body .et-l--footer .et_pb_text_0_tb_footer { width: 60vw !important; }
}
/* =====================================================================
   Page de résultats de recherche, dans le style de la page Studio :
   « 2 projets pour « … » » en grand titre qui défile, champ de recherche à la taille
   de la grande phrase de Studio (90px, 44px sur smartphone).
   ===================================================================== */
body.search .et-l--body .et_pb_section.et_pb_section_0_tb_body { overflow-x: clip; }
/* titre qui défile, sur toute la largeur de l'écran */
body.search .lm-search-head { margin: 0 0 clamp(40px, 5vw, 80px); text-align: left; }
body.search .lm-search-defile {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow-x: clip;
  overflow-y: visible;
  margin-bottom: clamp(24px, 3vw, 50px);
}
/* champ de recherche : même police, même graisse et même taille que la grande phrase de Studio,
   aligné sur la marge du site (3 % de la largeur) */
body.search .lm-search-head form {
  --rech-g: clamp(20px, 3vw, 44px);
  width: calc(100vw - 2 * var(--rech-g));
  margin-left: calc(50% - 50vw + var(--rech-g));
}
body.search .lm-search-head .custom-search {
  max-width: none !important;
  width: 100%;
  margin: 0 !important;
  gap: .2em;
  border-bottom-width: clamp(3px, .35vw, 5px) !important;
  font-size: clamp(44px, 11.3vw, 90px);
}
body.search .lm-search-head .custom-search input {
  font-family: 'Space Grotesk', Helvetica, Arial, Lucida, sans-serif !important;
  font-weight: 500 !important;
  font-size: 1em !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #000;
  height: auto;
}
body.search .lm-search-head .custom-search button { font-size: inherit !important; }
body.search .lm-search-head .custom-search button svg { width: .6em !important; height: .6em !important; }
/* palette : le rôle de la couleur en gras et en capitales, son code en graisse normale */
.projet-palette-bande .projet-palette-role { font-weight: 700; text-transform: uppercase; }
.projet-palette-bande .projet-palette-code { font-weight: 400; }
/* recherche : le grand titre démarre à la même hauteur que celui de la page Studio */
body.search .lm-search-defile { margin-top: -4px; }
@media (min-width: 768px)  { body.search .lm-search-defile { margin-top: -6px; } }
@media (min-width: 981px)  { body.search .lm-search-defile { margin-top: -10px; } }
@media (min-width: 1200px) { body.search .lm-search-defile { margin-top: -16px; } }/* palette : Space Grotesk (la police des titres) et lignes resserrées */
html body .projet-palette-bande {
  font-family: 'Space Grotesk', Helvetica, Arial, Lucida, sans-serif;
  line-height: 1.05;
  letter-spacing: 0;
  gap: .06em;
}
/* recherche : les visuels des résultats partent de la même marge que le champ de recherche */
html body.search .et-l--body .et_pb_row.et_pb_row_0_tb_body {
  --rech-g: clamp(20px, 3vw, 44px);
  width: calc(100vw - 2 * var(--rech-g)) !important;
  max-width: none !important;
}
/* recherche : visuels entiers et légendes identiques à celles des projets de l'accueil
   (Inter Tight, centrées sous le visuel, mêmes tailles et mêmes écarts à chaque format) */
html body.search .et-l--body .et_pb_post .entry-featured-image-url img { display: block; width: 100%; height: auto; }
html body.search #et-boc .et-l--body .et_pb_post .et_pb_image_container { margin-bottom: 0 !important; }
html body.search #et-boc .et-l--body .et_pb_post .entry-title,
html body.search #et-boc .et-l--body .et_pb_post .entry-title a {
  font-family: 'Inter Tight', Helvetica, Arial, Lucida, sans-serif !important;
  font-weight: 500 !important;
  font-size: 27px !important;
  line-height: 1.2 !important;
  letter-spacing: 1px !important;
  text-align: center !important;
  color: #000 !important;
}
html body.search #et-boc .et-l--body .et_pb_post .entry-title { margin: 30px 0 0 !important; padding: 0 !important; }
@media (max-width: 980px) {
  html body.search #et-boc .et-l--body .et_pb_post .entry-title,
  html body.search #et-boc .et-l--body .et_pb_post .entry-title a { font-size: 25px !important; }
  html body.search #et-boc .et-l--body .et_pb_post .entry-title { margin-top: 10px !important; }
}
@media (max-width: 767px) {
  html body.search #et-boc .et-l--body .et_pb_post .entry-title,
  html body.search #et-boc .et-l--body .et_pb_post .entry-title a { font-size: 4.6vw !important; font-weight: 600 !important; }
  html body.search #et-boc .et-l--body .et_pb_post .entry-title { margin-top: 5px !important; }
}
@media (max-width: 419px) {
  html body.search #et-boc .et-l--body .et_pb_post .entry-title,
  html body.search #et-boc .et-l--body .et_pb_post .entry-title a { font-size: 19px !important; }
}html body.search #et-boc .et-l--body .et_pb_post .entry-featured-image-url { margin-bottom: 0 !important; }   /* l'écart visuel → légende est celui de l'accueil (30 / 10 / 5 px) */

/* recherche sans résultat : même construction et mêmes tailles que la grille de texte de la page Studio
   (liste à gauche, phrase à droite ; empilées sous 1200px ; liste à droite sur téléphone) */
html body.search .et-l--body .entry { text-align: left; color: #000; font-size: 22px; }
html body.search .lm-search-vide {
  display: grid;
  gap: clamp(28px, 4vw, 40px) 30px;
  font-family: 'Inter Tight', Helvetica, Arial, Lucida, sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: #000;
  padding-bottom: clamp(60px, 8vw, 140px);
}
html body.search .lm-search-vide ul { list-style: none; margin: 0; padding: 0 !important; }
html body.search .lm-search-vide li { line-height: 1.23; }
html body.search .lm-search-vide p { margin: 0; padding: 0 !important; font-size: inherit; line-height: 1.23; color: #000; }
html body.search #et-boc .et-l--body .lm-search-vide a { color: #000 !important; text-decoration: none; }
@media (min-width: 768px) { html body.search .lm-search-vide { font-size: 26px; } }

/* pied de page : plus d'air au-dessus du texte (avant : 54px, 50px sur tablette et téléphone) */
html body .et-l--footer .et_pb_section.et_pb_section_0_tb_footer { padding-top: clamp(120px, 11.5vw, 220px) !important; }
/* accueil : plus d'air sous « On CRÉE… Chaque projet commence par une idée… » (avant : 100px, 80px sur téléphone) */
html body.home .et-l--post .et_pb_section_1 .et_pb_row.et_pb_row_3 { padding-bottom: clamp(110px, 10vw, 190px) !important; }

/* pied de page : logo à la même taille que celui du menu (60px de haut, 45px sur téléphone ; avant : 48px partout) */
html body .et-l--footer .et_pb_image_0_tb_footer img { height: 60px !important; max-height: none !important; width: auto !important; }
@media (max-width: 767px) {
  html body .et-l--footer .et_pb_image_0_tb_footer img { height: 45px !important; }
}

/* Contact : le bloc noir « Nous écrire » est fixé derrière le formulaire. À certains zooms, un interstice
   d'un demi-pixel entre le menu et le formulaire le laissait voir (fin trait noir sous le menu) :
   le contenu déborde de 2px de blanc vers le haut pour fermer le raccord. */
html.lm-contact-dessous body.page-id-936 #main-content { box-shadow: 0 -2px 0 0 #fff; }
/* en haut de page, les blocs noirs fixés derrière le contenu sont masqués (voir setupRaccordHaut) */
html.lm-haut.lm-pied .et-l--footer,
html.lm-haut.lm-contact-dessous body.page-id-936 .et-l--post .et_pb_section.et_pb_section_1 { visibility: hidden; }
/* accueil : phrase sous « CREATIVE » — mêmes taille et placement que « Your portfolio website. Ready in minutes. »
   sur woop.site : 50px / interligne 60px, centrée, sur ordinateur ; 26px / 31px, alignée à gauche, sur tablette
   et téléphone. La marge du haut redonne le même écart visuel sous les capitales du titre. */
html body.home .et-l--post .et_pb_section_0 .hero-sous-titre.et_pb_text { max-width: none !important; width: 100% !important; margin-top: 14px !important; }
html body.home .et-l--post .et_pb_section_0 .hero-sous-titre p { font-size: 50px !important; line-height: 60px !important; font-weight: 500; padding-bottom: 0 !important; }
@media (max-width: 980px) {
  html body.home .et-l--post .et_pb_section_0 .hero-sous-titre.et_pb_text { margin-top: clamp(6px, 1.4vw, 12px) !important; }
  html body.home .et-l--post .et_pb_section_0 .hero-sous-titre.et_pb_text,
  html body.home .et-l--post .et_pb_section_0 .hero-sous-titre p { text-align: left !important; }
  html body.home .et-l--post .et_pb_section_0 .hero-sous-titre p { font-size: 26px !important; line-height: 31.2px !important; }
}

/* ---- Lexend remplace Inter Tight (le nom « Inter Tight » pointe vers Lexend, voir lillysou-motion.php) ---- */

/* accueil, phrase sous « CREATIVE » : Lexend est plus large et plus noire qu'Inter Tight —
   graisse normale, espacement normal des lettres, taille un peu réduite (référence : sous-titre de woop.site) */
html body.home .et-l--post .et_pb_section_0 .hero-sous-titre p {
  font-size: 44px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;   /* servie en Lexend 400 (un cran plus léger, voir lillysou-motion.php) : rendu inchangé */
  letter-spacing: normal !important;   /* même espacement que le texte de la section suivante */
}
@media (max-width: 980px) {
  html body.home .et-l--post .et_pb_section_0 .hero-sous-titre p { font-size: 24px !important; line-height: 1.2 !important; }
}

/* Studio : long texte de présentation sur une seule colonne, avec intertitres */
html body.page-id-10 .studio-colonnes .et_pb_text_inner { column-count: 1 !important; }
html body.page-id-10 .studio-colonnes h3 {
  font-family: 'Space Grotesk', Helvetica, Arial, Lucida, sans-serif !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #000 !important;
  margin: 2.2em 0 .7em !important;
  padding: 0 !important;
}
html body.page-id-10 .studio-colonnes h3:first-child { margin-top: 0 !important; }
html body.page-id-10 .studio-colonnes p { margin: 0 0 .75em !important; padding: 0 !important; }
html body.page-id-10 .studio-colonnes p:last-child { margin-bottom: 0 !important; }
@media (min-width: 768px) { html body.page-id-10 .studio-colonnes h3 { font-size: 26px !important; } }

/* bouton « Écrivez-moi » : pastille au trait fin, en capitales (référence : bouton de woop.site) */
html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton {
  display: inline-block;
  margin-top: clamp(24px, 3vw, 44px);
  padding: .85em 1.9em !important;
  border: 1px solid #000 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #000 !important;
  font-family: 'Inter Tight', Helvetica, Arial, Lucida, sans-serif !important;
  font-size: clamp(18px, 2vw, 30px) !important;
  font-weight: 500 !important;   /* même graisse que le bouton ENVOYER de Contact */
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
  transition: background-color .3s ease, color .3s ease;
}
html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton::before,
html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton::after { display: none !important; }
html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton:hover,
html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton:focus-visible {
  background: #000 !important;
  color: #fff !important;
  padding: .85em 1.9em !important;
}

/* ---- lm-trio : vidéo du haut de l'accueil sous le titre, avec deux copies en transparence (voir setupTrio) ---- */
html.lm-trio body.home .et-l--post .et_pb_section_0 { overflow-x: clip; padding-bottom: 0 !important; }   /* la section suivante touche le bas de la vidéo, comme sur woop.site */
html.lm-trio body.home .et-l--post .et_pb_row.lm-trio-rangee { margin-bottom: 0 !important; }
html.lm-trio body.home .lm-trio-rangee .et_pb_column, html.lm-trio body.home .lm-trio-centre, html.lm-trio body.home .lm-trio-centre .et_pb_code_inner { margin-bottom: 0 !important; padding-bottom: 0 !important; }
html.lm-trio body.home .et-l--post .et_pb_row.lm-trio-rangee {
  --trio-l: 52vw;            /* largeur de la vidéo centrale */
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  padding: 0 !important;
  transform: none !important;   /* l'effet Divi (zoom + fondu au défilement) est neutralisé pour l'essai */
  opacity: 1 !important;
}
html.lm-trio body.home .lm-trio-rangee .et_pb_column { transform: none !important; opacity: 1 !important; }
html.lm-trio body.home .lm-trio-centre { position: relative; width: var(--trio-l) !important; max-width: none !important; margin: 0 auto !important; translate: none !important; }   /* plus de décalage vers le haut : la vidéo remplit exactement le bandeau */
html.lm-trio body.home .lm-trio-centre .et_pb_code_inner video { display: block; width: 100% !important; height: auto !important; }
/* les trois vidéos se touchent et ont la même largeur ; celles des côtés sont moins hautes et laissent
   voir, au-dessus et en dessous, le bandeau gris foncé qui traverse l'écran derrière elles (comme sur woop.site) */
html.lm-trio body.home .et-l--post .et_pb_row.lm-trio-rangee { background: var(--lm-noir-clair, #262626) !important; }
html.lm-trio body.home .lm-trio-cote {
  position: absolute;
  top: 11%;
  width: 100%;
  height: 78%;
  object-fit: cover;
  opacity: .4;
  pointer-events: none;
}
html.lm-trio body.home .lm-trio-gauche { right: 100%; }
html.lm-trio body.home .lm-trio-droite { left: 100%; }
@media (max-width: 980px) { html.lm-trio body.home .et-l--post .et_pb_row.lm-trio-rangee { --trio-l: 64vw; } }
@media (max-width: 767px) { html.lm-trio body.home .et-l--post .et_pb_row.lm-trio-rangee { --trio-l: 78vw; } }

/* accueil, phrase sous « CREATIVE » : sur tablette et téléphone, retour à la ligne après le premier point
   (« Pas comme la voisine. » / « Depuis 2010. ») ; ailleurs la phrase reste sur une ligne */
html body.home .et-l--post .hero-sous-titre p br { display: none; }
@media (max-width: 980px) { html body.home .et-l--post .hero-sous-titre p br { display: inline; } }   /* tablette et téléphone */

/* =====================================================================
   NOIRS DU SITE — même noir que woop.site (#1b1b1b) à la place du noir pur, et dégradés
   du plus clair au plus foncé sur les sections sombres.
   (Les voiles qui s'effacent au défilement — lm-dim, lm-garage-layer, lm-pied-voile — restent noirs.)
   ===================================================================== */
:root {
  --lm-noir: #1b1b1b;          /* noir de base */
  --lm-noir-clair: #262626;    /* un ton plus clair : bandeau des vidéos, départ de dégradé */
  --lm-noir-profond: #0d0d0d;  /* un ton plus foncé : fin de dégradé */
}
/* accueil : fond général, menu et haut de page */
html body.home,
html body.home #page-container,
html body.home #et-main-area,
html body.home #main-content,
html body.home .et-l--post,
html body.home #et-boc .et-l--header .et_pb_section,
html body.home #et-boc .et-l--post .et_pb_section.et_pb_section_0 { background-color: var(--lm-noir) !important; }
/* accueil, section « JE CRÉE… » : part du ton du bandeau des vidéos (elle le prolonge) et fonce vers le bas */
html body.home #et-boc .et-l--post .et_pb_section.et_pb_section_1 {
  background-color: var(--lm-noir) !important;
  background-image: linear-gradient(180deg, var(--lm-noir-clair) 0%, var(--lm-noir-profond) 100%) !important;
}
/* pied de page : plus sombre en haut, plus clair en bas */
html body #et-boc .et-l--footer .et_pb_section.et_pb_section_0_tb_footer {
  background-color: var(--lm-noir) !important;
  background-image: linear-gradient(180deg, var(--lm-noir-profond) 0%, var(--lm-noir-clair) 100%) !important;
}
/* Contact, bloc « Nous écrire » : même principe que le pied de page */
html body.page-id-936 #et-boc .et-l--post .et_pb_section.et_pb_section_1 {
  background-color: var(--lm-noir) !important;
  background-image: linear-gradient(180deg, var(--lm-noir-profond) 0%, var(--lm-noir-clair) 100%) !important;
}

/* menu principal (ordinateur) : lettres moins espacées (Divi : 2px ; Lexend est déjà une police large) */
html body #et-boc .et-l--header .et_pb_menu .et_pb_menu__menu > nav > ul > li > a { letter-spacing: .3px !important; }

/* liens qui basculent au survol : la copie reste sur une ligne et prend l'espacement du lien */
.lm-flip::after { white-space: nowrap; letter-spacing: inherit; }

/* accueil, « JE CRÉE. JE RACONTE. JE COLORE. » et le texte dessous : centrés, sur tous les écrans */
html body.home #et-boc .et-l--post .et_pb_section_1 .et_pb_text,
html body.home #et-boc .et-l--post .et_pb_section_1 .et_pb_text .et_pb_text_inner,
html body.home #et-boc .et-l--post .et_pb_section_1 .et_pb_text .et_pb_text_inner p { text-align: center !important; }
html body.home #et-boc .et-l--post .et_pb_section_1 .et_pb_text { margin-left: auto !important; margin-right: auto !important; }
html body.home #et-boc .et-l--post .et_pb_section_1 .et_pb_text .et_pb_text_inner p + p { max-width: 24em; margin-left: auto !important; margin-right: auto !important; text-wrap: balance; }

/* =====================================================================
   Studio et pages projets : mêmes tailles et même épaisseur de texte que wearemoire.com/about.html
   (là-bas tout est en graisse normale : grand titre 200/120px, grande phrase 90/44px, textes 26/22px).
   Les tailles étaient déjà calées ; les titres passent de la graisse 500 (et 480/440) à 400, dont le
   trait a la même épaisseur que celui de Moiré, mesuré à taille égale. Les textes courants restent en
   graisse normale : c'est la graisse de Lexend la plus proche.
   ===================================================================== */
html body.page-id-10 .studio-defile .et_pb_text_inner,
html body.page-id-10 .studio-defile p,
html body.page-id-10 .studio-defile a,
html body.single-project .studio-defile .et_pb_text_inner,
html body.single-project .studio-defile p,
html body.single-project .studio-defile a,
html body.page-id-10 .studio-manifeste p,
html body.single-project .projet-titre .et_pb_text_inner,
html body.single-project .projet-titre p,
html body.single-project .projet-accroche .et_pb_text_inner,
html body.single-project .projet-accroche p { font-weight: 400 !important; }
/* petits textes des pages projets (« Projet suivant »…) : graisse normale aussi */
html body.single-project #et-boc .et-l--post .projet-suivant-label,
html body.single-project #et-boc .et-l--post .projet-suivant-label p { font-weight: 400 !important; }

/* =====================================================================
   Accueil : tailles des deux blocs « titre + texte » calées sur woop.site
   (« Stand out faster » : 115px sur ordinateur, 50px en dessous ; « Pick your template… » : 30px / 21px).
   Concerne « JE CRÉE. JE RACONTE. JE COLORE. » et « IDENTITÉS. SITES. IMAGES. ANIMATIONS… »,
   ainsi que le texte placé sous chacun.
   ===================================================================== */
html body.home #et-boc .et-l--post .et_pb_section_1 .et_pb_text_inner p:first-child,
html body.home #et-boc .et-l--post .texte-projets .et_pb_text_inner p:first-child {
  font-size: min(115px, 9.9vw) !important;   /* 115px ; un peu moins entre 981 et 1160px pour que « ANIMATIONS… » tienne sur sa ligne */
  line-height: 1 !important;
  padding-bottom: 0 !important;
  margin-bottom: 30px !important;
}
html body.home #et-boc .et-l--post .et_pb_section_1 .et_pb_text_inner p + p,
html body.home #et-boc .et-l--post .texte-projets .et_pb_text_inner p + p {
  font-size: 30px !important;
  line-height: 36px !important;
  max-width: 720px;
  margin-left: auto !important;    /* le bloc de texte reste centré sous son titre */
  margin-right: auto !important;
}
@media (max-width: 980px) {
  html body.home #et-boc .et-l--post .et_pb_section_1 .et_pb_text_inner p:first-child,
  html body.home #et-boc .et-l--post .texte-projets .et_pb_text_inner p:first-child { font-size: min(50px, 12.1vw) !important; }   /* 50px ; un peu moins sur les petits téléphones pour garder chaque mot sur sa ligne */
  html body.home #et-boc .et-l--post .et_pb_section_1 .et_pb_text_inner p + p,
  html body.home #et-boc .et-l--post .texte-projets .et_pb_text_inner p + p { font-size: 21px !important; line-height: 26px !important; }
}

/* tous les grands titres qui défilent (Studio, 404, recherche, « projet suivant ») : même épaisseur que
   celui de wearemoire.com/about.html — graisse normale ; la taille est déjà la même (200px, 120px sur téléphone) */
html body .studio-defile .et_pb_text_inner,
html body .studio-defile p,
html body .studio-defile a,
html body .studio-defile .studio-defile-piste,
html body .studio-defile .studio-defile-piste span { font-weight: 400 !important; }

/* Textes courants de Studio, des pages projets et de la 404 (liste, paragraphes) : même épaisseur de trait
   que les textes de wearemoire.com/about.html. Lexend n'a pas de graisse toute faite à cette épaisseur :
   on utilise sa version à graisse réglable (« Lexend Texte », voir lillysou-motion.php), réglée à 333.
   Mesure à taille égale (200px) : trait de Moiré 16,9 — Lexend 333 : 16,9 (avant : 14,8). */
html body .studio-liste .et_pb_text_inner,
html body .studio-liste .et_pb_text_inner :is(p, li, a, span),
html body .studio-colonnes .et_pb_text_inner,
html body .studio-colonnes .et_pb_text_inner :is(p, li, a, span),
html body .studio-bio .et_pb_text_inner,
html body .studio-bio .et_pb_text_inner :is(p, li, a, span),
html body.single-project .projet-suivant-label,
html body.single-project .projet-suivant-label :is(p, a, span) {
  font-family: 'Lexend Texte', 'Inter Tight', Helvetica, Arial, Lucida, sans-serif !important;
  font-weight: 333 !important;
}

/* arrivée sur l'accueil par le lien « Projets » : la page reste masquée le temps de se placer sur les projets,
   puis apparaît en fondu (on ne voit plus le haut de l'accueil avant de descendre) */
html.lm-vers-projets body { opacity: 0 !important; }
html body { transition: opacity .35s ease; }
html body.single-project #et-boc .et-l--post .projet-suivant-label,
html body.single-project #et-boc .et-l--post .projet-suivant-label :is(p, a, span) { font-weight: 333 !important; }

/* =====================================================================
   Grands boutons (« ENVOYER » de Contact, « ÉCRIVEZ-MOI » de Studio) — même forme, taille et épaisseur
   de texte que le bouton « SEND » de wearemoire.com/contact.html, mesuré à plusieurs largeurs :
   ordinateur : 305px de haut, coins 30px, trait fin, texte 100px ; tablette et téléphone : 100px de haut,
   coins 15px, texte 26px (24px sur petit téléphone). Le bouton prend toute la largeur de son bloc.
   ===================================================================== */
/* Contact : le bas du formulaire n'est plus aligné à droite, le bouton occupe toute la largeur des champs */
html body.page-id-936 #page-container .et_pb_contact_form_container .et_contact_bottom_container {
  float: none !important;
  display: block !important;
  width: 100% !important;
  margin: 50px 0 0 !important;
  padding: 0 0 0 3% !important;   /* même retrait que les champs : le bouton s'aligne exactement sur eux */
  text-align: left !important;
}
html body #page-container .et_pb_section .et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button,
html body #page-container .et_pb_section .et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:hover,
html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton,
html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton:hover {
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100% !important;
  height: 180px !important;   /* Moiré : 305px — réduit à la demande (trop haut) */
  margin: 0 !important;
  padding: 0 20px !important;
  border: 1.5px solid #000 !important;
  border-radius: 30px !important;
  font-family: 'Lexend Texte', 'Inter Tight', Helvetica, Arial, Lucida, sans-serif !important;
  font-size: 100px !important;
  font-weight: 333 !important;   /* même épaisseur de trait que le « SEND » de Moiré à taille égale */
  line-height: 1 !important;
  text-transform: uppercase;
  text-align: center !important;
}
/* l'écart de 50px au-dessus est porté par le bloc du bouton (stable au survol), pas par le lien */
html body #page-container .et_pb_button_module_wrapper:has(> a.studio-bouton) { width: 100%; margin-top: 50px !important; }
@media (max-width: 980px) {
  html body #page-container .et_pb_section .et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button,
  html body #page-container .et_pb_section .et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:hover,
  html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton,
  html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton:hover {
    height: 72px !important;    /* Moiré : 100px — réduit à la demande */
    border-width: 1px !important;
    border-radius: 15px !important;
    font-size: 26px !important;
  }
}
@media (max-width: 479px) {
  html body #page-container .et_pb_section .et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button,
  html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton { font-size: 24px !important; }
}
/* Contact : la taille du texte du bouton n'est plus liée à l'ancienne valeur proportionnelle */
html body.page-id-936 #page-container .et_pb_section .et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button,
html body.page-id-936 #page-container .et_pb_section .et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:hover { font-size: 60px !important; padding: 0 20px !important; }   /* 100px chez Moiré : réduit à la demande */
/* Studio : copie exacte du bouton de Contact, dans la largeur de la colonne de texte */
html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton,
html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton:hover { font-size: 60px !important; }   /* identique au bouton ENVOYER de Contact */
@media (max-width: 980px) {
  html body.page-id-936 #page-container .et_pb_section .et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button,
  html body.page-id-936 #page-container .et_pb_section .et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:hover,
  html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton,
  html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton:hover { font-size: 26px !important; }
}
@media (max-width: 479px) {
  html body.page-id-936 #page-container .et_pb_section .et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button,
  html body.page-id-936 #page-container .et_pb_section .et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:hover,
  html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton,
  html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton:hover { font-size: 24px !important; }
}

/* Contact, bouton « ENVOYER » : fond noir et texte blanc au survol (et au clavier) */
html body.page-id-936 #page-container .et_pb_section .et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease !important;
}
html body.page-id-936 #page-container .et_pb_section .et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:hover,
html body.page-id-936 #page-container .et_pb_section .et_pb_contact_form_container.et_pb_module .et_pb_contact_submit.et_pb_button:focus-visible {
  background-color: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}
html body.page-id-936 #page-container .et_pb_contact_submit.et_pb_button:hover .lm-flip,
html body.page-id-936 #page-container .et_pb_contact_submit.et_pb_button:hover .lm-flip > span,
html body.page-id-936 #page-container .et_pb_contact_submit.et_pb_button:hover .lm-flip::after,
html body.page-id-936 #page-container .et_pb_contact_submit.et_pb_button:focus-visible .lm-flip,
html body.page-id-936 #page-container .et_pb_contact_submit.et_pb_button:focus-visible .lm-flip > span { color: #fff !important; }
html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton { transition: background-color .3s ease, color .3s ease, border-color .3s ease !important; }
html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton:hover,
html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton:focus-visible { background-color: #000 !important; border-color: #000 !important; color: #fff !important; }
html body #page-container a.et_pb_button.studio-bouton:hover .lm-flip,
html body #page-container a.et_pb_button.studio-bouton:hover .lm-flip > span,
html body #page-container a.et_pb_button.studio-bouton:hover .lm-flip::after { color: #fff !important; }

/* =====================================================================
   Formulaire de contact : erreurs de saisie dans une bulle noire sous le champ (voir setupContactBulles)
   ===================================================================== */
/* la liste d'erreurs de Divi au-dessus du formulaire est remplacée par les bulles */
html body .et_pb_contact_form_container.lm-erreurs .et-pb-contact-message { display: none !important; }
html body .et_pb_contact_form_container .et-pb-contact-message.lm-liste-masquee { display: none !important; }
/* plus de cadre autour du champ en erreur : il garde seulement son trait du bas */
html body #page-container .et_pb_contact_form_container .et_pb_contact_form .input.et_contact_error {
  border-top-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: #000 !important;
  box-shadow: none !important;
}
/* le champ qui porte une bulle passe au-dessus du champ suivant : la bulle est toujours DEVANT le texte */
.lm-bulle-hote { position: relative; }
html body .et_pb_contact_form p.et_pb_contact_field { position: relative; overflow: visible !important; }   /* l'ordre d'empilement de chaque champ est posé par setupContactBulles */
.lm-bulle {
  position: absolute;
  left: calc(3% + 4px);          /* aligné sur le début du texte du champ */
  top: calc(100% + 9px);          /* juste sous le trait du champ, la pointe vient le toucher */
  z-index: 6;
  max-width: calc(97% - 8px);
  padding: 22px 38px 23px;
  border-radius: 999px;
  background: #6745F7;   /* violet du site (pastille du curseur, liens e-mail) */
  color: #fff;
  font-family: 'Lexend Texte', 'Inter Tight', Helvetica, Arial, Lucida, sans-serif;
  font-size: 17px;
  font-weight: 333;
  line-height: 1.25;
  letter-spacing: -.017em;
  text-transform: none;
  white-space: normal;
  pointer-events: none;
  animation: lm-bulle-arrivee .35s cubic-bezier(.2, .8, .2, 1) both;
}
/* petite pointe vers le champ */
.lm-bulle::before {
  content: '';
  position: absolute;
  left: 44px;
  top: -7px;
  width: 16px;
  height: 16px;
  background: #6745F7;   /* violet du site (pastille du curseur, liens e-mail) */
  border-radius: 3px;
  transform: rotate(45deg);
}
@keyframes lm-bulle-arrivee { from { opacity: 0; translate: 0 -8px; } }
@media (max-width: 767px) {
  .lm-bulle { font-size: 15px; padding: 18px 28px 19px; border-radius: 30px; }
}
@media (prefers-reduced-motion: reduce) { .lm-bulle { animation: none; } }

/* Studio, bouton « ÉCRIVEZ-MOI » : même bouton que celui de Contact, réduit à 70 % dans toutes ses dimensions
   (largeur, hauteur, coins, texte), aligné à gauche sur le texte */
html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton,
html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton:hover {
  width: 58% !important;   /* un peu moins large que les 70 % du reste (demande du 13/10) */
  height: 126px !important;
  border-radius: 21px !important;
  font-size: 42px !important;
}
@media (max-width: 980px) {
  html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton,
  html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton:hover {
    height: 50px !important;
    border-radius: 11px !important;
    font-size: 18px !important;
  }
}
@media (max-width: 479px) {
  html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton,
  html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton:hover { font-size: 17px !important; }
}
/* tablette et ordinateur : tout à l'échelle du bouton vu sur un écran de 1900 px (689 × 126 px, coins 21 px,
   texte 42 px, 58 % de la largeur du texte) — hauteur, coins et texte suivent la largeur de la colonne */
@media (min-width: 768px) {
  html body #page-container .et_pb_button_module_wrapper:has(> a.studio-bouton) { container-type: inline-size; }
  @supports (width: 1cqw) {
    html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton,
    html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton:hover {
      width: 58% !important;
      height: 10.61cqw !important;
      border-radius: 1.77cqw !important;
      font-size: 3.535cqw !important;
    }
  }
}
/* smartphone : toute la largeur du texte (90 % de l'écran), hauteur, coins et texte dans les proportions
   du bouton sur ordinateur (512 × 126 px, coins 21 px, texte 42 px) */
@media (max-width: 767px) {
  html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton,
  html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton:hover {
    width: 100% !important;
    height: 22.1vw !important;
    border-radius: 3.7vw !important;
    font-size: 7.4vw !important;
  }
  /* mieux : proportionnel à la largeur réelle de la colonne (elle n'est pas toujours à 90 % de l'écran) */
  html body #page-container .et_pb_button_module_wrapper:has(> a.studio-bouton) { container-type: inline-size; }
  @supports (width: 1cqw) {
    html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton,
    html body #page-container .et_pb_button_module_wrapper > a.et_pb_button.studio-bouton:hover {
      height: 24.6cqw !important;
      border-radius: 4.1cqw !important;
      font-size: 8.2cqw !important;
    }
  }
}
/* le cadre de bascule est un peu plus haut que les lettres : l'accent du « É » de la copie en attente ne dépasse plus */
html body #page-container a.et_pb_button.studio-bouton .lm-flip,
html body #page-container .et_pb_contact_submit.et_pb_button .lm-flip { line-height: 1.4 !important; }

/* =====================================================================
   Formulaire de contact : message de réussite (voir setupContactMerci)
   « MERCI ! » dans le même très grand caractère que les champs, puis une phrase en texte courant,
   le tout souligné d'un trait comme un champ rempli, avec une pastille violette.
   ===================================================================== */
html body .et_pb_contact_form_container.lm-envoye .et-pb-contact-message { display: block !important; padding: 0 !important; margin: 0 !important; }
.lm-merci {
  padding: clamp(10px, 2vw, 30px) 0 clamp(28px, 4vw, 60px);
  border-bottom: 2px solid #000;
  text-align: left;
  animation: lm-merci-arrivee .7s cubic-bezier(.2, .8, .2, 1) both;
}
html body #page-container .lm-merci .lm-merci-titre {
  display: flex;
  align-items: center;
  gap: .22em;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Inter Tight', Helvetica, Arial, Lucida, sans-serif !important;
  font-size: var(--ct-champ, clamp(32px, 7.6vw, 117px)) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -.0455em !important;
  text-transform: uppercase;
  color: #000 !important;
}
/* pastille violette avec une coche, à la suite du mot */
html body #page-container .lm-merci .lm-merci-titre::after {
  content: '';
  flex: none;
  width: .62em;
  height: .62em;
  border-radius: 50%;
  background: #6745F7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 58% no-repeat;
  animation: lm-merci-pastille .5s cubic-bezier(.3, 1.6, .5, 1) .35s both;
}
html body #page-container .lm-merci .lm-merci-texte {
  margin: clamp(14px, 1.8vw, 26px) 0 0 !important;
  padding: 0 !important;
  max-width: 30em;
  font-family: 'Lexend Texte', 'Inter Tight', Helvetica, Arial, Lucida, sans-serif !important;
  font-size: 22px !important;
  font-weight: 333 !important;
  line-height: 1.23 !important;
  letter-spacing: -.017em !important;
  color: #000 !important;
}
@media (min-width: 768px) { html body #page-container .lm-merci .lm-merci-texte { font-size: 26px !important; } }
@keyframes lm-merci-arrivee { from { opacity: 0; translate: 0 24px; } }
@keyframes lm-merci-pastille { from { scale: 0; } }
@media (prefers-reduced-motion: reduce) { .lm-merci, html body #page-container .lm-merci .lm-merci-titre::after { animation: none; } }

/* accueil : bande de fond sous le haut de page, de la hauteur de la « tenue » (voir setupStack) — elle bouche
   l'espace entre la vidéo et la section suivante, où apparaissait la section des projets (bande noire) */
html.lm-trio body.home .et-l--post .et_builder_inner_content > .et_pb_section_0::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--lm-tenue, 0px);
  background: var(--lm-noir, #1b1b1b);   /* même fond que le haut de page : pas de bloc gris clair sous la vidéo */
  pointer-events: none;
}

/* accueil : « Pas comme la voisine. Depuis 2010. » apparaît en même temps que « CREATIVE » (plus de retard au départ) */
html.lm body.home .et-l--post .et_pb_section_0 .hero-sous-titre,
html.lm body.home .et-l--post .et_pb_section_0 .hero-sous-titre * { --lm-d0: 0ms !important; }

/* =====================================================================
   Contact : « Envoyez-moi un email » devient le grand titre qui défile de Studio
   (même police, même taille, même graisse ; bloc ajouté par motion.js, voir setupContactTitre)
   ===================================================================== */
html body.page-id-936 .lm-contact-defile {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow-x: clip;
  overflow-y: visible;
  margin-bottom: clamp(24px, 3vw, 50px);
}
html body.page-id-936 .lm-contact-defile .et_pb_text_inner,
html body.page-id-936 .lm-contact-defile p { font-size: clamp(120px, 30.8vw, 200px) !important; font-weight: 400 !important; }
/* le titre d'origine reste lisible par les lecteurs d'écran, mais n'est plus affiché */
html body.page-id-936 .lm-titre-remplace {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
  margin: 0 !important; padding: 0 !important;
}
/* même hauteur de départ que le grand titre de Studio */
html body.page-id-936 .lm-contact-defile { margin-top: 5px; }
@media (min-width: 768px) { html body.page-id-936 .lm-contact-defile { margin-top: -7px; } }
@media (min-width: 981px) { html body.page-id-936 .lm-contact-defile { margin-top: -17px; } }
/* Contact : plus d'air sous « Retrouvez-moi sur / INSTAGRAM / YOUTUBE », avant le bloc noir (environ 80px → 140 à 230px) */
html body.page-id-936 #page-container .et-l--post .et_pb_section.et_pb_section_0 { padding-bottom: clamp(170px, 15vw, 290px) !important; }
/* … et au-dessus de « Retrouvez-moi sur », après le bouton ENVOYER (environ 100px → 140 à 230px) */
html body.page-id-936 #page-container .et-l--post .et_pb_row.bloc-1-contact { margin-top: clamp(80px, 9vw, 180px) !important; }/* Contact, bloc noir « Racontez-moi / hello@lillysou.com » : mêmes marges gauche et droite que le pied de page (10 % de chaque côté) */
html body.page-id-936 #page-container .et-l--post .et_pb_section_1 > .et_pb_row { width: 80% !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: auto !important; margin-right: auto !important; }
html body.page-id-936 #page-container .et-l--post .et_pb_section_1 .et_pb_text { margin-left: 0 !important; margin-right: 0 !important; }
/* plus d'espace sous « Racontez-moi », avant l'adresse e-mail */
html body.page-id-936 #page-container .et-l--post .et_pb_section_1 .et_pb_text_0 { margin-bottom: clamp(24px, 3.2vw, 64px) !important; }
/* smartphone : même structure que sur ordinateur (titre à droite, adresse à gauche), en plus grand ;
   9,2 % de la largeur : « PLUTÔT E-MAIL ? » tient sur une ligne entre les marges */
@media (max-width: 767px) {
  html body.page-id-936 { --ct-mail: 9.2vw; }
}
/* tablette et ordinateur : même espace au-dessus de « Racontez-moi » et sous l'adresse (avant, il y avait environ
   100px de plus en haut). Limité par la hauteur d'écran : le bloc doit tenir dans l'écran pour l'effet de découverte. */
@media (min-width: 768px) {
  html body.page-id-936 #page-container .et-l--post .et_pb_section.et_pb_section_1 {
    padding-top: min(clamp(110px, 12vw, 240px), 20vh) !important;
    padding-bottom: calc(min(clamp(110px, 12vw, 240px), 20vh) + 27px) !important;   /* + 27px : l'espace au-dessus contient aussi la marge du titre */
  }
  html body.page-id-936 #page-container .et-l--post .et_pb_section_1 > .et_pb_row { padding-top: 27px !important; padding-bottom: 27px !important; }
}
/* Menu mobile et tablette : même taille et même épaisseur que le menu mobile de wearemoire.com
   (40px, graisse normale — 'Lexend Texte' 333 a le même trait que la police de Moiré) */
@media (max-width: 980px) {
  html body .et-l--header .et_pb_menu .et_mobile_menu li a,
  html body .et-l--header .et_pb_menu .et_mobile_menu li a *,
  html body.et-db #et-boc .et-l.et-l--header .et_pb_module.et_pb_menu .et_mobile_menu li a,
  html body.et-db #et-boc .et-l.et-l--header .et_pb_module.et_pb_menu .et_mobile_menu li a * {
    font-size: 40px !important;
    font-family: 'Lexend Texte', 'Inter Tight', Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;   /* un peu plus épais que Moiré (333), à la demande du 14/10 */
    line-height: 1.2 !important;   /* 48px d'un lien à l'autre (56px chez Moiré, resserré à la demande du 14/10) */
  }
}
/* recherche : les résultats sont rangés en colonnes dès l'affichage (avant, Divi attendait son script :
   on voyait d'abord les visuels en très grand, l'un sous l'autre). Mêmes colonnes et mêmes écarts que Divi. */
html body.search .et-l--body .et_pb_blog_grid .et_pb_salvattore_content {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 5.5%;
  align-items: start;
}
html body.search .et-l--body .et_pb_blog_grid .et_pb_salvattore_content > .column { width: auto !important; margin: 0 !important; float: none !important; }
@media (max-width: 980px) {
  html body.search .et-l--body .et_pb_blog_grid .et_pb_salvattore_content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  html body.search .et-l--body .et_pb_blog_grid .et_pb_salvattore_content { grid-template-columns: minmax(0, 1fr); }
}
/* le titre écrit par le serveur a exactement la hauteur du titre qui défile (pas de saut quand il se met à défiler) */
html body.search .lm-search-defile p.lm-search-label { padding: 0 !important; margin: 0 !important; overflow: hidden; }
html body.search .et-l--body .et_pb_salvattore_content article.et_pb_post > :last-child { margin-bottom: 0 !important; }   /* même écart entre deux résultats avant et après le rangement par Divi */
/* pages projets, texte de présentation sur une seule colonne (moins de 1200px) : une ligne d'air entre deux paragraphes */
@media (max-width: 1199px) {
  html body.single-project .studio-colonnes p + p { margin-top: 1em !important; }
}
/* =====================================================================
   Accueil, vignette jdtravaux façon illo.tv : cadre vertical (proportions des vignettes d'illo, 613 × 693),
   visuels recadrés au centre, qui s'enchaînent sans fondu au survol (réglages dans motion.js)
   ===================================================================== */
html body.home .hover-slideshow.lm-illo { aspect-ratio: 613 / 693; width: 100%; }
html body.home .hover-slideshow.lm-illo > img,
html body.home .hover-slideshow.lm-illo > video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: none !important;
}
/* ordinateur : décalée vers le bas par rapport à Cindy Frigerio, comme les paires de vignettes d'illo */
@media (min-width: 981px) {
  html body.home .et-l--post .et_pb_column:has(.hover-slideshow.lm-illo) { margin-top: 5.3vw !important; }
}
/* autres diaporamas au survol de l'accueil (Au jardin de Sacha…) : format 16/9 de la vidéo qu'ils remplacent, sans fondu */
html body.home .hover-slideshow.lm-defile-vif { aspect-ratio: 16 / 9; width: 100%; }
html body.home .hover-slideshow.lm-defile-vif > img,
html body.home .hover-slideshow.lm-defile-vif > video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: none !important;
}
/* accueil : plus d'air au-dessus du champ de recherche des projets (avant : 30px ordinateur, 5 à 10px tablette et téléphone) */
html body.home .et-l--post .et_pb_row:has(.et_pb_code input[name="s"]) { padding-top: clamp(45px, 5vw, 75px) !important; }
/* légendes des projets (accueil et recherche) sur grand écran : tailles des légendes d'illo.tv
   (29px à 1281px jusqu'à 40px à partir de 1740px ; avant : 27px). La police du site est plus grosse que celle d'illo à taille égale : les tailles d'illo (40 / 44,8px) sont réduites de 11 % pour un rendu identique à l'œil */
@media (min-width: 1281px) {
  html body .legende-projet.et_pb_text,
  html body .legende-projet p,
  html body .legende-projet a,
  html body.search #et-boc .et-l--body .et_pb_post .entry-title,
  html body.search #et-boc .et-l--body .et_pb_post .entry-title a { font-size: min(2.3vw, 40px) !important; line-height: 1.2 !important; }   /* grandit avec l'écran : « Cindy Frigerio Avocat — Branding » reste sur une ligne */
}
@media (min-width: 1600px) {
  html body .legende-projet.et_pb_text,
  html body .legende-projet p,
  html body .legende-projet a,
  html body.search #et-boc .et-l--body .et_pb_post .entry-title,
  html body.search #et-boc .et-l--body .et_pb_post .entry-title a { font-size: min(2.3vw, 40px) !important; }
}
/* =====================================================================
   Accueil, liste des expertises (3 colonnes) et phrase « Des projets pensés… » : façon illo.tv
   (liste de services et « We worked for… » : même taille que leurs légendes, interligne 1,25,
   graisse normale, minuscules). Tailles d'illo réduites de 11 % comme les légendes (police plus grosse à l'œil) :
   20px smartphone, 24px tablette, de 27px à 40px sur ordinateur.
   ===================================================================== */
html body.home #et-boc .et-l--post .liste-expertises.et_pb_text,
html body.home #et-boc .et-l--post .liste-expertises p,
html body.home #et-boc .et-l--post .liste-expertises p *,
html body.home #et-boc .et-l--post .texte-projets .et_pb_text_inner p:only-child {
  font-family: 'Inter Tight', Helvetica, Arial, Lucida, sans-serif !important;
  font-weight: 500 !important;
  text-transform: none !important;
  font-size: 20px !important;
  line-height: 1.25 !important;
}
@media (min-width: 768px) {
  html body.home #et-boc .et-l--post .liste-expertises.et_pb_text,
  html body.home #et-boc .et-l--post .liste-expertises p,
  html body.home #et-boc .et-l--post .liste-expertises p *,
  html body.home #et-boc .et-l--post .texte-projets .et_pb_text_inner p:only-child { font-size: 24px !important; }
}
@media (min-width: 981px) {
  html body.home #et-boc .et-l--post .liste-expertises.et_pb_text,
  html body.home #et-boc .et-l--post .liste-expertises p,
  html body.home #et-boc .et-l--post .liste-expertises p *,
  html body.home #et-boc .et-l--post .texte-projets .et_pb_text_inner p:only-child { font-size: clamp(27px, 2.3vw, 40px) !important; }
}
/* la liste, comme chez illo : sur ordinateur, trois colonnes qui commencent à 12 % du bord gauche et s'étendent jusqu'à 4 % du bord droit ;
   en dessous, une colonne centrée */
html body.home #et-boc .et-l--post .liste-expertises p { margin: 0 !important; padding: 0 !important; }
@media (min-width: 981px) {
  html body.home #et-boc .et-l--post .et_pb_row:has(> .et_pb_column .liste-expertises) {
    width: 84% !important; max-width: none !important;
    margin-left: 12% !important; margin-right: 4% !important;
  }
  html body.home #et-boc .et-l--post .liste-expertises p { text-align: left !important; }
}
@media (max-width: 980px) {
  html body.home #et-boc .et-l--post .liste-expertises p { text-align: center !important; }
  html body.home #et-boc .et-l--post .et_pb_row:has(> .et_pb_column .liste-expertises) .et_pb_column { margin-bottom: 0 !important; }
}
/* la phrase seule (« Des projets pensés… ») : centrée, sur une largeur limitée comme chez illo */
html body.home #et-boc .et-l--post .texte-projets .et_pb_text_inner p:only-child {
  max-width: 1075px; margin: 0 auto !important; padding: 0 !important; text-align: center !important;
}
@media (max-width: 980px) {
  /* tablette et smartphone : les trois groupes se suivent comme une seule liste (chacun avait 70px au-dessus et 80px en dessous) */
  html body.home #et-boc .et-l--post .et_pb_row:has(> .et_pb_column .liste-expertises) .liste-expertises { padding-top: 0 !important; padding-bottom: 0 !important; }
  html body.home #et-boc .et-l--post .et_pb_row:has(> .et_pb_column .liste-expertises) > .et_pb_column:first-child .liste-expertises { padding-top: 70px !important; }
  html body.home #et-boc .et-l--post .et_pb_row:has(> .et_pb_column .liste-expertises) > .et_pb_column:last-child .liste-expertises { padding-bottom: 0 !important; }   /* l'espace sous la liste est porté par la rangée (voir plus bas) */
}
/* plus d'air sous la liste des expertises, comme sous la liste de services d'illo (12 % de sa largeur, environ 155px sur un écran de 1536px) */
html body.home #et-boc .et-l--post .et_pb_row:has(> .et_pb_column .liste-expertises) .liste-expertises { padding-bottom: 0 !important; }
html body.home #et-boc .et-l--post .et_pb_row:has(> .et_pb_column .liste-expertises) { padding-bottom: 110px !important; }
@media (min-width: 981px) {
  html body.home #et-boc .et-l--post .et_pb_row:has(> .et_pb_column .liste-expertises) { padding-bottom: 10vw !important; }
}
/* moins d'espace entre la phrase « Des projets pensés… » et la liste des projets (avant : environ 210px sur ordinateur, 170px sur smartphone) */
html body.home #et-boc .et-l--post .texte-projets:has(.et_pb_text_inner p:only-child) { padding-bottom: 0 !important; }
html body.home #et-boc .et-l--post .et_pb_row:has(> .et_pb_column .texte-projets .et_pb_text_inner p:only-child) { padding-bottom: 45px !important; }
@media (min-width: 981px) {
  html body.home #et-boc .et-l--post .et_pb_row:has(> .et_pb_column .texte-projets .et_pb_text_inner p:only-child) { padding-bottom: 70px !important; }
}
/* liste des expertises et phrase « Des projets pensés… » : plus présentes (elles passaient inaperçues) —
   environ 25 % plus grandes et un cran plus épaisses : 24px smartphone, 30px tablette, de 34px à 50px sur ordinateur */
html body.home #et-boc .et-l--post .liste-expertises.et_pb_text,
html body.home #et-boc .et-l--post .liste-expertises p,
html body.home #et-boc .et-l--post .liste-expertises p *,
html body.home #et-boc .et-l--post .texte-projets .et_pb_text_inner p:only-child { font-size: 24px !important; font-weight: 600 !important; line-height: 1.2 !important; }
@media (min-width: 768px) {
  html body.home #et-boc .et-l--post .liste-expertises.et_pb_text,
  html body.home #et-boc .et-l--post .liste-expertises p,
  html body.home #et-boc .et-l--post .liste-expertises p *,
  html body.home #et-boc .et-l--post .texte-projets .et_pb_text_inner p:only-child { font-size: 30px !important; }
}
@media (min-width: 981px) {
  html body.home #et-boc .et-l--post .liste-expertises.et_pb_text,
  html body.home #et-boc .et-l--post .liste-expertises p,
  html body.home #et-boc .et-l--post .liste-expertises p *,
  html body.home #et-boc .et-l--post .texte-projets .et_pb_text_inner p:only-child { font-size: clamp(34px, 2.9vw, 50px) !important; }
  html body.home #et-boc .et-l--post .texte-projets .et_pb_text_inner p:only-child { max-width: 1200px; }
}
/* vignette à côté d'un autre visuel (ex. Expo Barnabé & Dallard) : même format vertical que jdtravaux ;
   motion.js la centre en hauteur sur le visuel voisin */
html body.home .hover-slideshow.lm-defile-vif.lm-illo-paire { aspect-ratio: 613 / 693; }
/* smartphone : la phrase « Des projets pensés… » ressortait trop peu (24px, à peine plus grande que les légendes,
   et plus petite que la liste des projets juste en dessous) : plus grande, plus grasse, lettres resserrées */
@media (max-width: 767px) {
  html body.home #et-boc .et-l--post .texte-projets .et_pb_text_inner p:only-child,
  html body.home #et-boc .et-l--post .texte-projets .et_pb_text_inner p:only-child * {
    font-size: min(32px, 8.4vw) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.035em !important;
  }
}
/* tablette et smartphone : même espace au-dessus de « Des projets pensés… » qu'au-dessus de la liste des expertises
   (la phrase avait environ 40px de plus sur smartphone et tablette, 70px de plus sur ordinateur) */
@media (max-width: 980px) {
  html body.home #et-boc .et-l--post .et_pb_row:has(> .et_pb_column .texte-projets .et_pb_text_inner p:only-child) { padding-top: 48px !important; }
}
@media (min-width: 981px) {
  html body.home #et-boc .et-l--post .et_pb_row:has(> .et_pb_column .texte-projets .et_pb_text_inner p:only-child) { padding-top: 0 !important; }
  html body.home #et-boc .et-l--post .texte-projets:has(.et_pb_text_inner p:only-child) { padding-top: 0 !important; }
}
/* smartphone : la liste des expertises traitée comme la phrase « Des projets pensés… » (plus grande, grasse, lettres resserrées) */
@media (max-width: 767px) {
  html body.home #et-boc .et-l--post .liste-expertises.et_pb_text,
  html body.home #et-boc .et-l--post .liste-expertises p,
  html body.home #et-boc .et-l--post .liste-expertises p * {
    font-size: min(32px, 8.4vw) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.035em !important;
  }
}
/* =====================================================================
   Pages projets : tailles recalées à l'œil sur la page projet de wearemoire.com (Sony Music), demande du 18/10.
   Moiré : titre 60 / 160px, accroche 44 / 90px, liste et texte 22 / 26px (smartphone / à partir de 768px).
   Ses lettres sont plus petites que celles du site à taille égale : les tailles ci-dessous donnent les mêmes
   hauteurs de lettres (majuscules du titre et de l'accroche, minuscules du texte) et le même interligne.
   ===================================================================== */
html body.single-project #et-boc .et-l--post .projet-titre .et_pb_text_inner,
html body.single-project #et-boc .et-l--post .projet-titre p { font-size: min(57px, 15.5vw) !important; line-height: 0.85 !important; }
html body.single-project #et-boc .et-l--post .projet-accroche .et_pb_text_inner,
html body.single-project #et-boc .et-l--post .projet-accroche p { font-size: min(42px, 11.6vw) !important; line-height: 0.9 !important; }
html body.single-project #et-boc .et-l--post .studio-liste p,
html body.single-project #et-boc .et-l--post .studio-colonnes p { font-size: 20.5px !important; line-height: 26px !important; }
@media (min-width: 768px) {
  html body.single-project #et-boc .et-l--post .projet-titre .et_pb_text_inner,
  html body.single-project #et-boc .et-l--post .projet-titre p { font-size: min(144px, 16.8vw) !important; line-height: 0.83 !important; }   /* un peu moins entre 768 et 860px : « JDTRAVAUX » doit tenir sur sa ligne */
  html body.single-project #et-boc .et-l--post .projet-accroche .et_pb_text_inner,
  html body.single-project #et-boc .et-l--post .projet-accroche p { font-size: min(81px, 9.8vw) !important; line-height: 0.89 !important; }
  html body.single-project #et-boc .et-l--post .studio-liste p,
  html body.single-project #et-boc .et-l--post .studio-colonnes p { font-size: 23.5px !important; line-height: 32px !important; }
}
/* pages projets : espacements entre les textes recalés sur la page projet de Moiré (mesurés de la ligne de base
   d'un texte au haut des majuscules du suivant) : titre → accroche 51 / 57 / 77px, accroche → prestations 38 / 42 / 60px,
   prestations → texte (smartphone, l'un sous l'autre) 117px */
html body.single-project #et-boc .et-l--post .studio-moire .et_pb_row.projet-r-titre { margin-bottom: clamp(42px, 4.1vw, 60px) !important; }
html body.single-project #et-boc .et-l--post .studio-moire .et_pb_row.projet-r-accroche { margin-bottom: clamp(25px, 3.05vw, 44px) !important; }
@media (max-width: 767px) {
  html body.single-project #et-boc .et-l--post .studio-colonnes { margin-top: 106px !important; }
}