/* FONDATION DE DESIGN -- posee UNE FOIS POUR TOUTES (D-04, demande de Saray
   du 02/10/2026 : « si c'est basique ou moche, il n'achete pas »).
   Echelle typographique, espacements, ombres, rayons, etats clavier/souris,
   boutons, cartes produit, formulaires, en-tete (avec ou sans photo), menu
   de navigation (haut et gauche), depot de fichier habille, pied de page,
   grille responsive, animations sobres (03/10/2026 : .anim-titre,
   .au-defilement -- jamais automatiques, jamais de 3D, toujours neutres
   sous prefers-reduced-motion : reduce ; .au-defilement a besoin, une
   fois, de <script src="design-fondation.js" defer></script> avant
   </body>, copie a cote comme ce fichier).

   MENU ET DEPOT DE FICHIER (decision de Saray, 03/10/2026 23h26 : « je suis
   plutot pour des sites avec des menus a gauche ou en haut », « pour
   uploader des fichiers, on peut faire plus joli que le bouton gris de
   base »). .nav-haut/.nav-gauche restent TOUJOURS visibles, en pile, sans
   JS : design-fondation.js ne fait qu'ajouter le pli mobile derriere
   .bouton-menu (classe "menu-js" sur <html>, posee seulement si le script a
   pu charger). Tout input[type=file] est habille AUTOMATIQUEMENT par
   design-fondation.js (zone de depot .depot-fichier) ; sans ce script, le
   champ natif reste visible et fonctionne tel quel : aucune des deux
   fonctions ne cache de donnee ni n'empeche l'envoi du formulaire.

   FICHIER STATIQUE, LE MEME POUR TOUTES LES APPLICATIONS : copie telle
   quelle dans chaque dossier par harnais/guide_depuis_catalogue.py
   (poser_design), comme icones.txt. Ne pas le regenerer, ne pas en recopier
   des morceaux dans style.css.

   Aucune couleur ici (D-T-28, controle infra/scripts/controle-design.sh) :
   toutes les teintes viennent des variables posees par design.engendre.css
   (--fond, --surface, --texte, --accent, --sur-accent, --accent-2,
   --bordure, --ombre-couleur, --texte-sur-photo, --assombri-photo), tirees
   pour CETTE application. Ce fichier ne pose que la structure.

   Lien, DANS CET ORDRE, en tete de <head> :
     1. les polices (Google Fonts, voir design-choisi.txt)
     2. design.engendre.css   -- palette, polices, ombres et angles de CETTE
                                  application (varie par metier et ambiance)
     3. design-fondation.css  -- CE fichier : la structure, toujours pareille
     4. style.css             -- ce qui est propre au metier, par-dessus

   style.css n'ecrit AUCUNE couleur ni espacement en dur : il compose les
   classes d'ici (.bouton-principal, .carte-produit, .champ, .entete,
   .entete-photo, .grille, .pied-de-page) avec les icones et les mots du
   metier. Il peut ajouter des classes propres a l'enseigne, jamais
   redefinir celles-ci. */

