/* ============================================================
   Auraline-zen — feuille de style commune
   Palette : crème / encre / teal-vert unique. Serif élégant +
   touche calligraphiée. Animations fluides et légères.
   ============================================================ */

:root{
  --paper:#F7F4EF;
  --paper-warm:#F1ECE3;
  --paper-deep:#E8E1D4;
  --ink:#1C1B19;
  --ink-soft:#4A4844;
  --ink-mute:#8A857B;
  --line:#E1DACE;
  --teal:#1C9C8E;
  --teal-deep:#137468;
  --teal-mist:#E7F1EE;
  --green:#5FB85B;

  /* 21/10/2026 : Lora remplace Cormorant Garamond, Nunito remplace Jost.
     Choix de Nathalie apres essai sur ses propres textes, voir
     site/identite/essai-polices-google.html.
     Les empattements de Lora sont dessines au pinceau, les angles de Nunito
     sont arrondis : rien n'est pointu nulle part, ce qui est le propos de la
     marque. Lora est aussi plus solide que Cormorant, qui palissait des
     qu'elle descendait sous 18 px.
     ATTENTION : si une police est changee ici, il faut AUSSI changer le lien
     Google Fonts en tete des 6 pages HTML, sinon elle ne se charge pas et le
     navigateur retombe en silence sur Georgia. */
  --serif:'Lora', Georgia, serif;
  --sans:'Nunito', system-ui, -apple-system, sans-serif;
  --script:'Great Vibes', cursive;

  --shadow-soft:0 18px 40px rgba(28,27,25,.08);
  --shadow-card:0 24px 60px rgba(28,27,25,.14);

  /* Relief des photos : ombre de contact serrée + ombre portée large,
     plus un liseré clair en haut qui simule la lumière. */
  --shadow-art:
    0 1px 2px rgba(28,27,25,.10),
    0 4px 8px rgba(28,27,25,.07),
    0 12px 24px rgba(28,27,25,.09),
    0 28px 52px rgba(28,27,25,.10);
  --shadow-art-hover:
    0 2px 4px rgba(28,27,25,.12),
    0 8px 16px rgba(28,27,25,.10),
    0 22px 44px rgba(28,27,25,.13),
    0 46px 88px rgba(28,27,25,.16);

  --radius-art:20px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
/* overflow-x sur html, et pas seulement sur body : le menu mobile replié et le fond « + »
   sont en position:fixed, ils échappent donc au rognage du body et créaient une bande vide
   de 300 px à droite sur téléphone. « clip » plutôt que « hidden » pour ne pas créer de
   conteneur de défilement, ce qui casserait la barre de navigation collante. */
html{scroll-behavior:smooth;overflow-x:clip}
body{
  background:var(--paper);
  color:var(--ink-soft);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Fond « + » qui dérive lentement */
body::before{
  content:"";
  position:fixed;
  inset:-60px;
  z-index:-2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cg fill='none' stroke='%231C1B19' stroke-opacity='0.055' stroke-width='1'%3E%3Cpath d='M23 18v10M18 23h10'/%3E%3C/g%3E%3C/svg%3E");
  background-size:46px 46px;
  animation:drift 90s linear infinite;
  pointer-events:none;
}
@keyframes drift{
  from{background-position:0 0}
  to{background-position:46px 92px}
}

h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:500;line-height:1.14}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
section{padding:96px 0}

.kicker{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--teal-deep);margin-bottom:16px}
.script{font-family:var(--script);color:var(--teal-deep);line-height:1.1}
.btn{
  display:inline-block;font-family:var(--sans);font-size:13px;letter-spacing:2px;
  text-transform:uppercase;padding:15px 34px;border-radius:999px;cursor:pointer;
  border:1px solid var(--teal);color:#fff;background:var(--teal);
  transition:transform .35s var(--ease),background .35s,box-shadow .35s;
}
.btn:hover{background:var(--teal-deep);border-color:var(--teal-deep);transform:translateY(-3px);box-shadow:0 14px 28px rgba(19,116,104,.28)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper);box-shadow:0 14px 28px rgba(28,27,25,.2)}

