/* AzeSite 054 — finitions visuelles locales, sans changement fonctionnel. */
:root { --az54-blue:#0866ff; --az54-navy:#102443; --az54-line:#dbe7f5; }

/* Six exemples : grandes captures, hiérarchie de lecture, véritables liens. */
#exemples .samples {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}
#exemples .samplecard {
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:14px 14px 18px;
  border:1px solid #dfe8f4;
  border-radius:22px;
  background:#fff;
  box-shadow:0 9px 28px rgba(20,51,93,.045);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
#exemples .samplecard:hover,
#exemples .samplecard:focus-within {
  transform:translateY(-4px);
  border-color:#aacafb;
  box-shadow:0 22px 50px rgba(19,60,116,.12);
}
#exemples .samplecard .site-shot {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1.6;
  object-fit:cover;
  object-position:top center;
  border-radius:13px;
  border:1px solid #eaf0f7;
  margin:0 0 19px;
  background:#f5f8fc;
}
#exemples .samplecard .sample-category {
  display:inline-flex;
  align-self:flex-start;
  margin:0 9px 9px;
  padding:5px 10px;
  background:#ecf3ff;
  color:#0755cb;
  border-radius:999px;
  font-size:12px;
  font-weight:750;
  line-height:1.3;
}
#exemples .samplecard h3 {
  margin:0 9px 8px;
  font-size:clamp(18px,1.55vw,22px);
  letter-spacing:-.027em;
  line-height:1.3;
  color:#142b4d;
}
#exemples .samplecard p {
  flex:1;
  margin:0 9px 20px;
  font-size:14px;
  line-height:1.65;
  color:#61718a;
}
#exemples .samplecard > a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 8px 2px;
  padding:12px 15px;
  color:#0759db;
  font-size:14px;
  font-weight:750;
  text-decoration:none;
  background:#eef5ff;
  border:1px solid #d7e7ff;
  border-radius:11px;
  transition:background .2s ease,color .2s ease;
}
#exemples .samplecard > a::before { content:""; position:absolute; inset:0; border-radius:22px; }
#exemples .samplecard > a::after { content:"↗"; font-size:19px; line-height:1; }
#exemples .samplecard:hover > a,
#exemples .samplecard:focus-within > a { color:#fff; background:#0866ff; border-color:#0866ff; }
#exemples .samplecard > a:focus-visible { outline:3px solid #0866ff; outline-offset:3px; }

/* En-tête de la démonstration et zone d'édition : style AzeSite. */
#modifications .edit-demo {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:30px;
  align-items:center;
  overflow:hidden;
  border:1px solid #d4e5fb;
  border-radius:24px;
  background:linear-gradient(135deg,#f4f8ff,#edf5ff);
  box-shadow:0 20px 52px rgba(14,53,110,.08);
  padding:28px;
}
#modifications .edit-demo::before {
  content:"AzeSite  ·  espace de démonstration";
  display:block;
  grid-column:1/-1;
  margin:-28px -28px 0;
  padding:16px 28px;
  background:#102443;
  color:#fff;
  font-size:14px;
  font-weight:750;
  letter-spacing:.015em;
}
#modifications .edit-demo > div:first-of-type { min-width:0; }
#modifications .edit-demo h3 { font-size:clamp(22px,2.1vw,30px); color:#102443; }
#modifications .edit-demo [data-text] {
  max-width:100%;
  padding:6px 9px;
  border:1px dashed transparent;
  border-radius:9px;
  background:transparent;
  color:inherit;
  text-align:left;
  line-height:1.5;
  white-space:normal;
  transition:background .15s ease,border-color .15s ease;
}
#modifications .edit-demo [data-text]::after {
  content:"✎";
  display:inline-block;
  margin-left:9px;
  color:#0866ff;
  font-size:.72em;
  vertical-align:middle;
}
#modifications .edit-demo [data-text]:hover,
#modifications .edit-demo [data-text]:focus-visible {
  background:#fff;
  border-color:#89b7ff;
  outline:2px solid transparent;
}
#modifications #reset-inline {
  display:inline-flex;
  margin-top:9px;
  padding:10px 14px;
  border:1px solid #c4d9f7;
  border-radius:10px;
  background:#fff;
  color:#0759db;
  font-size:13px;
  font-weight:750;
  text-decoration:none;
}
#modifications #reset-inline:hover,
#modifications #reset-inline:focus-visible { background:#e6f0ff; outline:2px solid #87b5ff; }
#modifications .hours-card {
  min-width:0;
  padding:25px;
  background:#fff;
  border:1px solid #dbe7f5;
  border-radius:18px;
  box-shadow:0 14px 30px rgba(22,55,95,.08);
}
#modifications .editable-day {
  min-height:49px;
  padding:10px 9px;
  gap:8px;
  border-bottom:1px solid #e9eff6;
  border-radius:6px;
  font-size:14px;
  transition:background .15s ease;
}
#modifications .editable-day b { margin-left:auto; color:#142b4d; white-space:nowrap; }
#modifications .editable-day::after { content:"✎"; color:#0866ff; opacity:.4; font-size:13px; }
#modifications .editable-day:hover,
#modifications .editable-day:focus-visible { background:#eff5ff; outline:2px solid #a4c6ff; outline-offset:0; }
#modifications #hours-status { display:inline-block; margin-top:12px; color:#0759db; font-weight:700; }

