/* ============================================
   MONSITEAI — Preview / Éditeur
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --p:   #3D3CB8;
  --pd:  #2E2DA0;
  --pl:  #EEEEFF;
  --pa:  #C7C7F5;
  --bar: 58px;
  --ban: 0px;

  /* Mobilier d'edition — papier et encre, comme le tableau de bord. Distinct
     des couleurs du site, qui appartiennent au client. */
  --ch-fond:   #FFFFFF;
  --ch-carte:  #FFFFFF;
  --ch-encre:  #101114;
  --ch-doux:   #5A5F66;
  --ch-trait:  #E3E5E9;
  --ch-accent: #8B4513;
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Manrope', system-ui, sans-serif;
  color: #1E293B;
  background: #F5F5FA;
  -webkit-font-smoothing: antialiased;
}

/* Le decalage ne vaut que dans l'editeur, sous la barre d'outils. Applique au
   site publie, il poussait le hero vers le bas et laissait une bande blanche
   sous la navigation transparente. */
body:has(.editor-bar) {
  padding-top: calc(var(--bar) + var(--ban));
}

/* Le menu du site est en position absolue, top:0. Comme aucun de ses parents
   n'était positionné, il se calait sur la fenêtre et non sur la page : dans
   l'éditeur il passait donc DERRIÈRE la barre d'outils et le bandeau « Mode
   édition », et le client découvrait son site sans menu — invisible, mais bien
   présent, donc introuvable. Le décalage du corps ne le déplaçait pas, une
   marge intérieure ne décale pas un élément absolu calé sur la fenêtre.
   On positionne la racine du site, mais seulement dans l'éditeur : sur le site
   publié il n'y a pas de barre, top:0 tombe déjà juste, et rien ne bouge.
   Le menu ne se fige pas au défilement dans l'éditeur : la classe .scrolled
   n'est posée que par site.js, sur le site publié. Rien à décaler ici. */
body:has(.editor-bar) #site-root { position: relative; }

h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  letter-spacing: -0.02em;
}

a { text-decoration: none; color: inherit; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 28px; }

/* ─── EDITOR BAR ─────────────────────────────────────────────────────────── */
.editor-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--bar);
  background: var(--ch-fond);
  border-bottom: 1px solid var(--ch-trait);
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0 20px; gap: 16px; z-index: 1000;
}

.eb-left { display: flex; align-items: center; gap: 10px; }

.eb-back {
  display: flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 500; color: #64748B;
  padding: 5px 10px; border-radius: 7px;
  transition: background .15s, color .15s;
}
.eb-back { color: var(--ch-doux); }
.eb-back:hover { background: rgba(139,69,19,.08); color: var(--ch-encre); }

/* Le nom du site : on sait ce qu'on edite. Leur barre, elle, dit « Éditeur »
   — ce qu'on avait aussi. En sans, comme le tableau de bord : Fraunces reste
   la police des sites generes, pas celle de l'outil. */