/* ---------- NAV ---------- */
header.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(247,244,239,.82);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .4s,background .4s,box-shadow .4s;
}
header.nav.scrolled{border-color:var(--line);box-shadow:0 6px 24px rgba(28,27,25,.05)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:86px;gap:20px;transition:height .4s var(--ease)}
header.nav.scrolled .nav-inner{height:70px}
.brand-link{display:flex;align-items:center;gap:12px}
.brand-mark{height:50px;width:50px;object-fit:cover;border-radius:50%;mix-blend-mode:multiply;transition:transform .5s var(--ease)}
.brand-link:hover .brand-mark{transform:rotate(-8deg) scale(1.05)}
.brand{font-family:var(--serif);font-size:26px;font-weight:500;color:var(--ink)}
nav.menu ul{display:flex;gap:30px;list-style:none;align-items:center}
nav.menu a{
  position:relative;font-size:13px;letter-spacing:.4px;color:var(--ink-soft);
  padding:4px 0;transition:color .3s;
}
nav.menu a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;
  background:var(--teal);transition:width .35s var(--ease);
}
nav.menu a:hover,nav.menu a.active{color:var(--teal-deep)}
nav.menu a:hover::after,nav.menu a.active::after{width:100%}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);transition:.3s}

/* ---------- HERO générique (pages internes) ---------- */
.page-hero{text-align:center;padding:92px 0 40px}
.page-hero h1{font-size:clamp(38px,6vw,74px);font-weight:500}
.page-hero p.lead{max-width:56ch;margin:22px auto 0;font-size:18px;color:var(--ink-soft)}

/* ---------- LE MUR DE TUILES D ATELIER, EN PETIT ----------
   6 tuiles isolees des 3 mosaiques du 17/10. Volontairement petites : c est
   le NOMBRE qui parle, pas le detail de chacune.
   Sert a l accueil ET a la page des ateliers, ou elles viennent sous les
   mosaiques entieres. */
.tuiles-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media(max-width:880px){.tuiles-grid{grid-template-columns:repeat(4,1fr);gap:10px}}
@media(max-width:520px){.tuiles-grid{grid-template-columns:repeat(3,1fr);gap:8px}}

/* ---------- LE DESSIN 053 EN FOND DE TOUT LE SITE ----------
   Pose le 23/10/2026, d abord en haut de chaque page, puis etendu le meme jour
   a la page entiere et fixe a l ecran : il reste en place quand on descend.

   Comment le fond devient transparent sans retoucher l image : le dessin est de
   l encre noire sur papier blanc, et mix-blend-mode:multiply fait disparaitre le
   blanc. Seule l encre reste, posee sur le creme de la page. Aucun detourage.

   🔴 UNE SEULE COUCHE, et c est voulu. La premiere version posait le dessin sur
      .hero et .page-hero. Superposee a celle-ci, elle le faisait apparaitre DEUX
      FOIS en haut de page, decale. Les regles de bandeau ont donc ete retirees.

   Fichier : images-web/identite/fond-accueil.jpg
   🔴 Il est dans identite/ et PAS dans images-web/ : filigrane.ps1 traite
      images-web\*.jpg et l aurait filigrane au prochain passage. Le script ne
      descend pas dans les sous-dossiers.

   ⚠️ C est body::AFTER et pas body::before : le ::before est deja pris par le
      fond « + » qui derive. Celui-ci est en z-index -2, le dessin passe a -1,
      donc le dessin est au-dessus des « + » et sous tout le contenu.

   🔴 Et SURTOUT : on ne pose rien en position:relative sur les enfants du body.
      header.nav est en position:sticky, un position:relative le decollerait du
      haut de l ecran. Le z-index negatif suffit a tout faire passer devant.   */

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:url("../images-web/identite/fond-accueil.jpg") center center / cover no-repeat;
  mix-blend-mode:multiply;
  opacity:.08;
  pointer-events:none;
  animation:fondIn 2.4s var(--ease) .2s both;
}

