/* ============================================================
   ARTISTICULTUREL — Thème « galerie ivoire » (CLAIR)
   Palette validée par Hélène le 13/09/2026 (fiche de présentation) :
   ivoire #FAF6EF · encre #2B2622 · terracotta #B5542E · sauge #5F7355
   sable #E8DFD1 · gris chaud #6B645C
   mobile-first · source : dossier_site/design-system/artisticulturel/MASTER.md
   ============================================================ */

/* ===== TOKENS ===== */
:root{
  /* Noms conservés pour ne casser aucune page ; valeurs = palette claire */
  --noir:#FAF6EF;        /* fond principal (ivoire) */
  --noir2:#F2EBE0;       /* zones secondaires / fonds doux (sable clair) */
  --surface:#FFFFFF;     /* cartes (blanc) */
  --ligne:#E8DFD1;       /* bordures (sable) */
  --ligne2:#D9CDB8;      /* bordures soutenues */
  --blanc:#2B2622;       /* texte principal (encre) */
  --gris:#6B645C;        /* texte secondaire */
  --gris2:#6B645C;       /* petit texte — contraste 5,4:1 sur ivoire */
  --vert:#5F7355;        /* sauge — actions, boutons, cadres */
  --vert2:#4C5E45;       /* survol */
  --vert3:#33452C;       /* olive profond — bandeaux, tableaux */
  --beige:#B5542E;       /* terracotta — accent, filets, numéros */
  --beige2:#F0DCCF;      /* fonds terracotta clairs (notices, badges) */
  --danger:#A62A1C;
  --succes:#3F6B4E;

  /* Typographie (inchangée) */
  --font-titre:'Cormorant Garamond',Georgia,serif;
  --font-texte:'Jost','Segoe UI',system-ui,sans-serif;
  --txt-hero:clamp(2rem,7vw,3.2rem);
  --txt-h2:clamp(1.45rem,4vw,2rem);
  --txt-h3:clamp(1.15rem,3vw,1.35rem);

  /* Espacements */
  --espace-xs:4px; --espace-sm:8px; --espace-md:16px;
  --espace-lg:24px; --espace-xl:32px; --espace-2xl:48px; --espace-3xl:64px;

  /* Rayons & ombres (douces, sur fond clair) */
  --rayon-sm:6px; --rayon-md:12px; --rayon-lg:14px;
  --ombre-sm:0 1px 2px rgba(43,38,34,.08);
  --ombre-md:0 4px 12px rgba(43,38,34,.08);
  --ombre-lg:0 12px 24px rgba(43,38,34,.12);

  /* Divers */
  --t:200ms ease;
}

