/* =====================================================================================
   accueil-couleurs-v1.css · une couleur par bloc de l'accueil (choix du client du 16/09).
   Chaque bloc de l'accueil devient un panneau arrondi qui flotte sur le fond crème,
   dans l'esprit de la galerie « Œuvres originales » (assets/galerie-expo-v2.css).
   À charger APRÈS style-v252.css, sur les 4 accueils seulement (index.html, fr/, en/, es/).
   Le JS accueil-couleurs-v1.js ne fait que : ranger les 3 paragraphes de l'À propos,
   marquer les blocs qui ont un bouton portfolio (.ac-has-cta) et accorder,
   sur ordinateur, le bas de la colonne photo avec le bas de la colonne texte (.ac-fit).
   Les couleurs, elles, vivent ici : la page reste juste sans JavaScript.
   ===================================================================================== */
/* ---------- la couleur de chaque bloc (choix validé le 16/09) ---------- */
body.page-home #contactQuick{--ac-bg:#fdfaf3}   /* Ivoire du menu */
body.page-home #murales     {--ac-bg:#224563}   /* Bleu de Prusse · la mer profonde de Finalement */
body.page-home #about       {--ac-bg:#fdfaf3}   /* Ivoire du menu */
body.page-home #live        {--ac-bg:#4c315d}   /* Prune de Dream */
body.page-home #portraits   {--ac-bg:#e4dbcc}   /* Lin · la toile écrue de l'atelier */
body.page-home #landscapes  {--ac-bg:#2c4430}   /* Vert bouteille de Brera */
body.page-home #graphic     {--ac-bg:#f0eeec}   /* Nuage d'Envol */
body.page-home #contact     {--ac-bg:#a3c3a8}   /* Vert des volets de la Riviera */
/* la galerie « Œuvres originales » garde son bleu nuit et sa feuille (galerie-expo-v2.css) */

/* ---------- réglages communs ---------- */
html{--ac-tx:32px;--ac-in-d:16px;--ac-page:#f7f1ea;--ac-gap:20px;--ac-gap-d:36px;--ac-rad:36px;--ac-rad-d:40px;--ac-edge:8px;--ac-inner:8px}
html:has(body.page-home),
html body.page-home{background-color:var(--ac-page)!important}
/* ---------- le panneau ---------- */
html body.page-home #contactQuick,
html body.page-home #murales,
html body.page-home #about,
html body.page-home #live,
html body.page-home #portraits,
html body.page-home #landscapes,
html body.page-home #graphic,
html body.page-home #contact{position:relative;
  background:var(--ac-bg)!important;background-image:none!important;
  margin:var(--ac-gap) var(--ac-edge)!important;
  padding:var(--ac-inner) 0!important;
  border-radius:var(--ac-rad)!important;
  box-shadow:0 20px 42px -30px rgba(74,50,28,.34),0 1px 0 rgba(255,255,255,.55) inset!important;
  transition:background-color .35s ease,box-shadow .35s ease,margin .3s ease,border-radius .3s ease}
