.elementor-23573 .elementor-element.elementor-element-a81fffa{--display:flex;--min-height:75vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--background-transition:0.3s;--margin-top:-96px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:160px;--padding-bottom:160px;--padding-left:0px;--padding-right:0px;}.elementor-23573 .elementor-element.elementor-element-a81fffa:not(.elementor-motion-effects-element-type-background), .elementor-23573 .elementor-element.elementor-element-a81fffa > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#2D404D;}.elementor-23573 .elementor-element.elementor-element-a81fffa, .elementor-23573 .elementor-element.elementor-element-a81fffa::before{--border-transition:0.3s;}.elementor-23573 .elementor-element.elementor-element-27eb8aa img{width:100%;opacity:0.05;}.elementor-23573 .elementor-element.elementor-element-27eb8aa > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}body:not(.rtl) .elementor-23573 .elementor-element.elementor-element-27eb8aa{right:-95px;}body.rtl .elementor-23573 .elementor-element.elementor-element-27eb8aa{left:-95px;}.elementor-23573 .elementor-element.elementor-element-27eb8aa{top:0px;z-index:0;}.elementor-23573 .elementor-element.elementor-element-87b0c3b img{width:100%;opacity:0.025;}.elementor-23573 .elementor-element.elementor-element-87b0c3b > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;--e-transform-flipX:-1;--e-transform-flipY:-1;}body:not(.rtl) .elementor-23573 .elementor-element.elementor-element-87b0c3b{left:-776px;}body.rtl .elementor-23573 .elementor-element.elementor-element-87b0c3b{right:-776px;}.elementor-23573 .elementor-element.elementor-element-87b0c3b{bottom:0px;z-index:0;}.elementor-23573 .elementor-element.elementor-element-b7e974a > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-23573 .elementor-element.elementor-element-9659fac > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-23573 .elementor-element.elementor-element-9659fac.elementor-element{--align-self:center;--order:99999 /* order end hack */;}body:not(.rtl) .elementor-23573 .elementor-element.elementor-element-9659fac{left:0px;}body.rtl .elementor-23573 .elementor-element.elementor-element-9659fac{right:0px;}.elementor-23573 .elementor-element.elementor-element-9659fac{bottom:0px;}.elementor-23573 .elementor-element.elementor-element-1483e6b{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--justify-content:center;--align-items:center;--gap:24px 24px;--flex-wrap:wrap;--background-transition:0.3s;--padding-top:48px;--padding-bottom:0px;--padding-left:48px;--padding-right:48px;--z-index:1;}.elementor-23573 .elementor-element.elementor-element-1483e6b:not(.elementor-motion-effects-element-type-background), .elementor-23573 .elementor-element.elementor-element-1483e6b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFDFA;}.elementor-23573 .elementor-element.elementor-element-1483e6b, .elementor-23573 .elementor-element.elementor-element-1483e6b::before{--border-transition:0.3s;}.elementor-23573 .elementor-element.elementor-element-f74533c{width:100%;max-width:100%;}body.elementor-page-23573:not(.elementor-motion-effects-element-type-background), body.elementor-page-23573 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFEFC;}@media(max-width:1024px){.elementor-23573 .elementor-element.elementor-element-a81fffa{--min-height:50vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--justify-content:center;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:96px;--padding-bottom:96px;--padding-left:0px;--padding-right:0px;}}@media(max-width:767px){.elementor-23573 .elementor-element.elementor-element-a81fffa{--min-height:100vh;--justify-content:center;--padding-top:128px;--padding-bottom:96px;--padding-left:0px;--padding-right:0px;}.elementor-23573 .elementor-element.elementor-element-b7e974a > .elementor-widget-container{margin:0px 0px 48px 0px;}.elementor-23573 .elementor-element.elementor-element-b7e974a.elementor-element{--align-self:center;}.elementor-23573 .elementor-element.elementor-element-1483e6b{--padding-top:24px;--padding-bottom:24px;--padding-left:24px;--padding-right:24px;}}/* Start custom CSS */.charte-root * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.charte-root {
  font-family: "Outfit", sans-serif;
  color: #1a1a2e;
  --radius: 6px;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.13);
  --gap: 24px;
  --btn-bg: rgba(0, 0, 0, 0.05);
  --btn-hover: #f2ede6;
  --accent: #5299cc;
  --green: #a3bfb8;
  --border-2: #e8e8f0;
  --border: rgba(0, 0, 0, 0.2);
}
.card-decl-preview.preview-dkbg {
  background: #2d404d;
}
.card-preview-dkbg .card-decl-badge {
  background: rgba(0, 0, 0, 0.15) !important;
  color: white !important;
}
.card-decl-preview.preview-dkbg svg path.fil1,
.card-decl-preview.preview-dkbg svg path {
  fill: #fffdfa;
}
.card-decl-preview.preview-ltbg {
  background: #fffdfa !important;
}
.card-decl-preview.preview-ltbg svg path.fil1,
.card-decl-preview.preview-ltbg svg path {
  fill: #2d404d;
} /* ── Sections ── */
.charte-section {
  margin-bottom: 48px;
}
.charte-section-title {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  color: black;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 4px solid var(--border);
}
.charte-client-header {
  margin-bottom: 48px;
}
.charte-client-name {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}
.charte-client-tagline {
  font-size: 16px;
  color: #888;
  margin-top: 6px;
}
/* ── Grilles ── */
.charte-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: var(--gap);
}
.charte-grid-colors {
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
} /* ── Card base ── */
.charte-card {
  position: relative;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.charte-card:hover .card-decl-preview img,
.charte-card:hover .card-decl-preview svg {
  transform: scale(1.1);
}
.charte-card.rs-type:hover img {
  transform: scale(1.1);
  border-radius: 4px;
}
.charte-card.charte-card.fav-16:hover img,
.charte-card.charte-card.fav-24:hover img {
  transform: scale(1.1);
  max-width: 100%;
  max-height: 110px;
  min-height: 110px;
  min-width: 110px;
} /* ── Card
Déclinaisons ── */
.card-decl-preview {
  /* background: #f7f7fa;*/
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.65);
}
.card-decl-preview img,
.card-decl-preview svg {
  max-width: 100%;
  max-height: 110px;
  min-height: 110px;
  min-width: 110px;
  object-fit: contain;
}
.charte-card.fav-16 img {
  max-width: 16px;
  max-height: 16px;
  min-height: 16px;
  min-width: 16px;
}
.charte-card.rs-type img {
  border-radius: 50%;
}
.charte-card.fav-24 img {
  max-width: 24px;
  max-height: 24px;
  min-height: 24px;
  min-width: 24px;
}
.card-decl-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.card-decl-title {
  font-size: 16px;
  font-weight: 600;
}
.card-decl-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.15);
  color: black;
  border-radius: 0 4px 0;
  padding: 4px 8px;
  position: absolute;
  top: 0;
  right: 0;
}
.card-decl-actions {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
} /* ── Card Couleurs ── */
.card-color-swatch {
  height: 48px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.card-color-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.card-color-name {
  font-size: 16px;
  font-weight: 600;
}
.card-color-hex {
  font-size: 13px;
  font-family: "Outfit", sans-serif;
  color: #777;
}
.card-color-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
} /* ── Card
Fonts ── */
.charte-fonts-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.card-font {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card-font-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.card-font-family {
  font-size: 16px;
  font-weight: 600;
}
.card-font-style-badge {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--btn-bg);
  color: #666;
  border-radius: 4px;
  padding: 2px 8px;
}
.card-font-weight-badge {
  font-size: 12px;
  color: #aaa;
}
.card-font-preview {
  font-size: 24px;
  line-height: 1.35;
  color: #1a1a2e;
  padding: 16px 0 32px;
  border-top: 1px solid var(--border);
}
.card-font-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.card-font-link {
  font-size: 16px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}