:root{
  /* Echelle de texte (regles/design-applications.json, echelles.texte) */
  --taille-titre-1: clamp(1.875rem, 1.2rem + 2vw, 3rem);
  --taille-titre-2: clamp(1.25rem, 1rem + 1vw, 1.875rem);
  --taille-titre-3: 1.125rem;
  --taille-corps: 1rem;
  --taille-petite: 0.875rem;
  --taille-legende: 0.75rem;

  /* Echelle d'espacement (echelles.espace) */
  --espace-xs: 0.25rem;
  --espace-s: 0.5rem;
  --espace-m: 1rem;
  --espace-l: 1.5rem;
  --espace-xl: 2rem;
  --espace-xxl: 3rem;

  /* Graisses (echelles.graisses) */
  --graisse-normale: 400;
  --graisse-moyenne: 500;
  --graisse-demi: 600;
  --graisse-grasse: 700;

  /* Rayons et duree : par defaut si design.engendre.css n'est pas encore
     relie ; une application posee le redefinit (modele et ambiance). */
  --arrondi: 0.75rem;
  --arrondi-pastille: 999px;
  --lettres-titres: 0em;
  --duree: 160ms;
  --ombre-taille: 10px;

  /* Ombres : composees ici a partir de --ombre-couleur (posee par
     design.engendre.css selon le mode clair/sombre de la palette) et
     --ombre-taille (posee selon l'ambiance du metier). */
  --ombre-legere: 0 1px 2px var(--ombre-couleur);
  --ombre-carte: 0 var(--ombre-taille) calc(var(--ombre-taille) * 2)
    calc(var(--ombre-taille) * -1) var(--ombre-couleur);
  --ombre-forte: 0 calc(var(--ombre-taille) * 1.6) calc(var(--ombre-taille) * 3)
    calc(var(--ombre-taille) * -1) var(--ombre-couleur);
}

/* ---- Base ---- */
*{box-sizing:border-box}
/* Le piege classique de flex/grid : un enfant garde par defaut un min-width
   (ou min-height) "auto" egal a la taille de SON PROPRE contenu le plus
   large, et un ancetre grandit pour l'accueillir meme loin en amont (mesure
   03/10/2026, essai 18 : une rangee de 9 creneaux horaires, elle-meme bien
   contrainte, faisait deborder la page entiere a 375px via trois conteneurs
   intermediaires qui n'avaient, eux, jamais ete touches). Zero sans ceci ne
   change la mise en page d'un element qui n'est pas lui-meme un enfant de
   flex ou de grille. */
*{min-width:0}
body{font-size:var(--taille-corps);line-height:1.55}
/* button/input/select/textarea n'heritent PAS de la police du corps par
   defaut dans les navigateurs (police systeme imposee) : filet de securite
   sous les classes .bouton et .champ, pour toute carte ou champ qui en
   emprunterait l'element sans leur classe (mesure 02/10/2026). */
button,input,select,textarea{font:inherit}
h1,h2,h3{line-height:1.15;font-weight:var(--graisse-grasse);margin:0 0 var(--espace-s)}
h2{font-size:var(--taille-titre-2)}
h3{font-size:var(--taille-titre-3)}
p{margin:0 0 var(--espace-m)}
a{color:var(--accent)}
img,svg{max-width:100%;display:block}

/* ---- Etats : tout ce qui s'active se voit, au clavier comme a la souris
   (regles_communes du catalogue : jamais "transition: all", on nomme la
   propriete animee). ---- */
a, button, .bouton, input, select, textarea, [tabindex]{
  transition: box-shadow var(--duree) ease, transform var(--duree) ease,
    background var(--duree) ease, border-color var(--duree) ease,
    filter var(--duree) ease;
}
a:focus-visible, button:focus-visible, .bouton:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Boutons ---- */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--espace-xs);
  min-height:48px;padding:0 var(--espace-l);border-radius:var(--arrondi);
  font:inherit;font-size:var(--taille-corps);font-weight:var(--graisse-demi);
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  /* Un bouton garde sa largeur de contenu meme pose dans un .champ (colonne
     flex) : sans ceci, il s'etire sur toute la largeur du champ. */
  align-self:flex-start;
}
.bouton-principal{background:var(--accent);color:var(--sur-accent);box-shadow:var(--ombre-legere)}
.bouton-principal:hover{filter:brightness(1.07);box-shadow:var(--ombre-carte);transform:translateY(-1px)}
.bouton-discret{background:transparent;color:var(--texte);border-color:var(--bordure)}
.bouton-discret:hover{background:var(--surface);border-color:var(--accent)}
.bouton:disabled{opacity:0.55;cursor:not-allowed;transform:none;box-shadow:none}
.bouton-pastille{border-radius:var(--arrondi-pastille)}
/* Toute rangee de boutons ou de puces (creneaux horaires, filtres, jours)
   passe a la ligne plutot que deborder a l'etroit (mesure 03/10/2026, essai
   18, le salon de the : la rangee de creneaux depassait a droite a 375px).
   :has() cible le conteneur flex directement, quel que soit son nom de
   classe -- supporte par tous les navigateurs courants depuis fin 2023. */