html body.page-home #contactQuick:is(#murales,#live,#landscapes),
html body.page-home #murales,
html body.page-home #about:is(#murales,#live,#landscapes),
html body.page-home #live,
html body.page-home #portraits:is(#murales,#live,#landscapes),
html body.page-home #landscapes,
html body.page-home #graphic:is(#murales,#live,#landscapes),
html body.page-home #contact:is(#murales,#live,#landscapes){box-shadow:0 26px 54px -30px rgba(34,39,46,.6),0 1px 0 rgba(255,255,255,.06) inset!important}
/* les voiles clairs des sections (::before / ::after) s'effacent sur un panneau : la couleur reste pure */
html body.page-home :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact)::before,
html body.page-home :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact)::after{background:none!important;background-image:none!important;box-shadow:none!important;border:0!important}
/* les cartes gardent leur taille : le conteneur perd sa largeur calculée sur l'écran et prend le rembourrage du panneau */
html body.page-home #contactQuick > .container,
html body.page-home #murales > .container,
html body.page-home #about > .container,
html body.page-home #live > .container,
html body.page-home #portraits > .container,
html body.page-home #landscapes > .container,
html body.page-home #graphic > .container,
html body.page-home #contact > .container{width:auto!important;max-width:none!important;margin-inline:0!important;padding-inline:var(--ac-inner)!important;box-sizing:border-box}
/* la galerie reste telle quelle ; seul l'air au-dessus et au-dessous suit l'espacement choisi, pour des écarts réguliers */
html body.page-home #gallery.gx-expo{margin-top:var(--ac-gap)!important;margin-bottom:var(--ac-gap)!important}
/* ---------- sur un ton profond : ce qui est posé directement sur le panneau passe en clair ---------- */
html body.page-home :is(#murales,#live,#landscapes) > .section-portfolio-cta-wrap{color:#f6efe4}
html body.page-home :is(#murales,#live,#landscapes):not(.ac-has-cta) .section-portfolio-cta{box-shadow:0 12px 26px -12px rgba(0,0,0,.55)!important}
html body.page-home :is(#murales,#live,#landscapes) :focus-visible{outline-color:#f6efe4}
/* ---------- ordinateur : même logique que la galerie ---------- */
@media (min-width:980px){
html body.page-home #contactQuick,
html body.page-home #murales,
html body.page-home #about,
html body.page-home #live,
html body.page-home #portraits,
html body.page-home #landscapes,
html body.page-home #graphic,
html body.page-home #contact{margin:var(--ac-gap-d) max(24px,calc((100% - 1224px) / 2 - 36px))!important;
    padding:clamp(16px,calc((100% - 1180px) / 7),36px) 0 clamp(12px,calc((100% - 1200px) / 10),24px)!important;border-radius:var(--ac-rad-d)!important}
/* sans bouton portfolio en bas, le panneau garde le même air en haut et en bas */
html body.page-home #contact{padding:clamp(16px,calc((100% - 1180px) / 7),36px) 0!important}
/* À propos est le bloc le plus haut : l'air intérieur se resserre pour qu'il tienne dans l'écran */
html body.page-home #about{padding:18px 0!important}
html body.page-home #gallery.gx-expo{margin-top:var(--ac-gap-d)!important;margin-bottom:var(--ac-gap-d)!important}
html body.page-home #contactQuick > .container,
html body.page-home #murales > .container,
html body.page-home #about > .container,
html body.page-home #live > .container,
html body.page-home #portraits > .container,
html body.page-home #landscapes > .container,
html body.page-home #graphic > .container,
html body.page-home #contact > .container{width:min(1220px,calc(100% - 2 * var(--ac-in-d)))!important;margin-inline:auto!important;padding-inline:0!important}
}
@media (prefers-reduced-motion:reduce){
html body.page-home :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact){transition:none!important}
}
/* =====================================================================================
   CARTES FONDUES (réglage par défaut, demande du client du 15/09 : « tout le bloc ! comme pour Œuvres ») :
   un seul panneau coloré par bloc, AUCUNE carte à l'intérieur ; texte, formulaire, prix, diapos posés directement sur la couleur,
   en crème sur les tons profonds (comme la galerie), en foncé sur les pastels. Le JS vérifie ensuite le contraste AA de chaque texte.
   ===================================================================================== */
html body.page-home :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) :is(.text-card,.media-card,.press-home-section){background:transparent!important;background-image:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body.page-home :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) :is(.text-card,.media-card)::before,
html body.page-home :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) :is(.text-card,.media-card)::after{background:none!important;box-shadow:none!important;border:0!important}
/* téléphone : le texte arrive à 32 px du bord de l'écran, comme dans la galerie ; moins d'air entre les deux moitiés du bloc */
html body.page-home :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact){padding:20px 0 10px!important}
html body.page-home :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) > .container{padding-inline:0!important}
html body.page-home :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) > .section-portfolio-cta-wrap{padding-inline:calc(var(--ac-tx) - var(--ac-edge))!important}
html body.page-home :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) :is(.text-card,.media-card){padding:6px calc(var(--ac-tx) - var(--ac-edge))!important}
html body.page-home :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) .press-home-section{padding:14px calc(var(--ac-tx) - var(--ac-edge)) 6px!important}
html body.page-home :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) .about-visual{padding:0 calc(var(--ac-tx) - var(--ac-edge))!important}
html body.page-home :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) .about-visual img{border-radius:22px!important}
@media (min-width:980px){
html body.page-home :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact){padding:clamp(18px,calc((100% - 1180px) / 6),40px) 0 clamp(12px,calc((100% - 1200px) / 10),24px)!important}
html body.page-home #about{padding:24px 0 18px!important}
html body.page-home #contact{padding:clamp(18px,calc((100% - 1180px) / 6),40px) 0!important}
html body.page-home :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) > .container{padding-inline:0!important}
html body.page-home :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) > .section-portfolio-cta-wrap{padding-inline:36px!important}
html body.page-home :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) :is(.text-card,.media-card){padding:12px 36px!important}
html body.page-home :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) .media-card{padding-inline:24px!important}
html body.page-home :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) .press-home-section{padding:18px 24px 6px!important}
html body.page-home :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) .about-visual{padding:0 0 0 24px!important}
}
/* ---------- pastels : texte foncé habituel, champ en blanc translucide ---------- */
html body.page-home :is(#contactQuick,#about,#portraits,#graphic,#contact) textarea{background:rgba(255,255,255,.62)!important}
html body.page-home :is(#contactQuick,#about,#portraits,#graphic,#contact) textarea:focus{background:rgba(255,255,255,.85)!important}
html body.page-home :is(#contactQuick,#about,#portraits,#graphic,#contact) .contact-pill{background:rgba(255,255,255,.5)!important;background-image:none!important;box-shadow:none!important;border-color:rgba(120,90,60,.16)!important}
html body.page-home :is(#contactQuick,#about,#portraits,#graphic,#contact) .press-card{background:rgba(255,255,255,.55)!important;box-shadow:none!important}
html body.page-home :is(#contactQuick,#about,#portraits,#graphic,#contact) .live-invite{border-top-color:rgba(60,42,26,.16)!important}
/* ---------- tons profonds : crème, comme la galerie ---------- */
html body.page-home :is(#murales,#live,#landscapes){color:#d9cfc2}
html body.page-home :is(#murales,#live,#landscapes) :is(.text-card,.media-card,.press-home-section){color:#d9cfc2!important}
html body.page-home :is(#murales,#live,#landscapes) :is(h2,h3,h4,.media-title,.graphic-kicker,.live-invite-label,.live-invite-label strong,.press-card-title){color:#f6efe4!important}
html body.page-home :is(#murales,#live,#landscapes) :is(p,.section-intro,.contact-pill-meta,.press-home-subtitle,label){color:#d9cfc2!important}
html body.page-home :is(#murales,#live,#landscapes) .live-offres p,
html body.page-home :is(#murales,#live,#landscapes) .live-offres p a,
html body.page-home :is(#murales,#live,#landscapes) .live-offres p > span:not(.live-prix){color:#f6efe4!important}
html body.page-home :is(#murales,#live,#landscapes) .live-offres p{border-color:rgba(246,239,228,.14)!important}
html body.page-home :is(#murales,#live,#landscapes) .live-prix{color:#e0b77c!important}
html body.page-home :is(#murales,#live,#landscapes) .live-tout,
html body.page-home :is(#murales,#live,#landscapes) .live-tout a,
html body.page-home :is(#murales,#live,#landscapes) .press-home-footer a{color:#f6efe4!important;text-decoration-color:rgba(246,239,228,.55)!important}
html body.page-home :is(#murales,#live,#landscapes) a:hover{text-decoration-color:#f6efe4!important}
html body.page-home :is(#murales,#live,#landscapes) .live-invite{border-top-color:rgba(246,239,228,.2)!important}
html body.page-home :is(#murales,#live,#landscapes) textarea{background:rgba(255,255,255,.08)!important;border-color:rgba(246,239,228,.34)!important;color:#f6efe4!important;box-shadow:none!important}
html body.page-home :is(#murales,#live,#landscapes) textarea::placeholder{color:rgba(246,239,228,.74)!important;opacity:1!important}
html body.page-home :is(#murales,#live,#landscapes) textarea:focus{outline:none!important;border-color:#e0b77c!important;box-shadow:0 0 0 3px rgba(224,183,124,.3)!important}
html body.page-home :is(#murales,#live,#landscapes) .btn-wa{background:#f6efe4!important;background-image:none!important;color:#241c17!important;border:1px solid #f6efe4!important;box-shadow:none!important;text-shadow:none!important}
html body.page-home :is(#murales,#live,#landscapes) .btn-mail{background:transparent!important;background-image:none!important;color:#f6efe4!important;border:1px solid rgba(246,239,228,.5)!important;box-shadow:none!important;text-shadow:none!important}
html body.page-home :is(#murales,#live,#landscapes) .btn-mail:hover{border-color:#f6efe4!important;background:rgba(246,239,228,.08)!important}
html body.page-home :is(#murales,#live,#landscapes):not(.ac-has-cta) .section-portfolio-cta{background:transparent!important;background-image:none!important;color:#f6efe4!important;border:1px solid rgba(246,239,228,.5)!important;box-shadow:none!important}
html body.page-home :is(#murales,#live,#landscapes):not(.ac-has-cta) .section-portfolio-cta:hover{border-color:#f6efe4!important;background:rgba(246,239,228,.08)!important}
html body.page-home :is(#murales,#live,#landscapes) :is(.dz-arrow,.ill-arrow){background:#f6efe4!important;background-image:none!important;color:#241c17!important;border:0!important}
html body.page-home :is(#murales,#live,#landscapes) :is(.dz-a-thumb,.ill-thumb){box-shadow:none!important}
html body.page-home :is(#murales,#live,#landscapes) :is(.dz-a-thumb,.ill-thumb).is-active{box-shadow:0 0 0 2px var(--ac-bg),0 0 0 4px #f6efe4!important}
html body.page-home :is(#murales,#live,#landscapes) .contact-pill{background:rgba(246,239,228,.06)!important;background-image:none!important;border:1px solid rgba(246,239,228,.2)!important;box-shadow:none!important;color:#f6efe4!important}
html body.page-home :is(#murales,#live,#landscapes) .contact-pill strong{color:#f6efe4!important}
html body.page-home :is(#murales,#live,#landscapes) .contact-icon{background:rgba(246,239,228,.12)!important;color:#e0b77c!important}
html body.page-home :is(#murales,#live,#landscapes) .press-card{background:rgba(246,239,228,.05)!important;border-color:rgba(246,239,228,.18)!important;box-shadow:none!important}
html body.page-home :is(#murales,#live,#landscapes) .press-card-logo img{filter:brightness(0) invert(.94)!important}
html body.page-home :is(#murales,#live,#landscapes) .press-card-icon{color:#e0b77c!important}
html body.page-home :is(#murales,#live,#landscapes) :focus-visible{outline:2px solid #f6efe4!important;outline-offset:3px}
/* =====================================================================================
   16/09 · DEMANDE DU CLIENT : « tout le bloc ! comme pour Œuvres » : UN SEUL fond coloré, AUCUNE carte à l'intérieur.
   pour que l'option secondaire « cartes blanches » reste possible.)
   Les cartes .text-card et .media-card deviennent transparentes (ni fond, ni bordure, ni ombre, ni arrondi) ;
   sur un ton profond (.tc-deep), tout le texte passe en clair, comme la galerie « Œuvres originales ».
   ===================================================================================== */
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic,#contact,#contactQuick,#about) :is(.text-card,.media-card,.contact-card,.info-card){background:transparent!important;background-image:none!important;box-shadow:none!important;border:0!important;border-radius:0!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic,#contact,#contactQuick,#about) :is(.text-card,.media-card,.contact-card,.info-card)::before,
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic,#contact,#contactQuick,#about) :is(.text-card,.media-card,.contact-card,.info-card)::after{display:none!important}
/* ---- ton profond : texte clair ---- */
html body.page-home #mainContent :is(#murales,#live,#landscapes) :is(h1,h2,h3,h4,strong,b,.media-title,.graphic-kicker,.live-invite-label,.live-invite-label strong,label){color:#f6efe4!important}
html body.page-home #mainContent :is(#murales,#live,#landscapes) :is(p,li,span,.section-intro,figcaption){color:#dcd2c5!important}
html body.page-home #mainContent :is(#murales,#live,#landscapes) .media-title-kicker{color:#e0b77c!important}
/* filets */
html body.page-home #mainContent :is(#murales,#live,#landscapes) :is(.live-invite,.live-offres,hr){border-color:rgba(246,239,228,.18)!important}
html body.page-home #mainContent :is(#murales,#live,#landscapes) .live-invite::before,
html body.page-home #mainContent :is(#murales,#live,#landscapes) .live-invite::after{background:rgba(246,239,228,.18)!important}
/* lignes de prix : nom crème, prix ocre clair */
html body.page-home #mainContent :is(#murales,#live,#landscapes) .live-offres :is(li,span,p,a){color:#f6efe4!important}
html body.page-home #mainContent :is(#murales,#live,#landscapes) :is(.live-prix,.live-offres .live-prix,.live-offres b,.live-offres strong){color:#e0b77c!important}
/* champ du formulaire */
html body.page-home #mainContent :is(#murales,#live,#landscapes) :is(textarea,input,select){background:rgba(255,255,255,.07)!important;border:1px solid rgba(246,239,228,.35)!important;color:#f6efe4!important;box-shadow:none!important}
html body.page-home #mainContent :is(#murales,#live,#landscapes) :is(textarea,input)::placeholder{color:rgba(246,239,228,.62)!important}
/* boutons : principal crème, secondaire contour clair (comme la galerie) */
html body.page-home #mainContent :is(#murales,#live,#landscapes) .btn-wa{background:#f6efe4!important;background-image:none!important;color:#22272e!important;border:1px solid #f6efe4!important;box-shadow:none!important;text-shadow:none!important}
html body.page-home #mainContent :is(#murales,#live,#landscapes) .btn-mail{background:transparent!important;background-image:none!important;color:#f6efe4!important;border:1px solid rgba(246,239,228,.5)!important;box-shadow:none!important;text-shadow:none!important}
/* liens (« Par où commencer ? ») et bouton portfolio */
html body.page-home #mainContent :is(#murales,#live,#landscapes) :is(.live-tout,.live-tout a,a:not(.btn):not(.section-portfolio-cta)){color:#f6efe4!important;text-decoration-color:rgba(246,239,228,.55)!important;border-color:rgba(246,239,228,.55)!important}
html body.page-home #mainContent :is(#murales,#live,#landscapes):not(.ac-has-cta) .section-portfolio-cta{background:transparent!important;background-image:none!important;color:#f6efe4!important;border:1px solid rgba(246,239,228,.5)!important;box-shadow:none!important}
/* diapos : anneau actif clair, flèches claires */
html body.page-home #mainContent :is(#murales,#live,#landscapes) :is(.dz-a-thumb.is-active,.ill-thumb.is-active){box-shadow:0 0 0 2px var(--ac-bg),0 0 0 4px #e0b77c!important}
html body.page-home #mainContent :is(#murales,#live,#landscapes) .slider-btn{background:rgba(246,239,228,.92)!important;color:#22272e!important}
/* 15/09 (agent témoin) : texte indicatif du champ lisible en AA sur tous les tons profonds (4,5:1 mini, terre brûlée compris) */
html body.page-home #mainContent :is(#murales,#live,#landscapes) :is(textarea,input)::placeholder{color:rgba(246,239,228,.86)!important;opacity:1!important}
/* =====================================================================================
   MISE EN PAGE D'UN BLOC EN COULEUR (15/09, retour du client : « un seul bloc par domaine, c'est beaucoup plus lisible ;
   il faudrait mettre en page correctement ») : 4 propositions, réglage data-tc-mep posé sur CHAQUE section (mise en page bloc par bloc, 15/09).
   0 = actuelle (l'ancien découpage en deux cartes) · 1 = alignée · 2 = titre en tête · 3 = comme la galerie · 4 = centrée, filet vertical.
   Le JS range « Par où commencer ? » et le bouton portfolio dans .ac-foot (et, en M2, le titre manuscrit et le grand titre dans .ac-head) ;
   aucun texte n'est changé ni retiré. Sur téléphone : une seule colonne, le texte à 32 px du bord, un élément par ligne.
   ===================================================================================== */
/* ---------- téléphone et ordinateur ---------- */
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) .ac-foot{display:contents}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) .ac-foot > .live-tout{order:1;margin:-6px 0 0!important;padding-inline:calc(var(--ac-tx) - var(--ac-edge))}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) .ac-foot > .section-portfolio-cta{order:3;justify-self:start;margin:4px calc(var(--ac-tx) - var(--ac-edge)) 8px!important}
html body.page-home #mainContent :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) .ac-head{order:0;padding-inline:calc(var(--ac-tx) - var(--ac-edge))}
html body.page-home #mainContent :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) .ac-head > :is(.media-title,.graphic-lead,h2){margin:0!important;padding:0!important}
html body.page-home #mainContent :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) .ac-head > :is(.media-title,.graphic-lead){margin-bottom:2px!important}
html body.page-home #mainContent :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) .ac-head .graphic-kicker{margin:0!important}
/* filets plus discrets dans un bloc en couleur */
html body.page-home #mainContent :is(#contactQuick,#about,#portraits,#graphic,#contact) .live-invite{border-top-color:rgba(60,42,26,.12)!important}
html body.page-home #mainContent :is(#murales,#live,#landscapes) .live-invite{border-top-color:rgba(246,239,228,.13)!important}
@media (min-width:980px){
/* ---------- socle commun des propositions 1 à 4, blocs à deux colonnes ---------- */
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) > .section-layout{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:auto 1fr auto;column-gap:56px!important;row-gap:0!important;align-items:stretch!important;padding-inline:36px!important;position:relative}
html body.page-home #mainContent #graphic > .section-layout{grid-template-columns:minmax(0,54fr) minmax(0,46fr)!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) > .section-layout > :is(.text-card,.media-card){padding:0!important;margin:0!important;order:0!important;min-width:0}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) .ac-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding-top:18px}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) .ac-foot > .live-tout{order:0;margin:0!important;padding:0!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) .ac-foot > .section-portfolio-cta{order:0;margin:0!important;white-space:nowrap}
/* la photo et le déroulé des illustrations tiennent dans l'écran, jusqu'à 1 280 × 720 */
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes) .dz-a-frame{height:min(calc(100vh - 250px),520px)!important}
html body.page-home #mainContent #graphic .ill-roll{--sh:min(440px,calc(100vh - 330px))!important}
/* vignettes : centrées, fondu doux aux deux bords */
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes) .dz-a-thumbs-in{justify-content:safe center!important;-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)!important;mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)!important}
/* deux boutons côte à côte (chacun sur une ligne) : la colonne de texte ne dépasse plus la photo */
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) .btn-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;display:grid!important}
/* ---------- M2 · titre en tête : une ligne de titre sur tout le panneau, puis texte à gauche et photo à droite ---------- */
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) > .section-layout{grid-template-rows:auto auto 1fr auto}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic,#about,#contact) .ac-head{grid-column:1 / -1;grid-row:1;padding:0 0 22px!important;display:flex;flex-direction:column;align-items:flex-start}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) > .section-layout > .text-card{grid-column:1;grid-row:2 / 4}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) > .section-layout > .ac-foot{grid-column:1;grid-row:4;align-self:end}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) > .section-layout > .media-card{grid-column:2;grid-row:2 / 5}
html body.page-home #mainContent #graphic > .section-layout{grid-template-columns:minmax(0,46fr) minmax(0,54fr)!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes) .dz-a-frame{height:min(calc(100vh - 325px),500px)!important}
html body.page-home #mainContent #graphic .ill-roll{--sh:min(420px,calc(100vh - 400px))!important}
/* ---------- À propos : trois colonnes (photo, texte, presse) pour tenir dans l'écran ---------- */
html body.page-home #mainContent #about > .about-press-layout{display:grid!important;grid-template-columns:minmax(0,.7fr) minmax(0,1.15fr) minmax(0,1.15fr)!important;column-gap:44px!important;row-gap:0!important;align-items:stretch!important;padding-inline:36px!important}
html body.page-home #mainContent #about .about-press-column{display:contents!important}
html body.page-home #mainContent #about .about-visual{grid-column:1;grid-row:2;padding:0!important;margin:0!important;height:auto!important;min-height:0!important}
html body.page-home #mainContent #about .about-visual img{height:100%!important;width:100%!important;object-fit:cover!important}
html body.page-home #mainContent #about .about-copy-card{grid-column:2;grid-row:2;padding:0!important;margin:0!important;align-self:center}
html body.page-home #mainContent #about .press-home-section{grid-column:3;grid-row:2;padding:0!important;margin:0!important;align-self:center}
html body.page-home #mainContent #about .press-home-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
/* ---------- Contact du bas : les moyens de contact et le formulaire côte à côte ---------- */
html body.page-home #mainContent #contact > .contact-grid{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;column-gap:56px!important;row-gap:0!important;align-items:start!important;padding-inline:36px!important}
html body.page-home #mainContent #contact > .contact-grid > .text-card{grid-row:2;padding:0!important;margin:0!important;max-width:none!important;width:auto!important;justify-self:stretch!important}
html body.page-home #mainContent #contact > .contact-grid > .contact-form-card{padding-top:38px!important}
}
/* M2 : le titre sorti de sa carte garde la typographie du site (valeurs relevées sur l'accueil : Caveat 19,2 / 22 / 24 px, Cormorant 27,84 / 29,6 / 35,84 px) */
html body.page-home #mainContent #contact .ac-head > h2{font-family:Caveat,cursive!important;font-size:27.52px!important;letter-spacing:.01em!important}
html body.page-home #mainContent :is(#contactQuick,#about,#portraits,#graphic,#contact) .ac-head > h2{color:#241c17}
html body.page-home #mainContent :is(#contactQuick,#about,#portraits,#graphic,#contact) .ac-head > .media-title,
html body.page-home #mainContent :is(#contactQuick,#about,#portraits,#graphic,#contact) .ac-head .graphic-kicker,
html body.page-home #mainContent #contact .ac-head > h2{color:#b87a46}
html body.page-home #mainContent :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) .ac-head{padding-block:4px 6px}
@media (min-width:720px){
html body.page-home #mainContent :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) .ac-head > h2{font-size:29.6px!important}
html body.page-home #mainContent :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) .ac-head > .media-title,
html body.page-home #mainContent :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) .ac-head .graphic-kicker{font-size:22px!important}
}
@media (min-width:980px){
html body.page-home #mainContent :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) .ac-head > h2{font-size:35.84px!important}
html body.page-home #mainContent :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) .ac-head > .media-title,
html body.page-home #mainContent :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) .ac-head .graphic-kicker{font-size:24px!important}
html body.page-home #mainContent #contact .ac-head > h2{font-size:29.6px!important}
}
/* =====================================================================================
   GRILLE ET RYTHME (15/09, exigence du client « analyse, pense, code parfaitement ») : pas de 8 px.
   Téléphone : ordre logique titre, photo, texte, formulaire, prix, liens, portfolio ; texte à 32 px du bord.
   Ordinateur : titre +16, texte +24 formulaire (filet) +24, boutons +16, prix +24, liens +24.
   ===================================================================================== */
html body.page-home #mainContent :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) .ac-foot > .live-tout{padding-inline:0!important}
@media (max-width:979px){
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic,#about,#contact){padding:24px 0 16px!important}
/* blocs à deux colonnes : les cartes s'effacent, chaque élément prend sa place dans l'ordre */
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) > .section-layout{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;padding-inline:calc(var(--ac-tx) - var(--ac-edge))!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) > .section-layout > :is(.text-card,.media-card,.ac-foot){display:contents!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) :is(.text-card > h2,.ac-head){order:1!important;margin:0 0 16px!important;padding-inline:0!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) .media-card > :is(.media-title,.graphic-lead){order:2!important;margin:0 0 8px!important;padding:0!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) .media-card > :is(.dz-A,.ill-roll){order:3!important;margin:0 0 24px!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) .text-card > :not(h2){order:4!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) .text-card > .section-intro{margin:0!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) .text-card > .live-invite{margin:24px 0 0!important;padding-top:24px!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) .ac-foot > .live-tout{order:5!important;margin:16px 0 0!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) .ac-foot > .section-portfolio-cta{order:6!important;align-self:flex-start!important;margin:24px 0 8px!important}
/* À propos : titre, photo, texte, presse */
html body.page-home #mainContent #about > .about-press-layout{display:flex!important;flex-direction:column!important;gap:0!important;padding-inline:calc(var(--ac-tx) - var(--ac-edge))!important}
html body.page-home #mainContent #about :is(.about-press-column,.about-copy-card){display:contents!important}
html body.page-home #mainContent #about :is(.about-copy-card > h2,.ac-head){order:1!important;margin:0 0 16px!important;padding-inline:0!important}
html body.page-home #mainContent #about .about-visual{order:2!important;padding:0!important;margin:0 0 24px!important}
html body.page-home #mainContent #about .about-copy-card > :not(h2){order:3!important}
html body.page-home #mainContent #about .press-home-section{order:4!important;margin:32px 0 0!important;padding:0!important}
/* contacts */
html body.page-home #mainContent #contact > .contact-grid{padding-inline:calc(var(--ac-tx) - var(--ac-edge))!important;row-gap:32px!important}
html body.page-home #mainContent #contact > .contact-grid > :is(.text-card,.ac-head){padding:0!important;margin:0!important}
}
@media (min-width:980px){
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) .text-card > h2{margin:0 0 16px!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) .text-card > .section-intro{margin:0!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) .text-card > .live-invite{margin:24px 0 0!important;padding-top:24px!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) .btn-row{margin-top:16px!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) .ac-foot{padding-top:24px!important;gap:16px 32px!important}
html body.page-home #mainContent :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) .ac-head{padding:0 0 24px!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic,#about,#contact){padding-top:clamp(24px,calc((100% - 1180px) / 6),40px)!important;padding-bottom:clamp(24px,calc((100% - 1200px) / 6),40px)!important}
}
/* téléphone : une ligne de prix trop longue pour tenir à côté de son prix passe en deux lignes nettes (le nom, puis le prix dessous), jamais un nom coupé en deux */
@media (max-width:979px){
/* (15/09) règle retirée : le prix ne passe plus jamais sous son nom, voir « LIGNES DE PRIX » plus bas */
}
/* =====================================================================================
   BOUTON PORTFOLIO DANS L'INTERVALLE (15/09, demande du client : « comme d'habitude, dans l'intercalage entre deux sections ; ça raccourcit ») :
   le bouton garde son style clair habituel du site, sur le fond crème, aligné sur le bord du texte du panneau ;
   l'intervalle sous ce panneau = 16 px + bouton (48 px) + l'espacement choisi.
   ===================================================================================== */
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic).ac-has-cta{margin-bottom:calc(var(--ac-gap) + 64px)!important;overflow:visible!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic).ac-has-cta > .section-portfolio-cta-wrap{position:absolute!important;left:0;right:0;top:100%;margin:0 auto!important;padding:16px calc(var(--ac-tx) - var(--ac-edge)) 0!important;height:auto!important;display:block!important;color:inherit}
@media (min-width:980px){
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic).ac-has-cta{margin-bottom:calc(var(--ac-gap-d) + 64px)!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic).ac-has-cta > .section-portfolio-cta-wrap{width:min(1220px,calc(100% - 2 * var(--ac-in-d)))!important;padding:16px 36px 0!important}
}
@media (min-width:980px){
/* bouton portfolio : au bord du texte du panneau (valeur mesurée par le script) */
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic).ac-has-cta > .section-portfolio-cta-wrap{left:0!important;right:auto!important;width:auto!important;margin:0!important;padding:16px 0 0 var(--ac-cta-x,36px)!important}
/* M1, M2 : la photo suit la hauteur de la colonne de texte */
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes).ac-fit .dz-a-frame{height:var(--ac-fh)!important}
html body.page-home #mainContent #graphic.ac-fit .ill-roll{--sh:var(--ac-sh)!important}
}
/* formulaire : pas d'écart caché entre le champ et les boutons (16 px exactement, comme partout) */
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic,#contact) .live-invite{row-gap:0!important;gap:0!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic,#contact) .live-invite .btn-row{min-height:0!important;height:auto!important;padding:0!important;align-items:start!important;margin-top:16px!important}
/* =====================================================================================
   TÉLÉPHONE, ORDRE DÉFINITIF (15/09, consigne du client : « toujours finir par la partie avec les photos, d'abord le texte ») :
   titre, texte, formulaire, prix, « Par où commencer ? », puis le titre manuscrit, la photo et ses vignettes ; le bouton portfolio sous le bloc.
   ===================================================================================== */
@media (max-width:979px){
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic,#about) .ac-head{display:contents!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) :is(.text-card > h2,.ac-head > h2){order:1!important;margin:0 0 16px!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) .text-card > :not(h2){order:2!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) .ac-foot > .live-tout{order:3!important;margin:16px 0 0!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) :is(.media-card > .media-title,.media-card > .graphic-lead,.ac-head > .media-title,.ac-head > .graphic-lead){order:4!important;margin:32px 0 8px!important;padding:0!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) .media-card > :is(.dz-A,.ill-roll){order:5!important;margin:0 0 8px!important}
/* Live n'a pas de titre manuscrit : la photo prend l'air de 32 px à sa place */
html body.page-home #mainContent #live .media-card > .dz-A{margin-top:32px!important}
/* À propos : titre, texte, presse, puis la photo */
html body.page-home #mainContent #about :is(.about-copy-card > h2,.ac-head > h2){order:1!important;margin:0 0 16px!important}
html body.page-home #mainContent #about .about-copy-card > :not(h2){order:2!important}
html body.page-home #mainContent #about .press-home-section{order:3!important;margin:32px 0 0!important}
html body.page-home #mainContent #about .about-visual{order:4!important;margin:32px 0 8px!important}
}
/* =====================================================================================
   15/09 · SANS LES TITRES MANUSCRITS (demande du client : « on va enlever : Les fresques que j'ai réalisées, etc. ») :
   retirés visuellement sur la feuille (Fresques, Portraits, Paysages, Illustration ; Live n'en a pas).
   Sur le vrai accueil ce sont des h2 : décision à prendre (titre gardé pour les moteurs mais invisible, ou texte placé ailleurs).
   ===================================================================================== */
/* 16/09, pose : les titres manuscrits sont sortis du HTML des 4 accueils (aucun titre masqué en CSS). */
@media (max-width:979px){
/* téléphone : la photo garde ses 32 px d'air après « Par où commencer ? » */
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic) .media-card > :is(.dz-A,.ill-roll){margin-top:32px!important}
}
/* =====================================================================================
   15/09 · ILLUSTRATION : LE DÉROULÉ SUR UN MUR BLANC (demande du client : « ça peut être sur un fond blanc, les illustrations qui passent »).
   Le déroulé des œuvres repose sur un fond blanc arrondi (un cran sous l'arrondi du panneau) ; le fondu des bords part vers ce blanc,
   plus jamais vers la couleur du panneau (fini l'œuvre teintée de rose). Les vignettes restent sur la couleur, anneau actif clair.
   ===================================================================================== */
html body.page-home #mainContent #graphic:is(#murales,#live,#landscapes) .ill-view{background:#fff!important;border-radius:22px!important;margin-inline:0!important;overflow:hidden!important;box-shadow:0 18px 40px -26px rgba(0,0,0,.45)!important}
html body.page-home #mainContent #graphic:is(#murales,#live,#landscapes) .ill-view .ill-arrow{background:#fff!important;background-image:none!important;color:#241c17!important;border:1px solid rgba(36,28,23,.14)!important;box-shadow:0 6px 16px -8px rgba(36,28,23,.4)!important}
@media (min-width:980px){
html body.page-home #mainContent #graphic:is(#murales,#live,#landscapes) .ill-view{border-radius:28px!important}
}
/* =====================================================================================
   15/09 · LIGNES DE PRIX SUR UNE LIGNE (règle validée du client : nom à gauche, prix à droite, une seule ligne, à toutes les largeurs, 4 langues).
   Sur téléphone, dans un bloc en couleur : texte à 24 px du bord de l'écran (au lieu de 32) et libellés de prix un cran plus petits sous 400 px,
   mesuré dans les 4 langues à 360, 375 et 390 px.
   ===================================================================================== */
html body.page-home #mainContent :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) .live-offres > p{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;column-gap:10px!important;align-items:baseline!important;flex-wrap:nowrap!important}
html body.page-home #mainContent :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) .live-offres > p > span{white-space:nowrap!important;min-width:0}
html body.page-home #mainContent :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact) .live-offres > p > .live-prix{justify-self:end!important;text-align:right!important}
@media (max-width:979px){
html{--ac-tx:24px}
}
@media (max-width:979px){
/* chaque libellé garde sa taille du site tant qu'il tient, et se resserre avec l'écran quand il ne tient plus (jamais sous 12,8 px) */
}
/* =====================================================================================
   15/09 · CHAMP « ÉCRIS-MOI TON IDÉE » PLEIN (demande du client : « blanc, ou de la couleur du bouton Envoyer sur WhatsApp ») :
   crème #f6efe4 sur les tons profonds (la couleur du bouton), blanc franc sur les pastels ; texte foncé, texte indicatif lisible, halo ocre au focus.
   ===================================================================================== */
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic,#contact,#contactQuick,#about):not(#_tc) :is(textarea,input:not([type="checkbox"]):not([type="radio"]),select){background:#fff!important;background-image:none!important;color:#211a15!important;border:1px solid rgba(36,28,23,.16)!important;box-shadow:none!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic,#contact,#contactQuick,#about):not(#_tc):is(#murales,#live,#landscapes) :is(textarea,input:not([type="checkbox"]):not([type="radio"]),select){background:#f6efe4!important;border-color:rgba(246,239,228,.9)!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic,#contact,#contactQuick,#about):not(#_tc) :is(textarea,input)::placeholder{color:#6f6257!important;opacity:1!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic,#contact,#contactQuick,#about):not(#_tc) :is(textarea,input,select):focus{outline:none!important;border-color:#9b6b35!important;box-shadow:0 0 0 3px rgba(224,183,124,.45)!important}
/* =====================================================================================
   15/09 · BLOCS CLAIRS : AUCUN TEXTE CLAIR (couleurs validées : lin, nuage d'Envol, vert des volets, ivoires).
   Texte foncé, titres foncés, prix en ocre foncé, bouton principal foncé à texte crème, bouton secondaire à contour foncé,
   flèches blanches à glyphe foncé, anneau de vignette foncé. Le script de contraste assombrit encore si un fond l'exige.
   ===================================================================================== */
html body.page-home #mainContent :is(#contactQuick,#about,#portraits,#graphic,#contact):not(#_tc) .btn-wa{background:#211a15!important;background-image:none!important;color:#f6efe4!important;border:1px solid #211a15!important;box-shadow:none!important;text-shadow:none!important}
html body.page-home #mainContent :is(#contactQuick,#about,#portraits,#graphic,#contact):not(#_tc) .btn-mail{background:transparent!important;background-image:none!important;color:#211a15!important;border:1px solid rgba(33,26,21,.55)!important;box-shadow:none!important;text-shadow:none!important}
html body.page-home #mainContent :is(#contactQuick,#about,#portraits,#graphic,#contact):not(#_tc) :is(.dz-arrow,.ill-arrow){background:#fff!important;background-image:none!important;color:#211a15!important;border:1px solid rgba(33,26,21,.14)!important}
html body.page-home #mainContent :is(#contactQuick,#about,#portraits,#graphic,#contact):not(#_tc) :is(.dz-a-thumb,.ill-thumb){box-shadow:none!important}
html body.page-home #mainContent :is(#contactQuick,#about,#portraits,#graphic,#contact):not(#_tc) :is(.dz-a-thumb,.ill-thumb).is-active{box-shadow:0 0 0 2px var(--ac-bg),0 0 0 4px #211a15!important}
html body.page-home #mainContent :is(#contactQuick,#about,#portraits,#graphic,#contact):not(#_tc) .contact-pill{background:rgba(255,255,255,.55)!important;background-image:none!important;border:1px solid rgba(33,26,21,.14)!important;box-shadow:none!important}
html body.page-home #mainContent :is(#contactQuick,#about,#portraits,#graphic,#contact):not(#_tc) .contact-icon{background:rgba(255,255,255,.8)!important}
/* le mur blanc des illustrations reste visible sur un fond très clair (nuage d'Envol) : blanc pur, fin liseré et ombre douce */
/* (15/09, second retour) sur une couleur claire : pas de mur blanc, les œuvres flottent sur la couleur du bloc et prennent la place */
html body.page-home #mainContent #graphic:not(#_tc) .ill-view{background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;margin-inline:0!important}
html body.page-home #mainContent #graphic:not(#_tc) .ga-art{box-shadow:0 1px 2px rgba(30,20,10,.12),0 18px 30px -18px rgba(30,20,10,.45)!important}
@media (max-width:979px){
html body.page-home #mainContent #graphic:not(#_tc) .ill-view{margin-inline:calc(var(--ac-edge) - var(--ac-tx) + 8px)!important}
}
/* le bouton portfolio dans l'intervalle crème : texte assez foncé sur tout son dégradé (AA) */
html body.page-home #mainContent :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact).ac-has-cta:not(#_tc) > .section-portfolio-cta-wrap .section-portfolio-cta{color:#3a2a17!important}
/* =====================================================================================
   15/09 · DÉCISIONS DU CLIENT : M2 partout sauf À propos (mise en page actuelle, presse resserrée sur ordinateur) ;
   Illustration en M2 : le mur blanc démarre à la hauteur du paragraphe « Je dessine… » et finit avec « Par où commencer ? » ;
   boutons portfolio de la couleur de leur bloc.
   ===================================================================================== */
@media (min-width:980px){
/* le déroulé part du haut de sa colonne (au lieu d'être centré), pour s'aligner sur le texte d'intro */
html body.page-home #mainContent #graphic:not(#_tc) .media-card{justify-content:flex-start!important}
html body.page-home #mainContent #graphic:not(#_tc) .ill-roll{justify-content:flex-start!important;flex:0 0 auto!important;margin:0!important}
}
/* bouton portfolio dans l'intervalle : fond de la couleur de son bloc, texte crème sur un ton profond, foncé sur un ton clair */
html body.page-home #mainContent :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact).ac-has-cta:not(#_tc):not(#_tc2) > .section-portfolio-cta-wrap .section-portfolio-cta{background:var(--ac-bg)!important;background-image:none!important;color:#211a15!important;border:1px solid rgba(33,26,21,.2)!important;box-shadow:0 8px 18px -12px rgba(33,26,21,.35)!important}
html body.page-home #mainContent :is(#murales,#live,#landscapes).ac-has-cta:not(#_tc):not(#_tc2) > .section-portfolio-cta-wrap .section-portfolio-cta{color:#f6efe4!important;border-color:transparent!important}
html body.page-home #mainContent :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact).ac-has-cta:not(#_tc):not(#_tc2) > .section-portfolio-cta-wrap .section-portfolio-cta:hover{filter:brightness(1.06)}
/* bouton e-mail : transparent, contour de la couleur du texte du bloc (jamais le pêche du site) */
html body.page-home #mainContent :is(#contactQuick,#about,#portraits,#graphic,#contact):not(#_tc):not(#_tc2):not(#_tc3) .btn-mail{background:transparent!important;background-image:none!important;color:#211a15!important;border:1px solid rgba(33,26,21,.55)!important;box-shadow:none!important}
html body.page-home #mainContent :is(#murales,#live,#landscapes):not(#_tc):not(#_tc2):not(#_tc3) .btn-mail{background:transparent!important;background-image:none!important;color:#f6efe4!important;border:1px solid rgba(246,239,228,.55)!important;box-shadow:none!important}
/* 15/09 · bouton portfolio À DROITE, sous les photos (demande du client : « l'œil va tout de suite au titre de la section suivante ») */
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic).ac-has-cta:not(#_tc):not(#_tc2) > .section-portfolio-cta-wrap{text-align:right!important;left:0!important;right:0!important;width:auto!important;padding:16px calc(var(--ac-tx) - var(--ac-edge)) 0!important;display:flex!important;justify-content:flex-end!important}
@media (min-width:980px){
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic).ac-has-cta:not(#_tc):not(#_tc2) > .section-portfolio-cta-wrap{padding:16px var(--ac-cta-r,36px) 0 0!important;margin:0!important}
}
/* =====================================================================================
   15/09 · LISTE DE PRIX RESSERRÉE (demande du client : « réduire un petit peu cette partie-là, pour réduire un peu les blocs »)
   et vignettes collées à la photo (plus de vide entre la photo et ses vignettes quand la colonne s'étire).
   ===================================================================================== */
@media (min-width:980px){
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic):not(#_tc):not(#_tc2) .ac-foot{padding-top:16px!important}
/* la photo et ses vignettes restent groupées en haut de la colonne */
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes):not(#_tc):not(#_tc2) .media-card{justify-content:flex-start!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes):not(#_tc):not(#_tc2) :is(.dz-A,.dz-a-stage){flex:0 0 auto!important}
}
/* =====================================================================================
   15/09 · À PROPOS = LA MISE EN PAGE DE L'ACCUEIL ACTUEL (demande du client : « je voulais ACTUELLE ; le texte PUIS presse »).
   Photo à gauche, texte à droite, presse DESSOUS le texte : mêmes largeurs, mêmes marges intérieures que fr/index.html
   (bordures transparentes de 1 px gardées pour que chaque élément tombe au pixel près), seules différences :
   le fond ivoire du bloc, aucune carte blanche, et la presse resserrée (4 articles sur une rangée).
   ===================================================================================== */
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) :is(.about-visual,.about-copy-card,.press-home-section){border:1px solid transparent!important;margin:0!important}
@media (max-width:979px){
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) > .about-press-layout{padding-inline:calc(16px - var(--ac-edge))!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .about-visual{padding:10px!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .about-visual img{border-radius:22px!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .about-copy-card{padding:20px!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .press-home-section{padding:16px 20px!important}
}
@media (min-width:980px){
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) > .about-press-layout{width:min(1220px,calc(100% - 36px))!important;margin-inline:auto!important;padding-inline:0!important;display:grid!important;grid-template-columns:440px minmax(0,1fr)!important;column-gap:26px!important;align-items:stretch!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .about-visual{padding:18px!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .about-copy-card{padding:20px!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .about-press-column{display:grid!important;row-gap:22px!important;align-content:start!important}
/* la presse, dessous le texte, resserrée : contenu aligné sur le texte, 4 articles sur une rangée */
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .press-home-section{padding:0 20px!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .press-home-head{margin:0 0 12px!important;padding:0!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .press-home-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;margin:0!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .press-card{padding:12px!important;min-height:0!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .press-home-footer{margin:10px 0 0!important;padding:0!important}
}
/* 15/09 · bouton « Envoyer sur WhatsApp » BLANC (choix du client) : blanc franc et texte foncé sur les blocs clairs ; crème sur les profonds */
html body.page-home #mainContent :is(#contactQuick,#about,#portraits,#graphic,#contact):not(#_tc):not(#_tc2):not(#_tc3) .btn-wa{background:#fff!important;background-image:none!important;color:#211a15!important;border:1px solid #fff!important;box-shadow:0 6px 16px -10px rgba(33,26,21,.35)!important;text-shadow:none!important}
html body.page-home #mainContent :is(#murales,#live,#landscapes):not(#_tc):not(#_tc2):not(#_tc3) .btn-wa{background:#f6efe4!important;background-image:none!important;color:#211a15!important;border:1px solid #f6efe4!important;box-shadow:none!important}
/* =====================================================================================
   15/09 · À PROPOS, A2 « PORTRAIT ET LETTRE » et A3 « LETTRE CENTRÉE » (A1 = accueil actuel, défaut).
   Jamais de colonne presse à côté du texte : la presse passe dessous, en frise de logos (chaque logo reste un lien).
   ===================================================================================== */
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .about-press-column{display:contents!important}
/* frise de presse */
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .press-home-section{padding:18px 0 0!important;border:0!important;border-top:1px solid rgba(33,26,21,.14)!important;display:grid!important;grid-template-columns:1fr!important;row-gap:12px!important;justify-items:center!important;text-align:center!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .press-home-head{display:flex!important;align-items:baseline!important;gap:12px!important;margin:0!important;padding:0!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .press-home-head h3{margin:0!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .press-home-head p{margin:0!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .press-home-grid{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;gap:10px 0!important;margin:0!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .press-card{display:flex!important;align-items:center!important;justify-content:center!important;height:40px!important;min-height:0!important;padding:0 22px!important;margin:0!important;background:transparent!important;border:0!important;border-left:1px solid rgba(33,26,21,.18)!important;border-radius:0!important;box-shadow:none!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .press-card:first-child{border-left:0!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .press-card :is(.press-card-title,.press-card-link){display:none!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .press-card-logo{margin:0!important;display:flex!important;align-items:center!important;height:26px!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .press-card-logo img{height:22px!important;width:auto!important;max-width:150px!important;object-fit:contain!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .press-home-footer{margin:0!important;padding:0!important}
@media (max-width:979px){
/* téléphone : le texte, puis la photo, puis la presse */
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) > .about-press-layout{display:flex!important;flex-direction:column!important;gap:24px!important;padding-inline:calc(var(--ac-tx) - var(--ac-edge))!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .about-copy-card{order:1!important;padding:0!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .about-visual{order:2!important;padding:0!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .press-home-section{order:3!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .press-card{padding:0 14px!important}
}
@media (min-width:980px){
/* A2 : la photo en grand, pleine hauteur du texte ; colonne de lecture confortable ; frise dessous sur toute la largeur */
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) > .about-press-layout{display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,7fr)!important;column-gap:56px!important;row-gap:28px!important;align-items:stretch!important;width:min(1220px,calc(100% - 2 * var(--ac-in-d)))!important;padding-inline:36px!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .about-visual{grid-column:1;grid-row:1;padding:0!important;min-height:0!important;height:auto!important;position:relative!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .about-visual img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:0% 45%!important;border-radius:28px!important;max-height:none!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .about-copy-card{grid-column:2;grid-row:1;padding:8px 0!important;max-width:68ch!important;align-self:center!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .press-home-section{grid-column:1 / -1;grid-row:2;grid-template-columns:auto 1fr auto!important;justify-items:stretch!important;align-items:center!important;column-gap:28px!important;text-align:left!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3) .press-home-grid{justify-content:center!important;flex-wrap:nowrap!important}
}
/* =====================================================================================
   15/09 · TYPOGRAPHIE IDENTIQUE AU VRAI ACCUEIL (demande du client : « j'ai l'impression que t'as changé la police »).
   Aucune police, taille, graisse, interligne ni couleur du site ne change (sauf le crème sur les tons profonds).
   M2 : le grand titre reste dans sa carte ; la carte s'efface (display:contents) et la grille place ses éléments.
   Lignes de prix : seul l'écart entre les lignes est resserré. Sur téléphone, la liste gagne 8 px de chaque côté (16 px du bord).
   ===================================================================================== */
@media (min-width:980px){
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic):not(#_tc):not(#_tc2) > .section-layout{grid-template-rows:auto auto auto auto 1fr auto!important}
html body.page-home #mainContent #graphic:not(#_tc):not(#_tc2) > .section-layout{grid-template-columns:minmax(0,46fr) minmax(0,54fr)!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic):not(#_tc):not(#_tc2) > .section-layout > .text-card{display:contents!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic):not(#_tc):not(#_tc2) .text-card > h2{grid-column:1 / -1!important;grid-row:1!important;margin:0 0 24px!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic):not(#_tc):not(#_tc2) .text-card > .section-intro{grid-column:1!important;grid-row:2!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic):not(#_tc):not(#_tc2) .text-card > .live-invite{grid-column:1!important;grid-row:3!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic):not(#_tc):not(#_tc2) .text-card > .live-offres{grid-column:1!important;grid-row:4!important;align-self:start!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic):not(#_tc):not(#_tc2) > .section-layout > .ac-foot{grid-column:1!important;grid-row:6!important;align-self:end!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic):not(#_tc):not(#_tc2) > .section-layout > .media-card{grid-column:2!important;grid-row:2 / 7!important}
}
/* lignes de prix : le nom peut passer à la ligne s'il ne tient vraiment pas, le prix reste entier à droite sur la première ligne */
html body.page-home #mainContent :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact):not(#_tc) .live-offres > p{align-items:start!important}
html body.page-home #mainContent :is(#contactQuick,#murales,#about,#live,#portraits,#landscapes,#graphic,#contact):not(#_tc) .live-offres > p > span:not(.live-prix){white-space:normal!important}
@media (max-width:979px){
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic):not(#_tc):not(#_tc2) .text-card > .live-offres{margin-inline:calc(16px - var(--ac-tx))!important}
}
/* « Par où commencer ? » dans sa carte : en bas de la colonne de texte (M1), dernière rangée de la grille (M2), sous les prix (M3, M4) */
@media (min-width:980px){
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic):not(#_tc):not(#_tc2) .text-card > .live-tout{grid-column:1!important;grid-row:6!important;align-self:end!important;margin:0!important;padding-top:16px!important}
}
@media (max-width:979px){
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic):not(#_tc):not(#_tc2) .text-card > .live-tout{margin-top:16px!important}
}
/* champ : texte saisi à la couleur du site */
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic,#contact,#contactQuick,#about):not(#_tc):not(#_tc2) :is(textarea,input:not([type="checkbox"]):not([type="radio"]),select){color:#241c17!important}
/* =====================================================================================
   16/09 · À PROPOS A2/A3 SUR TÉLÉPHONE (retour du client : « ça va pas du tout sur mobile »)
   texte → photo (677, visage visible, arrondie) → presse : « Presse » centré, sous-titre centré dessous,
   4 logos en grille 2 × 2 à cellules égales séparées par une croix fine, « Voir tous les articles » centré.
   ===================================================================================== */
@media (max-width:979px){
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4) > .about-press-layout{gap:28px!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4) .about-visual img{display:block!important;width:100%!important;height:min(118vw,440px)!important;object-fit:cover!important;object-position:22% 30%!important;border-radius:22px!important;position:static!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4) .press-home-section{display:block!important;padding:24px 0 0!important;text-align:center!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4) .press-home-head{display:block!important;text-align:center!important;margin:0 0 16px!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4) .press-home-head :is(h3,p){display:block!important;text-align:center!important;margin:0 auto!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4) .press-home-head p{margin-top:4px!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4) .press-home-grid{display:grid!important;grid-template-columns:1fr 1fr!important;grid-auto-rows:64px!important;gap:0!important;margin:0!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4) .press-card{height:auto!important;padding:0 12px!important;border:0!important;display:flex!important;align-items:center!important;justify-content:center!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4) .press-card:nth-child(odd){border-right:1px solid rgba(33,26,21,.16)!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4) .press-card:nth-child(-n+2){border-bottom:1px solid rgba(33,26,21,.16)!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4) .press-card-logo img{height:22px!important;max-width:120px!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4) .press-home-footer{margin:16px 0 0!important;text-align:center!important}
}
/* 16/09 · les tuiles de contact gardent EXACTEMENT les couleurs du site (titre ocre, M'appeler ocre, message vert,
   e-mail brun, Instagram rose, Facebook bleu) : aucune couleur forcée ici, en haut comme en bas (ordre du client). */
/* 16/09 · À propos A2/A3 : 4 paragraphes nets, même air entre eux (16 px), texte justifié avec césure propre */
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4) .about-copy-card .section-intro .ac-par{display:block!important;margin:0 0 16px!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4) .about-copy-card .section-intro .ac-par:last-child{margin-bottom:0!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4) .about-copy-card .section-intro{text-align:justify!important;-webkit-hyphens:auto!important;hyphens:auto!important;text-align-last:left!important;word-spacing:normal!important}
/* 16/09, pose : la règle du témoin qui masquait le bouton « retour en haut » sur téléphone n'est PAS posée : le vrai accueil le garde. */
@media (max-width:979px){
/* A2/A3 téléphone : le bloc texte reste entier (titre + 4 paragraphes), puis la photo, puis la presse */
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4):not(#_tc5) .about-copy-card{display:block!important;order:1!important;margin:0!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4):not(#_tc5) .about-copy-card > *{order:0!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4):not(#_tc5) .about-copy-card > h2{margin:0 0 16px!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4):not(#_tc5) .about-visual{order:2!important;margin:0!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4):not(#_tc5) .press-home-section{order:3!important;margin:0!important;border-top:1px solid rgba(33,26,21,.14)!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4):not(#_tc5) .press-card{height:auto!important;align-self:stretch!important;min-height:0!important;margin:0!important}
}
/* A2 : répartition des lignes plus régulière (moins de trous dans le justifié, jamais un mot seul en dernière ligne) */
/* A2 téléphone : justifié mesuré à 360-390 px = trous de 19 à 23 px entre les mots (17 à 24 trous par largeur) :
   le texte y est aligné à gauche, césure douce gardée ; le justifié reste sur ordinateur (0 trou mesuré) */
/* =====================================================================================
   16/09 · À PROPOS, ORDRE DU CLIENT (toutes mises en page, téléphone et ordinateur) : 3 paragraphes en texte suivi
   (« Je m'appelle… préférées. » · « Je réalise… ensemble. » · « Pour vivre de mon art… »), même air entre eux, texte justifié, césure.
   ===================================================================================== */
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4):not(#_tc5) .about-copy-card .section-intro .ac-par{display:block!important;margin:0 0 16px!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4):not(#_tc5) .about-copy-card .section-intro .ac-par:last-child{margin-bottom:0!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4):not(#_tc5) .about-copy-card .section-intro{text-align:justify!important;text-align-last:left!important;-webkit-hyphens:auto!important;hyphens:auto!important;word-spacing:normal!important}
/* 16/09 · À propos au téléphone : photo presque carrée (demande du client), visage et palette gardés */
@media (max-width:719px){
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4):not(#_tc5) .about-visual img{display:block!important;width:100%!important;height:auto!important;aspect-ratio:1 / 1!important;object-fit:cover!important;object-position:22% 30%!important;border-radius:22px!important;position:static!important;max-height:none!important}
}
@media (max-width:719px){
/* recadrage serré sur Giulia (visage et palette), par agrandissement dans le cadre carré arrondi */
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4):not(#_tc5) .about-visual{overflow:hidden!important;border-radius:22px!important;aspect-ratio:1 / 1!important;padding:0!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4):not(#_tc5) .about-visual img{border-radius:0!important;object-position:0% 30%!important;transform:scale(1.55)!important;transform-origin:4% 42%!important}
}
/* 16/09 · presse : sur ordinateur, le sous-titre passe sous « Presse », aligné à gauche, sur une seule ligne ;
   le retour « Ils ont parlé / de mon travail » reste pour le téléphone */
@media (min-width:980px){
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4) .press-home-head{display:block!important;align-self:center!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4) .press-home-head h3{margin:0 0 6px!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4) .press-home-head p{margin:0!important;white-space:nowrap!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4) .press-home-head br{display:none!important}
}
/* 16/09 · essai du client : sur téléphone, la photo et ses vignettes juste après le titre et la phrase d'intro (réglage par bloc) */
@media (max-width:979px){
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic):not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4) .text-card > .section-intro{order:2!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic):not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4) .media-card > :is(.dz-A,.ill-roll){order:4!important;margin:24px 0 0!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic):not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4) .text-card > .live-invite{order:5!important;margin-top:24px!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic):not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4) .text-card > .live-offres{order:6!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes,#graphic):not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4) .text-card > .live-tout{order:3!important;margin:16px 0 0!important}
}
/* 16/09 · À propos au téléphone (demande du client) : le titre, la photo carrée, le texte, puis la presse */
@media (max-width:979px){
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4):not(#_tc5):not(#_tc6) > .about-press-layout{display:flex!important;flex-direction:column!important;gap:0!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4):not(#_tc5):not(#_tc6) :is(.about-press-column,.about-copy-card){display:contents!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4):not(#_tc5):not(#_tc6) .about-copy-card > h2{order:1!important;margin:0 0 16px!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4):not(#_tc5):not(#_tc6) .about-visual{order:2!important;margin:0 0 24px!important;padding:0!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4):not(#_tc5):not(#_tc6) .about-copy-card > :not(h2){order:3!important}
html body.page-home #mainContent #about:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4):not(#_tc5):not(#_tc6) .press-home-section{order:4!important;margin:28px 0 0!important}
}
/* 16/09 · téléphone : moins d'air au-dessus du bloc « Contacter Giulia » du haut (demande du client) */
@media (max-width:979px){
html body.page-home #mainContent #contactQuick:not(#_tc):not(#_tc2):not(#_tc3):not(#_tc4):not(#_tc5){margin-top:8px!important;padding-top:16px!important}
}
/* 16/09 · photos des diapos : aucun blanc autour (demande du client, bloc Live painting).
   Sur les blocs en couleur, le cadre de la diapo perd son fond crème ou blanc : la photo remplit
   le cadre, et un tableau montré en entier se pose directement sur la couleur du bloc. */
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes) .dz-a-frame{background:transparent!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes) .dz-a-slide.is-oeuvre .dz-a-frame{background:transparent!important;box-shadow:none!important}
html body.page-home #mainContent :is(#murales,#live,#portraits,#landscapes) .dz-A .is-oeuvre img{padding:0!important}