.elementor-22909 .elementor-element.elementor-element-a81fffa{--display:flex;--min-height:50vh;--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-22909 .elementor-element.elementor-element-a81fffa:not(.elementor-motion-effects-element-type-background), .elementor-22909 .elementor-element.elementor-element-a81fffa > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#002540;}.elementor-22909 .elementor-element.elementor-element-a81fffa, .elementor-22909 .elementor-element.elementor-element-a81fffa::before{--border-transition:0.3s;}.elementor-22909 .elementor-element.elementor-element-b7e974a > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-22909 .elementor-element.elementor-element-9659fac > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-22909 .elementor-element.elementor-element-9659fac.elementor-element{--align-self:center;--order:99999 /* order end hack */;}body:not(.rtl) .elementor-22909 .elementor-element.elementor-element-9659fac{left:0px;}body.rtl .elementor-22909 .elementor-element.elementor-element-9659fac{right:0px;}.elementor-22909 .elementor-element.elementor-element-9659fac{bottom:0px;}.elementor-22909 .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;}.elementor-22909 .elementor-element.elementor-element-f74533c{width:100%;max-width:100%;}.elementor-22909 .elementor-element.elementor-element-73b08c8{--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;--align-items:center;--gap:24px 24px;--flex-wrap:wrap;--align-content:center;--background-transition:0.3s;--padding-top:0px;--padding-bottom:48px;--padding-left:0px;--padding-right:0px;}.elementor-22909 .elementor-element.elementor-element-80738b7{width:100%;max-width:100%;}.elementor-22909 .elementor-element.elementor-element-7160a5a{--display:flex;--background-transition:0.3s;}.elementor-22909 .elementor-element.elementor-element-7160a5a.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-22909 .elementor-element.elementor-element-335ffc0{width:auto;max-width:auto;text-align:left;font-family:"Outfit", Sans-serif;font-size:16px;font-weight:400;line-height:1em;letter-spacing:-0.5px;}.elementor-22909 .elementor-element.elementor-element-74bf809{width:100%;max-width:100%;}.elementor-22909 .elementor-element.elementor-element-74bf809 > .elementor-widget-container{padding:0px 0px 0px 0px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#00000033;border-radius:6px 6px 6px 6px;}.elementor-22909 .elementor-element.elementor-element-74bf809 .highlight-height{height:240px;}.elementor-22909 .elementor-element.elementor-element-74bf809 pre, .elementor-22909 .elementor-element.elementor-element-74bf809 code, .elementor-22909 .elementor-element.elementor-element-74bf809 .line-numbers .line-numbers-rows{font-size:11px;}.elementor-22909 .elementor-element.elementor-element-066f4d3{--display:flex;--background-transition:0.3s;}.elementor-22909 .elementor-element.elementor-element-066f4d3.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-22909 .elementor-element.elementor-element-62448a2{text-align:left;font-family:"Outfit", Sans-serif;font-size:16px;font-weight:400;line-height:1em;letter-spacing:-0.5px;}.elementor-22909 .elementor-element.elementor-element-197a998{width:100%;max-width:100%;}.elementor-22909 .elementor-element.elementor-element-197a998 > .elementor-widget-container{padding:0px 0px 0px 0px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#00000033;border-radius:6px 6px 6px 6px;}.elementor-22909 .elementor-element.elementor-element-197a998 .highlight-height{height:240px;}.elementor-22909 .elementor-element.elementor-element-197a998 pre, .elementor-22909 .elementor-element.elementor-element-197a998 code, .elementor-22909 .elementor-element.elementor-element-197a998 .line-numbers .line-numbers-rows{font-size:11px;}.elementor-22909 .elementor-element.elementor-element-2223079{--display:flex;--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;--background-transition:0.3s;--margin-top:0px;--margin-bottom:96px;--margin-left:0px;--margin-right:0px;}body.elementor-page-22909:not(.elementor-motion-effects-element-type-background), body.elementor-page-22909 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFEFC;}@media(min-width:768px){.elementor-22909 .elementor-element.elementor-element-7160a5a{--width:33%;}.elementor-22909 .elementor-element.elementor-element-066f4d3{--width:33%;}}@media(max-width:1024px){.elementor-22909 .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;}.elementor-22909 .elementor-element.elementor-element-73b08c8{--padding-top:48px;--padding-bottom:48px;--padding-left:48px;--padding-right:48px;}}@media(max-width:767px){.elementor-22909 .elementor-element.elementor-element-a81fffa{--justify-content:flex-end;--padding-top:128px;--padding-bottom:96px;--padding-left:0px;--padding-right:0px;}.elementor-22909 .elementor-element.elementor-element-b7e974a > .elementor-widget-container{margin:0px 0px 48px 0px;}.elementor-22909 .elementor-element.elementor-element-b7e974a.elementor-element{--align-self:center;}.elementor-22909 .elementor-element.elementor-element-1483e6b{--padding-top:24px;--padding-bottom:24px;--padding-left:24px;--padding-right:24px;}.elementor-22909 .elementor-element.elementor-element-73b08c8{--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: #e0e0eb;
  --accent: #0068b3;
  --green: #22c55e;
  --border-2: #e8e8f0;
  --border: rgba(0, 0, 0, 0.2);
}

/* ── 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: 32px; 
    max-height: 32px ; 
    min-height: 32px;
    min-width: 32px;
}

.charte-card.rs-type img{
  border-radius: 50%
}

.charte-card.fav-24 img {
    max-width: 48px; 
    max-height: 48px ; 
    min-height: 48px;
    min-width: 48px;
}

.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;
}
.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, .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: #dcfce7;
  color: #16a34a;
}
.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: #2d2d4e;
}
.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 */