*:has(>.bouton+.bouton){flex-wrap:wrap}

/* ---- Cartes ---- */
.carte{
  background:var(--surface);border:1px solid var(--bordure);border-radius:var(--arrondi);
  padding:var(--espace-l);box-shadow:var(--ombre-carte);
}
.carte-produit{
  display:flex;flex-direction:column;gap:var(--espace-s);
  background:var(--surface);border:1px solid var(--bordure);border-radius:var(--arrondi);
  padding:var(--espace-m);box-shadow:var(--ombre-carte);
  transition:box-shadow var(--duree) ease, transform var(--duree) ease;
  /* Une carte-produit est parfois un <button> (carte cliquable) : un bouton
     ne herite pas de la police du corps par defaut dans les navigateurs,
     contrairement a un div. Sans ce font:inherit, son texte retombe sur la
     police systeme -- different du reste de la page (mesure 02/10/2026,
     capture apres-bureau-1280.png de l'application traiteur). */
  font:inherit;text-align:left;width:100%;
}
.carte-produit:hover{box-shadow:var(--ombre-forte);transform:translateY(-2px)}
.carte-produit .nom{font-weight:var(--graisse-demi);margin:0;min-width:0}
.carte-produit .prix{
  font-weight:var(--graisse-grasse);color:var(--accent);margin-top:auto;
  /* Un prix ne se coupe jamais sur deux lignes : c'est le nom, a cote, qui
     passe a la ligne a sa place (mesure 02/10/2026, meme capture). */
  white-space:nowrap;flex:none;
}
.carte-produit .ligne-nom-prix,.carte-produit>.nom-et-prix{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--espace-s);
}
.carte-produit .visuel{
  background:var(--accent-2);border-radius:var(--arrondi);
  aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;
}

/* ---- Formulaires ---- */
.champ{display:flex;flex-direction:column;gap:var(--espace-xs);margin-bottom:var(--espace-m)}
.champ label{font-size:var(--taille-petite);font-weight:var(--graisse-demi);color:var(--texte-doux)}
.champ input,.champ select,.champ textarea{
  min-height:48px;padding:0 var(--espace-m);border:1px solid var(--bordure);
  border-radius:var(--arrondi);background:var(--fond);color:var(--texte);font:inherit;
}
.champ textarea{min-height:120px;padding:var(--espace-m)}
.champ input:focus-visible,.champ select:focus-visible,.champ textarea:focus-visible{
  border-color:var(--accent)
}

/* ---- Depot de fichier (jamais le bouton gris du navigateur) ----
   Pose AUTOMATIQUEMENT par design-fondation.js autour de tout
   input[type=file] : .depot-fichier-champ reste le champ natif (son
   `name` part dans le formulaire sans rien changer cote serveur), rendu
   invisible mais TOUJOURS au premier plan et dans l'ordre de tabulation --
   Entree/Espace dessus ouvre le choix de fichier, comportement natif du
   navigateur, sans JavaScript pour la touche. */