.eb-nom {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ch-encre);
  max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eb-etat {
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--ch-trait); background: var(--ch-carte);
  font-size: .72rem; font-weight: 600; color: var(--ch-doux); white-space: nowrap;
}
.eb-etat.enligne { border-color: #B7D4B0; background: #F0F7EE; color: #3F6B36; }
.eb-etat.suspendu { border-color: #E9B7B7; background: #FBF0F0; color: #9B3B3B; }

/* L'indication d'usage remplace un bandeau permanent qui repetait a chaque
   seconde ce que le survol montre deja — et qui etait, mot pour mot, celui du
   concurrent. Une fois par session, en bas, puis elle s'efface. */
/* Au-dessus de la barre d'enregistrement, qui occupe le meme coin. */
.eb-astuce {
  position: fixed; left: 20px; bottom: 84px; z-index: 1200;
  padding: 9px 14px; border-radius: 8px;
  background: var(--ch-encre); color: var(--ch-fond);
  font-family: Inter, system-ui, sans-serif; font-size: .82rem;
  box-shadow: 0 6px 20px rgba(26,24,21,.22);
  opacity: 1; transition: opacity .4s;
}
.eb-astuce.partie { opacity: 0; }

.eb-steps {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 500;
}
.eb-step {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  color: #94A3B8;
}
.eb-step.done { color: var(--p); background: var(--pl); }
.eb-step.done svg { stroke: var(--p); }
.eb-step.pending { color: #94A3B8; }
.eb-step small { font-size: .68rem; color: #94A3B8; }
.eb-line { width: 24px; height: 1px; background: #E2E8F0; }

.eb-right { display: flex; align-items: center; gap: 6px; }

.eb-btn {
  padding: 7px 16px; border-radius: 8px;
  font-size: .82rem; font-weight: 600;
  border: 1px solid #E2E8F0; background: #fff;
  color: #64748B; cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background .15s, color .15s;
  text-decoration: none; display: inline-flex; align-items: center;
}
.eb-btn:hover { background: #F8F8FF; color: #1E293B; }
.eb-btn.active { background: var(--pl); border-color: var(--pa); color: var(--p); }
.eb-publish { background: var(--p); color: #fff; border-color: var(--p); box-shadow: 0 2px 8px rgba(61,60,184,.3); }
.eb-publish:hover { background: var(--pd); color: #fff; }

.eb-texte-court { display: none; }

/* Suspension : le bandeau passe du jaune « mode édition » au rouge, sinon
   l'avertissement se confond avec l'aide contextuelle qu'il remplace. */
.edit-banner[hidden] { display: none; }
.edit-banner.banniere-suspendu { background: #FBF0F0; border-bottom-color: #E9B7B7; }
.banniere-suspendu .edit-banner-text { color: #991B1B; }
.banniere-suspendu .edit-banner-text a { color: #991B1B; text-decoration: underline; }
.banniere-suspendu .edit-banner-text svg { display: none; }

/* ─── LA BARRE SUR TÉLÉPHONE ─────────────────────────────────────────────
   Elle n'avait aucune règle mobile : les trois blocs tenaient sur une seule
   rangée qui mesurait près de 990 px, si bien que « Paramètres », « Publier »
   et « Voir » commençaient au-delà du bord droit de l'écran. L'éditeur se
   réduisait à la saisie de texte — impossible de voir son site ni de le
   mettre en ligne depuis un téléphone.

   Deux rangées plutôt qu'une compression : à quatre boutons sur 390 px, tout
   rentrer sur une ligne donne des cibles sous les 44 px recommandées. */
@media (max-width: 720px) {
  :root { --bar: 88px; --ban: 44px; }

  .editor-bar {
    flex-wrap: wrap; align-content: center;
    padding: 0 12px; gap: 6px 10px;
  }
  .eb-left  { flex: 1 1 100%; }
  .eb-right { flex: 1 1 100%; gap: 6px; }

  /* Le fil d'étapes est décoratif : le bouton « Publier » porte l'action, et
     l'étape en cours est déjà annoncée par le bandeau jaune. */
  .eb-steps { display: none; }

  /* Chaque bouton prend sa part de la largeur : les quatre restent atteignables
     au pouce quelle que soit la longueur de leur libellé. */
  .eb-right .eb-btn {
    flex: 1 1 0; min-width: 0; justify-content: center;
    padding: 11px 4px; font-size: .78rem;
  }

  .edit-banner { padding: 0 12px; gap: 10px; }
  .edit-banner-text { font-size: .74rem; line-height: 1.3; }
  .eb-texte-long  { display: none; }
  .eb-texte-court { display: inline; }
}

/* ─── EDIT BANNER ────────────────────────────────────────────────────────── */
.edit-banner {
  position: fixed; top: var(--bar); left: 0; right: 0;
  min-height: 40px;
  background: #FBF0F0;
  border-bottom: 1px solid #FDE68A;
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0 20px; z-index: 999;
}

.edit-banner-text {
  display: flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 500; color: #92400E;
}

.color-pickers { display: flex; align-items: center; gap: 12px; }
.color-picker-wrap {
  display: flex; align-items: center; gap: 7px;
  font-size: .75rem; font-weight: 600; color: #64748B; cursor: pointer;
}
.color-picker-wrap input[type="color"] {
  width: 28px; height: 22px;
  border: 1px solid #E2E8F0; border-radius: 5px;
  padding: 1px; cursor: pointer;
  background: none;
}

/* ─── EDITABLE ELEMENTS ──────────────────────────────────────────────────── */
[contenteditable="true"] {
  outline: none;
  border-radius: 3px;
  transition: box-shadow .15s;
  cursor: text;
}
[contenteditable="true"]:hover {
  box-shadow: 0 0 0 2px var(--pa);
}
[contenteditable="true"]:focus {
  box-shadow: 0 0 0 2px var(--p);
}

/* ─── SECTION CONTROLS ───────────────────────────────────────────────────── */
.section-wrap {
  position: relative;
}
.masquer-btn {
  position: absolute; top: 16px; right: 16px;
  padding: 4px 12px;
  background: #fff; border: 1px solid #E2E8F0;
  border-radius: 6px; font-size: .72rem; font-weight: 600;
  color: #64748B; cursor: pointer; z-index: 10;
  font-family: 'Inter', sans-serif;
  transition: background .15s;
  display: none;
}
.section-wrap:hover .masquer-btn { display: block; }
.masquer-btn:hover { background: #FEF2F2; color: #DC2626; border-color: #FCA5A5; }

/* ════════════════════════════════════════
   SITE STYLES
   ════════════════════════════════════════ */

/* ─── NAV — transparente, posée sur la photo ───────────────────────────────── */
.site-nav {
  background: transparent;
  padding: 0;
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  transition: background .35s ease, backdrop-filter .35s ease;
}
/* Au defilement, le JS pose .scrolled : la barre se materialise */
.site-nav.scrolled {
  position: fixed;
  background: rgba(12,10,25,.82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-nav .container {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 24px; height: 78px;
}
.nav-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.35rem; font-weight: 600; color: #fff;
  letter-spacing: -.01em;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.nav-logo-btn {
  padding: 3px 10px; background: rgba(255,255,255,.15);
  border: 1px dashed rgba(255,255,255,.4); border-radius: 5px;
  font-size: .72rem; color: rgba(255,255,255,.8);
  cursor: pointer; font-family: 'Manrope', sans-serif;
}
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  font-size: .875rem; font-weight: 500;
  color: rgba(255,255,255,.86); padding: 8px 14px;
  border-radius: 6px; transition: color .15s;
  text-shadow: 0 1px 10px rgba(0,0,0,.4);
  position: relative;
}
/* Soulignement qui se deploie depuis le centre */
.nav-links a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: center;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-phone {
  font-size: .92rem; font-weight: 600; color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,.4);
}
.nav-cta {
  padding: 11px 22px; background: var(--p);
  border: none; border-radius: 4px; color: #fff;
  font-size: .85rem; font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 6px 20px -6px rgba(0,0,0,.55);
  transition: transform .18s ease, filter .18s ease;
}
.nav-cta:hover { transform: translateY(-1px); filter: brightness(1.08); }

/* ─── HERO — photo pleine hauteur, composition editoriale ──────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  text-align: left;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  /* Leger sur-cadrage : la photo respire au chargement */
  animation: heroZoom 14s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }

/* Deux voiles superposes : un degrade vertical pour asseoir le texte,
   un lateral pour garder le sujet de la photo lisible a droite. */
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top,   rgba(8,7,18,.92) 0%, rgba(8,7,18,.34) 46%, rgba(8,7,18,.5) 100%),
    linear-gradient(to right, rgba(8,7,18,.78) 0%, rgba(8,7,18,.28) 52%, transparent 78%);
}
/* Grain discret : evite l'aspect degrade plastique */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .16; mix-blend-mode: overlay;
  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='.5'/%3E%3C/svg%3E");
}

.hero-content {
  position: relative; z-index: 2;
  width: 100%; max-width: 1180px;
  margin: 0 auto; padding: 150px 32px 92px;
}
.hero-inner { max-width: 660px; }

/* Chaque bloc arrive en cascade */
.hero-inner > * {
  opacity: 0; transform: translateY(18px);
  animation: heroRise .85s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-eyebrow    { animation-delay: .05s; }
.hero-inner h1   { animation-delay: .16s; }
.hero-sub        { animation-delay: .27s; }
.hero-actions    { animation-delay: .38s; }
.hero-trust      { animation-delay: .5s;  }
@keyframes heroRise { to { opacity: 1; transform: none; } }

.hero-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Manrope', sans-serif;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.82);
  margin-bottom: 22px;
}
/* Filet a l'accent du site */
.hero-eyebrow::before {
  content: ''; width: 34px; height: 2px; flex-shrink: 0;
  background: var(--p);
}

.hero h1 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: clamp(2.5rem, 6.2vw, 4.6rem);
  font-weight: 600;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
  color: #fff;
  line-height: 1.02;
  letter-spacing: -.022em;
  margin-bottom: 22px;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,.4);
}

.hero-sub {
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.65; font-weight: 400;
  color: rgba(255,255,255,.84);
  max-width: 46ch; margin-bottom: 38px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 46px; }

.hero-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 32px;
  background: var(--p); border: none; border-radius: 4px;
  color: #fff; font-size: .97rem; font-weight: 700;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,.75);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), filter .2s;
}
.hero-btn:hover { transform: translateY(-2px); filter: brightness(1.09); }

.hero-btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 4px; color: #fff;
  font-size: .97rem; font-weight: 600;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s;
}
.hero-btn-ghost:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.8); }

/* Bandeau de reassurance : reprend les 3 atouts du site */
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 14px 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.hero-trust-item {
  display: flex; align-items: center; gap: 9px;
  font-size: .87rem; font-weight: 500;
  color: rgba(255,255,255,.9);
}
.hero-trust-item span:first-child { font-size: 1rem; line-height: 1; }

/* Invitation a faire defiler */
.hero-scroll {
  position: absolute; left: 50%; bottom: 26px; z-index: 2;
  transform: translateX(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.24);
  animation: heroNudge 2.4s ease-in-out infinite;
}
@keyframes heroNudge {
  0%,100% { transform: translate(-50%, 0); }
  50%     { transform: translate(-50%, 7px); }
}

@media (max-width: 720px) {
  .site-nav .container { height: 64px; gap: 12px; }
  /* La marque ne doit pas passer sur deux lignes */
  .nav-brand { font-size: 1.08rem; white-space: nowrap; }
  /* Le CTA suffit : le numero reste accessible via « Nous appeler » du hero */
  .nav-phone { display: none; }
  .nav-cta { padding: 9px 16px; font-size: .8rem; white-space: nowrap; }
  .hero { min-height: 88svh; }
  .hero-content { padding: 116px 22px 76px; }
  .hero-bg::after {
    background: linear-gradient(to top, rgba(8,7,18,.94) 0%, rgba(8,7,18,.45) 55%, rgba(8,7,18,.6) 100%);
  }
  .hero-actions { gap: 10px; }
  .hero-btn, .hero-btn-ghost { flex: 1 1 auto; justify-content: center; }
  .hero-scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hero-inner > *, .hero-scroll { animation: none; opacity: 1; transform: none; }
}

/* Change image button */
.hero-change-img {
  position: absolute; top: 96px; right: 16px; z-index: 3;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.3);
  border-radius: 10px; overflow: hidden; cursor: pointer;
  display: none;
}
.hero:hover .hero-change-img { display: flex; flex-direction: column; align-items: center; }
.hero-thumb { width: 60px; height: 45px; object-fit: cover; opacity: .7; }
.hero-change-label { font-size: .65rem; color: rgba(255,255,255,.8); padding: 4px 6px; text-align: center; }

/* ─── ABOUT ─────────────────────────────────────────────────────────────────── */
.about { padding: 80px 0; background: #fff; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.about-text .section-tag { display: inline-block; margin-bottom: 12px; }
.about-text h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 700; color: #1E293B; margin-bottom: 18px; }
.about-text p { color: #475569; line-height: 1.75; font-size: .95rem; margin-bottom: 24px; }
.about-btn {
  display: inline-block; padding: 12px 26px;
  background: var(--p); color: #fff;
  border-radius: 8px; font-size: .9rem; font-weight: 700;
  transition: background .15s;
}
.about-btn:hover { background: var(--pd); }
.about-photo {
  border-radius: 16px; overflow: hidden;
  aspect-ratio: 4/3;
  background-size: cover; background-position: center;
  position: relative; cursor: pointer;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
.photo-change-label {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  display: none; align-items: center; justify-content: center;
  flex-direction: column; gap: 6px;
  color: #fff; font-size: .8rem; font-weight: 600;
  border-radius: 16px;
}
.about-photo:hover .photo-change-label { display: flex; }
.photo-change-label svg { opacity: .9; }

/* ─── ADVANTAGES ─────────────────────────────────────────────────────────────── */
.advantages { padding: 0 0 80px; background: #fff; }
.adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.adv-card {
  background: #F8F8FF; border: 1px solid #E8E8F0;
  border-radius: 14px; padding: 28px 22px; text-align: center;
}
.adv-icon { font-size: 2rem; margin-bottom: 12px; }
.adv-card h3 { font-size: .95rem; font-weight: 700; color: #1E293B; margin-bottom: 8px; }
.adv-card p { font-size: .83rem; color: #64748B; line-height: 1.6; }

/* ─── SERVICES ──────────────────────────────────────────────────────────────── */
.services { padding: 80px 0; background: #F8F8FF; }
.section-header { text-align: center; margin-bottom: 48px; }
.section-tag {
  display: inline-block; padding: 4px 14px;
  background: var(--pl); border: 1px solid var(--pa);
  border-radius: 999px; font-size: .72rem; font-weight: 700;
  color: var(--p); letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 10px;
}
.section-header h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: #1E293B; }
.section-header p { color: #64748B; font-size: .95rem; margin-top: 8px; }
.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.svc-card {
  background: #fff; border: 1px solid #E8E8F0;
  border-radius: 14px; overflow: hidden; position: relative;
}
.svc-remove-btn {
  position: absolute; top: 10px; right: 10px;
  width: 24px; height: 24px; background: rgba(0,0,0,.5);
  border-radius: 50%; border: none; color: #fff;
  font-size: .75rem; cursor: pointer; display: none;
  align-items: center; justify-content: center; z-index: 5;
}
.svc-card:hover .svc-remove-btn { display: flex; }
.svc-photo {
  height: 140px; background-size: cover; background-position: center;
  position: relative; cursor: pointer;
}
.svc-photo-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.45);
  display: none; align-items: center; justify-content: center;
  flex-direction: column; gap: 5px; color: #fff;
  font-size: .75rem; font-weight: 600;
}
.svc-photo:hover .svc-photo-overlay { display: flex; }
.svc-body { padding: 20px; }
.svc-icon { font-size: 1.6rem; margin-bottom: 10px; }
.svc-card h3 { font-size: .95rem; font-weight: 700; color: #1E293B; margin-bottom: 6px; }
.svc-card p { font-size: .83rem; color: #64748B; line-height: 1.6; }
.add-svc-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 14px;
  border: 2px dashed #CBD5E1; border-radius: 14px;
  color: #94A3B8; font-size: .85rem; font-weight: 600;
  cursor: pointer; background: #fff; font-family: 'Inter', sans-serif;
  transition: border-color .15s, color .15s;
  width: 100%;
}
.add-svc-btn:hover { border-color: var(--p); color: var(--p); }

/* ─── WHY CHOOSE US ──────────────────────────────────────────────────────────── */
.why-us {
  background: var(--p); padding: 80px 0; text-align: center;
  position: relative; overflow: hidden;
}
.why-us::before {
  content: ''; position: absolute;
  width: 500px; height: 500px; border-radius: 50%;
  background: rgba(255,255,255,.05);
  top: -200px; right: -100px;
}
.why-us h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; color: #fff; margin-bottom: 10px; }
.why-us .sub { font-size: 1rem; color: rgba(255,255,255,.75); margin-bottom: 0; font-style: italic; }
.why-us-text { max-width: 720px; margin: 24px auto 32px; font-size: .95rem; color: rgba(255,255,255,.82); line-height: 1.75; }
.why-cta {
  display: inline-block; padding: 14px 36px;
  background: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.5);
  border-radius: 8px; color: #fff; font-size: .95rem; font-weight: 700;
  transition: background .15s;
}
.why-cta:hover { background: rgba(255,255,255,.25); }

/* ─── TESTIMONIALS ───────────────────────────────────────────────────────────── */
.testimonials { padding: 80px 0; background: #fff; }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testi-card {
  background: #F8F8FF; border: 1px solid #E8E8F0;
  border-radius: 14px; padding: 24px;
  display: flex; flex-direction: column; gap: 14px;
  transition: box-shadow .2s;
}
.testi-card:hover { box-shadow: 0 4px 20px rgba(61,60,184,.1); }
.testi-stars { color: #F59E0B; font-size: 1rem; letter-spacing: 2px; }
.testi-card p { font-size: .88rem; color: #475569; line-height: 1.65; font-style: italic; flex: 1; }
.testi-footer { display: flex; align-items: center; gap: 12px; }
.testi-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--p); display: flex; align-items: center;
  justify-content: center; font-weight: 700; color: #fff;
  font-size: .9rem; flex-shrink: 0;
}
.testi-footer strong { display: block; font-size: .85rem; color: #1E293B; font-weight: 600; }
.testi-footer span { font-size: .75rem; color: #94A3B8; }

/* ─── GALLERY ────────────────────────────────────────────────────────────────── */
.gallery { padding: 80px 0; background: #F8F8FF; }
.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-top: 40px;
}
.gallery-item {
  aspect-ratio: 4/3; border-radius: 12px;
  background-size: cover; background-position: center;
  border: 1px solid #E8E8F0;
}
.gallery-add {
  aspect-ratio: 4/3; border-radius: 12px;
  border: 2px dashed #CBD5E1; background: #fff;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; color: #94A3B8; cursor: pointer;
  transition: border-color .15s, color .15s;
  font-size: .82rem; font-weight: 600; font-family: 'Inter', sans-serif;
}
.gallery-add:hover { border-color: var(--p); color: var(--p); }
.gallery-add svg { width: 24px; height: 24px; }

/* ─── CONTACT ────────────────────────────────────────────────────────────────── */
.contact { padding: 80px 0; background: #fff; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; }
.contact-info-col h2 { font-size: 1.6rem; font-weight: 700; margin-bottom: 8px; }
.contact-info-col > p { color: #64748B; font-size: .9rem; margin-bottom: 28px; line-height: 1.6; }
.contact-items { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.contact-item {
  display: flex; align-items: center; gap: 12px;
  font-size: .9rem; color: #1E293B;
}
.contact-item svg { color: var(--p); flex-shrink: 0; }
.map-wrap {
  border-radius: 12px; overflow: hidden;
  height: 200px; margin-bottom: 8px;
  border: 1px solid #E8E8F0;
}
.map-wrap iframe { width: 100%; height: 100%; border: none; }
.map-city-label {
  font-size: .72rem; color: #94A3B8; margin-bottom: 20px;
  display: block;
}
.form-masquer-btn {
  font-size: .75rem; color: #64748B; background: none; border: none;
  cursor: pointer; padding: 0; font-family: 'Inter', sans-serif;
  text-decoration: underline; display: block; margin-bottom: 10px;
}
.contact-form { display: flex; flex-direction: column; gap: 10px; }

/* Formulaire remplacé sur un site gratuit : le visiteur doit comprendre par
   quoi passer, pas se heurter à un champ qui refuse son message. */
.contact-inactif {
  padding: 18px 20px;
  border: 1px dashed rgba(102,101,221,.42);
  border-radius: 12px;
  background: rgba(102,101,221,.06);
  font-size: .9rem; line-height: 1.6; color: #524F7A;
}
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.contact-form input,
.contact-form textarea {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid #E2E8F0; border-radius: 8px;
  font-family: 'Inter', sans-serif; font-size: .875rem;
  color: #1E293B; background: #F8F8FF; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--p);
  box-shadow: 0 0 0 3px var(--pl);
  background: #fff;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #94A3B8; }
.contact-form textarea { height: 110px; resize: none; }
.form-submit {
  width: 100%; padding: 13px;
  background: var(--p); color: #fff; border: none;
  border-radius: 8px; font-family: 'Inter', sans-serif;
  font-size: .9rem; font-weight: 700; cursor: pointer;
  transition: background .15s;
}
.form-submit:hover    { background: var(--pd); }
.form-submit:disabled { opacity: .65; cursor: not-allowed; }

.cf-success, .cf-error {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-radius: 10px;
  font-size: .875rem; font-weight: 500; margin-top: 12px;
}
.cf-success {
  background: #DCFCE7; color: #15803D;
  border: 1px solid #BBF7D0;
}
.cf-error {
  background: #FEE2E2; color: #B91C1C;
  border: 1px solid #FECACA;
}

/* ─── FOOTER ─────────────────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  /* Teinte profonde derivee de la couleur du site : un aplat sature pleine
     largeur ecrase la page et sort mal sur les metiers aux couleurs vives.
     Le voile sombre garde l'identite tout en restant lisible. */
  background-color: var(--p);
  background-image: linear-gradient(rgba(10,8,26,.72), rgba(10,8,26,.86));
  color: #fff;
  padding: 64px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 44px;
  padding-bottom: 48px;
}

.footer-nom {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.5rem; font-weight: 600;
  letter-spacing: -.01em; margin-bottom: 22px;
}

.footer-coords { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.footer-coords li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: .875rem; line-height: 1.5; color: rgba(255,255,255,.82);
}
.fc-ico { flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; opacity: .62; }
.fc-ico svg { width: 100%; height: 100%; display: block; }
.footer-coords a { color: inherit; transition: color .15s; }
.footer-coords a:hover { color: #fff; }

.footer-titre {
  font-size: .7rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: 18px;
}

.footer-liens { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-liens a {
  font-size: .875rem; color: rgba(255,255,255,.78);
  transition: color .15s, padding-left .18s;
  display: inline-block;
}
.footer-liens a:hover { color: #fff; padding-left: 4px; }

/* Carte d'appel : seul element qui reprend la couleur pleine, donc le seul
   qui attire l'oeil dans le pied de page */
.footer-cta {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 22px;
}
.footer-cta strong {
  display: block; font-family: 'Manrope', sans-serif;
  font-size: 1.02rem; font-weight: 700; margin-bottom: 8px;
}
.footer-cta p {
  font-size: .84rem; line-height: 1.6;
  color: rgba(255,255,255,.72); margin-bottom: 16px;
}
.footer-cta-btn {
  display: inline-block; padding: 11px 22px;
  background: #fff; color: #14121f;
  border-radius: 5px; font-size: .875rem; font-weight: 700;
  transition: transform .18s cubic-bezier(.2,.7,.3,1);
}
.footer-cta-btn:hover { transform: translateY(-2px); }

.footer-bas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 20px 0 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .8rem; color: rgba(255,255,255,.52);
}
.footer-bas a { color: rgba(255,255,255,.72); text-decoration: underline; }
.footer-bas a:hover { color: #fff; }

/* ── Compatibilite : sites enregistres avant le nouveau footer ─────────────
   Leur content.html contient encore l'ancien balisage (.footer-text /
   .footer-hours). Sans ces regles, leur pied de page s'affiche sans aucun
   style. A conserver tant que des sites n'ont pas ete reconstruits. */
.site-footer .footer-text,
.site-footer .footer-hours { text-align: center; }
.site-footer .footer-text {
  font-size: .84rem; line-height: 1.7;
  color: rgba(255,255,255,.72); margin-bottom: 6px;
}
.site-footer .footer-text a { color: rgba(255,255,255,.86); text-decoration: underline; }
.site-footer .footer-text a:hover { color: #fff; }
.site-footer .footer-hours {
  font-size: .8rem; color: rgba(255,255,255,.5); margin-top: 10px;
}
/* L'ancien balisage n'a pas de grille : on lui rend un rembourrage correct */
.site-footer > .container:only-child { padding-top: 4px; padding-bottom: 34px; }

@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-cta  { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .site-footer { padding-top: 46px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bas  { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { display: none; }
  .services-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .adv-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
}

@media (max-width: 480px) {
  .adv-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════
   PARAMÈTRES PANEL
   ════════════════════════════════════════ */

.params-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,15,40,.35);
  z-index: 2000;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.params-backdrop.open { opacity: 1; pointer-events: all; }

.params-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 95vw;
  background: #fff;
  box-shadow: -4px 0 40px rgba(0,0,0,.15);
  z-index: 2001;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.params-panel.open { transform: translateX(0); }

/* Header */
.params-header {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 20px 24px 18px;
  border-bottom: 1px solid #E8E8F0;
  flex-shrink: 0;
}
.params-header h2 {
  font-family: 'Lexend', sans-serif;
  font-size: 1.05rem; font-weight: 700; color: #1E293B;
}
.params-close {
  width: 30px; height: 30px; border: none; background: none;
  border-radius: 6px; cursor: pointer; color: #94A3B8;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.params-close:hover { background: #F1F5F9; color: #1E293B; }

/* Scrollable body */
.params-body {
  flex: 1; overflow-y: auto;
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
}

/* Publish button */
.params-publish-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px;
  background: #4F4BE8; color: #fff;
  border-radius: 10px;
  font-size: .95rem; font-weight: 700;
  text-decoration: none;
  transition: background .15s;
  box-shadow: 0 2px 12px rgba(79,75,232,.3);
}
.params-publish-btn:hover { background: #3D3AB5; }

/* Volontairement en second rang : c'est une porte de sortie, pas l'offre. */
.params-gratuit-btn {
  display: block; width: 100%; padding: 12px; margin-top: 10px;
  background: #fff; color: #3F3D56;
  border: 1px solid #DAD8F0; border-radius: 10px;
  font-family: inherit; font-size: .88rem; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.params-gratuit-btn:hover { background: #F7F7FD; border-color: #C0BCE8; }
.params-gratuit-btn:disabled { opacity: .55; cursor: default; }
.params-gratuit-note {
  margin: 8px 2px 0; font-size: .76rem; line-height: 1.55; color: #6B7280;
}

.params-domain-link {
  text-align: center; display: block;
  font-size: .82rem; color: #64748B;
  text-decoration: none; margin-top: -8px;
  transition: color .15s;
}
.params-domain-link:hover { color: var(--p); }

/* Status card */
.params-status-card {
  background: #F8F8FF; border: 1px solid #E8E8F0;
  border-radius: 10px; padding: 4px 0;
}
.params-status-row {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid #F1F1FA;
  font-size: .875rem; color: #64748B;
}
.params-status-row:last-child { border-bottom: none; }
.status-badge {
  padding: 3px 12px; border-radius: 999px;
  font-size: .72rem; font-weight: 700;
  font-family: 'Inter', sans-serif;
}
.status-badge.draft    { background: #FEF9C3; color: #854D0E; border: 1px solid #FDE047; }
.status-badge.inactive { background: #F1F5F9; color: #64748B; border: 1px solid #E2E8F0; }
.status-badge.active   { background: #DCFCE7; color: #166534; border: 1px solid #86EFAC; }
.status-badge.online   { background: #DCFCE7; color: #166534; border: 1px solid #86EFAC; }

/* SEO section */
.params-section { display: flex; flex-direction: column; gap: 14px; }

.params-section-title {
  display: flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: #1E293B;
}
.info-btn {
  background: none; border: none; cursor: pointer;
  color: #94A3B8; display: flex; align-items: center;
  padding: 0;
}

/* Favicon row */
.favicon-row {
  display: flex; align-items: flex-start; gap: 14px;
}
.favicon-preview {
  width: 52px; height: 52px; border-radius: 10px;
  background: linear-gradient(135deg, #3D3CB8, #6665DD);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Lexend', sans-serif;
  font-size: 1.4rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.favicon-label { font-size: .8rem; font-weight: 600; color: #64748B; margin-bottom: 4px; }
.favicon-choose {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: .85rem; font-weight: 600; color: var(--p);
  font-family: 'Inter', sans-serif;
  transition: opacity .15s;
}
.favicon-choose:hover { opacity: .75; }
.favicon-hint { font-size: .72rem; color: #94A3B8; margin-top: 3px; }

/* Fields */
.params-field { display: flex; flex-direction: column; gap: 6px; position: relative; }

/* L'adresse se lit d'un bloc : le suffixe colle au champ pour que le client
   voie « mon-entreprise.apareo.fr » et non un mot isolé. */
.champ-slug-ligne { display: flex; align-items: stretch; }
.champ-slug-ligne input { flex: 1; min-width: 0; border-radius: 8px 0 0 8px; }
.champ-slug-suffixe {
  display: flex; align-items: center; padding: 0 10px;
  background: #F1F0FA; border: 1px solid #DAD8F0; border-left: none;
  border-radius: 0 8px 8px 0;
  font-size: .82rem; color: #6B7280; white-space: nowrap;
}
/* ─── Banque d'images ──────────────────────────────────────────────────────
   Ouverte à tous, y compris aux sites gratuits : un site dont on ne peut
   changer aucune photo se sent bloqué, pas gratuit. Ce qui reste payant, c'est
   d'envoyer ses propres photos de chantier. */
.banque-fond {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(12,10,31,.55);
}
/* Une classe qui pose `display` l'emporte sur le `display:none` que le
   navigateur applique à [hidden] : sans ces deux règles, la fenêtre restait
   ouverte en permanence et le bouton de fermeture ne pouvait rien. */
.banque[hidden], .banque-fond[hidden] { display: none; }
.banque {
  position: fixed; z-index: 9999;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(760px, calc(100vw - 32px)); max-height: min(80vh, 700px);
  display: flex; flex-direction: column;
  background: #fff; border-radius: 16px;
  box-shadow: 0 24px 60px rgba(12,10,31,.35);
  font-family: 'Inter', system-ui, sans-serif;
}
.banque-tete {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid #EEEDF8;
  font-size: .98rem; color: #17181C;
}
.banque-fermer {
  border: none; background: none; cursor: pointer;
  font-size: 1rem; color: #6B7280; padding: 4px 8px; border-radius: 6px;
}
.banque-fermer:hover { background: #F4F3FC; color: #17181C; }
.banque-recherche { display: flex; gap: 8px; padding: 14px 18px 10px; }
.banque-recherche input {
  flex: 1; padding: 10px 12px;
  border: 1px solid #DAD8F0; border-radius: 9px;
  font-family: inherit; font-size: .88rem; color: #17181C;
}
.banque-recherche input:focus { outline: none; border-color: #6665DD; }
.banque-chercher {
  padding: 10px 16px; border: none; border-radius: 9px;
  background: #4F4BE8; color: #fff;
  font-family: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.banque-chercher:hover { background: #3D3AB5; }
.banque-grille {
  flex: 1; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; padding: 8px 18px 16px;
}
.banque-photo {
  aspect-ratio: 4 / 3; border-radius: 10px; cursor: pointer;
  background-size: cover; background-position: center;
  border: 2px solid transparent; transition: border-color .15s, transform .15s;
}
.banque-photo:hover { border-color: #6665DD; transform: translateY(-2px); }
.banque-etat {
  grid-column: 1 / -1; padding: 26px 4px; text-align: center;
  font-size: .86rem; color: #6B7280;
}
.banque-pied {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-top: 1px solid #EEEDF8;
}
.banque-credit { font-size: .74rem; color: #9096A2; }
.banque-envoi {
  padding: 9px 14px; border: 1px solid #DAD8F0; border-radius: 9px;
  background: #fff; font-family: inherit; font-size: .82rem; font-weight: 600;
  color: #3F3D56; cursor: pointer;
}
.banque-envoi:hover { background: #F7F7FD; }

@media (max-width: 560px) {
  .banque { width: calc(100vw - 20px); max-height: 88vh; }
  .banque-grille { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* Adresse réelle du site, sous l'aperçu : c'est ce qu'on envoie à un client,
   donc elle doit se lire en entier et se copier sans sélection à la souris. */
.params-lien-public {
  margin-top: 14px; padding: 12px;
  border: 1px solid #E2E1F2; border-radius: 10px; background: #FAFAFE;
}
.params-lien-titre {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #6B7280; margin-bottom: 6px;
}
.params-lien-url {
  display: block; word-break: break-all;
  font-size: .84rem; font-weight: 600; color: #4F4BE8; text-decoration: none;
}
.params-lien-url:hover { text-decoration: underline; }
.params-lien-copier {
  margin-top: 8px; padding: 7px 12px;
  background: #fff; border: 1px solid #DAD8F0; border-radius: 8px;
  font-family: inherit; font-size: .78rem; font-weight: 600; color: #3F3D56;
  cursor: pointer;
}
.params-lien-copier:hover { background: #F4F3FC; }

.params-hint.erreur { color: #B91C1C; }
.params-hint.succes { color: #15803D; }

.params-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .8rem; font-weight: 600; color: #64748B;
}

.params-input, .params-textarea {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid #E2E8F0; border-radius: 8px;
  font-family: 'Inter', sans-serif; font-size: .875rem;
  color: #1E293B; background: #fff; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.params-input:focus, .params-textarea:focus {
  border-color: var(--p);
  box-shadow: 0 0 0 3px rgba(61,60,184,.1);
}
.params-textarea { resize: none; line-height: 1.55; }

.field-counter {
  position: absolute; bottom: 10px; right: 12px;
  font-size: .68rem; color: #94A3B8; pointer-events: none;
}

.desc-counter {
  font-size: .72rem; font-weight: 700; color: #F97316;
}

/* Buttons */
.params-save-btn {
  width: 100%; padding: 13px;
  background: #1E293B; color: #fff; border: none;
  border-radius: 10px; font-family: 'Inter', sans-serif;
  font-size: .9rem; font-weight: 700; cursor: pointer;
  transition: background .15s;
}
.params-save-btn:hover { background: #0F172A; }

.params-preview-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px;
  background: var(--p); color: #fff;
  border-radius: 10px; font-size: .9rem; font-weight: 700;
  text-decoration: none;
  transition: background .15s;
  box-shadow: 0 2px 10px rgba(61,60,184,.25);
}
.params-preview-btn:hover { background: var(--pd); }

/* ════════════════════════════════════════
   ASSISTANT IA — retouche apres generation
   ════════════════════════════════════════ */
.ia-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 20px 13px 16px;
  border: none; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #6665DD, #A855F7);
  color: #fff; font-family: 'Manrope', sans-serif;
  font-size: .88rem; font-weight: 700;
  box-shadow: 0 10px 34px -8px rgba(102,101,221,.75);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, opacity .2s;
}
.ia-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 42px -10px rgba(102,101,221,.85); }
.ia-fab.hidden { opacity: 0; pointer-events: none; transform: translateY(10px); }
.ia-fab svg { flex-shrink: 0; }

.ia-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 91;
  width: min(392px, calc(100vw - 32px));
  max-height: min(640px, calc(100vh - 44px));
  display: none; flex-direction: column;
  background: #fff; border: 1px solid #E5E3F8;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(16,14,39,.4);
}
.ia-panel.open { display: flex; animation: iaRise .28s cubic-bezier(.16,1,.3,1); }
@keyframes iaRise { from { opacity: 0; transform: translateY(16px) scale(.98); } }

.ia-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 16px 18px;
  background: linear-gradient(135deg, #6665DD, #A855F7); color: #fff;
}
.ia-head strong { display: block; font-family: 'Manrope', sans-serif; font-size: .96rem; font-weight: 700; }
.ia-head span   { display: block; font-size: .78rem; opacity: .85; margin-top: 2px; }
.ia-close {
  background: rgba(255,255,255,.18); border: none; color: #fff;
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ia-close:hover { background: rgba(255,255,255,.3); }

.ia-log {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  background: #FAFAFE; min-height: 180px;
}
.ia-msg {
  max-width: 84%; padding: 10px 13px; border-radius: 13px;
  font-size: .86rem; line-height: 1.55; white-space: pre-wrap;
}
.ia-msg.bot { align-self: flex-start; background: #fff; border: 1px solid #E9E7F9; color: #1E293B; }
.ia-msg.me  { align-self: flex-end;   background: #6665DD; color: #fff; }
.ia-thinking { color: #9895BC; letter-spacing: .16em; animation: iaBlink 1.2s ease-in-out infinite; }
@keyframes iaBlink { 50% { opacity: .35; } }

/* Rappel : la modification n'est en base qu'apres enregistrement */
.ia-save {
  align-self: stretch; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 13px; border-radius: 11px;
  background: #ECFDF5; border: 1px solid #A7F3D0;
  font-size: .8rem; font-weight: 600; color: #065F46;
}
.ia-save button {
  padding: 7px 14px; border: none; border-radius: 8px; cursor: pointer;
  background: #059669; color: #fff; font-family: 'Manrope', sans-serif;
  font-size: .78rem; font-weight: 700; white-space: nowrap;
}
.ia-save button:disabled { opacity: .65; cursor: default; }

.ia-hints { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 12px; background: #FAFAFE; }
.ia-hints button {
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  background: #fff; border: 1px solid #E5E3F8; color: #524F7A;
  font-family: 'Manrope', sans-serif; font-size: .76rem; font-weight: 600;
  transition: border-color .15s, color .15s;
}
.ia-hints button:hover { border-color: #6665DD; color: #6665DD; }

.ia-form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid #EEEDF9; background: #fff; }
.ia-form input {
  flex: 1; padding: 11px 14px; border: 1px solid #E5E3F8; border-radius: 10px;
  font-family: 'Manrope', sans-serif; font-size: .86rem; outline: none; color: #1E293B;
}
.ia-form input:focus { border-color: #6665DD; }
.ia-form button {
  width: 42px; border: none; border-radius: 10px; cursor: pointer;
  background: #6665DD; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.ia-form button:hover { background: #5453C4; }

@media (max-width: 560px) {
  .ia-fab span { display: none; }
  .ia-fab { padding: 15px; }
  .ia-panel { right: 12px; left: 12px; bottom: 12px; width: auto; max-height: 78vh; }
}

/* Avertissement : site enregistre avant les ancres [data-f] */
.ia-save.ia-warn {
  flex-direction: column; align-items: flex-start; gap: 9px;
  background: #FFFBEB; border-color: #FDE68A; color: #92400E;
  font-weight: 500; line-height: 1.55;
}
.ia-save.ia-warn button { background: #D97706; align-self: flex-end; }

/* ════════════════════════════════════════
   OUTILS DE SECTION (editeur uniquement)
   ════════════════════════════════════════ */
.section-wrap { position: relative; }
/* Double securite : le mobilier d'edition n'existe que sous la barre
   d'outils de l'editeur, jamais sur un site publie. */
body:not(:has(.editor-bar)) .sec-tools { display: none !important; }

/* Au-dessus de la navigation du site (z-index 50) : en dessous, le clic sur
   « Style » atteignait le lien de menu place par-dessus, qui faisait defiler
   la page — la barre d'outils disparaissait avec la section survolee. */
.sec-tools {
  position: absolute; top: 12px; left: 12px; z-index: 60;
  display: none; gap: 6px;
  background: rgba(12,10,31,.86); backdrop-filter: blur(8px);
  padding: 6px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
}
.section-wrap:hover .sec-tools { display: flex; }
.sec-btn {
  padding: 6px 11px; border: none; border-radius: 7px; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff;
  font-family: 'Manrope', sans-serif; font-size: .76rem; font-weight: 600;
  transition: background .15s;
}
.sec-btn:hover { background: rgba(255,255,255,.26); }
.sec-style { background: linear-gradient(135deg,#6665DD,#A855F7); }
.sec-up, .sec-down { padding: 6px 10px; font-size: .85rem; line-height: 1; }

@keyframes secMoved { 0%,100% { box-shadow: none; } 40% { box-shadow: inset 0 0 0 3px #6665DD; } }
.sec-moved { animation: secMoved .5s ease; }

/* ── Selecteur de variantes ─────────────────────────────────────────────── */
.vp-back {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(10,8,26,.62); backdrop-filter: blur(6px);
  animation: vpFade .2s ease;
}
@keyframes vpFade { from { opacity: 0; } }
.vp-modal {
  width: min(720px, 100%); max-height: 86vh; overflow: hidden;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 18px;
  box-shadow: 0 40px 90px -24px rgba(10,8,26,.55);
  animation: vpRise .28s cubic-bezier(.16,1,.3,1);
}
@keyframes vpRise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.vp-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; padding: 18px 22px; border-bottom: 1px solid #EEEDF9;
}
.vp-head strong { display: block; font-family: 'Manrope', sans-serif; font-size: 1rem; color: #0C0A1E; }
.vp-head span   { display: block; font-size: .82rem; color: #524F7A; margin-top: 3px; }
.vp-close {
  background: #F4F3FC; border: none; width: 30px; height: 30px; border-radius: 9px;
  cursor: pointer; color: #524F7A; font-size: .9rem; flex-shrink: 0;
}
.vp-close:hover { background: #E9E7F9; }

.vp-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  padding: 20px 22px; overflow-y: auto;
}
.vp-card {
  position: relative; text-align: left; cursor: pointer;
  background: #fff; border: 2px solid #E9E7F9; border-radius: 13px;
  padding: 0 0 13px; overflow: hidden;
  font-family: 'Manrope', sans-serif;
  transition: border-color .18s, transform .18s;
}
.vp-card:hover { border-color: #B9B7F0; transform: translateY(-2px); }
.vp-card.on { border-color: #6665DD; }
.vp-nom  { display: block; padding: 12px 14px 3px; font-size: .92rem; font-weight: 700; color: #0C0A1E; }
.vp-desc { display: block; padding: 0 14px; font-size: .79rem; line-height: 1.5; color: #524F7A; }
.vp-badge {
  display: none; position: absolute; top: 10px; right: 10px;
  padding: 4px 10px; border-radius: 999px;
  background: #0C0A1E; color: #fff; font-size: .7rem; font-weight: 700;
}
.vp-card.on .vp-badge { display: block; }

/* Miniature fidele : clone de la section, reduit a l'echelle */
.vp-thumb {
  display: block; position: relative; overflow: hidden;
  height: 160px; background: #F4F3FC;
  border-bottom: 1px solid #EEEDF9;
}
.vp-stage {
  position: absolute; top: 0; left: 0;
  width: 1280px; transform-origin: top left;
  pointer-events: none;
}
/* Dans la miniature, on neutralise ce qui n'a de sens qu'en pleine page */
.vp-stage .hero { min-height: 620px; }
.vp-stage .hero-bg { animation: none; }
.vp-stage .hero-inner > * { opacity: 1; transform: none; animation: none; }
.vp-stage .hero-scroll { display: none; }
.vp-stage .site-nav { position: absolute; }

@media (max-width: 620px) { .vp-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════
   VARIANTES DU HERO
   ════════════════════════════════════════ */
/* Centré */
.v-hero-centre .hero-content { max-width: 900px; }
.v-hero-centre .hero-inner   { max-width: 720px; margin: 0 auto; text-align: center; }
.v-hero-centre .hero-eyebrow { justify-content: center; }
.v-hero-centre .hero-sub     { margin-left: auto; margin-right: auto; }
.v-hero-centre .hero-actions,
.v-hero-centre .hero-trust   { justify-content: center; }
.v-hero-centre .hero-bg::after {
  background: linear-gradient(to top, rgba(8,7,18,.9) 0%, rgba(8,7,18,.42) 50%, rgba(8,7,18,.62) 100%);
}

/* Duo — texte a gauche sur fond clair, photo a droite */
/* La couleur va sur le WRAPPER : le hero porte un style="background:none" en
   ligne, qui l'emporterait sur toute regle de feuille de style. */
.v-hero-duo { background: #fff; }
.v-hero-duo .hero { min-height: 0; }
.v-hero-duo .hero-bg {
  inset: 0 0 0 auto; width: 46%; animation: none;
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
}
.v-hero-duo .hero-bg::after { background: none; }
.v-hero-duo .hero::before { display: none; }
.v-hero-duo .hero-content { padding: 116px 32px 96px; }
.v-hero-duo .hero-inner   { max-width: 50%; }
.v-hero-duo .hero h1      { color: #0C0A1E; text-shadow: none; }
.v-hero-duo .hero-sub     { color: #524F7A; }
.v-hero-duo .hero-eyebrow { color: #524F7A; }
.v-hero-duo .hero-btn-ghost { color: #0C0A1E; border-color: #D6D3EE; background: #fff; }
.v-hero-duo .hero-trust     { border-top-color: #E5E3F8; }
.v-hero-duo .hero-trust-item { color: #363258; }
.v-hero-duo .hero-scroll     { display: none; }

/* La variante Duo eclaircit tout le hero, mais le menu vit HORS de la section :
   il gardait son texte blanc concu pour une photo plein cadre, et devenait
   invisible sur le fond clair. Le visiteur n'avait plus de navigation, et le
   client ne pouvait pas comprendre pourquoi son propre menu avait disparu.
   On ne se contente pas d'assombrir le texte : la barre traverse aussi la
   photo de droite, ou du texte sombre serait illisible selon le cliche. Un
   bandeau blanc opaque tient quelle que soit la photo, et la diagonale de la
   photo reprend juste en dessous.
   Selecteur avec :has parce que le menu precede la section dans le document. */
#site-root:has(.v-hero-duo) .site-nav {
  background: #fff;
  border-bottom: 1px solid #E5E3F8;
}
#site-root:has(.v-hero-duo) .nav-brand    { color: #0C0A1E; text-shadow: none; }
#site-root:has(.v-hero-duo) .nav-links a  { color: #524F7A; text-shadow: none; }
#site-root:has(.v-hero-duo) .nav-links a:hover { color: #0C0A1E; }
#site-root:has(.v-hero-duo) .nav-phone    { color: #0C0A1E; text-shadow: none; }
/* Pastille « Ajouter un logo » : blanche sur blanc, elle disparaissait aussi. */
#site-root:has(.v-hero-duo) .nav-logo-btn {
  background: #F5F5FA; border-color: #C9C6EC; color: #524F7A;
}

/* Épuré — aucun visuel, aplat de couleur (pose sur le wrapper, cf. Duo) */
.v-hero-epure { background: var(--p); }
.v-hero-epure .hero { min-height: 0; }
.v-hero-epure .hero-bg    { display: none; }
.v-hero-epure .hero::before { opacity: .1; }
.v-hero-epure .hero-content { padding: 132px 32px 112px; }
.v-hero-epure .hero-inner   { max-width: 780px; margin: 0 auto; text-align: center; }
.v-hero-epure .hero-eyebrow { justify-content: center; }
.v-hero-epure .hero-eyebrow::before { background: rgba(255,255,255,.75); }
.v-hero-epure .hero h1  { text-shadow: none; }
.v-hero-epure .hero-sub { margin-left: auto; margin-right: auto; }
.v-hero-epure .hero-actions, .v-hero-epure .hero-trust { justify-content: center; }
.v-hero-epure .hero-btn { background: #fff; color: #0C0A1E; }
.v-hero-epure .hero-scroll { display: none; }

@media (max-width: 860px) {
  .v-hero-duo .hero-bg    { display: none; }
  .v-hero-duo .hero-inner { max-width: 100%; }
}

/* ════════════════════════════════════════
   VARIANTES DES SECTIONS
   Toutes en CSS pur : le balisage et les ancres [data-f] restent intacts,
   donc les retouches manuelles et l'assistant IA survivent au changement.
   ════════════════════════════════════════ */

/* ── À PROPOS ───────────────────────────────────────────────────────────── */
.v-about-inverse .about-grid   { direction: rtl; }
.v-about-inverse .about-grid > * { direction: ltr; }

.v-about-impact { background: #14121F; }
.v-about-impact .about        { background: transparent; }
.v-about-impact .about-grid   { grid-template-columns: 1fr; text-align: center; max-width: 820px; }
.v-about-impact .about-photo  { display: none; }
.v-about-impact h2            { color: #fff; }
.v-about-impact p             { color: rgba(255,255,255,.76); }
.v-about-impact .section-tag  { background: rgba(255,255,255,.1); color: #fff; }

.v-about-epure .about-grid  { grid-template-columns: 1fr; max-width: 780px; }
.v-about-epure .about-photo { display: none; }

/* ── ATOUTS ─────────────────────────────────────────────────────────────── */
.v-advantages-bandeau .adv-card {
  background: none; border: none; box-shadow: none;
  border-radius: 0; padding: 8px 20px;
  border-left: 2px solid var(--p);
  text-align: left;
}
.v-advantages-bandeau .adv-icon { font-size: 1.2rem; margin-bottom: 8px; }

.v-advantages-numerote .adv-card { counter-increment: adv; text-align: left; position: relative; }
.v-advantages-numerote .adv-grid { counter-reset: adv; }
.v-advantages-numerote .adv-icon { display: none; }
.v-advantages-numerote .adv-card::before {
  content: '0' counter(adv);
  display: block; margin-bottom: 10px;
  font-family: 'Fraunces', serif; font-size: 1.9rem; font-weight: 600;
  color: var(--p); opacity: .5; line-height: 1;
}

.v-advantages-sombre { background: #14121F; }
.v-advantages-sombre .advantages { background: transparent; }
.v-advantages-sombre .adv-card {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12);
}
.v-advantages-sombre .adv-card * { color: #fff; }
.v-advantages-sombre .adv-card p { color: rgba(255,255,255,.7); }

/* ── SERVICES ───────────────────────────────────────────────────────────── */
.v-services-alternance .services-grid { grid-template-columns: 1fr; gap: 22px; }
.v-services-alternance .svc-card {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0;
  overflow: hidden;
}
.v-services-alternance .svc-card > img,
.v-services-alternance .svc-card .svc-photo { height: 100%; min-height: 230px; object-fit: cover; }
.v-services-alternance .svc-card:nth-child(even) > img,
.v-services-alternance .svc-card:nth-child(even) .svc-photo { order: 2; }

.v-services-liste .services-grid { grid-template-columns: 1fr; gap: 0; }
.v-services-liste .svc-card {
  display: flex; align-items: center; gap: 18px;
  background: none; border: none; border-radius: 0; box-shadow: none;
  padding: 20px 4px; border-bottom: 1px solid var(--border, #E5E3F8);
}
.v-services-liste .svc-card > img,
.v-services-liste .svc-card .svc-photo {
  width: 110px; height: 74px; flex-shrink: 0; object-fit: cover; border-radius: 8px;
}

.v-services-sobre .svc-card > img,
.v-services-sobre .svc-card .svc-photo { display: none; }

/* ── POURQUOI NOUS ──────────────────────────────────────────────────────── */
.v-why-sombre .why-us { background: #14121F; }
.v-why-clair  .why-us { background: #F7F6FE; }
.v-why-clair  .why-us *,
.v-why-clair  .why-us h2 { color: #14121F; }
.v-why-clair  .why-us .sub,
.v-why-clair  .why-us .why-us-text { color: #524F7A; }
.v-why-clair  .why-cta { background: var(--p); color: #fff; }
.v-why-gauche .why-us .container { text-align: left; }
.v-why-gauche .why-us-text { margin-left: 0; }

/* ── AVIS ───────────────────────────────────────────────────────────────── */
.v-testimonials-sombre { background: #14121F; }
.v-testimonials-sombre .testimonials { background: transparent; }
.v-testimonials-sombre .section-header h2 { color: #fff; }
.v-testimonials-sombre .section-header p  { color: rgba(255,255,255,.7); }
.v-testimonials-sombre .testi-card {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12);
}
.v-testimonials-sombre .testi-card,
.v-testimonials-sombre .testi-card * { color: #fff; }

.v-testimonials-colonne .testi-grid { grid-template-columns: 1fr; }
.v-testimonials-epure .testi-card {
  background: none; border: none; box-shadow: none; border-radius: 0;
  border-bottom: 1px solid var(--border, #E5E3F8); padding: 22px 4px;
}

/* ── RÉALISATIONS ───────────────────────────────────────────────────────── */
.v-gallery-mosaique .gallery-grid { grid-auto-rows: 150px; }
.v-gallery-mosaique .gallery-grid > *:nth-child(3n+1) { grid-row: span 2; }
.v-gallery-mosaique .gallery-grid > * { height: 100%; }
.v-gallery-mosaique .gallery-grid img { height: 100%; object-fit: cover; }

.v-gallery-large .gallery-grid { grid-template-columns: 1fr 1fr; }
.v-gallery-large .gallery-grid img { height: 320px; object-fit: cover; }

.v-gallery-sombre { background: #14121F; }
.v-gallery-sombre .gallery { background: transparent; }
.v-gallery-sombre .section-header h2 { color: #fff; }
.v-gallery-sombre .section-header p  { color: rgba(255,255,255,.7); }

/* ── CONTACT ────────────────────────────────────────────────────────────── */
.v-contact-inverse .contact-grid   { direction: rtl; }
.v-contact-inverse .contact-grid > * { direction: ltr; }

.v-contact-sombre { background: #14121F; }
.v-contact-sombre .contact { background: transparent; }
.v-contact-sombre h2, .v-contact-sombre .contact-items { color: #fff; }
.v-contact-sombre p, .v-contact-sombre .contact-items * { color: rgba(255,255,255,.78); }
.v-contact-sombre .section-tag { background: rgba(255,255,255,.1); color: #fff; }
.v-contact-sombre input, .v-contact-sombre textarea {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff;
}
.v-contact-sombre input::placeholder, .v-contact-sombre textarea::placeholder {
  color: rgba(255,255,255,.45);
}

.v-contact-centre .contact-grid    { grid-template-columns: 1fr; max-width: 640px; }
.v-contact-centre .contact-info-col { display: none; }

@media (max-width: 860px) {
  .v-services-alternance .svc-card { grid-template-columns: 1fr; }
  .v-services-alternance .svc-card:nth-child(even) > img,
  .v-services-alternance .svc-card:nth-child(even) .svc-photo { order: 0; }
  .v-gallery-large .gallery-grid { grid-template-columns: 1fr; }
  .v-about-inverse .about-grid, .v-contact-inverse .contact-grid { direction: ltr; }
}

/* ── Barre "modifications non enregistrees" ─────────────────────────────── */
.sv-bar {
  position: fixed; left: 22px; bottom: 22px; z-index: 95;
  display: none; align-items: center; gap: 14px;
  padding: 11px 12px 11px 18px;
  background: #14121F; color: #fff;
  border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
  box-shadow: 0 16px 44px -14px rgba(0,0,0,.7);
  font-family: 'Manrope', sans-serif;
}
.sv-bar.open { display: flex; animation: svRise .26s cubic-bezier(.16,1,.3,1); }
@keyframes svRise { from { opacity: 0; transform: translateY(12px); } }

.sv-txt { font-size: .84rem; font-weight: 600; }
.sv-bar::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: #FBBF24; flex-shrink: 0; margin-right: -6px;
}
.sv-bar.ok::before { background: #34D399; }
.sv-bar.ok { border-color: rgba(52,211,153,.4); }

.sv-btn {
  padding: 8px 18px; border: none; border-radius: 8px; cursor: pointer;
  background: linear-gradient(135deg,#6665DD,#8B5CF6); color: #fff;
  font-family: 'Manrope', sans-serif; font-size: .82rem; font-weight: 700;
  white-space: nowrap;
}
.sv-btn:hover:not(:disabled) { filter: brightness(1.1); }
.sv-btn:disabled { opacity: .6; cursor: default; }

@media (max-width: 560px) {
  .sv-bar { left: 12px; right: 12px; bottom: 12px; justify-content: space-between; }

  /* Sur téléphone la barre d'enregistrement prend toute la largeur, juste là
     où se tenait le bouton de l'assistant : il passait dessous, à moitié
     masqué, et son coin arrondi dépassait sous « Enregistrer ». */
  body:has(.sv-bar.open) .ia-fab { bottom: 86px; }
}

/* ─── Sélecteur de palettes (éditeur) ─────────────────────────────────────── */
.color-pickers { position: relative; }

.palette-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 12px;
  border: 1px solid #E2E2EA; border-radius: 8px;
  background: #fff; cursor: pointer;
  font-family: inherit; font-size: .78rem; font-weight: 600; color: #3F434B;
  transition: border-color .15s, box-shadow .15s;
}
.palette-toggle:hover { border-color: #C9C9D6; }
.palette-toggle[aria-expanded="true"] {
  border-color: #A9A9C0; box-shadow: 0 0 0 3px rgba(102,101,221,.12);
}
.pt-puce {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--p); flex: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.pt-nom { white-space: nowrap; }

.palette-menu {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 1200;
  width: 320px; padding: 15px;
  background: #fff;
  border: 1px solid #E6E6EE; border-radius: 12px;
  box-shadow: 0 24px 60px -20px rgba(20,18,40,.34);
  animation: pmOuvre .18s cubic-bezier(.2,.8,.3,1);
}
.palette-menu[hidden] { display: none; }
@keyframes pmOuvre { from { opacity: 0; transform: translateY(-6px); } }

.pm-titre {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #8A8FA0; margin-bottom: 11px;
}
.pm-grille {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;
}
.pm-choix {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 9px 5px 8px;
  border: 1px solid transparent; border-radius: 9px;
  background: #F7F7FA; cursor: pointer;
  font-family: inherit; font-size: .69rem; font-weight: 600; color: #5A5F6B;
  transition: background .15s, border-color .15s, transform .15s;
}
.pm-choix:hover { background: #F0F0F6; transform: translateY(-1px); }
.pm-choix.actif {
  border-color: var(--p);
  background: #fff;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--p) 18%, transparent);
}
.pmc-disques { display: flex; }
.pmc-disques span {
  width: 15px; height: 15px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
  margin-left: -4px;
}
.pmc-disques span:first-child { margin-left: 0; }
.pmc-nom { line-height: 1; }

.pm-sur-mesure {
  display: flex; gap: 16px; justify-content: space-between;
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid #EDEDF3;
}

@media (max-width: 720px) {
  .palette-menu { width: min(300px, calc(100vw - 28px)); }
  .pm-grille { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════════════
   REFONTE — rendu des sites générés
   ════════════════════════════════════════════════════════════════════════════
   Le hero tenait déjà la route ; tout ce qui suivait retombait sur un gabarit
   reconnaissable : cartes plates, fonds bleutés quelle que soit la palette,
   titres trop petits, rythme vertical uniforme. Ce bloc reprend le corps de
   page en gardant l'esprit éditorial du hero — serif de titrage, filets fins,
   surfaces chaudes teintées par le métier, accent employé avec parcimonie.

   Il est ajouté en fin de feuille plutôt qu'inséré : il s'applique ainsi aussi
   aux sites déjà figés dans content.html, dont le balisage ne change plus.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --encre:      #17181C;
  --encre-2:    #3F434B;
  --encre-3:    #6B7079;
  --filet:      #E4E2DE;
  --surface:    #FFFFFF;
  /* Le fond alterné dérive de la palette du métier : un site menuiserie
     respire dans le crème, un site plomberie dans le bleu pâle. C'est --pl,
     posé par theme.js. */
  --surface-2:  var(--pl, #F7F6F4);
  --rythme:     clamp(76px, 8.5vw, 128px);
}

body { color: var(--encre); background: var(--surface); }

::selection { background: var(--p); color: #fff; }

:focus-visible {
  outline: 2px solid var(--p);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ─── Rythme et surfaces ──────────────────────────────────────────────────── */
.about, .advantages, .services, .process, .gallery, .contact {
  padding: var(--rythme) 0;
}
.about    { background: var(--surface); }
.advantages { background: var(--surface); padding-top: 0; }
.services { background: var(--surface-2); }
.process  { background: var(--surface); }
.gallery  { background: var(--surface-2); }
.contact  { background: var(--surface); }

/* padding-inline et non la notation raccourcie : « padding: 0 X » remet à zéro
   les marges hautes et basses. .footer-grid et .footer-bas sont aussi des
   .container et portent leur propre padding vertical — ils l'ont perdu, et le
   pied de page s'est retrouvé écrasé, le trait de séparation collé au texte. */
.container { max-width: 1160px; padding-inline: clamp(20px, 4vw, 40px); }

/* ─── En-têtes de section ─────────────────────────────────────────────────── */
.section-header { text-align: left; max-width: 640px; margin-bottom: clamp(40px, 5vw, 64px); }

.section-tag {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: 'Manrope', sans-serif;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--p);
  background: none; padding: 0; border-radius: 0;
  margin-bottom: 16px;
}
.section-tag::before {
  content: ''; width: 26px; height: 2px; background: var(--p); flex: none;
}

.section-header h2,
.about-text h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 600;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
  line-height: 1.08;
  letter-spacing: -.022em;
  color: var(--encre);
  text-wrap: balance;
}
.section-header p {
  margin-top: 14px;
  font-size: 1.02rem; line-height: 1.65;
  color: var(--encre-3);
  max-width: 54ch;
}

/* ─── À propos ────────────────────────────────────────────────────────────── */
.about-grid {
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.about-text p {
  font-size: 1.02rem; line-height: 1.78; color: var(--encre-2);
  margin-bottom: 30px; max-width: 56ch;
}
.about-btn {
  padding: 14px 28px; border-radius: 3px;
  font-size: .93rem; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 12px 26px -14px var(--p);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), background .2s;
}
.about-btn:hover { transform: translateY(-2px); }

/* Filet décalé derrière la photo : un peu de profondeur sans ombre lourde */
.about-photo {
  position: relative;
  min-height: clamp(300px, 42vw, 480px);
  border-radius: 3px;
  box-shadow: 0 30px 60px -34px rgba(20,18,14,.5);
}
.about-photo::after {
  content: ''; position: absolute; inset: 0;
  border: 1px solid var(--pa, rgba(0,0,0,.12));
  transform: translate(16px, 16px);
  border-radius: 3px; z-index: -1;
  pointer-events: none;
}

/* ─── Points forts ────────────────────────────────────────────────────────── */
.adv-grid { gap: clamp(18px, 2.4vw, 30px); }
.adv-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 3px;
  padding: 34px 28px 30px;
  box-shadow: none;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}
/* Filet d'accent qui se déploie au survol */
.adv-card::before {
  content: ''; position: absolute; top: -1px; left: -1px;
  width: 46px; height: 3px; background: var(--p);
  transition: width .35s cubic-bezier(.2,.7,.3,1);
}
.adv-card:hover {
  transform: translateY(-4px);
  border-color: var(--pa, var(--filet));
  box-shadow: 0 22px 44px -28px rgba(20,18,14,.42);
}
.adv-card:hover::before { width: calc(100% + 2px); }

.adv-icon {
  width: 46px; height: 46px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; line-height: 1;
  background: var(--surface-2);
  border-radius: 50%;
}
.adv-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--encre); margin-bottom: 10px;
}
.adv-card p { font-size: .92rem; line-height: 1.7; color: var(--encre-3); }

/* ─── Services ────────────────────────────────────────────────────────────── */
.services-grid { gap: clamp(18px, 2.4vw, 28px); }
.svc-card {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: none;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s;
}
.svc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 56px -32px rgba(20,18,14,.5);
}
.svc-photo {
  aspect-ratio: 4 / 3; height: auto;
  background-size: cover; background-position: center;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.svc-card:hover .svc-photo { transform: scale(1.045); }
.svc-body { padding: 26px 26px 28px; }
.svc-icon {
  font-size: 1.2rem; line-height: 1; margin-bottom: 12px;
  display: block;
}
.svc-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.16rem; font-weight: 600; letter-spacing: -.012em;
  color: var(--encre); margin-bottom: 9px;
}
.svc-card p { font-size: .92rem; line-height: 1.7; color: var(--encre-3); }

/* ─── Pourquoi nous ───────────────────────────────────────────────────────── */
/* L'aplat uni faisait « bandeau de gabarit ». Dégradé profond + grain, texte
   en serif, mesure resserrée : la section devient une prise de parole. */
.why-us {
  position: relative;
  padding: clamp(84px, 9vw, 140px) 0;
  background: linear-gradient(150deg, var(--pd) 0%, var(--p) 58%, var(--pd) 100%);
  overflow: hidden;
  isolation: isolate;
}
.why-us::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  opacity: .2; mix-blend-mode: overlay;
  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='.5'/%3E%3C/svg%3E");
  border-radius: 0; transform: none; width: auto; height: auto;
}
.why-us > .container { position: relative; z-index: 1; text-align: center; }
.why-us h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 600; font-variation-settings: 'SOFT' 20, 'WONK' 1;
  line-height: 1.1; letter-spacing: -.024em;
  color: #fff; margin: 0 auto 14px; max-width: 18ch;
  text-wrap: balance;
}
.why-us .sub {
  font-style: normal;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin-bottom: 26px;
}
.why-us-text {
  max-width: 60ch; margin: 0 auto 38px;
  font-size: 1.05rem; line-height: 1.8;
  color: rgba(255,255,255,.9);
}
.why-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 34px; border-radius: 3px;
  background: #fff; color: var(--pd);
  font-size: .95rem; font-weight: 700;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.55);
  transition: transform .2s cubic-bezier(.2,.7,.3,1);
}
.why-cta:hover { transform: translateY(-2px); }

/* ─── Déroulement ─────────────────────────────────────────────────────────── */
.process-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
  gap: clamp(24px, 3vw, 40px);
  counter-reset: etape;
}
.process-step { position: relative; padding-top: 30px; }
/* Filet horizontal qui relie les étapes */
.process-step::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: var(--filet);
}
.process-step::after {
  content: ''; position: absolute; top: -3px; left: 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--p);
}
.ps-num {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2.4rem; font-weight: 600;
  line-height: 1; letter-spacing: -.03em;
  color: var(--pa, var(--filet));
  margin-bottom: 14px;
}
.process-step h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.1rem; font-weight: 600; letter-spacing: -.012em;
  color: var(--encre); margin-bottom: 10px;
}
.process-step p { font-size: .92rem; line-height: 1.7; color: var(--encre-3); }

/* ─── Réalisations ────────────────────────────────────────────────────────── */
.gallery-grid { gap: clamp(14px, 1.8vw, 22px); }
.gallery-item {
  position: relative;
  border-radius: 3px; overflow: hidden;
  aspect-ratio: 4 / 3;
  background-size: cover; background-position: center;
  transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .4s;
}
.gallery-item:hover {
  transform: scale(1.015);
  box-shadow: 0 30px 58px -32px rgba(20,18,14,.55);
}
/* Voile qui se lève : la photo gagne en contraste au repos, se révèle au survol */
.gallery-item::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16,14,10,.34), transparent 62%);
  transition: opacity .4s;
}
.gallery-item:hover::after { opacity: 0; }

/* ─── Contact ─────────────────────────────────────────────────────────────── */
.contact-grid { gap: clamp(36px, 4.5vw, 68px); align-items: start; }
.contact-info-col h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 600;
  letter-spacing: -.02em; margin-bottom: 12px;
}
.contact-info-col > p { font-size: 1rem; line-height: 1.7; color: var(--encre-3); margin-bottom: 32px; }

.contact-item {
  align-items: center; gap: 14px;
  font-size: .95rem; color: var(--encre-2);
  padding: 12px 0; border-bottom: 1px solid var(--filet);
}
.contact-item:last-child { border-bottom: none; }
.contact-item svg { width: 17px; height: 17px; }

.contact-form { gap: 14px; }
.contact-form input,
.contact-form textarea {
  padding: 15px 16px;
  border: 1px solid var(--filet);
  border-radius: 3px;
  font-size: .95rem;
  background: var(--surface);
  transition: border-color .2s, box-shadow .2s;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--p);
  box-shadow: 0 0 0 3px var(--pl, rgba(0,0,0,.05));
  outline: none;
}
.contact-form textarea { height: 132px; }

/* ─── Carte ───────────────────────────────────────────────────────────────── */
.map-wrap {
  margin-top: 26px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--filet);
  min-height: 220px;
  background: var(--surface-2);
  filter: saturate(.72) contrast(1.02);
  transition: filter .4s;
}
.map-wrap:hover { filter: none; }

/* ─── Bouton d'envoi ──────────────────────────────────────────────────────── */
.form-submit {
  padding: 16px 26px;
  border-radius: 3px;
  font-size: .95rem; font-weight: 700; letter-spacing: .01em;
  border: none; cursor: pointer;
  background: var(--p); color: #fff;
  box-shadow: 0 14px 30px -16px var(--p);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), background .2s;
}
.form-submit:hover { background: var(--pd); transform: translateY(-2px); }

/* ─── Apparition au défilement ────────────────────────────────────────────── */
/* L'état masqué n'est appliqué QUE si le script a posé .reveal-on sur <html>,
   après avoir vérifié qu'IntersectionObserver existe. Sans JavaScript, sans
   observateur, ou si le script échoue, le contenu reste simplement visible :
   une animation ratée ne doit jamais effacer le site d'un client. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-on .a-reveler {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.16,1,.3,1),
                transform .7s cubic-bezier(.16,1,.3,1);
  }
  .reveal-on .a-reveler.revele { opacity: 1; transform: none; }
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { min-height: 280px; order: -1; }
  .about-photo::after { display: none; }
}
@media (max-width: 640px) {
  .section-header h2, .about-text h2 { font-size: clamp(1.7rem, 7vw, 2.1rem); }
  .adv-card, .svc-body { padding: 24px 20px; }
}

/* ─── Variantes de pied de page ───────────────────────────────────────────── */
/* Le pied de page n'était pas une section : ni style, ni déplacement, ni
   texte modifiable au-delà du nom. Il est désormais traité comme les autres. */

.v-footer-clair .site-footer {
  background: var(--pl);
  color: var(--encre);
  border-top: 1px solid var(--filet);
}
.v-footer-clair .site-footer .footer-nom,
.v-footer-clair .site-footer .footer-titre,
.v-footer-clair .site-footer strong { color: var(--encre); }
.v-footer-clair .site-footer a,
.v-footer-clair .site-footer li,
.v-footer-clair .site-footer p,
.v-footer-clair .site-footer span { color: var(--encre-2); }
.v-footer-clair .site-footer a:hover { color: var(--p); }
.v-footer-clair .footer-cta {
  background: var(--surface);
  border: 1px solid var(--filet);
}
.v-footer-clair .footer-cta-btn { background: var(--p); color: #fff; }
.v-footer-clair .footer-bas { border-top-color: var(--filet); }
.v-footer-clair .fc-ico { background: var(--pa); color: var(--pd); }

.v-footer-compact .footer-col,
.v-footer-compact .footer-cta { display: none; }
.v-footer-compact .footer-grid { grid-template-columns: 1fr; }
.v-footer-compact .footer-coords {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
}

.v-footer-accent .site-footer {
  background: linear-gradient(150deg, var(--pd) 0%, var(--p) 62%, var(--pd) 100%);
}
.v-footer-accent .footer-cta {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
}
.v-footer-accent .footer-cta-btn { background: #fff; color: var(--pd); }
.v-footer-accent .fc-ico { background: rgba(255,255,255,.16); color: #fff; }

/* ─── Import de photos ────────────────────────────────────────────────────── */
/* Les zones de photo sont cliquables : le curseur doit le dire, sinon le
   libellé « cliquer pour changer » reste une promesse invérifiable. */
.hero-change-img,
.about-photo,
.svc-photo,
.gallery-add { cursor: pointer; }

body:has(.editor-bar) .gallery-item { cursor: pointer; position: relative; }
body:has(.editor-bar) .gallery-item::before {
  content: '📷 Remplacer';
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,10,26,.55);
  color: #fff; font-family: Inter, sans-serif;
  font-size: .8rem; font-weight: 600;
  opacity: 0; transition: opacity .2s;
}
body:has(.editor-bar) .gallery-item:hover::before { opacity: 1; }

/* Envoi en cours : la zone se voile et un disque tourne au centre. Sans
   retour visible, on reclique pendant l'envoi et on lance deux téléversements. */
.photo-envoi { position: relative; pointer-events: none; }
.photo-envoi::after {
  content: '';
  position: absolute; top: 50%; left: 50%; z-index: 5;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border: 3px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: photoTourne .8s linear infinite;
}
.photo-envoi::before {
  content: ''; position: absolute; inset: 0; z-index: 4;
  background: rgba(12,10,26,.5);
  opacity: 1;
}
@keyframes photoTourne { to { transform: rotate(360deg); } }

/* ─── Mentions légales dans les paramètres ────────────────────────────────── */
.params-hint {
  font-size: .78rem; line-height: 1.55;
  color: #64748B;
  margin: -4px 0 16px;
}
/* Tant que l'essentiel manque, le message doit se voir : le client est en
   infraction sans le savoir, ce n'est pas une préférence de présentation. */
.params-hint-alerte {
  color: #92400E;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 8px;
  padding: 10px 12px;
}

/* ─── Section vidéo ───────────────────────────────────────────────────────── */
.video-sec { padding: var(--rythme) 0; background: var(--surface); }

.video-cadre {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 3px;
  overflow: hidden;
  background: #111117;
  box-shadow: 0 30px 60px -34px rgba(20,18,14,.55);
}
.video-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-cadre:empty { display: none; }

/* Variantes */
.v-video-cadre .video-sec  { background: var(--surface-2); }
.v-video-cadre .video-cadre { max-width: 820px; margin: 0 auto; }

.v-video-sombre .video-sec { background: #111117; }
.v-video-sombre .section-header h2 { color: #fff; }
.v-video-sombre .section-header p  { color: rgba(255,255,255,.66); }

.v-video-cote .video-sec > .container {
  display: grid; grid-template-columns: 1.2fr .8fr;
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.v-video-cote .section-header { margin-bottom: 0; order: 2; }
.v-video-cote .video-cadre { order: 1; }

@media (max-width: 860px) {
  .v-video-cote .video-sec > .container { grid-template-columns: 1fr; }
  .v-video-cote .section-header { order: 1; margin-bottom: 28px; }
  .v-video-cote .video-cadre { order: 2; }
}

/* État du champ dans les paramètres */
.params-etat { display: block; margin-top: 6px; font-size: .75rem; line-height: 1.45; }
.params-etat.ok     { color: #0E9F6E; }
.params-etat.erreur { color: #B42318; }

/* Invitation à ajouter une vidéo — visible dans l'éditeur seulement, retirée
   du HTML publié comme le reste du mobilier d'édition. */
.video-ajout {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; width: 100%;
  aspect-ratio: 16 / 9; max-height: 320px;
  border: 2px dashed var(--pa, #D6D6E2);
  border-radius: 3px;
  background: var(--surface-2);
  color: var(--encre-3);
  font-family: 'Manrope', sans-serif; font-size: .92rem; font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.video-ajout svg { width: 34px; height: 34px; opacity: .55; }
.video-ajout:hover {
  border-color: var(--p); color: var(--p);
  background: var(--surface);
}

/* ─── Logo du client ──────────────────────────────────────────────────────── */
/* Les logos arrivent dans toutes les formes : carré, bandeau très large,
   vertical. On contraint la hauteur et on laisse la largeur suivre, avec un
   plafond — sinon un logo panoramique pousse la navigation hors de l'écran. */
.nav-logo {
  height: 34px; width: auto; max-width: 180px;
  object-fit: contain; display: block;
  margin-right: 12px;
}
.nav-brand.a-logo { display: flex; align-items: center; }
/* Avec un logo, le nom écrit devient redondant sur les petits écrans. */
@media (max-width: 700px) {
  .nav-brand.a-logo span { display: none; }
  .nav-logo { max-width: 150px; }
}

.footer-logo {
  height: 42px; width: auto; max-width: 210px;
  object-fit: contain; display: block;
  margin-bottom: 16px;
  /* Le pied de page est sombre : un logo sombre y disparaîtrait. */
  background: rgba(255,255,255,.9);
  border-radius: 6px;
  padding: 6px 10px;
}
.v-footer-clair .footer-logo { background: none; padding: 0; }
.footer-brand.a-logo .footer-nom { font-size: 1.1rem; opacity: .85; }

/* Le bouton d'ajout disparaît une fois le logo posé */
.nav-brand.a-logo ~ .nav-logo-btn,
.nav-brand.a-logo .nav-logo-btn { display: none !important; }

body:has(.editor-bar) .nav-logo,
body:has(.editor-bar) .footer-logo { cursor: context-menu; }

/* ─── Tarifs ──────────────────────────────────────────────────────────────── */
.tarifs { padding: var(--rythme) 0; background: var(--surface-2); }

.tf-liste { list-style: none; margin: 0; padding: 0; max-width: 720px; }
.tf-ligne {
  display: flex; align-items: baseline; gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--filet);
}
.tf-ligne:last-child { border-bottom: none; }

.tf-nom {
  font-size: 1rem; font-weight: 600; color: var(--encre);
  flex: none; max-width: 60%;
}
/* Les pointillés relient la prestation à son prix : sans eux, l'œil perd la
   ligne dès que le nom est court et le prix loin à droite. */
.tf-points {
  flex: 1; min-width: 20px;
  border-bottom: 1px dotted var(--pa, #CFCFD8);
  transform: translateY(-4px);
}
.tf-prix {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.1rem; font-weight: 600; color: var(--p);
  white-space: nowrap; flex: none;
}

.tf-mention {
  margin-top: 22px; max-width: 720px;
  font-size: .8rem; line-height: 1.6; color: var(--encre-3);
}

/* Bouton d'ajout et de retrait — mobilier d'édition, retiré à la publication */
.tf-ajout {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; max-width: 720px; margin-top: 16px; padding: 15px;
  border: 2px dashed var(--pa, #D6D6E2); border-radius: 3px;
  background: none; color: var(--encre-3);
  font-family: 'Manrope', sans-serif; font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: border-color .2s, color .2s;
}
.tf-ajout svg { width: 17px; height: 17px; }
.tf-ajout:hover { border-color: var(--p); color: var(--p); }

.tf-retirer {
  flex: none; width: 24px; height: 24px; border-radius: 6px;
  border: none; background: none; color: #B42318;
  font-size: .85rem; cursor: pointer; opacity: 0;
  transition: opacity .15s, background .15s;
}
.tf-ligne:hover .tf-retirer { opacity: .7; }
.tf-retirer:hover { opacity: 1; background: #FEF3F2; }

/* Section vide : visible dans l'éditeur, jamais publiée */
.tf-vide .tf-mention { display: none; }
body:not(:has(.editor-bar)) .tf-vide { display: none; }

/* Variantes */
.v-tarifs-cartes .tf-liste {
  max-width: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}
.v-tarifs-cartes .tf-ligne {
  border: 1px solid var(--filet); border-radius: 3px;
  padding: 16px 18px; background: var(--surface);
}
.v-tarifs-cartes .tf-points { display: none; }
.v-tarifs-cartes .tf-nom { flex: 1; max-width: none; }

.v-tarifs-sombre .tarifs { background: #111117; }
.v-tarifs-sombre .section-header h2 { color: #fff; }
.v-tarifs-sombre .section-header p,
.v-tarifs-sombre .tf-mention { color: rgba(255,255,255,.6); }
.v-tarifs-sombre .tf-nom { color: rgba(255,255,255,.92); }
.v-tarifs-sombre .tf-ligne { border-bottom-color: rgba(255,255,255,.12); }
.v-tarifs-sombre .tf-points { border-bottom-color: rgba(255,255,255,.24); }

.v-tarifs-accent .tf-prix {
  background: var(--p); color: #fff;
  padding: 4px 12px; border-radius: 999px;
  font-size: .95rem;
}

/* ─── Index du contenu, dans les paramètres ───────────────────────────────── */
.params-index { display: flex; flex-direction: column; gap: 6px; }
.pi-lien {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-radius: 9px;
  border: 1px solid #E6E6EE; background: #FCFCFE;
  font-family: inherit; font-size: .86rem; font-weight: 600; color: #3F434B;
  cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s;
}
.pi-lien::after { content: '→'; color: #9AA0AC; }
.pi-lien:hover { border-color: #6665DD; background: #fff; color: #6665DD; }
.pi-lien:hover::after { color: #6665DD; }

/* Halo bref sur la section visée : arriver au bon endroit ne suffit pas, il
   faut savoir sur quoi porter le regard. */
@keyframes piHalo {
  0%, 100% { box-shadow: inset 0 0 0 0 transparent; }
  20%, 70% { box-shadow: inset 0 0 0 3px var(--p); }
}
.pi-cible { animation: piHalo 1.8s ease; }

/* Boutons de la barre, en papier et encre. Ils reprenaient le violet du site
   du client, donc changeaient de couleur d'un site à l'autre. */
.editor-bar .eb-btn {
  background: var(--ch-carte); border: 1px solid var(--ch-trait);
  color: var(--ch-encre); font-weight: 600;
}
.editor-bar .eb-btn:hover { background: rgba(139,69,19,.07); }
.editor-bar .eb-publish {
  background: var(--ch-accent); border-color: var(--ch-accent); color: #FFFDF8;
}
.editor-bar .eb-publish:hover { background: #6F3610; border-color: #6F3610; }
.editor-bar .palette-toggle {
  background: var(--ch-carte); border: 1px solid var(--ch-trait); color: var(--ch-encre);
}

/* Le site suspendu pousse le contenu : le bandeau n'est affiché que là. */
body:has(.edit-banner:not([hidden])) { padding-top: calc(var(--bar) + 40px) !important; }


/* Le hero porte la navigation du site sur toute sa largeur : sans decalage, la
   barre d'outils recouvre le nom de l'entreprise et le bouton logo. On la
   descend sous le menu. */
.section-wrap[data-sec="hero"] .sec-tools { top: 92px; }
@media (max-width: 860px) {
  .section-wrap[data-sec="hero"] .sec-tools { top: 78px; }
}

/* Le domaine du client, quand il en a un. Il passe avant l'adresse technique
   parce que c'est celle-là que ses clients voient — l'inverse laissait croire
   que son domaine n'était pas pris en compte. */
.params-domaine {
  margin-bottom: 14px; padding: 12px 14px;
  border: 1px solid var(--ch-trait); border-radius: 8px; background: var(--ch-carte);
}
.params-domaine[hidden] { display: none; }
.params-domaine-etiquette {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ch-doux);
}
.params-domaine-nom {
  display: block; margin-top: 4px;
  font-size: .98rem; font-weight: 700; color: var(--ch-accent); text-decoration: none;
}
.params-domaine-nom:hover { text-decoration: underline; }
.params-domaine-etat {
  display: block; margin-top: 4px; font-size: .76rem; color: var(--ch-doux);
}

/* ✕ des photos de galerie — même geste que celui des services. Visible au
   survol seulement : en permanence, douze croix transformeraient la galerie
   en champ de mines. */
.gallery-remove-btn {
  position: absolute; top: 8px; right: 8px; z-index: 5;
  display: none; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(17, 17, 32, .78); color: #fff;
  font-size: .8rem; line-height: 1;
}
.gallery-item:hover .gallery-remove-btn { display: flex; }
.gallery-remove-btn:hover { background: #B42318; }