a.card-font-link {
  color: var(--accent);
}
.card-font-link:hover {
} /* ── Boutons ── */
.btn-download,
.btn-copy,
.charte-root .copy-to-clipboard div.code-toolbar > .toolbar a,
.charte-root .copy-to-clipboard div.code-toolbar > .toolbar button,
.charte-root .copy-to-clipboard div.code-toolbar > .toolbar span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 400;
  font-family: "Outfit", sans-serif;
  border: none;
  border-radius: 4px;
  padding: 8px 0px 8px 10px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
  white-space: nowrap;
  overflow: hidden;
  border-right: 10px solid transparent;
}
.btn-copy {
  background: var(--btn-bg);
  color: #444;
  transition:
    background 0.15s,
    color 0.15s;
}
.btn-download {
  background: var(--accent);
  color: #fff;
  transition: opacity 0.15s;
}
.btn-download:hover {
  background: #66bfff;
  color: #1e2a33 !important;
}
.charte-root .copy-to-clipboard div.code-toolbar > .toolbar a,
.charte-root .copy-to-clipboard div.code-toolbar > .toolbar button,
.charte-root .copy-to-clipboard div.code-toolbar > .toolbar span {
  box-shadow: 0 0px 0 0 rgba(0, 0, 0, 0.2);
  background: var(--btn-bg);
  color: #444;
  transition:
    background 0.15s,
    color 0.15s;
}
.btn-copy:hover {
  background: var(--btn-hover);
  color: #111;
}
.btn-copy.copied {
  background: color-mix(in srgb, var(--green) 10%, transparent);
  color: var(--green);
}
.btn-copy svg {
  flex-shrink: 0;
}
a.btn-download {
  color: #fff;
}
.btn-download svg,
.btn-copy svg,
.card-font-link svg {
  min-height: 16px;
  min-width: 16px;
} /* ── Bouton Export ZIP ── */
.charte-export-bar {
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.btn-zip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  font-family: "Outfit", sans-serif;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-zip:hover {
  background: #2d404d;
}
.btn-zip.loading {
  opacity: 0.7;
  cursor: wait;
}
.charte-export-note {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
} /* ── Gradient preview ── */
.gradient-preview {
  height: 64px;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.charte-vars-block {
  margin: 24px 0;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.charte-vars-pre {
  font-family: "Courier New", monospace;
  font-size: 12px;
  line-height: 1.7;
  color: #333;
  white-space: pre;
  overflow-x: auto;
  margin: 0;
}
img,
svg {
  transition: 0.2s;
}
.code .elementor-widget-container {
  overflow: visible;
}
.charte-root .copy-to-clipboard div.code-toolbar pre {
  width: calc(100%);
  overflow: hidden;
}
.charte-root .copy-to-clipboard div.code-toolbar > .toolbar {
  position: absolute;
  bottom: 0 !important;
  right: -0px !important;
  top: initial;
  opacity: 1 !important;
}
.charte-root .copy-to-clipboard div.code-toolbar > .toolbar a:focus,
.charte-root div.code-toolbar > .toolbar a:hover,
.charte-root div.code-toolbar > .toolbar button:focus,
.charte-root div.code-toolbar > .toolbar button:hover,
.charte-root div.code-toolbar > .toolbar span:focus,
.charte-root div.code-toolbar > .toolbar span:hover {
  background: rgba(0, 0, 0, 1) !important;
  color: white !important;
}
@media screen and (max-width: 500px) {
  .charte-client-name {
    font-size: 24px;
  }
}/* End custom CSS */