/* ===== BASE (mobile-first) ===== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--noir);
  color:var(--blanc);
  font-family:var(--font-texte);
  font-weight:300;
  font-size:1.02rem;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:var(--font-titre);font-weight:600;letter-spacing:.5px;color:var(--blanc);line-height:1.2}
h1{font-size:var(--txt-hero)}
h2{font-size:var(--txt-h2)}
h3{font-size:var(--txt-h3)}
img{max-width:100%;height:auto;display:block}
a{color:var(--beige);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--vert)}
:focus-visible{outline:2px solid var(--beige);outline-offset:2px}

/* ===== En-tête : olive profond, filet terracotta ===== */
header.site{
  background:var(--vert3);
  border-bottom:4px solid var(--beige);
  padding:.7rem 1.2rem;
  position:sticky;top:0;z-index:50;
  box-shadow:0 3px 12px rgba(43,38,34,.12);
}
header.site{padding:0}
header.site .top{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;max-width:1180px;min-height:78px;margin:0 auto;padding:6px 24px}
header.site .logo{text-decoration:none;display:inline-flex;align-items:center;gap:.7rem;color:#FAF6EF;font-family:var(--font-titre);font-size:1.45rem;font-weight:600;letter-spacing:.5px;white-space:nowrap}
/* Logo uniforme sur TOUTES les pages : même taille, même alignement (13/09/2026) */
header.site .logo{display:inline-flex;align-items:center;gap:.7rem;min-height:56px;line-height:1.05;flex:0 0 auto;white-space:nowrap}
header.site .logo .logo-img{height:auto;width:104px;flex:0 0 auto;object-fit:contain;display:block;background:#FAF6EF;border:0;border-radius:10px;padding:5px}
/* Le logo ne bouge plus quand le menu passe sur deux lignes : il reste épinglé
   en haut de l'en-tête, à la même distance que sur les pages « refonte-* »
   (corrigé le 14/09/2026 — le menu à 9 entrées passait à la ligne et décalait
   le logo de 10 px). */
header.site .logo{align-self:flex-start;margin-top:5px}
header.site .logo .logo-nom{color:#FAF6EF;font-weight:600;letter-spacing:.5px;white-space:nowrap}
nav{width:100%;overflow-x:auto}
nav ul{display:flex;flex-wrap:nowrap;gap:.2rem;list-style:none;align-items:center}
nav a{
  color:#EFE9DE;text-decoration:none;
  font-size:.8rem;letter-spacing:1.5px;text-transform:uppercase;
  padding:.6rem .6rem;border-radius:4px;font-weight:400;
  display:inline-block;white-space:nowrap;
}
nav a:hover{color:var(--vert3);background:var(--beige2)}
nav a[aria-current="page"]{color:#FFF;border-bottom:2px solid var(--beige)}

/* ===== Pied de page (clair) ===== */
footer.site{background:var(--noir2);border-top:4px solid var(--beige);color:var(--gris2);padding:2rem 1.2rem;margin-top:3rem;font-size:.88rem}
footer.site a{color:var(--beige)}
footer.site a:hover{color:var(--vert)}
footer.site .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;max-width:1100px;margin:0 auto}
footer.site h4{color:var(--vert3);font-family:var(--font-titre);font-weight:600;letter-spacing:1px;margin-bottom:.6rem}

/* ===== Contenu ===== */
main{max-width:1100px;margin:0 auto;padding:1.2rem 1.2rem 3rem}
.hero{
  background:linear-gradient(165deg,var(--beige2) 0%,var(--noir) 70%);
  color:var(--blanc);padding:2.8rem 1.2rem;text-align:center;
  border:1px solid var(--ligne);border-radius:16px;margin-bottom:2rem;
  box-shadow:var(--ombre-md);
}
.hero .logo-hero{height:100px;width:auto;margin:0 auto 1.2rem;border-radius:14px;background:#fff;padding:8px;border:3px solid var(--beige);box-shadow:var(--ombre-md)}
.hero h1{color:var(--blanc);margin-bottom:.8rem}
.hero p{max-width:660px;margin:0 auto 1.5rem;color:var(--gris);font-size:1.08rem}
section{margin:2.5rem 0}
h2{color:var(--vert3);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:3px solid var(--beige)}
h2 .num{color:var(--beige);margin-right:.6rem}
h3{color:var(--blanc);margin:.9rem 0 .4rem}
.lead{font-size:1.1rem;color:var(--gris);max-width:760px}
h3.sous-titre{font-family:var(--font-titre);font-size:1.4rem;margin:2.2rem 0 .2rem;padding-bottom:.4rem;border-bottom:1px solid var(--ligne)}

/* ===== Boutons ===== */
.btn{
  display:inline-block;
  background:var(--vert);color:#FFFFFF;
  padding:.7rem 1.4rem;border-radius:var(--rayon-sm);
  text-decoration:none;font-size:.9rem;letter-spacing:1.5px;text-transform:uppercase;
  border:1px solid var(--vert);cursor:pointer;font-family:var(--font-texte);font-weight:400;
  box-shadow:var(--ombre-sm);
  transition:background var(--t),transform var(--t),color var(--t);
}
.btn:hover{background:var(--vert2);border-color:var(--vert2);color:#FFFFFF;transform:translateY(-1px)}
.btn.ghost{background:transparent;border:2px solid var(--beige);color:var(--beige);box-shadow:none}
.btn.ghost:hover{background:var(--beige);color:#FFFFFF}

/* ===== Cartes ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(150px,40vw,250px),1fr));gap:1.2rem}
.card{
  background:var(--surface);border:1px solid var(--ligne);border-radius:10px;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--ombre-md);border-top:4px solid var(--vert);
  transition:border-color var(--t),transform var(--t),box-shadow var(--t);
}
.card:hover{border-color:var(--vert);transform:translateY(-2px);box-shadow:var(--ombre-lg)}
.card .img{
  aspect-ratio:4/3;
  overflow:hidden;
  min-height:0;
  background:linear-gradient(145deg,var(--beige2) 0%,var(--noir2) 60%,var(--ligne) 100%);
  border-bottom:1px solid var(--ligne);
  display:flex;align-items:center;justify-content:center;
  color:var(--beige);font-style:italic;font-size:.85rem;letter-spacing:1px;
}
/* Photos de profil : cadrage un peu haut (on garde le visage) et jamais de
   déformation — 01/10/2026, après une photo verticale rognée et une vignette
   150x150 agrandie devenue floue. Le site va chercher la plus grande version. */
.card .img img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.card .img img[src*="img-sans-visuel"]{object-fit:contain}
/* Artiste sans visuel publié : on affiche l'emblème de sa famille, jamais l'œuvre
   d'un autre (deux artistes ne doivent pas partager le même visuel). */
.card .img .img-sans-visuel{font-size:2.4rem;font-style:normal;opacity:.55;letter-spacing:0}
.card .body{padding:1rem;flex:1}
.card .body h3{font-size:1.2rem;margin:0 0 .3rem;color:var(--blanc)}
.card .tags{font-size:.78rem;color:var(--beige);letter-spacing:1px;text-transform:uppercase;margin-bottom:.5rem;font-weight:500}
.card p{font-size:.9rem;color:var(--gris)}
.badge{display:inline-block;background:var(--beige2);color:#7A3315;border-radius:20px;padding:.15rem .7rem;font-size:.76rem;margin-right:.3rem;margin-bottom:.3rem;border:1px solid var(--beige)}
.badge.vert{background:var(--vert);color:#FFFFFF;border-color:var(--vert)}
.badge.beige{background:transparent;border:1px solid var(--beige);color:var(--beige)}

/* ===== Familles ===== */
.familles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.2rem}
.famille{
  background:var(--surface);border:1px solid var(--ligne);border-radius:12px;
  padding:1.5rem;text-align:center;text-decoration:none;display:block;
  transition:border-color var(--t),box-shadow var(--t);border-top:4px solid var(--beige);
}
.famille:hover{border-color:var(--vert);box-shadow:var(--ombre-lg)}
.famille .ico{font-size:2rem;margin-bottom:.6rem}
.famille h3{color:var(--beige);font-size:1.4rem}
.famille p{color:var(--gris);font-size:.9rem}

/* ===== Packs / tableaux ===== */
table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--ligne);border-radius:10px;overflow:hidden}
th,td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid var(--ligne);font-size:.93rem;color:var(--blanc)}
th{background:var(--vert3);color:#FAF6EF;font-weight:500;letter-spacing:1px}
tr:last-child td{border-bottom:none}
tr:nth-child(even) td{background:#FBF7F0}
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(220px,45vw,250px),1fr));gap:1.2rem}
.pack{background:var(--surface);border:1px solid var(--ligne);border-radius:12px;padding:1.5rem;display:flex;flex-direction:column;box-shadow:var(--ombre-md);border-top:4px solid var(--beige)}
.pack.vedette{border:2px solid var(--vert);border-top:6px solid var(--vert);box-shadow:var(--ombre-lg)}
.pack .nom{font-family:var(--font-titre);font-size:1.5rem;color:var(--blanc)}
.pack .prix{font-size:1.9rem;color:var(--beige);font-weight:500;margin:.3rem 0 .8rem}
.pack .prix small{font-size:.85rem;color:var(--gris);font-weight:300}
.pack ul{list-style:none;flex:1}
.pack li{padding:.35rem 0 .35rem 20px;position:relative;color:var(--gris);font-size:.92rem;border-bottom:1px dashed var(--ligne)}
.pack li:last-child{border-bottom:none}
.pack li::before{content:"·";color:var(--beige);position:absolute;left:4px;font-weight:600}
.pack .btn{margin-top:1.2rem;text-align:center}

/* ===== Formulaires ===== */
.field{background:var(--surface);border:1px solid var(--ligne);border-radius:10px;padding:1.5rem;max-width:520px;box-shadow:var(--ombre-md);border-top:4px solid var(--vert)}
label{display:block;margin:.8rem 0 .3rem;font-size:.9rem;color:var(--gris)}
input,textarea,select{
  width:100%;min-height:44px;padding:.7rem;
  border:1px solid var(--ligne2);border-radius:var(--rayon-sm);
  font-size:1rem;font-family:inherit;background:#FFFFFF;color:var(--blanc);
  transition:border-color var(--t),box-shadow var(--t);
}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--vert);
  box-shadow:0 0 0 3px rgba(95,115,85,.18);
}
input::placeholder,textarea::placeholder{color:var(--gris);opacity:.75}
/* Une case à cocher ou un bouton radio n'est pas un champ de saisie : sans cette
   règle, la règle « input{width:100%} » ci-dessus les étirait sur toute la largeur
   et leur donnait 44 px de haut (vu sur la page Collectivités, 30/09/2026). */
input[type=checkbox],input[type=radio]{
  width:auto;min-height:0;height:1.15rem;padding:0;margin:0;
  flex:0 0 auto;align-self:flex-start;accent-color:var(--vert);
}
label.case-ligne{display:flex;gap:.6rem;align-items:flex-start;text-align:left;font-size:.95rem;line-height:1.5}
button[type=submit]{margin-top:1.2rem}

/* ===== Bandeaux ===== */
.notice{background:var(--beige2);border-left:5px solid var(--beige);padding:.9rem 1.1rem;border-radius:0 8px 8px 0;margin:1.2rem 0;font-size:.95rem;color:#7A3315}
.off{background:var(--noir2);border-left:5px solid var(--gris);padding:.9rem 1.1rem;border-radius:0 8px 8px 0;margin:1.2rem 0;color:var(--gris)}

/* ===== Carte ===== */
#carte{height:460px;border-radius:10px;border:1px solid var(--ligne);z-index:0;background:var(--noir2)}
.leaflet-popup-content-wrapper{background:#FFFFFF;color:var(--blanc);border:1px solid var(--ligne);border-radius:10px}
.leaflet-popup-tip{background:#FFFFFF}
.leaflet-popup-content{color:var(--blanc)}
.leaflet-container{background:var(--noir2)}

/* ===== Utilitaires ===== */
.deux{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;align-items:start}
.centre{text-align:center}
.petit{font-size:.85rem;color:var(--gris2)}
ul.simple{margin-left:1.2rem}
ul.simple li{padding:.3rem 0;color:var(--gris2)}

/* ===== Accessibilité ===== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ===== Tableaux sur mobile (lisibilité + défilement si besoin) ===== */
@media (max-width:639px){
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px}
  th,td{padding:.5rem .55rem;font-size:.85rem}
  .tableau-defilant{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ===== Responsive (mobile-first) ===== */
@media (min-width:640px){
  main{padding:1.5rem 1.2rem 3rem}
  .hero{padding:3.2rem 1.5rem}
  .hero .logo-hero{height:130px}
  nav{width:auto}
  nav ul{flex-wrap:wrap}
  #carte{height:460px}
}
@media (min-width:768px){
  header.site .top{flex-direction:row}
  .btn{padding:.75rem 1.6rem}
}

/* ===== Menu d'ordinateur sur UNE SEULE ligne (corrigé le 14/09/2026) =====
   Avec 9 entrées (dont « Inscription artiste » ajoutée le 14/09), le menu
   passait à la ligne à partir de 1280 px : l'en-tête grandissait et le logo
   se décalait. On resserre légèrement les espacements pour que tout tienne
   sur une ligne sur les écrans d'ordinateur. */
@media (min-width:1280px){
  nav ul{flex-wrap:nowrap}
  nav a{padding:.6rem .35rem;letter-spacing:1.2px}
}

/* ============================================================
   HARMONISATION (16/09/2026) — un seul conteneur, grilles centrées,
   cartes de hauteur égale, rythme vertical régulier.
   Ce bloc vient après : il ajuste sans casser ce qui précède.
   ============================================================ */
:root{ --largeur:1160px; --mesure:68ch; }

/* --- un seul conteneur pour le menu, le contenu et le pied de page --- */
header.site .top,
main,
footer.site .cols{ max-width:var(--largeur); margin-left:auto; margin-right:auto }
main{ padding:1.5rem 1.5rem 3.5rem }
footer.site .cols{ padding:0 1.5rem }

/* --- rythme vertical régulier --- */
section{ margin:3rem 0 }
section:first-of-type{ margin-top:2rem }
section:last-of-type{ margin-bottom:3.5rem }
h2{ margin-bottom:1.1rem }
.lead{ max-width:var(--mesure); font-size:1.06rem; line-height:1.75 }
section > .lead + *{ margin-top:1.4rem }
h3.sous-titre{ margin:2.6rem 0 .8rem }

/* --- grilles : colonnes de largeur raisonnable, rangées incomplètes centrées --- */
.grid{ grid-template-columns:repeat(auto-fit,minmax(230px,300px)); justify-content:center; gap:1.4rem }
.packs{ gap:1.4rem; align-items:stretch }
/* une rangée de 3 cartes occupe toute la largeur et une rangée de 4 aussi :
   toutes les rangées s'alignent ainsi sur les mêmes bords (16/09/2026) */
.packs-2{ grid-template-columns:repeat(2,minmax(0,460px)); justify-content:center }
.packs-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.packs-4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.familles{ grid-template-columns:repeat(auto-fit,minmax(220px,330px)); justify-content:center; gap:1.4rem }
.deux{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; align-items:start }

/* --- cartes : mêmes hauteurs, contenu réparti, boutons alignés en bas --- */
.card, .pack, .famille{ height:100% }
.pack{ padding:1.6rem }
.pack ul{ display:flex; flex-direction:column; gap:.15rem; margin-bottom:.4rem }
.pack .btn{ margin-top:auto }
.famille{ display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch;
          padding:1.6rem 1.5rem; text-align:center; min-height:100% }
.famille .ico{ font-size:2.1rem; margin-bottom:.7rem }
.famille h3{ margin:.2rem 0 .55rem }
.famille p{ margin:0 auto; max-width:34ch }
.card .body{ padding:1.15rem 1.2rem }
.card .body h3{ font-size:1.25rem; line-height:1.25 }

/* --- carrousel : cartes de même hauteur, prix alignés en bas, dernière carte non coupée --- */
.carrousel .piste{ padding:0 1.5rem .9rem .2rem; gap:1.4rem }
.carrousel .carte{ display:flex; flex-direction:column; min-width:262px; max-width:262px }
.carrousel .carte .infos{ flex:1; display:flex; flex-direction:column; padding:1rem 1.1rem 1.1rem }
.carrousel .carte .infos .titre{ min-height:2.6em }
.carrousel .carte .infos .prix{ margin-top:auto; padding-top:.5rem }
.carrousel .nav.prev{ left:-6px }
.carrousel .nav.next{ right:-6px }

/* --- listes et bandeaux : largeur de lecture cohérente --- */
.off{ max-width:var(--mesure) }
/* les encadrés (bandeaux roses) occupent toute la largeur (30/09/2026, demande d'Hélène) */
.notice{ max-width:none }
ul.simple{ max-width:var(--mesure) }
form.field{ max-width:560px; margin-left:auto; margin-right:auto }

/* --- grands écrans : un peu plus d'air --- */
@media (min-width:1024px){
  section{ margin:3.5rem 0 }
  main{ padding:2rem 1.5rem 4rem }
  .hero{ padding:3.4rem 2rem; margin-bottom:2.5rem }
}

/* --- mobile : marges resserrées et grilles sur une colonne --- */
@media (max-width:639px){
  main{ padding:1.1rem 1.1rem 2.5rem }
  .grid, .packs, .familles{ grid-template-columns:1fr; justify-content:stretch }
  .carrousel .carte{ min-width:78%; max-width:78% }
  .carrousel .nav{ display:none }
  section{ margin:2.2rem 0 }
  .famille{ min-height:0 }
}

/* ===== Forfaits : passages à 2 puis 1 colonne ===== */
@media (max-width:900px){
  .packs-3, .packs-4{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .packs-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:639px){
  .packs-2, .packs-3, .packs-4{ grid-template-columns:1fr }
}


/* ============================================================
   MENU MOBILE (16/09/2026) — sur téléphone : bouton « Menu » + panneau vertical
   ============================================================ */
.burger{ display:none; background:transparent; border:1px solid rgba(250,246,239,.45); color:#FAF6EF;
         font-family:var(--font-texte); font-size:.78rem; letter-spacing:1.4px; text-transform:uppercase;
         padding:.55rem .9rem; border-radius:6px; cursor:pointer; align-items:center; gap:.5rem }
.burger:hover{ background:rgba(250,246,239,.12) }
.burger .barres{ display:inline-block; width:16px; height:2px; background:currentColor; position:relative }
.burger .barres::before, .burger .barres::after{ content:""; position:absolute; left:0; width:16px; height:2px; background:currentColor }
.burger .barres::before{ top:-5px } .burger .barres::after{ top:5px }

@media (max-width:900px){
  /* l'en-tête devient : logo à gauche, bouton Menu à droite */
  header.site .top{ flex-wrap:wrap; min-height:64px; padding:6px 14px; gap:.6rem }
  header.site .logo .logo-img{ width:78px }
  header.site .logo{ font-size:1.2rem; min-height:44px; margin-top:3px }
  .burger{ display:inline-flex; margin-left:auto }
  header.site nav{
    display:none; width:100%; order:3; margin:.5rem 0 .2rem;
    background:var(--vert3); border-top:1px solid rgba(250,246,239,.18); padding:.3rem 0
  }
  header.site.menu-ouvert nav{ display:block }
  header.site nav ul{ flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:0 }
  header.site nav li{ border-bottom:1px solid rgba(250,246,239,.12) }
  header.site nav li:last-child{ border-bottom:none }
  header.site nav a{ display:block; padding:.85rem .4rem; font-size:.86rem; letter-spacing:1.2px; border-radius:0 }
  header.site nav a:hover{ background:rgba(250,246,239,.10) }
}


/* ===== Menu sur une seule ligne (10 entrées, ajout de « Suivre les artistes » 16/09/2026) =====
   À 1440 px le menu débordait : on resserre typographie et espacements pour tenir sans retour à la ligne. */
@media (min-width:1140px){
  nav a{ padding:.5rem .30rem; font-size:.74rem; letter-spacing:.55px }
}
/* on ne grossit plus la typographie au-delà : le menu resterait sur une ligne
   sur tous les écrans d'ordinateur (à partir de 1280 px) */
/* en secours, le menu passe à la ligne plutôt que d'être coupé (jamais de débordement) */
@media (min-width:640px){ nav ul{ flex-wrap:wrap } }
/* ===== Confort au doigt sur téléphone : liens du pied de page ===== */
@media (max-width:900px){
  footer.site a{ display:inline-block; padding:.45rem 0 }
  footer.site .cols{ gap:1.1rem }
}

/* ===== Corrections demandées par Helene (16/09/2026, soir) =====
   1. les trois publics (je suis artiste / je suis une commune / je veux suivre les
      artistes) sont CENTRES : le conteneur flex les alignait a gauche ;
   2. la baseline « Le carrefour de la culture contemporaine » est plus GRANDE et
      centree (elle etait en 13 px, collee a gauche). */
.hero .ctas{ justify-content:center; align-items:center; flex-wrap:wrap }
.hero p.kicker, .hero .kicker, p.kicker{ display:block; max-width:none; width:auto;
         margin:0 auto 1.1rem; text-align:center;
         font-size:clamp(1.05rem,2.1vw,1.3rem); letter-spacing:.16em; text-transform:uppercase;
         color:var(--beige); font-weight:600; line-height:1.35 }

/* ===== DESIGN — centré et dynamique (choix d'Helene, 16/09/2026) ===== */
:root{ --blanc:#221E1B; --gris:#4F4841 }
main section h2{ text-align:center; border-bottom:none; padding-bottom:0 }
main section h2 .num{ display:block; font-size:.78rem; letter-spacing:.32em; margin:0 0 .35rem; color:var(--beige) }
main section h2::after{ content:""; display:block; width:68px; height:3px; background:var(--beige); margin:.75rem auto 0 }
.lead{ text-align:center; margin-left:auto; margin-right:auto }
h3.sous-titre{ text-align:center; border-bottom:none }
h3.sous-titre::after{ content:""; display:block; width:44px; height:2px; background:var(--ligne2); margin:.5rem auto 0 }
.pack ul, .card p, .famille p, ul.simple, .notice{ text-align:left }
.pack .nom, .pack .prix, .pack .btn, .famille h3, .card .body h3{ text-align:center }

/* le premier ecran respire et attire l'oeil */
.hero{ position:relative; overflow:hidden; padding:4rem 2rem 3.2rem;
       background:linear-gradient(160deg,#F7E4D9 0%,#FAF6EF 52%,#EFE7D8 100%) }
.hero::before{ content:""; position:absolute; inset:-40% -10% auto -10%; height:520px;
               background:radial-gradient(closest-side, rgba(181,84,46,.16), transparent 70%) }
.hero > *{ position:relative }
.hero h1{ font-size:clamp(2.1rem,5vw,3.4rem) }
.hero .etape{ background:rgba(255,255,255,.86) }

/* bandeau d'appel avant les offres */
.bandeau-appel{ margin:2.2rem auto; max-width:1000px; background:var(--vert3); color:#FAF6EF;
                border-radius:14px; padding:1.4rem 1.6rem; display:flex; flex-wrap:wrap;
                align-items:center; justify-content:space-between; gap:1rem; box-shadow:var(--ombre-lg) }
.bandeau-appel p{ margin:0; max-width:56ch; color:#F3EDE2; text-align:left }
.bandeau-appel .btn{ background:var(--beige); border-color:var(--beige); box-shadow:none }

/* cartes : relief et survol */
.card, .pack, .famille, .carrousel .carte{ transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease }
.card:hover, .pack:hover, .famille:hover, .carrousel .carte:hover{ transform:translateY(-4px); box-shadow:var(--ombre-lg) }
.btn{ box-shadow:0 6px 16px rgba(95,115,85,.20); letter-spacing:1.2px }
.btn.ghost{ box-shadow:none }

/* les sections alternent pour donner du rythme */
main section:nth-of-type(even){ background:linear-gradient(180deg, rgba(242,235,224,.55), rgba(250,246,239,0));
                                border-radius:16px; padding:1.4rem 1.2rem }

/* pied de page centre */
footer.site{ text-align:center }
footer.site h4{ text-align:center }

/* ===== NEWSLETTER — invitation RECURRENTE en bas de chaque page ===== */
.bande-lettre{ background:var(--vert3); margin:2.5rem 0 0; padding:1.6rem 1.2rem; border-top:4px solid var(--beige) }
.bande-lettre .dedans{ max-width:1000px; margin:0 auto; display:flex; flex-wrap:wrap; gap:1.2rem;
                       align-items:center; justify-content:space-between }
.bande-lettre h3{ color:#FAF6EF; margin:0 0 .3rem; font-family:var(--font-titre); font-size:1.35rem }
.bande-lettre p{ margin:0; color:#E4DCCF; max-width:52ch }
.bande-lettre form{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center }
.bande-lettre input[type=email]{ padding:.65rem .8rem; border:1px solid #E8DFD1; border-radius:9px;
                                 font-size:1rem; background:#FAF6EF; color:#2B2622; min-width:230px }
.bande-lettre .btn{ background:var(--beige); border-color:var(--beige); color:#fff; box-shadow:none }
@media (max-width:700px){ .bande-lettre .dedans{ flex-direction:column; align-items:stretch } }

/* --- Filigrane : RETIRÉ le 17/09/2026 (soir) à la demande d'Hélène — « le logo en haut
   à droite, ça ne va pas du tout, enlève-le sur toutes les pages ». Ne pas le remettre
   sans son accord. Les images du tampon restent dans img/v2 (tampon-logo-*.png) pour les
   PDF, mais AUCUN filigrane ne s'affiche sur le site. --- */

/* ===== FORFAITS : le détail est en menu déroulant (30/09/2026, demande d'Hélène) =====
   Le résumé ne montre que le nom du forfait (et son sous-titre) ; le prix et la liste
   des prestations se déplient au clic. Aucun JavaScript : <details>/<summary> natifs. */
details.pack{ display:block; padding:0 }
details.pack > summary{
  display:flex; flex-direction:column; gap:.15rem; position:relative;
  padding:1.3rem 3rem 1.3rem 1.6rem; cursor:pointer; list-style:none;
  border-radius:10px 10px 0 0; transition:background .2s ease }
details.pack > summary::-webkit-details-marker{ display:none }
details.pack > summary::after{
  content:"＋"; position:absolute; right:1.1rem; top:1.15rem;
  font-size:1.25rem; line-height:1; color:var(--beige); font-weight:600 }
details.pack[open] > summary::after{ content:"−" }
details.pack > summary:hover{ background:rgba(181,84,46,.07) }
details.pack > summary .nom{ font-family:var(--font-titre); font-size:1.5rem; color:var(--blanc) }
details.pack > summary .petit{ font-family:var(--font-texte); font-size:.85rem; color:var(--gris); font-weight:300 }
details.pack > summary .ouvrir{
  margin-top:.4rem; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--beige); font-weight:500 }
details.pack[open] > summary .ouvrir{ display:none }
details.pack > .dedans{ display:flex; flex-direction:column; flex:1; padding:0 1.6rem 1.5rem }
details.pack > .dedans .btn{ margin-top:auto }
/* une carte dépliée ne doit pas « sauter » au survol */
details.pack[open]:hover{ transform:none }

/* ===== Dépliants des forfaits : comparatif, options (30/09/2026) ===== */
details.depliant{ background:var(--surface); border:1px solid var(--ligne); border-radius:12px;
  box-shadow:var(--ombre-md); margin:1.2rem 0; overflow:hidden }
details.depliant > summary{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  cursor:pointer; list-style:none; padding:1rem 1.2rem; font-family:var(--font-titre);
  font-size:1.22rem; color:var(--blanc); transition:background .2s ease }
details.depliant > summary::-webkit-details-marker{ display:none }
details.depliant > summary::after{ content:"＋"; color:var(--beige); font-size:1.15rem; line-height:1 }
details.depliant[open] > summary::after{ content:"−" }
details.depliant > summary:hover{ background:rgba(181,84,46,.07) }
details.depliant[open] > summary{ border-bottom:1px solid var(--ligne) }
details.depliant > .dedans{ padding:1.1rem 1.2rem }
details.depliant table{ margin:0 }

/* encadré dont le texte est centré (30/09/2026) */
.notice.centre{ text-align:center; margin-left:auto; margin-right:auto }

/* ===== Pied de page : les réseaux en icônes (30/09/2026, demande d'Hélène) =====
   Contact et réseaux ne forment plus qu'une seule colonne ; les trois liens sont
   devenus des icônes rondes (SVG en ligne, aucune image à charger). */
footer.site .reseaux{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
  justify-content:center; margin-top:.6rem }
footer.site .reseaux a{ display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; background:var(--beige); color:#fff;
  transition:background .2s ease, transform .2s ease }
footer.site .reseaux a:hover{ background:var(--vert); color:#fff; transform:translateY(-2px) }
footer.site .reseaux svg{ width:20px; height:20px; fill:currentColor; display:block }

/* ===== Bouton « revenir en haut », fixe en bas à droite (30/09/2026, demande d'Hélène) =====
   Simple lien d'ancre : aucun JavaScript, donc il fonctionne sur toutes les pages. */
.haut-page{ position:fixed; right:1.1rem; bottom:1.1rem; z-index:60;
  width:46px; height:46px; border-radius:50%; display:inline-flex; align-items:center;
  justify-content:center; background:var(--beige); color:#fff; text-decoration:none;
  box-shadow:0 6px 16px rgba(43,38,34,.25);
  transition:background .2s ease, transform .2s ease }
.haut-page:hover{ background:var(--vert); color:#fff; transform:translateY(-3px) }
.haut-page svg{ width:22px; height:22px; fill:currentColor; display:block }
@media (max-width:639px){ .haut-page{ width:42px; height:42px; right:.8rem; bottom:.8rem } }