.depot-fichier{
  position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--espace-xs);text-align:center;
  min-height:120px;padding:var(--espace-l);
  border:2px dashed var(--bordure);border-radius:var(--arrondi);
  background:var(--fond);
}
.depot-fichier:focus-within{border-color:var(--accent)}
.depot-fichier.survol{border-color:var(--accent);background:var(--accent-2)}
@media (prefers-reduced-motion: no-preference){
  .depot-fichier{transition:border-color var(--duree) ease, background var(--duree) ease}
}
.depot-fichier-champ{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;
}
.depot-fichier-bouton{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:0 var(--espace-m);border-radius:var(--arrondi);
  background:var(--accent);color:var(--sur-accent);font-weight:var(--graisse-demi);
  pointer-events:none;
}
.depot-fichier-texte{color:var(--texte-doux);font-size:var(--taille-petite)}
.depot-fichier-apercu:empty{display:none}
.depot-fichier-ligne{
  display:flex;align-items:center;gap:var(--espace-s);margin-top:var(--espace-s);
  max-width:100%;
}
.depot-fichier-ligne img{
  width:48px;height:48px;object-fit:cover;border-radius:var(--arrondi);flex:none;
}
.depot-fichier-nom{font-size:var(--taille-petite);color:var(--texte);word-break:break-all}
.depot-fichier-etat{font-size:var(--taille-legende);color:var(--texte-doux)}
/* LES FICHIERS GARDES (porte `fichiers`, tache 2211) : des TUILES, jamais une
   liste deroulante. <ul class="tuiles-fichiers"><li><button class="tuile-fichier"
   aria-pressed="true|false"><span class="tuile-fichier-type">PDF</span>
   <span class="tuile-fichier-nom">rapport.pdf</span></button></li></ul> ;
   aria-pressed="true" = choisie (les modeles retenus). */
.tuiles-fichiers{
  list-style:none;margin:var(--espace-m) 0;padding:0;display:grid;gap:var(--espace-s);
  grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));
}
.tuile-fichier{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--espace-xs);
  width:100%;min-height:44px;padding:var(--espace-m);text-align:left;cursor:pointer;
  font:inherit;color:var(--texte);background:var(--surface);
  border:1px solid var(--bordure);border-radius:var(--arrondi);box-shadow:var(--ombre-legere);
}
.tuile-fichier:hover,.tuile-fichier:focus-visible{border-color:var(--accent)}
.tuile-fichier[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-2)}
.tuile-fichier-type{
  font-size:var(--taille-legende);font-weight:var(--graisse-demi);padding:0 var(--espace-s);
  border-radius:var(--arrondi-pastille);border:1px solid var(--bordure);color:var(--texte-doux);
}
.tuile-fichier-nom{font-size:var(--taille-petite);word-break:break-all}
@media (prefers-reduced-motion: no-preference){
  .tuile-fichier{transition:border-color var(--duree) ease, background var(--duree) ease}
}

/* ---- Navigation : barre en haut ou colonne a gauche (decision de Saray,
   03/10/2026 23h26 : jamais une page unique qui defile). Sans
   design-fondation.js (bloque, 404), html n'a jamais la classe "menu-js" et
   les liens restent toujours deplies, en pile verticale sur telephone --
   rien n'est cache derriere un bouton qui ne repondrait pas. ---- */
.nav-haut, .nav-gauche{
  display:flex;gap:var(--espace-s);background:var(--surface);
}
.nav-haut{
  flex-wrap:wrap;align-items:center;justify-content:space-between;
  padding:var(--espace-s) var(--espace-l);border-bottom:1px solid var(--bordure);
}
.nav-gauche{
  flex-direction:column;padding:var(--espace-l) var(--espace-m);
  border-right:1px solid var(--bordure);min-width:200px;
}
.nav-liens{display:flex;flex-wrap:wrap;gap:var(--espace-xs)}
.nav-gauche .nav-liens{flex-direction:column}
.nav-lien{
  display:inline-flex;align-items:center;gap:var(--espace-xs);min-height:40px;
  padding:0 var(--espace-s);border-radius:var(--arrondi);
  color:var(--texte);text-decoration:none;font-weight:var(--graisse-demi);
}
.nav-lien:hover{background:var(--fond)}
.nav-lien.actif, .nav-lien[aria-current="page"]{background:var(--accent);color:var(--sur-accent)}
.bouton-menu{display:none}
@media (max-width: 720px){
  .bouton-menu{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:48px;min-width:48px;border-radius:var(--arrondi);
    border:1px solid var(--bordure);background:var(--surface);color:var(--texte);
    cursor:pointer;
  }
  .nav-gauche{min-width:0;border-right:none;border-bottom:1px solid var(--bordure)}
  html.menu-js .nav-haut .nav-liens, html.menu-js .nav-gauche .nav-liens{display:none;width:100%}
  html.menu-js .nav-haut.ouvert .nav-liens, html.menu-js .nav-gauche.ouvert .nav-liens{display:flex}
}

