/*
Theme Name: Let Artists Create
Theme URI: https://letartistscreate.fr
Author: Virginie Tison
Description: Thème sur mesure pour Let Artists Create — accompagnement des artistes vers la visibilité et la professionnalisation.
Version: 1.6.35
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: letartistscreate
*/

  :root{
    --paper:#F2F0E7;
    --paper-2:#E9E5D7;
    --ink:#16150F;
    --ink-soft:#54523F;
    --ultramarine:#28377F;
    --ochre:#B58A26;
    /* Variante foncée de l'ocre, réservée au texte sur fond clair (papier) :
       l'ocre standard n'offre qu'un contraste de 2,77:1 sur --paper, ce qui
       échoue le seuil WCAG AA (4,5:1) et faisait baisser le score
       Accessibilité de PageSpeed. Cette version atteint 4,68:1.
       Sur fond sombre (--ink), l'ocre standard reste utilisé car il passe déjà. */
    --ochre-text:#86661C;
    --vermillion:#A23A28;
    --line:#D6D0BE;
    --maxw:1220px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    font-size:16px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Lora', serif;
    font-weight:500;
    margin:0;
    letter-spacing:-0.01em;
  }
  a{color:inherit;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px;}
  img{max-width:100%; display:block;}
  ::selection{ background:var(--ochre); color:var(--paper); }

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    border-bottom:1px solid var(--line);
  }
  /* Le flou est posé sur ce calque de fond, séparé de <header>, et non sur
     <header> lui-même. Raison : sur iOS Safari, backdrop-filter posé
     directement sur un ancêtre transforme tout descendant en
     position:fixed pour se positionner par rapport à cet ancêtre (le
     header, ~70px de haut) au lieu de tout l'écran. C'est ce qui cassait
     l'affichage du menu mobile (mélangé au reste de la page à l'ouverture) :
     le menu, en position:fixed, était un descendant du header. */
  header::before{
    content:'';
    position:absolute; inset:0; z-index:-1;
    background:rgba(242,240,231,0.9);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  .header-row{
    display:flex; align-items:center; justify-content:flex-start;
    gap:20px; padding:22px 0;
  }
  /* Sur desktop, le sélecteur de langue reprend sa place d'origine, tout à
     droite après <nav> (comme avant) — seul l'ordre visuel change ici via
     `order`, pas l'ordre réel du HTML, qui doit rester "langue avant menu"
     pour l'affichage mobile (voir media query plus bas). */
  nav{ order:1; }
  .lang-select-wrap{ order:2; }
  .header-cta-mobile{ order:3; }
  .wordmark{
    margin-right:auto;
    font-family:'Lora', serif;
    font-weight:500;
    font-size:1.2rem;
    letter-spacing:-0.01em;
    /* Centre "Stronger Together" sous "Let Artists Create" : le bloc ne
       fait que la largeur du texte du logo, donc centrer le texte suffit
       à centrer la légende en dessous. */
    text-align:center;
  }
  .wordmark span{ font-style:italic; color:var(--vermillion); }
  .wordmark-tagline{
    display:block;
    font-family:'Work Sans', sans-serif;
    font-weight:400;
    font-style:normal;
    font-size:0.72rem;
    letter-spacing:0.03em;
    color:var(--ink-soft);
    margin-top:2px;
  }
  nav{display:flex; gap:34px; align-items:center;}
  .nav-list{
    display:flex; align-items:center; gap:34px;
    list-style:none; margin:0; padding:0;
  }
  .nav-list > li{ position:relative; }
  nav a{
    font-size:0.9rem;
    text-decoration:none;
    color:var(--ink-soft);
    padding-bottom:2px;
    position:relative;
    white-space:nowrap;
  }
  nav a:not(.btn)::after{
    content:'';
    position:absolute; left:0; right:100%; bottom:-3px; height:1px;
    background:var(--vermillion);
    transition:right .2s ease;
  }
  nav a:not(.btn):hover::after{ right:0; }
  nav a:not(.btn):hover{ color:var(--ink); }
  .menu-toggle{ display:none; }
  .btn.header-cta-mobile{ display:none; }

  /* ---------- sous-menus déroulants ---------- */
  .menu-item-has-children > a{
    display:inline-flex; align-items:center; gap:5px;
  }
  .menu-item-has-children > a::before{
    content:'';
    display:inline-block; width:6px; height:6px;
    border-right:1px solid currentColor; border-bottom:1px solid currentColor;
    transform:rotate(45deg) translateY(-2px);
    margin-left:2px; opacity:0.6;
  }
  .sub-menu{
    list-style:none; margin:0; padding:8px 0;
    position:absolute; top:100%; left:50%; transform:translateX(-50%);
    min-width:240px; background:var(--paper);
    border:1px solid var(--line); border-radius:2px;
    box-shadow:0 12px 24px rgba(22,21,15,0.08);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .15s ease, transform .15s ease;
  }
  /* Réservé aux vrais écrans avec souris/trackpad : sur tactile (iOS Safari
     notamment), un simple tap déclenche aussi :focus-within, ce qui
     appliquait ici la transformation pensée pour le menu déroulant desktop
     (positionné en absolute) — même sur mobile, où le sous-menu est en
     position:static et géré par la classe .sub-open plus bas. Cette règle
     avait une spécificité plus forte que la version mobile et l'écrasait :
     le sous-menu se retrouvait décalé hors champ (invisible) tout en
     réservant son espace, d'où le grand vide blanc sous "Présenter son
     travail" au lieu des liens. */
  @media (hover:hover) and (pointer:fine){
    .menu-item-has-children:hover > .sub-menu,
    .menu-item-has-children:focus-within > .sub-menu{
      opacity:1; visibility:visible; pointer-events:auto;
      transform:translateX(-50%) translateY(4px);
    }
  }
  .sub-menu li{ display:block; }
  .sub-menu a{
    display:block; padding:9px 18px;
    font-size:0.86rem; white-space:nowrap;
  }
  .sub-menu a:not(.btn)::after{ display:none; }
  .sub-menu a:hover{ background:var(--paper-2); color:var(--ink); }
  /* Conteneur du widget GTranslate (rendu par l'extension elle-même :
     on ne contrôle que son alignement dans la nav, pas son contenu interne). */
  .lang-select-wrap{
    display:flex;
    align-items:center;
  }
  /* En mode "Dropdown" (sans drapeaux), GTranslate génère un <select> HTML
     natif — sans les couleurs réglées dans son admin, qui ne s'appliquent
     qu'au widget "avec drapeaux". On reprend ici exactement le style de
     l'ancien faux sélecteur pour rester cohérent avec le reste du site. */
  .lang-select-wrap select{
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    font-size:0.78rem;
    color:var(--ink-soft) !important;
    border:1px solid var(--line) !important;
    outline:none !important;
    padding:7px 24px 7px 10px;
    border-radius:2px;
    background:var(--paper) !important;
    background-image:linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                      linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
    background-position:calc(100% - 14px) center, calc(100% - 9px) center;
    background-size:5px 5px, 5px 5px;
    background-repeat:no-repeat;
    font-family:'Work Sans', sans-serif;
    cursor:pointer;
  }
  /* Le plugin GTranslate génère parfois un conteneur autour du <select>
     (ex. #gtranslate_wrapper) avec sa propre bordure par défaut : on la
     neutralise pour ne garder que le style ci-dessus. */
  .lang-select-wrap > div, .lang-select-wrap select:focus{
    border:none !important; outline:none !important; box-shadow:none !important;
  }

  /* ---------- gallery strip ---------- */
  .strip{
    display:flex;
    overflow:hidden;
    border-bottom:1px solid var(--ink);
    background:var(--ink);
  }
  .strip-track{
    display:flex;
    animation: scrollstrip 42s linear infinite;
  }
  .plate{
    width:230px; height:160px; flex:0 0 auto;
    position:relative;
    border-right:1px solid rgba(242,240,231,0.14);
    overflow:hidden;
    background:var(--ink);
  }
  .plate-visual{
    display:block; width:100%; height:100%;
    color:inherit; text-decoration:none;
  }
  .plate img{
    width:100%; height:100%; object-fit:cover;
    /* Traitement léger pour garder une cohérence de teinte, sans assombrir l'œuvre. */
    filter:saturate(0.85) contrast(1.03);
    transition:transform 0.4s ease;
  }
  .plate.has-link:hover img{
    transform:scale(1.04);
  }
  .plate span{
    position:absolute; left:0; bottom:0; right:0;
    padding:14px 12px 8px;
    font-size:0.72rem;
    font-weight:500;
    color:var(--paper);
    text-shadow:0 1px 3px rgba(0,0,0,0.85), 0 0 12px rgba(0,0,0,0.5);
    /* Cache renforcé pour garder le nom lisible même sur des œuvres très claires. */
    background:linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.15) 80%, rgba(0,0,0,0) 100%);
    pointer-events:none;
  }
  .plate-atg-link{
    position:absolute; top:8px; right:8px;
    font-size:0.62rem; font-weight:500;
    color:var(--paper);
    background:rgba(22,21,15,0.72);
    padding:5px 9px;
    border-radius:2px;
    text-decoration:none;
    opacity:0;
    transform:translateY(-4px);
    transition:opacity 0.2s ease, transform 0.2s ease;
  }
  .plate:hover .plate-atg-link,
  .plate-atg-link:focus{
    opacity:1;
    transform:translateY(0);
  }
  @keyframes scrollstrip{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){
    .strip-track{ animation:none; }
  }

  section{ padding:68px 0; border-bottom:1px solid var(--line); }
  section:last-of-type{ border-bottom:none; }

  .eyebrow{
    font-size:0.82rem;
    color:var(--vermillion);
    font-style:italic;
    font-family:'Lora', serif;
    margin-bottom:18px;
    display:block;
  }

  /* ---------- hero ---------- */
  .hero{ padding:80px 0 72px; border-bottom:1px solid var(--line); }
  /* Le bloc Hero déborde jusqu'au bord droit réel de l'écran, comme la bande
     d'images (.strip) au-dessus, au lieu de rester coincé dans la colonne
     centrée de 1220px. Le départ à gauche reste aligné sur la même colonne
     que le reste du site (via le padding-left calculé ci-dessous), mais la
     droite va jusqu'au bord de la fenêtre pour créer un vrai contraste avec
     l'espace vide à gauche. */
  .hero-outer{
    padding-left:max(40px, calc((100vw - var(--maxw)) / 2 + 40px));
    padding-right:0;
  }
  .hero-inner{ max-width:780px; margin-left:0; margin-right:auto; }
  /* Variante avec vidéo (format Instagram / portrait) : le texte prend la
     largeur principale, la vidéo et le bouton sont empilés dans une colonne
     à droite, la vidéo au-dessus du bouton. */
  .hero-inner.has-media{
    max-width:none;
    display:grid;
    /* La 1ère colonne (texte) se limite à la largeur réellement utilisée par
       le titre/le texte (max-content) au lieu de "1fr", qui étirait la
       colonne jusqu'à créer un grand vide avant la vidéo. La colonne
       vidéo vient donc juste après le texte, avec un espace vide restant
       à droite plutôt qu'entre le texte et la vidéo. */
    grid-template-columns:max-content 260px;
    justify-content:start;
    gap:56px;
    /* La colonne vidéo+bouton est calée en bas, au niveau du bouton noir,
       plutôt qu'en haut du titre : la vidéo démarre donc plus bas, à hauteur
       du texte, au lieu de dépasser tout en haut du bloc. */
    align-items:end;
  }
  .hero-inner.has-media .hero-foot{ grid-template-columns:1fr; }
  .hero-side{
    display:flex;
    flex-direction:column;
    gap:22px;
  }
  .hero-media{
    width:100%;
    aspect-ratio:9/16;
    border:1px solid var(--line);
    overflow:hidden;
    background:var(--paper-2);
    flex:0 0 auto;
  }
  .hero-media video,
  .hero-media img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .headline{
    font-size:clamp(2.6rem, 5.4vw, 4.6rem);
    line-height:1.05;
    font-weight:500;
    max-width:14ch;
  }
  .headline em{ font-style:italic; color:var(--ultramarine); }
  .hero-foot{
    margin-top:36px;
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:64px;
    align-items:start;
  }
  .hero-foot p{ color:var(--ink-soft); font-size:1.02rem; max-width:46ch; }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    background:var(--ink); color:var(--paper);
    padding:14px 26px;
    text-decoration:none;
    font-size:0.92rem;
    border:1px solid var(--ink);
    white-space:nowrap;
  }
  .btn:hover{ background:var(--vermillion); border-color:var(--vermillion); }
  .btn-outline{
    background:transparent; color:var(--ink);
    border:1px solid var(--ink);
  }
  .btn-outline:hover{ background:var(--ink); color:var(--paper); }

  /* ---------- section head ---------- */
  .section-head{
    display:flex; justify-content:space-between; align-items:flex-end;
    gap:40px;
    margin-bottom:40px;
  }
  .section-head h2{
    font-size:clamp(1.7rem, 3vw, 2.3rem);
    max-width:16ch;
  }
  .section-head p{ color:var(--ink-soft); max-width:32ch; text-align:right; }

  /* ---------- process ---------- */
  /* Le cadre ovale est positionné en absolu, au centre du bloc titre/sous-titre,
     dans l'espace vide entre les deux textes. */
  #how-it-works .section-head{ position:relative; }
  .process-portrait{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%, -50%);
    width:160px;
    aspect-ratio:3/2;
    margin:0;
    border-radius:50%;
    overflow:hidden;
    background:var(--paper-2);
    border:1px solid var(--line);
    z-index:2;
  }
  .process-portrait img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .process{
    display:grid; grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);
  }
  .process-item{
    padding:36px 32px 0;
    border-right:1px solid var(--line);
    text-align:center;
  }
  .process-item:last-child{ border-right:none; }
  .plate-no{
    font-family:'Lora', serif; font-style:italic;
    color:var(--ochre-text); font-size:0.95rem; display:block; margin-bottom:16px;
  }
  .process-item h3{ font-size:1.25rem; margin-bottom:10px; }
  .process-item p{ color:var(--ink-soft); font-size:0.96rem; }
  /* Le sous-titre de droite est mis dans la même couleur que "Stronger Together"
     dans l'en-tête (vermillon). */
  #how-it-works .section-head p{ color:var(--vermillion); }
  /* Ligne "OU" isolée entre les deux questions : centrée dans la largeur
     du bloc de texte, au lieu de rester collée à droite comme le reste. */
  .section-head p .line-or{ display:block; text-align:center; margin:2px 0; }

  /* ---------- Art Trope Gallery (section fusionnée : présentation + expositions/foires) ---------- */
  #art-trope-gallery{ background:var(--ink); color:var(--paper); }
  #art-trope-gallery .section-head h2, #art-trope-gallery .section-head p{ color:var(--paper); }
  /* Le titre "Art Trope Gallery" est cliquable vers le site de la galerie ;
     on garde l'apparence d'un simple titre, avec juste un discret soulignement
     au survol pour indiquer qu'il s'agit d'un lien. */
  .atg-heading-link{
    color:inherit; text-decoration:none;
    border-bottom:1px solid transparent;
    transition:border-color 0.2s ease;
  }
  .atg-heading-link:hover{ border-bottom-color:rgba(242,240,231,0.5); }
  #art-trope-gallery .section-head p{ opacity:0.7; }
  /* Titre + punchline empilés à gauche ; la phrase d'accroche est affichée
     en gros, en face, sur la droite du titre. */
  #art-trope-gallery .section-head{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    column-gap:40px; row-gap:10px;
    margin-bottom:40px;
  }
  #art-trope-gallery .section-head h2{ grid-column:1; grid-row:1; }
  #art-trope-gallery .section-head p{ grid-column:1; grid-row:2; text-align:left; max-width:60ch; }
  #art-trope-gallery .section-head .atg-cta-line{
    grid-column:2; grid-row:1 / 3;
    align-self:center; justify-self:end;
    font-family:'Lora', serif; font-style:italic; font-weight:500;
    font-size:clamp(1.3rem, 2.4vw, 1.9rem);
    color:var(--ochre); opacity:1;
    max-width:18ch; text-align:right; margin:0;
  }
  .atg-next-fair{
    border:1px solid var(--ochre); padding:24px 28px; margin-bottom:36px;
    background:rgba(181,138,38,0.08);
  }
  .atg-next-fair .eyebrow{ color:var(--ochre); margin-bottom:10px; }
  .atg-next-fair h3{
    font-size:1.5rem; color:var(--paper); margin-bottom:6px;
  }
  .atg-next-fair h3 a{ color:inherit; text-decoration:underline; text-decoration-color:rgba(242,240,231,0.4); }
  .atg-next-fair h3 a:hover{ text-decoration-color:var(--paper); }
  .atg-next-fair-meta{
    display:block; font-size:0.88rem; color:rgba(242,240,231,0.65); margin-bottom:12px;
  }
  .atg-next-fair p{ color:rgba(242,240,231,0.85); max-width:65ch; margin:0; }
  .atg-intro{
    max-width:70ch; color:rgba(242,240,231,0.82);
    font-size:1.02rem; margin:0 auto 36px; text-align:center;
  }
  .tags{ display:flex; flex-wrap:wrap; gap:0; border-top:1px solid rgba(242,240,231,0.2); }
  .tag{
    font-family:'Lora', serif; font-size:1.1rem; font-style:italic;
    padding:18px 28px 18px 0; margin-right:28px;
    border-bottom:1px solid rgba(242,240,231,0.2);
    flex:0 0 auto;
  }
  .atg-fairs-head{
    margin-top:44px; margin-bottom:24px;
  }
  .atg-fairs-head h3{
    font-family:'Lora', serif; font-weight:500; font-size:1.3rem; color:var(--paper);
    margin-bottom:8px;
  }
  .atg-fairs-head p{ color:rgba(242,240,231,0.65); font-size:0.92rem; max-width:60ch; }
  .fairs-list{
    display:grid; grid-template-columns:repeat(2,1fr);
    border-top:1px solid rgba(242,240,231,0.2);
  }
  .fair-item{
    display:flex; justify-content:space-between; align-items:baseline; gap:16px;
    padding:20px 0; border-bottom:1px solid rgba(242,240,231,0.2);
  }
  .fair-item:nth-child(odd){ padding-right:32px; border-right:1px solid rgba(242,240,231,0.2); }
  .fair-item:nth-child(even){ padding-left:32px; }
  .fair-name{ font-family:'Lora', serif; font-size:1.05rem; color:var(--paper); }
  .fair-name a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(242,240,231,0.4); }
  .fair-name a:hover{ border-color:var(--paper); }
  .fair-meta{ font-size:0.85rem; color:rgba(242,240,231,0.6); white-space:nowrap; }
  .fairs-note{ margin-top:28px; font-size:0.85rem; color:rgba(242,240,231,0.6); font-style:italic; }
  .process-cta{ margin-top:48px; text-align:center; }
  /* Décalage de défilement pour TOUTES les cibles d'ancre du menu : sans ça,
     le saut vers une section l'amène pile en haut de l'écran, cachée sous
     l'en-tête qui reste collé en haut (position:sticky) — c'est ce qui
     donnait l'impression que le lien "n'arrivait pas au bon endroit"
     (le texte visible commençait au milieu de la section, titre masqué). */
  #submit-your-work,
  #how-it-works,
  #book-a-call,
  #virginie-tison-curator-art-adviser,
  #art-trope-gallery,
  #testimonials-artists,
  #form{
    scroll-margin-top:var(--header-height, 90px);
  }
  .anchor-alias{ position:relative; display:block; height:0; }

  /* ---------- journal ---------- */
  .journal-list{
    display:grid; grid-template-columns:repeat(3,1fr); gap:0;
    border-top:1px solid var(--line);
  }
  .journal-item{
    padding:32px 32px 0 0;
    border-right:1px solid var(--line);
  }
  .journal-item:last-child{ border-right:none; padding-right:0; }
  .journal-tag{
    font-size:0.72rem; text-transform:none;
    color:var(--vermillion); font-style:italic; font-family:'Lora', serif;
    display:block; margin-bottom:14px;
  }
  .journal-item h3{ font-size:1.12rem; margin-bottom:10px; }
  .journal-item p{ font-size:0.92rem; color:var(--ink-soft); }
  .journal-note{ margin-top:28px; font-size:0.85rem; color:var(--ink-soft); font-style:italic; }

  /* ---------- virginie (catalog plate treatment) ---------- */
  .virginie{
    display:grid; grid-template-columns:0.85fr 0.55fr 1.1fr; gap:40px; align-items:center;
  }
  .portrait-col{ grid-column:1; grid-row:1; }
  .virginie-bio{ grid-column:3; grid-row:1; }
  /* v-tag-list est placé après le bouton dans le HTML (pour l'ordre mobile),
     mais visuellement remis dans sa propre colonne du milieu sur desktop.
     grid-row:1 est nécessaire ici : sans lui, la grille (en placement
     "sparse") ne revient pas en arrière combler la case du milieu resté
     libre et pousse l'élément sur une nouvelle ligne, plus bas. */
  .virginie > .v-tag-list{ grid-column:2; grid-row:1; }
  .portrait-col{
    position:relative;
  }
  .plate-frame{
    border:1px solid var(--ink);
    padding:14px;
  }
  .portrait{
    aspect-ratio:4/5; width:100%;
    background:var(--paper-2);
    border:1px solid var(--line);
    overflow:hidden;
  }
  /* Si un lien est renseigné sur la photo de Virginie, elle devient cliquable
     (ouvre un nouvel onglet) sans changer la mise en page. */
  .portrait a{ display:block; width:100%; height:100%; }
  .plate-caption{
    display:flex; justify-content:space-between;
    font-size:0.72rem; color:var(--ink-soft);
    padding-top:10px; font-style:italic; font-family:'Lora', serif;
  }
  .v-name{ font-size:1.9rem; margin-bottom:8px; }
  .v-role{
    display:block; color:var(--vermillion); font-style:italic;
    font-family:'Lora', serif; margin-bottom:22px; font-size:1rem;
  }
  .virginie p{ color:var(--ink-soft); margin-bottom:18px; }
  .virginie .btn{ margin-top:10px; }

  /* Étiquettes (services / thématiques) : liste ordonnée de haut en bas,
     affichée dans une colonne entre la photo et le texte de présentation
     (desktop). Sur mobile, cette colonne disparaît et la liste repasse
     sous le bouton "réserver un échange", dans l'ordre du HTML. */
  .v-tag-list{
    list-style:none; margin:0; padding:6px 0 6px 24px;
    border-left:1px solid var(--line);
    display:flex; flex-direction:column; gap:16px;
  }
  .v-tag-list li{
    font-family:'Lora', serif; font-style:italic; font-size:0.88rem;
    color:var(--ink-soft); line-height:1.35;
  }

  /* Étiquettes cliquables : chaque étiquette ayant un témoignage associé
     affiche une pastille ❝ visible par tous les visiteurs, qui ouvre le
     témoignage. Le petit crayon d'ajout (étiquette sans témoignage) ne
     s'affiche qu'à l'admin, via l'attribut aria-label différent côté PHP. */
  .v-tag-list li.v-tag{
    position:relative; padding-right:26px;
  }
  .v-tag-note-toggle{
    position:absolute; top:-2px; right:0;
    width:20px; height:20px; padding:0;
    border:1px solid var(--line); border-radius:50%;
    background:var(--paper); color:var(--ink-soft);
    font-size:0.66rem; line-height:1; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    text-decoration:none;
  }
  .v-tag-note-toggle:hover{ border-color:var(--vermillion); color:var(--vermillion); }
  .v-tag-note-toggle--empty{ opacity:0.45; }
  .v-tag-note-toggle--empty:hover{ opacity:1; }
  .v-tag.has-note .v-tag-note-toggle{
    background:var(--ochre); border-color:var(--ochre); color:var(--paper);
  }
  .v-tag-note-popover{
    position:absolute; top:calc(100% + 8px); left:0; z-index:20;
    width:240px; background:var(--paper);
    border:1px solid var(--line); box-shadow:0 12px 24px rgba(22,21,15,0.14);
    padding:12px; border-radius:2px;
    text-align:left;
  }
  .v-tag-note-text{
    margin:0 0 10px; font-family:'Work Sans', sans-serif; font-style:normal;
    font-size:0.82rem; color:var(--ink); line-height:1.5;
  }
  .v-tag-note-actions{ display:flex; gap:8px; margin-top:8px; justify-content:flex-end; }
  /* Sur les appareils avec une vraie souris, passer la souris sur l'étiquette
     (ou sur la pastille) suffit à afficher le témoignage, sans avoir besoin
     de cliquer. Le clic reste disponible pour tout le monde (utile au tactile,
     où il n'y a pas de survol, et pour garder le témoignage ouvert le temps
     de le lire tranquillement). */
  @media (hover:hover) and (pointer:fine){
    .v-tag.has-note:hover .v-tag-note-popover{ display:block; }
  }
  .btn-mini{
    font-family:'Work Sans', sans-serif; font-style:normal;
    font-size:0.74rem; padding:6px 12px; cursor:pointer;
    border:1px solid var(--ink); background:var(--ink); color:var(--paper);
    text-decoration:none; display:inline-block;
  }
  .btn-mini:hover{ background:var(--vermillion); border-color:var(--vermillion); }
  .btn-mini-ghost{ background:transparent; color:var(--ink-soft); border-color:var(--line); }
  .btn-mini-ghost:hover{ background:transparent; color:var(--ink); border-color:var(--ink-soft); }

  /* ---------- testimonials (bandeau défilant) ----------
     Le bandeau reste contenu dans la largeur habituelle de la section
     (.wrap, comme avant) : contrairement à la bande d'œuvres (.strip) sous
     le header, il ne déborde pas en pleine largeur d'écran. La liste est
     dupliquée une fois pour permettre un défilement en boucle continue ;
     seule la première occurrence de chaque témoignage garde son id
     "temoignage-N", pour que les liens d'ancre (depuis la bande d'œuvres)
     continuent de fonctionner sans dupliquer d'identifiants. */
  .testimonials-viewport{
    overflow:hidden;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    /* petits fondus sur les bords pour adoucir l'entrée/sortie des cartes */
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
  .testimonials{
    display:flex;
    gap:20px;
    width:max-content;
    padding:6px 2px 18px;
    animation: scrolltestimonials 48s linear infinite;
  }
  .testimonials-viewport:hover .testimonials{ animation-play-state:paused; }
  @keyframes scrolltestimonials{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){
    .testimonials{ animation:none; }
  }
  /* Cartes détachées : fond papier-2, liseré vermillon en tête, légère
     ombre portée pour que les témoignages se détachent du fond de la
     page plutôt que de se fondre dedans (traits verticaux, ex-version). */
  .testimonial{
    width:340px; flex:0 0 auto;
    padding:40px 32px 32px;
    background:var(--paper-2);
    border-top:3px solid var(--vermillion);
    box-shadow:0 12px 24px rgba(22,21,15,0.07);
    position:relative;
    scroll-margin-top:var(--header-height, 90px);
  }
  /* Alternance de tonalité : une carte sur deux prend un lavis très
     clair de la même ochre que les pastilles-citation, plutôt qu'un
     aplat plein — trop sombre. Le texte reste en encre partout. */
  .testimonial:nth-child(even){
    background:rgba(181,138,38,0.14);
  }
  .testimonial:target{
    animation: lac-highlight 1.8s ease;
  }
  @keyframes lac-highlight{
    from{ box-shadow:0 0 0 3px var(--vermillion), 0 12px 24px rgba(22,21,15,0.07); }
    to{ box-shadow:0 12px 24px rgba(22,21,15,0.07); }
  }
  .t-quote{
    position:relative;
    font-family:'Lora', serif; font-style:italic;
    font-size:1.18rem; line-height:1.4;
    margin-bottom:26px; color:var(--ink);
  }
  /* Grand guillemet décoratif en fond de citation, repère éditorial
     classique (catalogue d'exposition) plutôt qu'une simple citation nue. */
  .t-quote::before{
    content:"\201C";
    position:absolute;
    top:-30px; left:-6px;
    font-family:'Lora', serif; font-style:italic;
    font-size:4.6rem; line-height:1;
    color:var(--vermillion);
    opacity:0.22;
    z-index:0;
    pointer-events:none;
  }
  .t-quote-text{ position:relative; z-index:1; }
  .t-attribution{
    border-top:1px solid var(--line); padding-top:14px;
    font-size:0.85rem;
  }
  .t-name{ font-weight:500; }
  .t-role{ color:var(--ink-soft); }
  .t-placeholder-note{ margin-top:28px; font-size:0.85rem; color:var(--ink-soft); font-style:italic; }
  .testimonials-more{ margin-top:32px; text-align:center; }

  /* Photo ovale facultative, positionnée au centre du bloc titre/sous-titre
     (même traitement que l'image de la section "Comment fonctionne"). */
  /* Le texte rouge (sous-titre) est centré verticalement en face du titre,
     plutôt qu'aligné sur sa base comme le fait .section-head par défaut. */
  #testimonials-artists .section-head{ position:relative; align-items:center; }
  .testimonial-portrait{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%, -50%);
    width:210px;
    aspect-ratio:3/2;
    margin:0;
    border-radius:50%;
    overflow:hidden;
    background:var(--paper-2);
    border:1px solid var(--line);
    box-shadow:0 12px 24px rgba(22,21,15,0.1);
    z-index:2;
  }
  .testimonial-portrait img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  /* Même traitement de couleur que le sous-titre de "Comment fonctionne"
     et que "Stronger Together" dans l'en-tête. */
  #testimonials-artists .section-head p{ color:var(--vermillion); }

  /* ---------- form ---------- */
  /* Fond noir, comme la section Art Trope Gallery, avec les couleurs de texte
     et de champs adaptées pour rester lisibles sur fond sombre. */
  .formsec{ background:var(--ink); color:var(--paper); border-bottom-color:rgba(242,240,231,0.15); }
  .formsec .section-head h2{ color:var(--paper); }
  .formsec .section-head p{ color:var(--paper); opacity:0.7; }
  .form-card{ max-width:640px; margin:0 auto; }
  .field{ margin-bottom:24px; }
  .field label{ display:block; font-size:0.88rem; margin-bottom:8px; color:rgba(242,240,231,0.75); }
  .field input:not([type="checkbox"]):not([type="radio"]), .field textarea{
    width:100%;
    border:none; border-bottom:1px solid rgba(242,240,231,0.4);
    background:transparent;
    font-family:'Work Sans', sans-serif; font-size:1rem; color:var(--paper);
    padding:8px 2px;
  }
  .field input::placeholder, .field textarea::placeholder{ color:rgba(242,240,231,0.4); }
  .field textarea{ resize:vertical; }
  .field input:focus, .field textarea:focus{ outline:none; border-color:var(--paper); }
  .field input[type="checkbox"], .field input[type="radio"]{ width:16px; height:16px; flex:0 0 auto; accent-color:var(--vermillion); }
  .field-note{ margin-top:10px; font-size:0.8rem; color:rgba(242,240,231,0.6); }
  .radio-group{ display:flex; flex-direction:column; gap:10px; margin-top:4px; }
  .field .radio-row{ display:flex; gap:10px; align-items:flex-start; font-size:0.94rem; cursor:pointer; color:rgba(242,240,231,0.9); margin-bottom:0; }
  .radio-row input{ margin-top:4px; }
  .formsec .btn{ background:transparent; border:1px solid var(--paper); color:var(--paper); }
  .formsec .btn:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
  .formsec .btn-solid{ background:var(--vermillion); border-color:var(--vermillion); color:var(--paper); }
  .formsec .btn-solid:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
  .form-notice{ max-width:640px; margin:0 auto 24px; padding:14px 18px; border-radius:4px; font-size:0.92rem; }
  .form-notice--error{ background:rgba(162,58,40,0.18); border:1px solid var(--vermillion); color:var(--paper); }
  .form-success{ max-width:640px; margin:0 auto; text-align:center; padding:20px 0; }
  .form-success h3{ color:var(--paper); margin-bottom:12px; }
  .form-success p{ opacity:0.85; margin-bottom:24px; }

  footer{ padding:32px 0; }
  .footer-row{
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:14px;
    font-size:0.82rem; color:var(--ink-soft);
  }

  /* ---------- icônes réseaux sociaux ---------- */
  .social-icons{ display:flex; align-items:center; gap:14px; }
  .social-icons a{
    display:inline-flex; color:var(--ink-soft); text-decoration:none;
    transition:color .15s ease;
  }
  .social-icons a:hover{ color:var(--vermillion); }
  .social-icons--header{ margin:0 4px; }

  /* ---------- liens légaux (sous le trait, IA aligné sous les icônes) ---------- */
  .legal-links{
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:14px;
    padding-top:14px; margin-top:14px; border-top:1px solid var(--line);
    font-size:0.78rem;
  }
  .legal-links-primary{ display:flex; gap:20px; flex-wrap:wrap; }
  .legal-links-primary a, .footer-ai-link{
    color:var(--ink-soft); text-decoration:underline; text-decoration-color:var(--line);
  }
  .legal-links-primary a:hover, .footer-ai-link:hover{ color:var(--ink); }

  /* ---------- bandeau cookies ---------- */
  .cookie-banner{
    position:fixed; left:20px; right:20px; bottom:20px; z-index:100;
    max-width:640px; margin:0 auto;
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
    background:var(--ink); color:var(--paper);
    padding:16px 20px;
    border-radius:2px;
    box-shadow:0 12px 28px rgba(22,21,15,0.25);
  }
  .cookie-banner p{ margin:0; font-size:0.85rem; }
  .cookie-banner a{ color:var(--paper); text-decoration:underline; }
  .cookie-banner .btn{ flex:0 0 auto; }
  .cookie-banner[hidden]{ display:none; }

  @media (max-width:860px){
    .wrap{ padding:0 24px; }
    /* En-tête mobile : logo + bouton "Menu" sur la première ligne, puis le
       sélecteur de langue et le bouton noir affichés en permanence en
       dessous, chacun sur sa propre ligne pleine largeur — accessibles
       sans avoir à ouvrir le menu. */
    .header-row{ flex-wrap:wrap; row-gap:14px; }
    .wordmark{ order:1; }
    .menu-toggle{ order:2; }
    .lang-select-wrap{ order:3; flex-basis:100%; }
    .btn.header-cta-mobile{
      order:4; flex-basis:100%;
      display:flex; justify-content:center;
    }
    .btn.header-cta-desktop{ display:none; }
    nav{
      position:fixed; top:64px; right:0; left:0; background:var(--paper);
      /* Hauteur calée sur la fenêtre visible réelle (dvh), pas seulement le
         viewport "au chargement" : sur Safari iOS, la barre d'outils du bas
         change de taille pendant le défilement, ce qui pouvait laisser un
         écart en bas du panneau où le contenu de la page apparaissait par
         transparence. Repli en vh pour les navigateurs plus anciens. */
      height:calc(100vh - 64px);
      height:calc(100dvh - 64px);
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      border:1px solid var(--line);
      flex-direction:column; align-items:flex-start; padding:32px 24px;
      gap:22px; transform:translateY(-8px); opacity:0; pointer-events:none;
      transition:opacity .18s ease, transform .18s ease;
    }
    nav.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
    nav a{ font-size:1.05rem; white-space:normal; }
    .nav-list{ flex-direction:column; align-items:flex-start; gap:22px; width:100%; }
    .menu-item-has-children{ width:100%; }
    .menu-item-has-children > a::before{ display:none; }
    .sub-menu{
      position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
      box-shadow:none; border:none; background:transparent;
      max-height:0; overflow:hidden; padding:0;
      transition:max-height .2s ease;
    }
    .menu-item-has-children.sub-open > .sub-menu{ max-height:300px; padding:6px 0 0 16px; }
    .sub-menu a{ font-size:0.95rem; padding:8px 0; white-space:normal; }
    .menu-toggle{
      display:block; background:none; border:1px solid var(--line);
      padding:8px 12px; font-family:'Work Sans',sans-serif; font-size:0.85rem;
    }
    /* Les boutons (.btn) sont en white-space:nowrap pour le confort visuel
       sur desktop, mais sur mobile un libellé long (ex. le CTA du header,
       "Présenter mon travail artistique") dépasse alors la largeur de son
       conteneur : le bouton déborde de l'écran, ce qui décale et espace
       de façon incohérente les éléments autour de lui (nav, footer, formulaire).
       On autorise donc le retour à la ligne et on contraint la largeur ici. */
    .btn{
      white-space:normal;
      max-width:100%;
      text-align:center;
    }
    .hero-outer{ padding-left:24px; padding-right:24px; }
    .hero-inner{ max-width:none; margin:0; }
    .hero-inner.has-media{ grid-template-columns:1fr; gap:28px; }
    /* La vidéo + le bouton sont centrés sur mobile (comme les portraits des
       sections Process/Témoignages), alors que le texte reste aligné à
       gauche comme le reste de la page. */
    .hero-inner.has-media .hero-side{ max-width:180px; justify-self:center; }
    .hero-media{ max-width:180px; }
    .hero-foot{ grid-template-columns:1fr; gap:24px; }
    /* Sur mobile, le titre et le sous-titre s'empilent : l'image redevient
       un bloc normal (non positionné), centré, entre les deux textes. */
    #how-it-works .section-head{ position:static; align-items:center; text-align:center; }
    #how-it-works .section-head p{ text-align:center; }
    .process-portrait{
      position:static; transform:none;
      align-self:center;
      width:220px;
      margin:20px 0 24px;
    }
    /* Sur mobile, .section-head repasse déjà en colonne alignée à gauche
       (règle générale ci-dessous) : on annule ici le centrage vertical
       ajouté pour le bureau, propre à #testimonials-artists. */
    #testimonials-artists .section-head{ position:static; align-items:center; text-align:center; }
    #testimonials-artists .section-head p{ text-align:center; }
    .testimonial-portrait{
      position:static; transform:none;
      align-self:center;
      width:250px;
      margin:20px 0 24px;
    }
    #art-trope-gallery .section-head{
      display:flex; flex-direction:column; align-items:flex-start; gap:10px;
    }
    #art-trope-gallery .section-head .atg-cta-line{
      grid-column:auto; grid-row:auto;
      justify-self:auto; align-self:auto;
      text-align:left; max-width:100%;
      margin-top:6px;
    }
    .cookie-banner{ left:12px; right:12px; bottom:12px; flex-direction:column; align-items:flex-start; }
    .section-head{ flex-direction:column; align-items:flex-start; }
    .section-head p{ text-align:left; }
    .process{ grid-template-columns:1fr; }
    .process-item{ border-right:none; border-bottom:1px solid var(--line); padding:28px 0; }
    .process-item:last-child{ border-bottom:none; }
    .testimonials{ grid-template-columns:1fr; }
    .fairs-list{ grid-template-columns:1fr; }
    .fair-item:nth-child(odd){ border-right:none; padding-right:0; }
    .fair-item:nth-child(even){ padding-left:0; }
    .journal-list{ grid-template-columns:1fr; }
    .journal-item{ border-right:none; border-bottom:1px solid var(--line); padding:28px 0; }
    .journal-item:last-child{ border-bottom:none; }
    .virginie{ grid-template-columns:1fr; }
    .portrait-col, .virginie-bio, .virginie > .v-tag-list{ grid-column:auto; grid-row:auto; }
    .v-tag-list{
      border-left:none; border-top:1px solid var(--line);
      padding:16px 0 0; margin-top:16px;
      flex-direction:column; gap:14px;
    }
    .form-card{ padding:0; }
  }