/* ==========================================================================
   Le Soin Phoenix — feuille de style principale
   Palette et typographies : bloc :root ci-dessous.
   ========================================================================== */

/* --------------------------------------------------------------- Variables */
:root{
  /* Couleurs de marque, relevées sur le logo */
  --violet:        #4A2778;
  --violet-fonce:  #2E1650;
  --violet-clair:  #7B5AA6;
  --violet-pale:   #EDE7F6;
  --cyan:          #28A1DA;
  --cyan-clair:    #79B7E4;
  --cyan-pale:     #E6F4FD;

  /* Neutres */
  --encre:         #1B1430;
  --texte:         #3D3552;
  --texte-doux:    #6E6684;
  --ligne:         #E8E3F0;
  --fond:          #FFFFFF;
  --fond-doux:     #FAF8FD;
  --fond-tendre:   #F4F0FA;

  --or:            #C9A227;

  /* Dégradé signature */
  --degrade: linear-gradient(135deg, #4A2778 0%, #6A3FA0 35%, #3E7FC1 70%, #28A1DA 100%);
  --degrade-doux: linear-gradient(135deg, #F4F0FA 0%, #EAF4FC 100%);

  /* Typographies */
  --titre: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --corps: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Rythme */
  --rayon:    18px;
  --rayon-lg: 28px;
  --rayon-xl: 40px;
  --ombre:    0 2px 8px rgba(74,39,120,.04), 0 12px 32px rgba(74,39,120,.07);
  --ombre-lg: 0 4px 14px rgba(74,39,120,.06), 0 28px 64px rgba(74,39,120,.12);
  --transition: .38s cubic-bezier(.22,.61,.36,1);

  --largeur: 1180px;
  --gouttiere: clamp(1.15rem, 4vw, 2.5rem);
}

/* ------------------------------------------------------------------ Reset */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important }
}
body{
  margin:0;
  font-family:var(--corps);
  font-size:clamp(1rem,.97rem + .16vw,1.075rem);
  line-height:1.72;
  color:var(--texte);
  background:var(--fond);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block }
a{ color:var(--violet); text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
h1,h2,h3,h4{ font-family:var(--titre); color:var(--encre); font-weight:600; line-height:1.14; letter-spacing:-.01em; margin:0 0 .6em }
h1{ font-size:clamp(2.5rem,1.9rem + 3vw,4.15rem) }
h2{ font-size:clamp(2rem,1.55rem + 2.1vw,3.15rem) }
h3{ font-size:clamp(1.35rem,1.2rem + .7vw,1.75rem) }
h4{ font-size:1.12rem; font-family:var(--corps); font-weight:600; letter-spacing:.01em }
/* Cormorant utilise des chiffres elzéviriens par défaut : on force les
   chiffres bas-de-casse alignés, sinon « 100 € » paraît deux fois plus petit. */
h1,h2,h3,.prix,.chiffre b,.etape::before,.temoignage blockquote{
  font-variant-numeric:lining-nums proportional-nums;
  font-feature-settings:"lnum" 1;
}
p{ margin:0 0 1.15em }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px }
::selection{ background:var(--violet); color:#fff }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.saut{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--violet); color:#fff; padding:.7rem 1.2rem; border-radius:0 0 12px 0;
}
.saut:focus{ left:0 }