/* Panneau de modification : les fonctions et champs actuels restent inchangés. */
#hours-panel {
  border-radius:22px 0 0 22px;
  padding:25px;
  color:#102443;
  background:#fff;
  box-shadow:-20px 0 65px rgba(15,35,68,.24);
}
#hours-panel::backdrop { background:rgba(7,25,53,.55); }
#hours-panel header { position:static; padding:0 0 17px; border-bottom:1px solid #e1eaf5; background:transparent; }
#hours-panel h2 { margin:0; font-weight:800; color:#102443; }
#hours-panel button { border-color:#cbdcf1; border-radius:9px; color:#164272; font-weight:650; }
#hours-panel button:hover { background:#eaf3ff; }
#hours-panel [data-close]:last-child { color:#fff; background:#0866ff; border-color:#0866ff; }
#hours-panel [data-close]:last-child:hover { background:#0055dd; }
#hours-panel input:not([type=checkbox]),
#hours-panel textarea { border:1px solid #c6d6eb; border-radius:8px; padding:10px; box-sizing:border-box; }
#hours-panel input:focus-visible,
#hours-panel textarea:focus-visible { outline:2px solid #0866ff; outline-offset:1px; }
#hours-panel fieldset { border-color:#dae6f3; border-radius:12px; }
#hours-panel #feedback:not(:empty) { color:#8b3418; padding:8px 0; }

/* Illustration d'accueil issue d'une vraie capture fictive, jamais d'un client réel. */
.hero .sitepreview.sitepreview--real { padding:0; background:#fff; }
.hero .sitepreview.sitepreview--real img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1.6;
  object-fit:cover;
  object-position:top;
}
.hero .browser:has(.sitepreview--real) { overflow:hidden; }

/* Hiérarchie du prix proposé, sans enlever les réserves commerciales. */
#tarif .price { max-width:515px; border-radius:24px; padding:36px 32px; }
#tarif .amount { margin:17px 0 7px; line-height:1.1; }
#tarif #launch-price { font-size:clamp(50px,6vw,76px); font-weight:850; color:#102443; letter-spacing:-.055em; }
#tarif .price ul { margin:22px 0; }

@media(max-width:1100px) { #exemples .samples { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:720px) {
  #exemples .samples { grid-template-columns:1fr; gap:18px; }
  #exemples .samplecard { padding:13px 13px 17px; }
  #modifications .edit-demo { grid-template-columns:1fr; gap:19px; padding:19px; }
  #modifications .edit-demo::before { grid-column:1; margin:-19px -19px 0; padding:15px 19px; }
  #modifications .hours-card { padding:18px; }
  #hours-panel { width:min(100%,440px); padding:17px; border-radius:0; }
  #tarif .price { padding:27px 22px; }
}
@media(prefers-reduced-motion:reduce) {
  #exemples .samplecard, #exemples .samplecard > a,
  #modifications .edit-demo [data-text], #modifications .editable-day { transition:none; }
  #exemples .samplecard:hover, #exemples .samplecard:focus-within { transform:none; }
}

/* AzeSite 054 - correctif affichage des champs masques */
#hours-panel [hidden] { display: none !important; }

/* AzeSite 054B - activite prioritaire et nom secondaire. */
#exemples .samplecard .sample-category {
  display:block;
  align-self:stretch;
  margin:0 9px 5px;
  padding:0;
  border-radius:0;
  background:transparent;
  color:#78869a;
  font-size:12px;
  font-weight:600;
  line-height:1.45;
  text-align:center;
}
#exemples .samplecard h3 {
  margin:0 9px 9px;
  color:#102443;
  font-size:clamp(22px,2vw,26px);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.035em;
  text-align:center;
}
#exemples .samplecard p {
  margin:0 9px 18px;
  text-align:center;
}
#exemples .samplecard > a {
  align-self:center;
  justify-content:center;
  min-width:175px;
  margin:0 8px 2px;
}
/* AzeSite 054C - pastille metier et bouton bleu permanent. */
/* Conserver le nom fictif discret sous la capture (054B). */
#exemples .samplecard h3 {
  align-self:center;
  width:fit-content;
  max-width:calc(100% - 20px);
  margin:3px auto 13px;
  padding:7px 19px;
  border:1px solid #cfe1ff;
  border-radius:999px;
  background:#eaf2ff;
  color:#0759db;
  font-size:clamp(20px,1.75vw,23px);
  font-weight:800;
  line-height:1.3;
  text-align:center;
}
#exemples .samplecard > a {
  background:#0866ff;
  border-color:#0866ff;
  color:white;
  box-shadow:0 7px 18px rgba(8,102,255,.15);
}
#exemples .samplecard:hover > a,
#exemples .samplecard:focus-within > a {
  background:#0755d7;
  border-color:#0755d7;
  color:white;
}
@media(prefers-reduced-motion:reduce) {
  #exemples .samplecard,
  #exemples .samplecard > a { transition:none; }
}