/* ---- En-tete, avec ou sans photo ---- */
.entete{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--espace-l);
  padding:var(--espace-xl) var(--espace-l);background:var(--surface);
  border-radius:0 0 var(--arrondi) var(--arrondi);
}
.entete>*{min-width:0}
.entete-photo{
  position:relative;min-height:280px;display:flex;align-items:flex-end;
  background-size:cover;background-position:center;
  border-radius:0 0 var(--arrondi) var(--arrondi);overflow:hidden;
}
.entete-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, var(--assombri-photo), transparent 65%);
}
.entete-photo .entete-texte{position:relative;z-index:1;color:var(--texte-sur-photo);padding:var(--espace-xl) var(--espace-l);min-width:0}
.entete h1,.entete-photo h1{font-size:var(--taille-titre-1);letter-spacing:var(--lettres-titres);margin:0}
.entete .accroche,.entete-photo .accroche{font-size:var(--taille-titre-3);font-weight:var(--graisse-normale);margin-top:var(--espace-xs)}

/* ---- Grille responsive ---- */
.grille{display:grid;gap:var(--espace-l);grid-template-columns:repeat(auto-fill, minmax(220px, 1fr))}

@media (max-width: 720px){
  .grille{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));gap:var(--espace-m)}
  .entete,.entete-photo .entete-texte{padding:var(--espace-l) var(--espace-m)}
}

/* ---- Animations sobres (03/10/2026, methode "inspiration avant de
   prompter") : des classes a poser par style.css, jamais automatiques.
   SANS DANGER POUR LES DONNEES : .au-defilement n'est cache que SOUS
   html.anim-js, une classe que SEUL design-fondation.js pose, et
   seulement s'il a pu charger et si IntersectionObserver existe -- sans
   ce script, toute section reste pleinement visible d'emblee. Les deux
   classes sont neutralisees net si la personne a demande moins de
   mouvement (prefers-reduced-motion: reduce) : aucune ne doit retarder ou
   cacher une donnee a l'ecran. Pas de 3D, pas de bibliotheque : inutile
   et lourd pour une petite enseigne sur telephone. ---- */