/* Une seule etape « from » : l etat d arrivee est la valeur propre de l element,
   donc l opacite reste celle declaree ci-dessus. */
@keyframes fondIn{from{opacity:0}}

@media (prefers-reduced-motion:reduce){
  body::after{animation:none}
}

/* Sur telephone le dessin est bien plus zoome, puisque l ecran est etroit et que
   l image est carree : il doit se faire plus discret. */
@media(max-width:880px){
  body::after{opacity:.055}
}

/* ---------- FOOTER ---------- */
/* 21/10/2026 : le noir laisse la place au bleu petrole de la palette 7, comme
   tous les bandeaux sombres du site. Le texte passe en vert sauge et les
   titres en lin : tout vient du meme nuancier.
   Palette : site/identite/palettes-couleurs.md */
footer{background:#2D4F56;color:#C2CDBD;padding:76px 0 32px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:44px}
footer h4{color:var(--paper);font-size:22px;font-weight:500;margin-bottom:18px}
footer .about-txt{font-size:14.5px;line-height:1.75;margin-bottom:18px}
/* 21/10/2026 : le teal de la marque ne ressort plus sur le bleu petrole, deux
   bleus-verts l'un sur l'autre. Le mail passe en teal clair, contraste 2,6 -> 6. */
footer a.mail{color:#7FD4C6;font-size:14.5px}
footer a.mail:hover{color:var(--green)}
.foot-links{list-style:none;display:flex;flex-direction:column;gap:12px}
.foot-links a{font-size:14px;color:#C2CDBD;transition:color .3s,padding-left .3s}
.foot-links a:hover{color:var(--teal);padding-left:5px}
.foot-social{list-style:none;display:flex;flex-direction:column;gap:14px}
.foot-social li{display:flex;align-items:center;gap:11px;font-size:14px}
.foot-social .ic{width:22px;height:22px;flex:none;color:var(--teal)}
.foot-news p{font-size:14px;margin-bottom:16px;line-height:1.7}
.foot-news form{display:flex;gap:8px;flex-wrap:wrap}
/* le champ garde un fond plus sombre que le bandeau, mais dans sa teinte */
.foot-news input[type=email]{
  flex:1;min-width:150px;padding:12px 16px;border:1px solid #42666D;background:#22414A;
  color:var(--paper);border-radius:8px;font-family:var(--sans);font-size:14px;
}
.foot-news input::placeholder{color:#8FA69C}
.foot-news button{
  padding:12px 20px;border:none;border-radius:8px;background:var(--teal);color:#fff;
  font-family:var(--sans);font-size:12.5px;letter-spacing:1px;text-transform:uppercase;
  cursor:pointer;transition:background .3s,transform .3s;
}
.foot-news button:hover{background:var(--teal-deep);transform:translateY(-2px)}
.consent{display:flex;gap:9px;align-items:flex-start;margin-top:14px;font-size:12px;color:#A6B7A1;line-height:1.5}
.consent input{margin-top:3px;accent-color:var(--teal)}
/* Pied legal, repris le 23/10/2026 sur le modele choisi par Nathalie :
   une ligne d identite avec le SIRET, puis une ligne de liens legaux. */
.foot-bottom{
  border-top:1px solid #42666D;margin-top:56px;padding-top:26px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:12.5px;color:#AEBDB5;letter-spacing:.4px;text-align:center;line-height:1.7;
}
.foot-bottom .sep{color:#86A099;margin:0 4px}
.foot-bottom .legal-liens a{
  color:#C2CDBD;text-decoration:underline;text-underline-offset:3px;
  transition:color .3s;
}
.foot-bottom .legal-liens a:hover{color:var(--paper)}

/* ---------- ANIMATIONS reveal ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.left{transform:translateX(-40px)}
.reveal.right{transform:translateX(40px)}
.reveal.left.in,.reveal.right.in{transform:none}
.reveal.zoom{transform:scale(.94)}
.reveal.zoom.in{transform:none}

/* ---------- cartes œuvres génériques ---------- */
.art-card{
  display:block;position:relative;
  background:#fff;border-radius:var(--radius-art);overflow:hidden;
  box-shadow:var(--shadow-art);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.art-card img{
  width:100%;height:100%;object-fit:cover;border-radius:inherit;
  transition:transform 1.1s var(--ease);
}
/* liseré clair en haut, ombre fine en bas : donne l'épaisseur */
.art-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(28,27,25,.07),
    inset 0 0 0 1px rgba(28,27,25,.05);
}
/* Plus aucun mouvement au survol depuis le 24/10/2026 : ni inclinaison, ni
   soulèvement, ni zoom. Demandé par Nathalie pour tout le site. */

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:100;background:rgba(28,27,25,.92);
  display:flex;align-items:center;justify-content:center;padding:5vw;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
  cursor:zoom-out;
}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{
  max-width:100%;max-height:90vh;border-radius:10px;
  box-shadow:0 40px 90px rgba(0,0,0,.5);
  transform:scale(.94);transition:transform .5s var(--ease);
}
.lightbox.open img{transform:scale(1)}

/* ---------- message de formulaire ---------- */
.form-msg{
  display:block;margin-top:10px;font-size:12.5px;color:var(--teal);
  opacity:0;transform:translateY(-4px);transition:opacity .4s,transform .4s;
}
.form-msg.show{opacity:1;transform:none}
/* 🔴 Une erreur doit se voir. Le vert du succès et le rouge de l'echec ne
   peuvent pas etre la meme couleur : sinon « adresse invalide » se lit comme
   « merci » et la personne s'en va en croyant etre inscrite. */
.form-msg.erreur{color:#A4452F}
.foot-news .form-msg.erreur{color:#E8A89A}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  body::before{animation:none}
}

/* ---------- Contour neurographique des bandeaux sombres ----------
   Posé le 24/10/2026. Proposition A choisie par Nathalie : ondulation
   légère, ligne fine, quelques nœuds ronds aux croisements. Le bandeau
   ne coupe plus la page au couteau, la page mord dedans.

   La découpe et la ligne prennent la couleur de la section voisine, via
   --creux. Par défaut le crème du site ; sur une section voisine en
   --paper-warm, on redéfinit --creux sur le bandeau.

   Le dessin lui-même est injecté par assets/anim.js, section 8, d'après
   l'attribut data-bandeau : « haut », « bas », ou « haut bas ».

   ⚠️ Le pied de page est en #2D4F56, exactement comme les bandeaux. Un
   bandeau collé au pied de page ne prend donc PAS de contour en bas :
   il n'y a aucun bord à adoucir, la découpe crème ne ferait qu'une
   bande claire au milieu du sombre.

   🔴 RÈGLE TROUVÉE LE 24/10/2026, à ne pas oublier : la découpe est OPAQUE,
   elle recouvre donc le motif décoratif du fond de page. Une découpe crème
   posée sur une section claire fait apparaître un filet droit à l'endroit
   précis où le motif s'arrête. **La vague doit donc toujours être dessinée
   dans la couleur SOMBRE et mordre vers la section claire**, jamais
   l'inverse. C'est pour ça que le contour du pied de page est porté par la
   section qui est au-dessus de lui, et non par le pied de page.

   🔴 26/10/2026 : le trait et les nœuds sont DANS l'aplat, pas au-dessus.
   Ils étaient passés côté crème le 24/10 en même temps que la vague. Deux
   conséquences, à garder ensemble :
     - le dessin descend le trait sous le bord de l'aplat, voir anim.js
     - --ligne doit CONTRASTER avec --creux, au lieu de le répéter. Par
       défaut l'aplat est le pétrole des bandeaux, donc le trait est lin.
       Sur un bord dont l'aplat est clair (#E7F1EE, #F1ECE3), la section
       pose --ligne, --ligne-haut ou --ligne-bas en pétrole dans son style. */
.bandeau-neuro{position:relative;overflow:hidden;--creux:var(--paper);--ligne:#D4CBB5}
.bandeau-neuro > .wrap{position:relative;z-index:3}
.bandeau-neuro .bord{
  position:absolute;left:0;width:100%;height:92px;
  display:block;pointer-events:none;z-index:2;
}
.bandeau-neuro .bord.haut{top:-1px;transform:scaleY(-1)}
.bandeau-neuro .bord.bas{bottom:-1px}
.bandeau-neuro .creux{fill:var(--creux)}
.bandeau-neuro .trait{
  fill:none;stroke:var(--ligne);stroke-width:4;
  stroke-linecap:round;stroke-linejoin:round;
}
.bandeau-neuro .noeud{fill:var(--ligne)}
/* Un bandeau peut avoir besoin d'une couleur differente en haut et en bas,
   quand ses deux voisines ne sont pas de la meme couleur. */
.bandeau-neuro .bord.haut .creux{fill:var(--creux-haut, var(--creux))}
.bandeau-neuro .bord.bas  .creux{fill:var(--creux-bas,  var(--creux))}
.bandeau-neuro .bord.haut .trait{stroke:var(--ligne-haut, var(--ligne))}
.bandeau-neuro .bord.bas  .trait{stroke:var(--ligne-bas,  var(--ligne))}
.bandeau-neuro .bord.haut .noeud{fill:var(--ligne-haut, var(--ligne))}
.bandeau-neuro .bord.bas  .noeud{fill:var(--ligne-bas,  var(--ligne))}
/* de la place pour que le texte ne vienne pas buter dans l'ondulation */
.bandeau-neuro[data-bandeau~="haut"]{padding-top:150px}
.bandeau-neuro[data-bandeau~="bas"]{padding-bottom:150px}
/* le filet droit d'origine ferait une barre en travers de l'ondulation */
.bandeau-neuro[data-bandeau~="haut"]{border-top:0}
.bandeau-neuro[data-bandeau~="bas"]{border-bottom:0}

/* 24/10/2026, demande de Nathalie : « je veux la même chose sur les bandeaux
   bleu clair et crème avec la couleur du bandeau foncé ».
   La découpe garde la couleur de la section voisine, pour que le bord ondule
   exactement pareil. ⚠️ La couleur du trait, elle, n'est plus posée ici depuis
   le 26/10 : elle dépend de l'aplat de CHAQUE bord, et c'est la section qui la
   donne. Ici on ne garde que la finesse du dessin. */
.bandeau-neuro.clair .trait{stroke-width:3;opacity:.72}
.bandeau-neuro.clair .noeud{opacity:.8}

/* ---------- responsive ---------- */
@media(max-width:920px){
  .burger{display:flex}
  nav.menu{
    position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:var(--paper);
    box-shadow:-20px 0 60px rgba(28,27,25,.12);transform:translateX(100%);
    transition:transform .45s var(--ease);padding:96px 32px;z-index:55;
  }
  nav.menu.open{transform:none}
  nav.menu ul{flex-direction:column;gap:26px;align-items:flex-start}
  nav.menu a{font-size:16px}
  .foot-grid{grid-template-columns:1fr 1fr}
  section{padding:72px 0}
}
@media(max-width:700px){
  .bandeau-neuro .bord{height:54px}
  .bandeau-neuro[data-bandeau~="haut"]{padding-top:104px}
  .bandeau-neuro[data-bandeau~="bas"]{padding-bottom:104px}
}
@media(max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column;gap:6px}
}