/* ------------------------------------------------------------- Structure */
.enveloppe{ width:min(100% - var(--gouttiere)*2, var(--largeur)); margin-inline:auto }
.enveloppe--etroit{ width:min(100% - var(--gouttiere)*2, 780px); margin-inline:auto }
.section{ padding:clamp(4rem,3rem + 6vw,7.5rem) 0; position:relative }
.section--serre{ padding:clamp(3rem,2.4rem + 3vw,5rem) 0 }
.section--douce{ background:var(--fond-doux) }
.section--tendre{ background:var(--degrade-doux) }
.section--nuit{ background:var(--violet-fonce); color:#E4DCF0 }
.section--nuit h2,.section--nuit h3{ color:#fff }

.entete-section{ max-width:720px; margin:0 auto clamp(2.5rem,2rem + 2vw,4rem); text-align:center }
/* Le :not(.surtitre) est indispensable : le sur-titre est lui aussi un <p>,
   et sans lui cette règle écrasait sa taille et sa couleur. */
.entete-section p:not(.surtitre){ color:var(--texte-doux); font-size:1.08rem; margin-bottom:0 }
.entete-section--gauche{ margin-inline:0; text-align:left }

/* Sur-titre — même police, même taille, même couleur partout.
   Deux filets lorsqu'il est centré, un seul lorsqu'il est aligné à gauche. */
.surtitre{
  font-family:var(--corps); font-size:.85rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--cyan);
  margin:0 0 1rem;
  display:flex; align-items:center; justify-content:center; gap:.7rem;
}
.surtitre::before,
.surtitre::after{
  content:""; height:1px; width:28px; flex:0 0 auto;
  background:currentColor; opacity:.45;
}
.surtitre--gauche,
.entete-section--gauche .surtitre{ justify-content:flex-start }
.surtitre--gauche::after,
.entete-section--gauche .surtitre::after{ display:none }

.chapo{ font-size:clamp(1.08rem,1.02rem + .3vw,1.25rem); color:var(--texte-doux); line-height:1.7 }

/* Coupure de titre maîtrisée : chaque segment prend sa propre ligne dès que
   la largeur le permet, et se remet à couler naturellement sur petit écran.
   Un <br> n'est pas fiable ici — on ne peut pas le neutraliser proprement. */
.ligne-titre{ display:inline }
@media (min-width:620px){ .ligne-titre{ display:block } }

/* ---------------------------------------------------------------- Boutons */
.btn{
  --bg:var(--violet); --fg:#fff; --bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.92em 1.85em; border-radius:999px; border:1.5px solid var(--bd);
  background:var(--bg); color:var(--fg);
  font-family:var(--corps); font-size:.94rem; font-weight:600; letter-spacing:.012em;
  cursor:pointer; text-align:center; position:relative;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  box-shadow:0 6px 18px rgba(74,39,120,.18);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(74,39,120,.26) }
.btn:active{ transform:translateY(0) }
.btn--degrade{ background:var(--degrade); background-size:180% 180%; animation:derive 9s ease infinite }
@keyframes derive{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.btn--clair{ --bg:#fff; --fg:var(--violet); --bd:var(--ligne); box-shadow:var(--ombre) }
.btn--clair:hover{ --bd:var(--violet-clair) }
.btn--fantome{ --bg:transparent; --fg:var(--violet); --bd:currentColor; box-shadow:none }
.btn--fantome:hover{ --bg:var(--violet); --fg:#fff }
.section--nuit .btn--fantome{ --fg:#fff }
.section--nuit .btn--fantome:hover{ --bg:#fff; --fg:var(--violet-fonce) }
.btn--sm{ padding:.62em 1.25em; font-size:.85rem }
.btn{ white-space:nowrap }
.btn svg{ width:17px; height:17px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:1.9 }
.btn--sm svg{ width:15px; height:15px }
.btn--bloc{ width:100% }
.lien-fleche{
  display:inline-flex; align-items:center; gap:.45rem; font-weight:600;
  font-size:.94rem; color:var(--violet);
}
.lien-fleche svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; transition:transform var(--transition) }
.lien-fleche:hover svg{ transform:translateX(4px) }

/* -------------------------------------------------------------- Navigation */
.entete{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.entete.est-collee{ border-bottom-color:var(--ligne); box-shadow:0 4px 24px rgba(74,39,120,.06) }
.entete__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  min-height:78px; padding-block:.7rem;
}
.marque{ display:flex; align-items:center; flex:0 0 auto }
.marque img{ height:clamp(38px,3.4vw,50px); width:auto }
.nav__liens{ display:flex; align-items:center; gap:.35rem; list-style:none; margin:0; padding:0 }
.nav__liens a{
  display:block; padding:.55rem .95rem; border-radius:999px; white-space:nowrap;
  font-size:.93rem; font-weight:500; color:var(--texte);
  transition:color var(--transition), background var(--transition);
}
.nav__liens a:hover{ color:var(--violet); background:var(--violet-pale) }
.nav__liens a.est-active{ color:var(--violet); font-weight:600 }
.nav__liens a.est-active::after{
  content:""; display:block; height:2px; width:22px; margin:.28rem auto 0;
  background:var(--cyan); border-radius:2px;
}
/* Paire d'appel à l'action : « Appeler » en contour, « Prendre rendez-vous » en plein.
   Présente sur toutes les pages, elle se réduit progressivement :
     ≥ 1141 px  les deux boutons avec leurs libellés
     961-1140   « Appeler » passe en icône seule (le nom reste lu par les lecteurs d'écran)
     ≤ 960 px   seule l'icône d'appel reste dans la barre ; la paire complète
                réapparaît en pleine largeur dans le menu déroulant */
.entete__actions{ display:flex; align-items:center; gap:.55rem }
.entete__actions .btn--appel{ box-shadow:none }
.entete__actions .btn--appel:hover{ box-shadow:var(--ombre) }

@media (min-width:1081px) and (max-width:1200px){
  .entete__actions .btn--appel .btn__libelle{ display:none }
  .entete__actions .btn--appel{ padding-inline:.85em }
}
/* Flex plutôt que grid : en grille, les rangées s'étirent sur la hauteur du
   bouton et les trois barres ne se rejoignent pas pour former la croix. */
.burger{
  display:none; width:44px; height:44px; border:1px solid var(--ligne); border-radius:12px;
  background:#fff; cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center;
}
.burger span{
  display:block; flex:0 0 auto; width:19px; height:2px;
  background:var(--violet); border-radius:2px; transition:var(--transition);
}
.burger span + span{ margin-top:4.5px }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) }

@media (max-width:1080px){
  .burger{ display:flex }
  /* Un appel reste à un pouce de distance, même menu fermé */
  .entete__actions .btn--rdv{ display:none }
  .entete__actions .btn--appel .btn__libelle{ display:none }
  .entete__actions .btn--appel{
    width:44px; height:44px; padding:0; border-radius:12px;
    border-color:var(--ligne); box-shadow:none;
  }
  .entete__actions .btn--appel svg{ width:18px; height:18px }
  /* Le panneau s'ancre sous l'en-tête collante, pas sur la fenêtre :
     sinon il se superpose au logo tant que le bandeau est encore visible. */
  .nav{
    position:absolute; top:100%; left:0; right:0; background:#fff;
    border-bottom:1px solid var(--ligne); box-shadow:var(--ombre-lg);
    padding:1rem var(--gouttiere) 1.6rem;
    max-height:calc(100vh - 78px); overflow-y:auto;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:var(--transition);
  }
  .nav.est-ouvert{ transform:none; opacity:1; pointer-events:auto }
  .nav__liens{ flex-direction:column; align-items:stretch; gap:.15rem }
  .nav__liens a{ padding:.85rem 1rem; font-size:1.02rem; border-radius:14px }
  .nav__liens a.est-active::after{ margin-inline:0 }
  .nav__cta{ margin-top:1rem; display:grid; gap:.6rem }
  .nav__cta .btn{ width:100%; padding-block:.85em }
}
@media (min-width:1081px){ .nav__cta{ display:none } }

/* ------------------------------------------------------------------- Bandeau */
.bandeau{
  background:var(--degrade); background-size:200% 200%; animation:derive 12s ease infinite;
  color:#fff; text-align:center; font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:500; padding:.62rem 1rem;
}
.bandeau a{ color:#fff; text-decoration:underline; text-underline-offset:3px }

/* ---------------------------------------------------------------------- Héro */
.hero{ position:relative; overflow:hidden; padding:clamp(3.5rem,2.5rem + 7vw,7rem) 0 clamp(4rem,3rem + 6vw,7rem) }
.hero__fond{ position:absolute; inset:0; z-index:0; background:var(--degrade); background-size:200% 200%; animation:derive 18s ease infinite }
.hero__voile{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(60% 50% at 18% 20%, rgba(255,255,255,.30), transparent 65%),
    radial-gradient(55% 45% at 85% 75%, rgba(40,161,218,.35), transparent 65%);
}
.hero__grain{
  position:absolute; inset:0; z-index:1; opacity:.20; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.hero__inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:center }
.hero__texte{ color:#fff; max-width:36ch }
.hero h1{ color:#fff; text-shadow:0 2px 30px rgba(30,10,60,.28) }
/* Héros des pages intérieures : titre un cran plus bas pour éviter les veuves */
.hero--page h1{ font-size:clamp(2.3rem,1.8rem + 2.2vw,3.5rem) }
.hero h1 em{ font-style:italic; color:#CFE9FA }
.hero__sous{ font-size:clamp(1.1rem,1.03rem + .35vw,1.32rem); color:rgba(255,255,255,.93); max-width:34ch }
.hero .surtitre{ color:#BFE3F8 }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem }
.hero__actions .btn{ --bg:#fff; --fg:var(--violet); box-shadow:0 10px 30px rgba(20,5,45,.28) }
.hero__actions .btn--fantome{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.7); box-shadow:none }
.hero__actions .btn--fantome:hover{ --bg:#fff; --fg:var(--violet) }

.hero__media{ position:relative }
.hero__carte{
  border-radius:var(--rayon-xl); overflow:hidden;
  box-shadow:0 30px 80px rgba(20,5,45,.35);
  border:1px solid rgba(255,255,255,.35);
  transform:rotate(1.2deg);
}
.hero__carte img{ width:100%; aspect-ratio:4/5; object-fit:cover }
.hero__pastille{
  position:absolute; left:-1.6rem; bottom:1.8rem;
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px);
  border-radius:22px; padding:1rem 1.3rem; box-shadow:var(--ombre-lg);
  display:flex; align-items:center; gap:.85rem; max-width:250px;
}
.hero__pastille img{ width:44px; height:44px; flex:0 0 auto }
.hero__pastille b{ display:block; font-family:var(--titre); font-size:1.15rem; color:var(--violet); line-height:1.2 }
.hero__pastille span{ font-size:.78rem; color:var(--texte-doux); line-height:1.4 }

@media (max-width:860px){
  .hero__inner{ grid-template-columns:1fr; text-align:center }
  .hero__texte{ max-width:none; margin-inline:auto }
  .hero__sous{ max-width:46ch; margin-inline:auto }
  .hero .surtitre{ justify-content:center }
  .hero .surtitre--gauche::after{ display:block }
  .hero__actions{ justify-content:center }
  .hero__media{ max-width:400px; margin:1rem auto 0 }
  .hero__pastille{ left:.5rem; bottom:-1rem }
}

/* Vague de séparation : la courbe blanche mord sur le bas du héro */
.vague{
  display:block; width:100%;
  height:clamp(40px,5.5vw,80px);
  margin-top:clamp(-80px,-5.5vw,-40px);
  position:relative; z-index:3; pointer-events:none;
}
.vague path{ fill:var(--fond) }
.section--douce + .vague path,
.vague--douce path{ fill:var(--fond-doux) }

/* ------------------------------------------------------------------ Chiffres */
.chiffres{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px;
  background:var(--ligne); border:1px solid var(--ligne);
  border-radius:var(--rayon-lg); overflow:hidden;
}
.chiffre{ background:#fff; padding:2rem 1.4rem; text-align:center }
.chiffre b{ display:block; font-family:var(--titre); font-size:clamp(2.2rem,1.8rem + 1.6vw,3rem); color:var(--violet); line-height:1 }
.chiffre span{ display:block; margin-top:.5rem; font-size:.88rem; color:var(--texte-doux); letter-spacing:.02em }

/* -------------------------------------------------------------------- Duo */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:center }
.duo--inverse .duo__media{ order:2 }
@media (max-width:860px){
  .duo{ grid-template-columns:1fr }
  .duo--inverse .duo__media{ order:0 }
}
.duo__media{ position:relative }
.duo__media img{ border-radius:var(--rayon-xl); box-shadow:var(--ombre-lg); width:100% }

/* ------------------------------------------------------------------- Cartes */
.grille{ display:grid; gap:1.5rem }
.grille--2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) }
.grille--3{ grid-template-columns:repeat(auto-fit,minmax(290px,1fr)) }
.grille--4{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) }
.grille--temoin{ grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (max-width:760px){ .grille--temoin{ grid-template-columns:1fr } }

.carte{
  background:#fff; border:1px solid var(--ligne); border-radius:var(--rayon-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte:hover{ transform:translateY(-6px); box-shadow:var(--ombre-lg); border-color:transparent }
.carte__media{ position:relative; overflow:hidden; aspect-ratio:16/10; background:var(--fond-tendre) }
.carte__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.22,.61,.36,1) }
.carte:hover .carte__media img{ transform:scale(1.06) }
.carte__corps{ padding:1.6rem 1.7rem 1.8rem; display:flex; flex-direction:column; flex:1 }
.carte__corps h3{ margin-bottom:.5rem }
.carte__corps p{ color:var(--texte-doux); font-size:.97rem }
.carte__pied{ margin-top:auto; padding-top:1.1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem }
.prix{ font-family:var(--titre); font-size:1.55rem; color:var(--violet); font-weight:600; line-height:1 }
.prix small{ font-family:var(--corps); font-size:.78rem; color:var(--texte-doux); font-weight:400; display:block; margin-top:.25rem }
.etiquette{
  display:inline-flex; align-items:center; gap:.4rem; align-self:flex-start;
  background:var(--cyan-pale); color:#1C6FA0; border-radius:999px;
  padding:.32rem .8rem; font-size:.74rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:.9rem;
}
.etiquette--violet{ background:var(--violet-pale); color:var(--violet) }

/* Carte icône */
.carte-icone{
  background:#fff; border:1px solid var(--ligne); border-radius:var(--rayon-lg);
  padding:2rem 1.8rem; transition:transform var(--transition), box-shadow var(--transition);
}
.carte-icone:hover{ transform:translateY(-5px); box-shadow:var(--ombre-lg) }
.carte-icone__icone{
  width:56px; height:56px; border-radius:18px; display:grid; place-items:center;
  background:var(--degrade); color:#fff; margin-bottom:1.2rem;
}
.carte-icone__icone svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.6 }
.carte-icone h3{ font-size:1.22rem }
.carte-icone p{ color:var(--texte-doux); font-size:.96rem; margin-bottom:0 }

/* ------------------------------------------------------------------- Étapes */
.etapes{ counter-reset:etape; display:grid; gap:1.2rem }
.etape{
  display:grid; grid-template-columns:auto 1fr; gap:1.3rem; align-items:start;
  background:#fff; border:1px solid var(--ligne); border-radius:var(--rayon);
  padding:1.5rem 1.7rem;
}
.etape::before{
  counter-increment:etape; content:counter(etape);
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  background:var(--violet-pale); color:var(--violet);
  font-family:var(--titre); font-size:1.35rem; font-weight:600;
}
.etape h4{ margin-bottom:.3rem; color:var(--encre) }
.etape p{ margin:0; color:var(--texte-doux); font-size:.97rem }
.etape__duree{ font-size:.78rem; font-weight:600; color:var(--cyan); letter-spacing:.06em; text-transform:uppercase }

/* -------------------------------------------------------------- Témoignages */
.temoignage{
  background:#fff; border:1px solid var(--ligne); border-radius:var(--rayon-lg);
  padding:2rem 1.9rem 1.7rem; display:flex; flex-direction:column; height:100%;
  position:relative;
}
.temoignage::before{
  content:"\201C"; position:absolute; top:.4rem; right:1.4rem;
  font-family:var(--titre); font-size:5rem; line-height:1; color:var(--violet-pale);
}
.etoiles{ color:var(--or); letter-spacing:.14em; font-size:.95rem; margin-bottom:.9rem }
.temoignage blockquote{ margin:0 0 1.2rem; font-size:1.02rem; color:var(--texte); line-height:1.68; position:relative; z-index:1 }
.temoignage figcaption{ margin-top:auto; font-weight:600; color:var(--violet); font-size:.95rem }
.temoignage figcaption span{ display:block; font-weight:400; font-size:.83rem; color:var(--texte-doux) }

/* ----------------------------------------------------------------- Journal */
.article-carte{
  background:#fff; border:1px solid var(--ligne); border-radius:var(--rayon-lg);
  overflow:hidden; display:flex; flex-direction:column; height:100%;
  transition:transform var(--transition), box-shadow var(--transition);
}
.article-carte:hover{ transform:translateY(-6px); box-shadow:var(--ombre-lg) }
.article-carte__media{ aspect-ratio:16/9; overflow:hidden; background:var(--degrade-doux) }
.article-carte__media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.22,.61,.36,1) }
.article-carte:hover .article-carte__media img{ transform:scale(1.05) }
.article-carte__corps{ padding:1.5rem 1.6rem 1.7rem; display:flex; flex-direction:column; flex:1 }
.article-carte h3{ font-size:1.3rem; margin-bottom:.5rem }
.article-carte h3 a{ color:inherit }
.article-carte h3 a:hover{ color:var(--violet) }
.article-carte p{ color:var(--texte-doux); font-size:.95rem; flex:1 }
.meta{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; font-size:.8rem; color:var(--texte-doux); margin-bottom:.7rem }
.meta time{ font-weight:500 }
.mots-cles{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem }
.mot-cle{
  font-size:.74rem; font-weight:600; letter-spacing:.05em;
  background:var(--violet-pale); color:var(--violet);
  border-radius:999px; padding:.28rem .75rem; border:0; cursor:pointer;
  transition:background var(--transition), color var(--transition);
}
.mot-cle:hover,.mot-cle.est-active{ background:var(--violet); color:#fff }

.barre-filtres{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; justify-content:space-between; margin-bottom:2.5rem }
.champ-recherche{ position:relative; flex:1 1 260px; max-width:340px }
.champ-recherche input{
  width:100%; padding:.8rem 1rem .8rem 2.75rem; border-radius:999px;
  border:1px solid var(--ligne); background:#fff; font-size:.95rem;
}
.champ-recherche input:focus{ outline:none; border-color:var(--violet-clair); box-shadow:0 0 0 3px var(--violet-pale) }
.champ-recherche svg{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); width:18px; height:18px; stroke:var(--texte-doux); fill:none; stroke-width:1.8 }

.vide{
  text-align:center; padding:4rem 1rem; color:var(--texte-doux);
  border:1px dashed var(--ligne); border-radius:var(--rayon-lg); background:var(--fond-doux);
}

/* --------------------------------------------------------------- Article */
.article-entete{ padding:clamp(3rem,2rem + 4vw,5rem) 0 2rem; background:var(--degrade-doux) }
.article-entete h1{ font-size:clamp(2.1rem,1.6rem + 2.4vw,3.4rem); margin-bottom:.7rem }
.article-couverture{ margin:0 0 clamp(2rem,1.5rem + 2vw,3.2rem) }
.article-couverture img{ width:100%; border-radius:var(--rayon-xl); box-shadow:var(--ombre-lg); aspect-ratio:16/9; object-fit:cover }

.prose{ font-size:1.075rem; line-height:1.8 }
.prose > * + *{ margin-top:1.25em }
.prose h2{ font-size:clamp(1.6rem,1.4rem + 1vw,2.1rem); margin-top:2.2em; margin-bottom:.5em }
.prose h3{ font-size:1.32rem; margin-top:1.8em; margin-bottom:.4em }
.prose h4{ margin-top:1.6em; margin-bottom:.3em }
.prose p{ margin-bottom:0 }
.prose a{ color:var(--violet); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:var(--violet-clair) }
.prose a:hover{ text-decoration-color:var(--violet) }
.prose ul,.prose ol{ padding-left:1.35em }
.prose li + li{ margin-top:.45em }
.prose li::marker{ color:var(--violet-clair) }
.prose img{ border-radius:var(--rayon); box-shadow:var(--ombre); margin-inline:auto }
.prose blockquote{
  margin:2em 0; padding:1.3rem 1.6rem; border-left:3px solid var(--cyan);
  background:var(--fond-doux); border-radius:0 var(--rayon) var(--rayon) 0;
  font-family:var(--titre); font-size:1.25rem; font-style:italic; color:var(--violet);
}
.prose blockquote p{ margin:0 }
.prose pre{
  background:var(--violet-fonce); color:#E8E0F5; padding:1.2rem 1.4rem;
  border-radius:var(--rayon); overflow-x:auto; font-size:.9rem; line-height:1.6;
}
.prose code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; background:var(--violet-pale); padding:.15em .45em; border-radius:6px; color:var(--violet) }
.prose pre code{ background:none; padding:0; color:inherit }
.prose hr{ border:0; height:1px; background:var(--ligne); margin:2.5em 0 }
.prose table{ width:100%; border-collapse:collapse; font-size:.95rem; display:block; overflow-x:auto }
.prose th,.prose td{ padding:.7rem .9rem; border-bottom:1px solid var(--ligne); text-align:left }
.prose th{ font-weight:600; color:var(--encre) }

.nav-article{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:space-between; margin-top:3.5rem; padding-top:2rem; border-top:1px solid var(--ligne) }

/* ------------------------------------------------------------------ Listes */
.liste-check{ list-style:none; padding:0; margin:0 0 1.4rem; display:grid; gap:.7rem }
.liste-check li{ display:grid; grid-template-columns:auto 1fr; gap:.75rem; align-items:start }
.liste-check li::before{
  content:""; width:20px; height:20px; margin-top:.28em; border-radius:50%; flex:0 0 auto;
  background:var(--cyan-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C6FA0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.liste-puces{ list-style:none; padding:0; margin:0 0 1.4rem; display:grid; gap:.6rem }
.liste-puces li{ position:relative; padding-left:1.5rem }
.liste-puces li::before{
  content:""; position:absolute; left:0; top:.62em; width:7px; height:7px;
  border-radius:50%; background:var(--cyan);
}

/* ------------------------------------------------------------------ Contact */
.bloc-contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,1.5rem + 3vw,4rem) }
@media (max-width:860px){ .bloc-contact{ grid-template-columns:1fr } }
.coord{ display:grid; gap:1.1rem; margin-bottom:2rem }
.coord a, .coord .coord__item{
  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:center;
  background:#fff; border:1px solid var(--ligne); border-radius:var(--rayon);
  padding:1.05rem 1.3rem; color:var(--texte);
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.coord a:hover{ transform:translateX(4px); border-color:var(--violet-clair); box-shadow:var(--ombre) }
.coord i{
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  background:var(--violet-pale); color:var(--violet);
}
.coord svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7 }
.coord b{ display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.13em; color:var(--texte-doux); font-weight:600 }
.coord strong{ display:block; font-size:1.02rem; color:var(--encre); font-weight:600; font-style:normal }

.formulaire{
  background:#fff; border:1px solid var(--ligne); border-radius:var(--rayon-lg);
  padding:clamp(1.6rem,1.2rem + 1.5vw,2.4rem); box-shadow:var(--ombre);
}
/* Formulaire mis en pause : voir le commentaire en tête de <form> dans
   contact.html. L'avis ne s'affiche que si le formulaire porte .est-desactive. */
.formulaire__champs{ border:0; padding:0; margin:0; min-width:0 }
.avis-formulaire{ display:none }
.formulaire.est-desactive .avis-formulaire{
  display:block; margin-bottom:1.4rem;
  background:#FCF6E6; border:1px solid #EEDCA6; border-left:3px solid var(--or);
  border-radius:0 14px 14px 0; padding:.95rem 1.2rem;
  font-size:.93rem; color:#6E4E00;
}
.formulaire.est-desactive .avis-formulaire a{ color:#6E4E00; text-decoration:underline; text-underline-offset:3px }
.formulaire.est-desactive .formulaire__champs{ opacity:.45; filter:grayscale(.55) }
.formulaire.est-desactive .formulaire__champs .btn{ box-shadow:none; cursor:not-allowed }

.champ{ margin-bottom:1.15rem }
.champ label{ display:block; font-size:.85rem; font-weight:600; color:var(--encre); margin-bottom:.4rem }
.champ label span{ color:var(--cyan) }
.champ input,.champ textarea,.champ select{
  width:100%; padding:.82rem 1rem; border-radius:14px; border:1px solid var(--ligne);
  background:var(--fond-doux); font-size:.97rem; transition:var(--transition);
}
.champ input:focus,.champ textarea:focus,.champ select:focus{
  outline:none; background:#fff; border-color:var(--violet-clair);
  box-shadow:0 0 0 3px var(--violet-pale);
}
.champ textarea{ resize:vertical; min-height:150px; line-height:1.65 }
.champ__aide{ font-size:.8rem; color:var(--texte-doux); margin:.4rem 0 0 }
.rangee{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
@media (max-width:560px){ .rangee{ grid-template-columns:1fr } }
.consentement{ display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start; font-size:.85rem; color:var(--texte-doux); margin-bottom:1.3rem }
.consentement input{ width:18px; height:18px; margin-top:.2em; accent-color:var(--violet) }
.pot-de-miel{ position:absolute; left:-9999px; opacity:0; height:0; width:0 }

.message{ border-radius:14px; padding:.95rem 1.2rem; margin-bottom:1.3rem; font-size:.93rem; border:1px solid }
.message--ok{ background:#EAF7EF; border-color:#B9E3C9; color:#1D6B3C }
.message--err{ background:#FDECEC; border-color:#F5C3C3; color:#9C2626 }

.horaires{ width:100%; border-collapse:collapse; font-size:.95rem }
.horaires td{ padding:.62rem 0; border-bottom:1px solid var(--ligne) }
.horaires tr:last-child td{ border-bottom:0 }
.horaires td:last-child{ text-align:right; font-weight:600; color:var(--encre) }

/* Carte de visite : le QR code est dense (93 modules), il lui faut au moins
   ~240 px pour rester lisible par un téléphone. On garde une marge à 260 px.
   Après remplacement du fichier, incrémenter le ?v= de l'image : le .htaccess
   met les SVG en cache six mois. */
.carte-visite{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:#fff; border:1px solid var(--ligne); border-radius:var(--rayon-lg);
  padding:1.6rem 1.6rem 1.5rem;
}
.carte-visite__qr{ width:260px; max-width:100%; height:auto; margin-bottom:1rem; border-radius:12px }
.carte-visite h4{ margin-bottom:.3rem }
.carte-visite p{ font-size:.92rem; margin:0; max-width:34ch }

.carte-plan{ border-radius:var(--rayon-lg); overflow:hidden; border:1px solid var(--ligne); box-shadow:var(--ombre) }
.carte-plan iframe{ display:block; width:100%; height:340px; border:0; filter:grayscale(.18) }

/* --------------------------------------------------------------------- FAQ */
.faq{ display:grid; gap:.8rem; max-width:820px; margin-inline:auto }
.faq details{
  background:#fff; border:1px solid var(--ligne); border-radius:var(--rayon);
  padding:1.15rem 1.5rem; transition:box-shadow var(--transition), border-color var(--transition);
}
.faq details[open]{ box-shadow:var(--ombre); border-color:var(--violet-clair) }
.faq summary{
  cursor:pointer; font-weight:600; color:var(--encre); font-size:1.03rem;
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:""; width:11px; height:11px; flex:0 0 auto;
  border-right:2px solid var(--violet); border-bottom:2px solid var(--violet);
  transform:rotate(45deg); transition:transform var(--transition); margin-top:-4px;
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:2px }
.faq details > *:not(summary){ margin-top:.9rem; color:var(--texte-doux); font-size:.98rem }

/* ------------------------------------------------------------------- Appel */
.appel{
  background:var(--degrade); background-size:200% 200%; animation:derive 14s ease infinite;
  border-radius:var(--rayon-xl); padding:clamp(2.5rem,2rem + 3vw,4.5rem) clamp(1.5rem,1rem + 3vw,4rem);
  text-align:center; color:#fff; position:relative; overflow:hidden;
}
.appel::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(50% 60% at 20% 15%, rgba(255,255,255,.22), transparent 60%);
}
.appel > *{ position:relative }
.appel h2{ color:#fff; max-width:22ch; margin-inline:auto }
/* Même précaution qu'en tête de section : ne pas écraser le sur-titre. */
.appel p:not(.surtitre){ color:rgba(255,255,255,.92); max-width:52ch; margin-inline:auto; font-size:1.08rem }
.appel .btn{ --bg:#fff; --fg:var(--violet); margin-top:1.2rem }
.appel__logo{ width:66px; margin:0 auto 1.5rem; opacity:.95 }

/* ------------------------------------------------------------------- Pied */
.pied{ background:var(--violet-fonce); color:#C9BEE0; padding:clamp(3rem,2.5rem + 2vw,4.5rem) 0 2rem; font-size:.95rem }
.pied__haut{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.12) }
@media (max-width:860px){ .pied__haut{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .pied__haut{ grid-template-columns:1fr } }
.pied img.pied__logo{ height:46px; width:auto; margin-bottom:1.1rem }
.pied h4{ color:#fff; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1.1rem }
.pied ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem }
.pied a{ color:#C9BEE0; transition:color var(--transition) }
.pied a:hover{ color:#fff }
.pied__bas{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  padding-top:1.6rem; font-size:.85rem; color:#9C8FBA;
}
.pied__liens{ display:flex; flex-wrap:wrap; gap:.5rem 1.6rem }
/* L'ancre ne doit pas finir sous l'en-tête collante */
#realisation{ scroll-margin-top:110px }
.reseaux{ display:flex; gap:.6rem; margin-top:1.2rem }
.reseaux a{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); color:#fff;
  transition:background var(--transition), transform var(--transition);
}
.reseaux a:hover{ background:var(--cyan); transform:translateY(-3px) }
.reseaux svg{ width:18px; height:18px; fill:currentColor }

/* ----------------------------------------------------------- Apparitions */
.apparait{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1) }
.apparait.est-visible{ opacity:1; transform:none }
html:not(.js) .apparait{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){ .apparait{ opacity:1; transform:none } }

/* --------------------------------------------- Barre d'action mobile */
/* Fixée en bas de l'écran sous 1081 px — le même seuil que le menu burger.
   Elle glisse à l'écran dès que l'on quitte le haut de page et y reste
   ensuite, pour garder l'appel et la prise de rendez-vous à portée de pouce. */
.barre-mobile{
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  display:flex; gap:.55rem;
  padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--ligne);
  box-shadow:0 -6px 24px rgba(74,39,120,.10);
  transform:translateY(110%);
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.barre-mobile.est-visible{ transform:none }
/* Sans JavaScript, la barre reste simplement toujours affichée. */
html:not(.js) .barre-mobile{ transform:none }
@media (prefers-reduced-motion:reduce){ .barre-mobile{ transition:none } }

.barre-mobile .btn{
  flex:1 1 0; min-height:50px; padding-inline:.55rem;
  font-size:.9rem; box-shadow:none;
}
.barre-mobile .btn:hover{ transform:none }
.barre-mobile .btn--appel{ border-color:var(--ligne) }
@media (max-width:360px){
  .barre-mobile{ gap:.4rem }
  .barre-mobile .btn{ font-size:.8rem; padding-inline:.4rem }
}
/* Au-delà du seuil du menu, l'en-tête suffit : la barre disparaît. */
@media (min-width:1081px){ .barre-mobile{ display:none } }

/* Le pied de page ne doit pas finir caché derrière la barre. */
@media (max-width:1080px){
  .pied{ padding-bottom:calc(2rem + 74px) }
}

/* ------------------------------------------------------- Bouton remonter */
.remonter{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:90;
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:var(--violet); color:#fff; display:grid; place-items:center;
  box-shadow:0 8px 24px rgba(74,39,120,.3);
  opacity:0; transform:translateY(12px) scale(.9); pointer-events:none;
  transition:var(--transition);
}
.remonter.est-visible{ opacity:1; transform:none; pointer-events:auto }
.remonter svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2.2 }
/* Il se pose au-dessus de la barre d'action plutôt que derrière. */
@media (max-width:1080px){
  .remonter{ bottom:calc(74px + env(safe-area-inset-bottom, 0px) + .8rem) }
}

/* ------------------------------------------------------------ Page 404 */
/* « Cette page est partie en cendres » : le phoenix renaît de braises
   qui s'élèvent du bas de l'écran. */
.page-cendres{
  min-height:100vh; min-height:100svh;
  display:grid; place-items:center;
  padding-block:clamp(2rem,1.5rem + 3vw,4rem);
}
.page-cendres__contenu{ position:relative; z-index:3; color:#fff }
.page-cendres__marque{ display:inline-block; margin-bottom:clamp(1.5rem,1rem + 2vw,2.5rem) }
.page-cendres__marque img{ height:clamp(38px,3vw + 26px,52px); width:auto; opacity:.95 }

.page-cendres .surtitre{ color:#BFE3F8 }
.page-cendres h1{
  color:#fff; font-size:clamp(2.1rem,1.6rem + 2.6vw,3.6rem);
  max-width:18ch; margin-inline:auto; text-shadow:0 2px 30px rgba(30,10,60,.3);
}
.page-cendres h1 em{ color:#FFD9A0 }
.page-cendres__texte{
  font-size:clamp(1.05rem,1rem + .3vw,1.2rem); line-height:1.7;
  color:rgba(255,255,255,.94); max-width:46ch; margin:0 auto .8rem;
}
.page-cendres__texte--doux{ color:rgba(255,255,255,.78); font-size:1rem }
.page-cendres .hero__actions{ justify-content:center; margin-top:2rem }
.page-cendres__liens{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.6rem;
  margin-top:2.6rem; font-size:.93rem;
}
.page-cendres__liens a{ color:#CFE9FA; text-decoration:underline; text-decoration-color:rgba(207,233,250,.35); text-underline-offset:4px }
.page-cendres__liens a:hover{ color:#fff; text-decoration-color:#fff }

/* L'emblème : flotte doucement, auréolé d'une lueur de braise */
.phoenix-renaissant{
  position:relative; width:clamp(118px,9vw + 80px,170px);
  margin:0 auto clamp(1.2rem,1rem + 1vw,1.8rem);
  animation:renaissance-apparition 1.6s cubic-bezier(.22,.61,.36,1) both,
            renaissance-flotte 6s ease-in-out 1.6s infinite;
}
.phoenix-renaissant img{
  position:relative; width:100%; height:auto;
  filter:drop-shadow(0 0 18px rgba(255,190,110,.55)) drop-shadow(0 6px 22px rgba(30,10,60,.35));
}
.phoenix-renaissant__halo{
  position:absolute; inset:-38% -30% -18%;
  background:radial-gradient(closest-side, rgba(255,196,120,.55), rgba(255,140,80,.18) 55%, transparent 75%);
  filter:blur(6px);
  animation:renaissance-lueur 3.8s ease-in-out infinite;
}
@keyframes renaissance-apparition{
  from{ opacity:0; transform:translateY(34px) scale(.86); filter:blur(4px) }
  to  { opacity:1; transform:none; filter:none }
}
@keyframes renaissance-flotte{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-10px) }
}
@keyframes renaissance-lueur{
  0%,100%{ opacity:.65; transform:scale(.96) }
  50%    { opacity:1;   transform:scale(1.05) }
}

/* Les braises */
.braises{ position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none }
.braises span{
  position:absolute; bottom:-12px; width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle, #FFE6B0 0%, #FFB35C 45%, rgba(255,120,60,0) 72%);
  opacity:0;
  animation:braise-monte 9s linear infinite;
}
.braises span:nth-child(1) { left:6%;  animation-delay:0s;   animation-duration:10s }
.braises span:nth-child(2) { left:14%; animation-delay:2.2s; width:4px; height:4px }
.braises span:nth-child(3) { left:23%; animation-delay:4.8s; animation-duration:11s }
.braises span:nth-child(4) { left:31%; animation-delay:1.1s; width:8px; height:8px }
.braises span:nth-child(5) { left:40%; animation-delay:6.3s; width:5px; height:5px }
.braises span:nth-child(6) { left:48%; animation-delay:3.4s; animation-duration:12s }
.braises span:nth-child(7) { left:56%; animation-delay:.6s;  width:4px; height:4px }
.braises span:nth-child(8) { left:64%; animation-delay:5.1s; width:7px; height:7px }
.braises span:nth-child(9) { left:72%; animation-delay:2.9s; animation-duration:10.5s }
.braises span:nth-child(10){ left:80%; animation-delay:7.2s; width:5px; height:5px }
.braises span:nth-child(11){ left:88%; animation-delay:1.8s; animation-duration:11.5s }
.braises span:nth-child(12){ left:95%; animation-delay:4.1s; width:4px; height:4px }
@keyframes braise-monte{
  0%  { opacity:0;   transform:translate(0,0) scale(1) }
  10% { opacity:.95 }
  60% { opacity:.7;  transform:translate(18px,-60vh) scale(.8) }
  100%{ opacity:0;   transform:translate(-12px,-105vh) scale(.4) }
}

/* Mouvement réduit : l'emblème reste en place, les braises disparaissent */
@media (prefers-reduced-motion:reduce){
  .phoenix-renaissant,.phoenix-renaissant__halo{ animation:none }
  .braises{ display:none }
}

/* ------------------------------------------------------------------ Divers */
.centre{ text-align:center }
.mt-2{ margin-top:2rem } .mt-3{ margin-top:3rem }
.doux{ color:var(--texte-doux) }
.encart{
  background:var(--cyan-pale); border-left:3px solid var(--cyan);
  border-radius:0 var(--rayon) var(--rayon) 0; padding:1.1rem 1.4rem;
  font-size:.96rem; color:#1C5F8C; margin:1.5rem 0;
}
.encart p:last-child{ margin-bottom:0 }
.encart--violet{ background:var(--violet-pale); border-left-color:var(--violet); color:var(--violet-fonce) }

@media print{
  .entete,.pied,.remonter,.bandeau,.barre-mobile,.hero__fond,.hero__voile,.hero__grain{ display:none!important }
  body{ color:#000 }
}