@media (prefers-reduced-motion: no-preference){
  /* .anim-titre : sur le h1 de l'entete, une legere entree "split reveal"
     au chargement -- CSS seul, sans aucune dependance a design-fondation.js. */
  .anim-titre{
    animation: fondation-entree-titre 640ms cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes fondation-entree-titre{
    from{clip-path:inset(0 100% 0 0);opacity:0;transform:translateX(-6px)}
    to{clip-path:inset(0 0 0 0);opacity:1;transform:translateX(0)}
  }
  /* .au-defilement : une section qui apparait doucement en entrant dans
     l'ecran (design-fondation.js ajoute .visible via IntersectionObserver). */
  html.anim-js .au-defilement{
    opacity:0;transform:translateY(16px);
    transition:opacity 520ms ease, transform 520ms ease;
  }
  html.anim-js .au-defilement.visible{opacity:1;transform:translateY(0)}
  /* .grille.au-defilement : les cartes "montent" l'une apres l'autre (repere
     21st.dev, l'animation reprise sans sa bibliotheque ni son design) --
     meme mecanisme, un leger decalage par carte. */
  html.anim-js .grille.au-defilement>*{
    opacity:0;transform:translateY(16px);
    transition:opacity 480ms ease, transform 480ms ease;
  }
  html.anim-js .grille.au-defilement.visible>*{opacity:1;transform:translateY(0)}
  html.anim-js .grille.au-defilement.visible>*:nth-child(2){transition-delay:60ms}
  html.anim-js .grille.au-defilement.visible>*:nth-child(3){transition-delay:120ms}
  html.anim-js .grille.au-defilement.visible>*:nth-child(4){transition-delay:180ms}
  html.anim-js .grille.au-defilement.visible>*:nth-child(5){transition-delay:240ms}
  html.anim-js .grille.au-defilement.visible>*:nth-child(n+6){transition-delay:280ms}
}
@media (prefers-reduced-motion: reduce){
  .anim-titre{animation:none}
  html.anim-js .au-defilement,html.anim-js .au-defilement.visible,
  html.anim-js .grille.au-defilement>*,html.anim-js .grille.au-defilement.visible>*{
    opacity:1;transform:none;transition:none;
  }
  /* Le survol des boutons et des cartes (deja pose plus haut) ne doit
     deplacer rien non plus : on garde le changement d'ombre, pas le
     mouvement. */
  .bouton-principal:hover,.carte-produit:hover{transform:none}
}

/* ---- Pied de page ---- */
.pied-de-page{
  margin-top:var(--espace-xxl);padding:var(--espace-xl) var(--espace-l);
  border-top:1px solid var(--bordure);color:var(--texte-doux);font-size:var(--taille-petite);
  display:flex;flex-wrap:wrap;gap:var(--espace-m);justify-content:space-between;
}

/* ---- Personnalisation : « Modifier mon site » (decision de Saray,
   03/10/2026 : le site doit etre modifiable par son proprietaire, sans
   refaire la fabrication). Posee AUTOMATIQUEMENT par design-fondation.js
   chez le proprietaire seulement ; variables de couleur seulement (D-T-28),
   44px de haut au moins, clavier d'abord. ---- */
.vibe-perso-bouton{
  position:fixed;left:16px;bottom:16px;z-index:999998;
  min-height:48px;padding:0 var(--espace-l);border-radius:var(--arrondi-pastille);
  border:1px solid var(--bordure);background:var(--surface);color:var(--texte);
  font:inherit;font-weight:var(--graisse-demi);cursor:pointer;
  box-shadow:var(--ombre-carte);display:inline-flex;align-items:center;gap:var(--espace-xs);
}
.vibe-perso-bouton:hover{border-color:var(--accent);color:var(--accent)}
/* Dans la barre du proprietaire (tache 2520) : un bouton de la ligne, pas un
   flottant. Ecrit apres la regle de base, il l'emporte aussi sur telephone. */
.vibe-perso-bouton.vibe-perso-en-ligne{position:static;width:auto;height:auto;min-height:44px;padding:0 var(--espace-m);margin-left:auto;box-shadow:none;font-size:15px}
.vibe-perso-bouton.vibe-perso-en-ligne .vibe-perso-libelle{position:static;width:auto;height:auto;overflow:visible;clip:auto}
/* Telephone (tache 2520) : une icone ronde de 48 px au-dessus de la bulle
   d'aide (droite 16 px, 56 px), centree sur elle : les deux boutons ne
   tiennent plus que la marge droite, plus le milieu de l'ecran. */
@media (max-width:719px){
  .vibe-perso-bouton:not(.vibe-perso-en-ligne){left:auto;right:20px;bottom:84px;width:48px;height:48px;padding:0;justify-content:center}
  .vibe-perso-bouton:not(.vibe-perso-en-ligne) .vibe-perso-libelle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.vibe-perso-fond{
  position:fixed;inset:0;z-index:999997;background:var(--texte);opacity:.35;
}
.vibe-perso-panneau{
  position:fixed;top:0;right:0;bottom:0;z-index:999999;
  width:min(380px,100vw);max-width:100vw;display:flex;flex-direction:column;
  background:var(--surface);color:var(--texte);box-shadow:var(--ombre-forte);
  border-left:1px solid var(--bordure);
}
@media (prefers-reduced-motion: no-preference){
  .vibe-perso-panneau{transition:transform var(--duree) ease}
}
.vibe-perso-entete{
  display:flex;align-items:center;justify-content:space-between;gap:var(--espace-s);
  padding:var(--espace-m) var(--espace-l);border-bottom:1px solid var(--bordure);
}
.vibe-perso-entete h2{margin:0;font-size:var(--taille-corps);font-weight:var(--graisse-grasse)}
.vibe-perso-fermer{
  min-height:44px;min-width:44px;border:none;background:transparent;color:var(--texte);
  font-size:1.25rem;cursor:pointer;border-radius:var(--arrondi);
}
.vibe-perso-fermer:hover{background:var(--fond)}
.vibe-perso-onglets{display:flex;gap:var(--espace-xs);padding:var(--espace-m) var(--espace-l) 0}
.vibe-perso-onglet{
  min-height:44px;padding:0 var(--espace-m);border:1px solid var(--bordure);
  border-bottom:none;border-radius:var(--arrondi) var(--arrondi) 0 0;
  background:var(--fond);color:var(--texte-doux);font:inherit;font-weight:var(--graisse-demi);
  cursor:pointer;
}
.vibe-perso-onglet[aria-selected="true"]{background:var(--surface);color:var(--accent)}
.vibe-perso-contenu{flex:1;overflow:auto;padding:var(--espace-l);border-top:1px solid var(--bordure)}
/* Tout element du panneau masque par `hidden` reste masque, quel que soit
   son `display` (07/10, tache 2211 : `.vibe-perso-panneau{display:flex}`
   l'emportait sur hidden, panneau ouvert d'office et croix sans effet). */
[class^="vibe-perso"][hidden],[class*=" vibe-perso"][hidden]{display:none!important}
.vibe-perso-volet p{color:var(--texte-doux);font-size:var(--taille-petite);margin-top:0}
.vibe-perso-palettes{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--espace-s)}
.vibe-perso-palette{
  display:flex;flex-direction:column;gap:var(--espace-xs);min-height:72px;
  padding:var(--espace-s);border:2px solid var(--bordure);border-radius:var(--arrondi);
  background:var(--fond);color:var(--texte);cursor:pointer;font:inherit;text-align:left;
}
.vibe-perso-palette[aria-pressed="true"]{border-color:var(--accent)}
.vibe-perso-palette-pastilles{display:flex;gap:4px}
.vibe-perso-palette-pastille{width:18px;height:18px;border-radius:50%;border:1px solid var(--bordure)}
.vibe-perso-palette-nom{font-size:var(--taille-petite);font-weight:var(--graisse-demi)}
.vibe-perso-liste-textes{display:flex;flex-direction:column;gap:var(--espace-s)}
.vibe-perso-texte-champ textarea{
  width:100%;min-height:44px;padding:var(--espace-s);border:1px solid var(--bordure);
  border-radius:var(--arrondi);background:var(--fond);color:var(--texte);font:inherit;
  box-sizing:border-box;
}
.vibe-perso-pied{
  display:flex;gap:var(--espace-s);padding:var(--espace-m) var(--espace-l);
  border-top:1px solid var(--bordure);
}
/* L'EDITION EN PLACE SE VOIT (volet Textes active) : un pointille autour de
   chaque titre ou paragraphe modifiable, sans toucher sa couleur. */
html[data-vibe-edition-textes] [data-vibe-texte]{
  outline:2px dashed var(--accent);outline-offset:2px;cursor:text;border-radius:2px;
}
html[data-vibe-edition-textes] [data-vibe-texte]:focus-visible{
  outline-style:solid;background:var(--accent-2);
}
/* L'IMAGE SE REMPLACE D'UN CLIC (volet Images active). */
html[data-vibe-edition-images] [data-vibe-image]{
  outline:2px dashed var(--accent);outline-offset:2px;cursor:pointer;
}
html[data-vibe-edition-images] [data-vibe-image]:hover,
html[data-vibe-edition-images] [data-vibe-image]:focus-visible{
  outline-style:solid;
}
@media (prefers-reduced-motion: reduce){
  .vibe-perso-panneau{transition:none}
}