/* ==========================================================================
   CHEZ MARGUERITE - Systeme de design "galerie claire"
   Boutique de createurs, Passage Balthus, Autun.
   Classes a poser sur les widgets Elementor (onglet Avance > Classes CSS).
   --------------------------------------------------------------------------
   01. Jetons          05. Sections et grilles
   02. Bases           06. Composants
   03. Typographie     07. Formulaires
   04. Boutons         08. En-tete, pied de page, mouvement
   ========================================================================== */

/* ---------- 01. Jetons -------------------------------------------------- */
:root {
  --cream: #FDFBF7;
  --cream-2: #F7F3EB;
  --cream-3: #EFE9DD;

  --ink: #1F3B2C;
  --ink-2: #4A5A4E;
  --ink-3: #6B7764;

  --terra: #CE6F45;
  --terra-btn: #B05A32;
  --terra-btn-2: #98492A;
  --terra-light: #F8DFD0;
  --rose: #EEBDB2;
  --rose-light: #FBE9E4;
  --sage: #8CA677;
  --sage-light: #E0E9D5;

  --sun: #F2B93B;
  --sun-light: #FCEDC4;
  --sun-hover: #FFC853;
  --cream-btn: #FFFCF8;
  --error: #C0392B;

  --line: rgba(31, 59, 44, .16);
  --line-strong: rgba(31, 59, 44, .3);

  --display: "Cormorant Garamond", Baskerville, "Times New Roman", serif;
  --body: "Libre Baskerville", Baskerville, Georgia, serif;
  --hand: "Cedarville Cursive", cursive;

  --wrap: 1240px;
  --slim: 760px;
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 26px;

  --shadow-sm: 0 1px 2px rgba(31,59,44,.04), 0 6px 20px rgba(31,59,44,.06);
  --shadow: 0 2px 4px rgba(31,59,44,.05), 0 18px 44px rgba(31,59,44,.1);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ---------- 02. Bases --------------------------------------------------- */
body {
  background: var(--cream);
  color: var(--ink-2);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.8;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--sun); color: var(--ink); }

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

/* Astra pose des marges et une largeur qui se battent avec les conteneurs. */
.ast-container, .site-content .ast-container { max-width: none; padding: 0; }
.ast-page-builder-template .site-content > .ast-container { max-width: none; }
#primary, .site-content #primary { margin: 0; padding: 0; }
.entry-content > .elementor { margin: 0; }

/* ---------- 03. Typographie --------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.elementor-widget-heading .elementor-heading-title { color: var(--ink); }

h1, .elementor-widget-heading h1.elementor-heading-title {
  font-family: var(--display);
  font-size: clamp(2.9rem, 7vw, 6rem);
  line-height: 1.03;
  letter-spacing: -.015em;
  font-weight: 300;
}
h2, .elementor-widget-heading h2.elementor-heading-title {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4.8vw, 3.7rem);
  line-height: 1.06;
  letter-spacing: -.012em;
  font-weight: 400;
}
h3, .elementor-widget-heading h3.elementor-heading-title {
  font-family: var(--body);
  font-size: clamp(.98rem, 1.4vw, 1.1rem);
  line-height: 1.45;
  font-weight: 700;
}
h4, .elementor-widget-heading h4.elementor-heading-title {
  font-family: var(--body);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.5;
}

/* Le geste typographique : un fragment manuscrit terracotta par titre. */
.ital {
  font-family: var(--hand);
  font-style: normal;
  font-weight: 400;
  font-size: .96em;
  line-height: 1.15;
  color: var(--terra);
  letter-spacing: 0;
  padding-bottom: .06em;
}

p { color: var(--ink-2); }

.cm-lead, .cm-lead p {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  line-height: 1.45;
  font-weight: 400;
  color: var(--ink-2);
  letter-spacing: 0;
}

.cm-small, .cm-small p { font-size: .8rem; line-height: 1.7; }
.cm-muted, .cm-muted p { color: var(--ink-3); }

/* Etiquette de section, facon cartel de musee. */
.cm-eyebrow .elementor-heading-title,
.cm-eyebrow p,
.cm-eyebrow {
  font-family: var(--body);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.6;
}
.cm-eyebrow .elementor-heading-title { display: inline-flex; align-items: center; gap: .55rem; }
.cm-eyebrow .elementor-heading-title::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sun);
  flex-shrink: 0;
}

/* Coup de surligneur derriere un mot. */
.marker {
  display: inline;
  background-image: linear-gradient(transparent 58%, var(--sun-light) 58%, var(--sun-light) 94%, transparent 94%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 .08em;
}
.marker--rose { background-image: linear-gradient(transparent 58%, var(--rose-light) 58%, var(--rose-light) 94%, transparent 94%); }
.marker--sage { background-image: linear-gradient(transparent 58%, var(--sage-light) 58%, var(--sage-light) 94%, transparent 94%); }

/* Chiffre en manuscrite. */
.cm-hand, .cm-hand .elementor-heading-title, .cm-hand p {
  font-family: var(--hand);
  color: var(--terra);
  line-height: 1.15;
  letter-spacing: 0;
}

/* ---------- 04. Boutons ------------------------------------------------- */
.cm-btn .elementor-button {
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .95rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  line-height: 1;
  transition: transform .3s var(--ease), background .3s var(--ease),
              color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.cm-btn .elementor-button:hover { transform: translateY(-2px); }
.cm-btn .elementor-button:active { transform: translateY(0); }

.cm-btn--primary .elementor-button { background: var(--terra-btn); color: var(--cream-btn); }
.cm-btn--primary .elementor-button:hover { background: var(--terra-btn-2); color: var(--cream-btn); box-shadow: 0 10px 24px rgba(176,90,50,.3); }

.cm-btn--sun .elementor-button { background: var(--sun); color: var(--ink); }
.cm-btn--sun .elementor-button:hover { background: var(--sun-hover); color: var(--ink); box-shadow: 0 10px 24px rgba(242,185,59,.34); }

.cm-btn--ghost .elementor-button { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.cm-btn--ghost .elementor-button:hover { background: var(--terra-btn); border-color: var(--terra-btn); color: var(--cream-btn); }

.cm-btn--light .elementor-button { background: var(--cream); color: var(--ink); border-color: var(--line-strong); }
.cm-btn--light .elementor-button:hover { background: var(--sun); border-color: var(--sun); color: var(--ink); }

.cm-btn--sm .elementor-button { padding: .7rem 1.2rem; font-size: .66rem; }

/* Lien fleche. */
.cm-link-arrow .elementor-button,
a.cm-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--ink);
  background: none;
  padding: 0;
  border: 0;
  transition: gap .28s var(--ease), color .28s var(--ease);
}
.cm-link-arrow .elementor-button::after,
a.cm-link-arrow::after {
  content: "";
  width: 15px; height: 9px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M0 4.5h13M9.5 1 13 4.5 9.5 8' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M0 4.5h13M9.5 1 13 4.5 9.5 8' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
}
.cm-link-arrow .elementor-button:hover,
a.cm-link-arrow:hover { color: var(--terra); gap: .7rem; }

/* ---------- 05. Sections et grilles ------------------------------------- */
/* Les conteneurs Elementor portent le rythme vertical et les nuances de creme.
   Aucun aplat sombre : les sections se separent par des filets et des cremes. */
.cm-section { padding-top: clamp(4.5rem, 9vw, 8.5rem); padding-bottom: clamp(4.5rem, 9vw, 8.5rem); }
.cm-section--tight { padding-top: clamp(3rem, 5vw, 4.5rem); padding-bottom: clamp(3rem, 5vw, 4.5rem); }
.cm-section--cream2 { background-color: var(--cream-2); }
.cm-section--cream3 { background-color: var(--cream-3); }
.cm-section--sun { background-color: var(--sun-light); }
.cm-section--rose { background-color: var(--rose-light); }
.cm-section--sage { background-color: var(--sage-light); }
.cm-section--ruled { border-top: 1px solid var(--line); }

.cm-cta { background-color: var(--cream-3); text-align: center; }
.cm-cta .elementor-heading-title { margin-left: auto; margin-right: auto; }
.cm-cta h2.elementor-heading-title { max-width: 17ch; }
.cm-cta .cm-lead { max-width: 52ch; margin-left: auto; margin-right: auto; }

.cm-page-hero { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.cm-page-hero h1.elementor-heading-title { max-width: 15ch; }
.cm-page-hero .cm-lead { max-width: 54ch; }

.cm-slim { max-width: var(--slim); margin-left: auto; margin-right: auto; }

/* Fil d'Ariane. */
.cm-breadcrumb, .cm-breadcrumb p { font-size: .78rem; color: var(--ink-3); }
.cm-breadcrumb a { color: var(--ink-3); text-decoration: none; }
.cm-breadcrumb a:hover { color: var(--terra); }

/* ---------- 06. Composants ---------------------------------------------- */

/* a) Images en arche - le motif signature du site. */
.cm-arch img,
.cm-arch .elementor-widget-container img {
  border-radius: 50vw 50vw var(--r-md) var(--r-md);
  background: var(--cream-3);
  width: 100%;
  object-fit: cover;
}
.cm-arch--soft img,
.cm-arch--soft .elementor-widget-container img { border-radius: var(--r-lg) var(--r-lg) var(--r-md) var(--r-md); }
.cm-arch--portrait img { aspect-ratio: 3 / 4; }
.cm-arch--tall img { aspect-ratio: 1 / 1.12; }
.cm-rounded img { border-radius: var(--r-md); }
.cm-rounded--lg img { border-radius: var(--r-lg); }

/* b) Cartel : la petite etiquette de galerie posee sur une photo. */
.cm-cartel {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .6rem .85rem;
  box-shadow: var(--shadow-sm);
  max-width: 230px;
}
.cm-cartel .cm-cartel__num,
.cm-cartel__num {
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  line-height: 1.6;
}
.cm-cartel__title { font-size: .85rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.cm-cartel__meta { font-size: .74rem; color: var(--ink-3); line-height: 1.4; }

/* c) Badge circulaire a texte tournant, autour d'un coeur jaune. */
.cm-badge { position: relative; width: 116px; height: 116px; flex-shrink: 0; }
.cm-badge__ring { width: 100%; height: 100%; animation: cm-spin 22s linear infinite; color: var(--ink); }
.cm-badge__ring text {
  font-family: var(--body);
  font-size: 7.6px;
  letter-spacing: .12em;
  font-weight: 700;
  text-transform: uppercase;
  fill: currentColor;
}
.cm-badge__core {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--sun);
  display: grid; place-items: center;
  font-size: 1.4rem;
}
@keyframes cm-spin { to { transform: rotate(360deg); } }

/* d) Marguerite, la narratrice, et sa bulle manuscrite. */
.cm-marguerite { display: flex; align-items: flex-end; gap: 1rem; margin: 0; max-width: 460px; }
.cm-marguerite img {
  width: 112px;
  height: auto;
  flex-shrink: 0;
  align-self: flex-end;
  transform-origin: bottom center;
  transition: transform .5s var(--ease);
}
.cm-marguerite:hover img { transform: rotate(-3deg) translateY(-4px); }
.cm-marguerite__bubble {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 18px 18px 18px 4px;
  padding: .9rem 1.15rem;
  font-family: var(--hand);
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.25rem;
}
.cm-marguerite__bubble::before,
.cm-marguerite__bubble::after {
  content: "";
  position: absolute;
  left: -9px; bottom: 10px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 6px 9px 6px 0;
  border-color: transparent var(--line) transparent transparent;
}
.cm-marguerite__bubble::after { left: -7.5px; border-right-color: var(--cream); }

.cm-marguerite--right { flex-direction: row-reverse; margin-left: auto; }
.cm-marguerite--right .cm-marguerite__bubble { border-radius: 18px 18px 4px 18px; }
.cm-marguerite--right .cm-marguerite__bubble::before,
.cm-marguerite--right .cm-marguerite__bubble::after {
  left: auto; right: -9px;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent var(--line);
}
.cm-marguerite--right .cm-marguerite__bubble::after { right: -7.5px; border-left-color: var(--cream); }
.cm-marguerite--center { margin-left: auto; margin-right: auto; }
.cm-marguerite--sm img { width: 84px; }
.cm-marguerite--sm .cm-marguerite__bubble { font-size: 1.15rem; padding: .75rem 1rem; }
.cm-marguerite--lg img { width: 172px; }
.cm-marguerite--lg .cm-marguerite__bubble { font-size: 1.5rem; }

.cm-section--cream2 .cm-marguerite__bubble,
.cm-section--sage .cm-marguerite__bubble,
.cm-section--rose .cm-marguerite__bubble,
.cm-cta .cm-marguerite__bubble { box-shadow: none; }

@media (max-width: 560px) {
  .cm-marguerite { gap: .7rem; }
  .cm-marguerite img { width: 84px; }
  .cm-marguerite__bubble { font-size: 1.15rem; padding: .7rem .95rem; }
  .cm-marguerite--lg img { width: 108px; }
  .cm-marguerite--lg .cm-marguerite__bubble { font-size: 1.25rem; }
}

/* e) Pastille de categorie, une couleur par famille de metier. */
.cm-pill, .cm-pill .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .38rem .8rem;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--ink-2);
  line-height: 1.4;
}
.cm-pill--sun .elementor-heading-title, .cm-pill--sun { background: var(--sun-light); border-color: transparent; }
.cm-pill--rose .elementor-heading-title, .cm-pill--rose { background: var(--rose-light); border-color: transparent; }
.cm-pill--sage .elementor-heading-title, .cm-pill--sage { background: var(--sage-light); border-color: transparent; }
.cm-pill--terra .elementor-heading-title, .cm-pill--terra { background: var(--terra-light); border-color: transparent; }

/* f) Carte a filet : cadre leger qui se souleve au survol. */
.cm-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s var(--ease);
}
.cm-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.cm-card__num .elementor-heading-title {
  font-family: var(--hand);
  font-size: 2.1rem;
  line-height: 1.2;
  color: var(--terra);
}

/* g) Tuile media : image, corps, pied separe par un filet. */
.cm-tile { transition: transform .38s var(--ease); }
.cm-tile:hover { transform: translateY(-5px); }
.cm-tile .cm-tile__media img {
  border-radius: var(--r-md);
  aspect-ratio: 4 / 3.1;
  object-fit: cover;
  width: 100%;
  transition: transform .9s var(--ease);
}
.cm-tile:hover .cm-tile__media img { transform: scale(1.05); }
.cm-tile__foot { border-top: 1px solid var(--line); }
.cm-price, .cm-price .elementor-heading-title {
  font-family: var(--hand);
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--terra-btn);
}

/* h) Bandeau defilant, borde de deux filets. */
.cm-ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: var(--cream);
}
.cm-ticker .elementor-widget-container { overflow: hidden; }
.cm-ticker__track {
  display: flex;
  width: max-content;
  animation: cm-ticker 46s linear infinite;
}
.cm-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
}
.cm-ticker__item::after { content: "\2733"; color: var(--sun); font-size: .95rem; }
@keyframes cm-ticker { to { transform: translateX(-50%); } }
.cm-ticker:hover .cm-ticker__track { animation-play-state: paused; }

/* i) Citation. */
.cm-quote {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform .38s var(--ease), box-shadow .38s var(--ease);
}
.cm-quote:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.cm-quote__stars .elementor-heading-title { color: var(--sun); letter-spacing: .1em; font-size: .9rem; }
.cm-quote__text .elementor-heading-title,
.cm-quote__text {
  font-family: var(--display);
  font-size: 1.55rem;
  line-height: 1.32;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0;
}
.cm-quote__author, .cm-quote__author p { font-size: .82rem; color: var(--ink-3); }
.cm-quote__author strong { color: var(--ink); font-weight: 700; font-size: .88rem; }

/* j) Etapes numerotees separees par des filets. */
.cm-step { border-top: 1px solid var(--line); transition: padding-left .3s var(--ease); }
.cm-step:hover { padding-left: .5rem; }
.cm-step--last { border-bottom: 1px solid var(--line); }
.cm-step__num .elementor-heading-title {
  font-family: var(--hand);
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--terra);
}

/* k) Grand chiffre. */
.cm-stat__num .elementor-heading-title {
  font-family: var(--hand);
  font-size: clamp(2.6rem, 5vw, 3.7rem);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--terra);
}
.cm-stat__label, .cm-stat__label p { font-size: .8rem; color: var(--ink-3); }

/* l) Encadre. */
.cm-callout { background: var(--cream-2); border-radius: var(--r-md); }
.cm-callout--sun { background: var(--sun-light); }
.cm-callout--sage { background: var(--sage-light); }
.cm-callout--rose { background: var(--rose-light); }

/* m) Panneau de formulaire et carte. */
.cm-panel {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.cm-map { border-radius: var(--r-lg); overflow: hidden; background: var(--cream-3); border: 1px solid var(--line); }
.cm-map iframe { filter: grayscale(.3) sepia(.1); display: block; width: 100%; border: 0; }

/* n) Listes : puces jaunes, coordonnees, horaires. */
.cm-checklist .elementor-icon-list-item { align-items: flex-start; }
.cm-checklist .elementor-icon-list-icon { color: var(--sun); }
.cm-checklist .elementor-icon-list-text { font-size: .92rem; color: var(--ink-2); }

.cm-infolist .elementor-icon-list-item { border-bottom: 1px solid var(--line); padding-top: 1.1rem; padding-bottom: 1.1rem; }
.cm-infolist .elementor-icon-list-item:first-child { border-top: 1px solid var(--line); }
.cm-infolist .elementor-icon-list-icon { color: var(--terra); }
.cm-infolist .elementor-icon-list-text { color: var(--ink-2); }
.cm-infolist a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.cm-infolist a:hover { border-color: var(--terra); color: var(--terra); }

.cm-hours .elementor-icon-list-item { border-bottom: 1px solid var(--line); padding: .55rem 0; }
.cm-hours .elementor-icon-list-item:last-child { border-bottom: none; }
.cm-hours .elementor-icon-list-text { font-size: .92rem; display: flex; justify-content: space-between; gap: 1rem; width: 100%; }

/* o) Accordeon FAQ, avec sa pastille jaune. */
.cm-faq .e-n-accordion-item,
.cm-faq .elementor-accordion-item { border: 0; border-bottom: 1px solid var(--line); }
.cm-faq .e-n-accordion-item:first-child,
.cm-faq .elementor-accordion-item:first-child { border-top: 1px solid var(--line); }
.cm-faq summary,
.cm-faq .elementor-tab-title {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  background: transparent;
  border: 0;
  padding: 1.35rem 0;
  transition: color .26s var(--ease);
}
.cm-faq summary:hover,
.cm-faq .elementor-tab-title:hover { color: var(--terra); }
.cm-faq .elementor-tab-content { border: 0; padding: 0 3rem 1.6rem 0; color: var(--ink-2); font-size: .95rem; }

/* ---------- 07. Formulaires (WPForms) ----------------------------------- */
.wpforms-container { margin: 0; }
.wpforms-container .wpforms-form .wpforms-field { padding: 0 0 1.15rem; }
.wpforms-container .wpforms-form label.wpforms-field-label {
  font-family: var(--body);
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .4rem;
}
.wpforms-container .wpforms-form .wpforms-required-label { color: var(--terra); }
.wpforms-container .wpforms-form label.wpforms-field-sublabel,
.wpforms-container .wpforms-form .wpforms-field-description {
  font-family: var(--body);
  font-size: .78rem;
  color: var(--ink-3);
}
.wpforms-container .wpforms-form input[type=text],
.wpforms-container .wpforms-form input[type=email],
.wpforms-container .wpforms-form input[type=tel],
.wpforms-container .wpforms-form input[type=url],
.wpforms-container .wpforms-form input[type=number],
.wpforms-container .wpforms-form input[type=date],
.wpforms-container .wpforms-form select,
.wpforms-container .wpforms-form textarea {
  font-family: var(--body);
  font-size: .95rem;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .82rem .95rem;
  width: 100%;
  max-width: 100%;
  box-shadow: none;
  transition: border-color .26s var(--ease), box-shadow .26s var(--ease);
}
.wpforms-container .wpforms-form textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.wpforms-container .wpforms-form input::placeholder,
.wpforms-container .wpforms-form textarea::placeholder { color: var(--ink-3); }
.wpforms-container .wpforms-form input:focus,
.wpforms-container .wpforms-form select:focus,
.wpforms-container .wpforms-form textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--sun-light);
}
.wpforms-container .wpforms-form .wpforms-field-checkbox input[type=checkbox],
.wpforms-container .wpforms-form .wpforms-field-radio input[type=radio] { accent-color: var(--terra); }
.wpforms-container .wpforms-form .wpforms-field-checkbox label,
.wpforms-container .wpforms-form .wpforms-field-radio label {
  font-size: .84rem;
  color: var(--ink-2);
  line-height: 1.5;
  font-weight: 400;
}
.wpforms-container .wpforms-form button[type=submit] {
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .95rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--terra-btn);
  color: var(--cream-btn);
  line-height: 1;
  cursor: pointer;
  transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.wpforms-container .wpforms-form button[type=submit]:hover {
  background: var(--terra-btn-2);
  color: var(--cream-btn);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(176,90,50,.3);
}
.wpforms-container .wpforms-form .wpforms-error {
  font-size: .78rem;
  color: var(--error);
}
.wpforms-container .wpforms-form input.wpforms-error,
.wpforms-container .wpforms-form textarea.wpforms-error { border-color: var(--error); }
.wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
  background: var(--sage-light);
  border: 0;
  border-radius: var(--r-md);
  padding: 1.35rem 1.5rem;
  font-size: .95rem;
  color: var(--ink);
}

/* ---------- 08. En-tete, pied de page, mouvement ------------------------ */

/* Logo : le monogramme reprend l'arche en miniature. */
.cm-logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.cm-logo__mark {
  width: 38px; height: 38px;
  border-radius: 50% 50% 6px 6px;
  background: var(--terra-light);
  color: var(--ink);
  display: grid; place-items: center;
  font-family: var(--hand);
  font-size: 1.25rem;
  line-height: 1;
  padding-bottom: .1rem;
  flex-shrink: 0;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.cm-logo:hover .cm-logo__mark { transform: translateY(-3px) rotate(-6deg); background: var(--terra); color: var(--cream-btn); }
.cm-logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.cm-logo__name { font-family: var(--display); font-size: 1.5rem; font-weight: 500; color: var(--ink); }
.cm-logo__tag { font-size: .54rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-top: .3rem; }

/* En-tete Xpro : creme translucide, filet fin, aucun aplat sombre. */
.cm-header {
  background-color: rgba(253, 251, 247, .82);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.cm-header.xpro-sticky-active,
.cm-header.xpro-header-sticky { border-bottom-color: var(--line); }

/* Navigation : onglet terracotta clair sur la page courante. */
.cm-nav .xpro-elementor-nav-menu > li > a,
.cm-nav .xpro-menu-item > a {
  font-family: var(--body);
  font-size: .88rem;
  font-weight: 400;
  color: var(--ink-2);
  padding: .55rem .85rem;
  border-radius: 999px;
  transition: background .26s var(--ease), color .26s var(--ease);
}
.cm-nav .xpro-elementor-nav-menu > li > a:hover { background: var(--cream-2); color: var(--ink); }
.cm-nav .xpro-elementor-nav-menu > li.current-menu-item > a,
.cm-nav .xpro-elementor-nav-menu > li.current_page_item > a {
  background: var(--terra-light);
  color: var(--ink);
  font-weight: 700;
}
.cm-nav .xpro-menu-offcanvas-item a,
.cm-nav .xpro-nav-menu-mobile a {
  font-family: var(--display);
  font-size: 1.75rem;
  color: var(--ink);
}

/* Pied de page clair, separe par un simple filet. */
.cm-footer { background-color: var(--cream-2); border-top: 1px solid var(--line); color: var(--ink-2); font-size: .9rem; }
.cm-footer a { color: var(--ink-2); text-decoration: none; transition: color .26s var(--ease); }
.cm-footer a:hover { color: var(--terra); }
.cm-footer__title .elementor-heading-title,
.cm-footer__title {
  color: var(--ink);
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--body);
}
.cm-footer__bottom { border-top: 1px solid var(--line); font-size: .8rem; color: var(--ink-3); }
.cm-footer__bottom a { color: var(--ink-3); }

/* Reseaux sociaux : pastilles qui virent au jaune. */
.cm-socials a,
.cm-socials .xpro-social-icon-wrapper a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  color: var(--ink);
  transition: background .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
}
.cm-socials a:hover,
.cm-socials .xpro-social-icon-wrapper a:hover {
  background: var(--sun);
  border-color: var(--sun);
  color: var(--ink);
  transform: translateY(-3px);
}

/* Reveal discret a l'apparition. */
.cm-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.cm-reveal.is-visible { opacity: 1; transform: none; }
.elementor-editor-active .cm-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .cm-reveal { opacity: 1; transform: none; }
}

/* ---------- Reponsive --------------------------------------------------- */
@media (max-width: 767px) {
  body { font-size: 15.5px; }
  .cm-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .cm-badge { width: 84px; height: 84px; }
  .cm-badge__core { width: 44px; height: 44px; font-size: 1rem; }
  .cm-map iframe { height: 320px; }
  .cm-quote__text .elementor-heading-title { font-size: 1.15rem; }
}
/* ---------- Compositions de page ---------------------------------------- */
.cm-showcase { position: relative; }
.cm-showcase__badge { position: absolute; top: -1.25rem; right: -1.25rem; z-index: 3; width: 116px; }
.cm-showcase__badge img { width: 116px; height: 116px; }
.cm-showcase__cartel { position: absolute; right: -1rem; bottom: 18%; z-index: 3; }
.cm-showcase__marguerite { position: absolute; left: -2.5rem; bottom: -1.5rem; z-index: 4; max-width: 340px; }
.cm-showcase__marguerite img { width: 128px; }
@media (max-width: 1024px) {
  .cm-showcase__cartel { display: none; }
  .cm-showcase__marguerite { left: -1rem; bottom: -1rem; max-width: 280px; }
}
@media (max-width: 767px) {
  .cm-showcase__badge { width: 84px; top: -.75rem; right: -.5rem; }
  .cm-showcase__badge img { width: 84px; height: 84px; }
  .cm-showcase__marguerite { position: static; max-width: none; margin-top: 1.25rem; }
}

/* Bento : quatre colonnes, certaines tuiles en occupent deux. */
.cm-bento { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.cm-bento > .e-con { width: auto !important; max-width: none !important; }
.cm-bento__wide { grid-column: span 2; }
@media (max-width: 1024px) { .cm-bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .cm-bento { grid-template-columns: 1fr; } .cm-bento__wide { grid-column: span 1; } }

/* Meta du héros : trois blocs séparés par un filet haut. */
.cm-herometa { border-top: 1px solid var(--line); }
.cm-herometa strong { display: block; color: var(--ink); font-weight: 700; font-size: .92rem; }
.cm-herometa, .cm-herometa p { font-size: .84rem; color: var(--ink-3); }
/* ---------- Ajustements Elementor --------------------------------------- */
/* Les conteneurs Elementor sont des flex : on neutralise les marges de widget. */
.e-con .elementor-widget:not(:last-child) { margin-block-end: 0; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Bandeau défilant */
.cm-ticker__track { width: max-content !important; max-width: none !important; flex-wrap: nowrap !important; }
.cm-ticker__item { width: auto !important; }
.cm-ticker__item .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  font-family: var(--body);
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;
}
.cm-ticker__item .elementor-heading-title::after { content: "\2733"; color: var(--sun); font-size: .95rem; }

/* Entête de section : colonne de lecture confortable. */
.cm-sectionhead { max-width: 660px; }
.cm-center { max-width: 660px; margin-left: auto; margin-right: auto; text-align: center; }
.cm-center .cm-eyebrow .elementor-heading-title { justify-content: center; }
.cm-center-row { justify-content: center; }
.cm-cta > .e-con-inner, .cm-cta { text-align: center; }
.cm-cta .cm-eyebrow .elementor-heading-title { justify-content: center; }
.cm-cta .elementor-widget-button .elementor-button-wrapper { text-align: center; }
.cm-cta .cm-lead { max-width: 52ch; margin-left: auto; margin-right: auto; }
.cm-cta h2.elementor-heading-title { max-width: 17ch; margin-left: auto; margin-right: auto; }

/* Icône de carte : l'arche du site, en miniature. */
.cm-cardicon .elementor-icon {
  width: 46px; height: 46px;
  border-radius: 50% 50% 6px 6px;
  background: var(--sun-light);
  color: var(--ink);
  display: grid; place-items: center;
  font-size: 18px;
}

/* Tuile : pastille posée sur l'image. */
.cm-tile__media { position: relative; }
.cm-tile__pill { position: absolute; top: .85rem; left: .85rem; z-index: 2; width: auto !important; }
.cm-tile__media .elementor-widget-image { width: 100%; }
.cm-tile__media img { border-radius: var(--r-md); aspect-ratio: 4 / 3.1; object-fit: cover; width: 100%; }

/* Pastilles et petits titres : ne pas s'étirer sur toute la largeur. */
.cm-pill { width: auto !important; }
.cm-pill .elementor-heading-title { display: inline-flex; }

/* Cartel : les trois lignes s'empilent sans marge. */
.cm-cartel .elementor-heading-title { margin: 0; }

/* Statistiques et prix : la manuscrite ne prend pas la casse des titres. */
.cm-stat__num .elementor-heading-title,
.cm-price .elementor-heading-title,
.cm-quote__stars .elementor-heading-title { text-transform: none; letter-spacing: 0; }

/* Marguerite : la bulle est un éditeur de texte, pas un paragraphe libre. */
.cm-marguerite__bubble p { margin: 0; color: var(--ink); }
.cm-marguerite .elementor-widget-image { width: auto; flex: 0 0 auto; }
.cm-marguerite .elementor-widget-text-editor { flex: 1 1 auto; }
.cm-marguerite--center { margin-left: auto; margin-right: auto; text-align: left; }

/* Héros : le titre respire, la colonne texte ne s'étale pas. */
.cm-hero h1.elementor-heading-title { max-width: 13ch; }
.cm-hero .cm-lead { max-width: 46ch; }
.cm-hero .elementor-widget-button .elementor-button-wrapper { display: inline-block; }

/* Boutons alignés à gauche par défaut, en ligne dans les rangées. */
.e-con .elementor-widget-button { width: auto; }
/* Date en coin d'image (calendrier). */
.cm-datetag {
  position: absolute; top: .85rem; right: .85rem; z-index: 2;
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: .45rem .6rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  min-width: 52px;
  width: auto !important;
}
.cm-datetag .elementor-heading-title { margin: 0; }
.cm-datetag__day .elementor-heading-title { font-family: var(--body); font-size: 1.2rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.cm-datetag__month .elementor-heading-title { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; line-height: 1.4; }

/* Badge seul, hors composition du héros. */
.cm-badge--solo img { width: 116px; height: 116px; }
.cm-badge--inline { position: absolute; top: -1.25rem; right: -1.25rem; }

/* Rôle d'une personne de l'équipe. */
.cm-person__role .elementor-heading-title { font-size: .78rem; color: var(--terra); font-weight: 700; font-family: var(--body); }

/* Étapes : la manuscrite garde sa casse. */
.cm-step__num .elementor-heading-title { text-transform: none; letter-spacing: 0; }

/* Accordéon FAQ : pastille jaune à droite, filets fins. */
.cm-faq .e-n-accordion-item-title { padding: 1.35rem 0; }
.cm-faq .e-n-accordion-item-title-text { font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 500; color: var(--ink); line-height: 1.3; }
.cm-faq details:hover .e-n-accordion-item-title-text { color: var(--terra); }
.cm-faq .e-n-accordion-item-title-icon { color: var(--ink); }
.cm-faq .e-n-accordion-item-title-icon span { background: var(--cream-2); border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; transition: background .26s var(--ease); }
.cm-faq details[open] .e-n-accordion-item-title-icon span,
.cm-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-icon span { background: var(--sun); }
/* Horaires : jour à gauche, créneau à droite, séparés par un filet. */
.cm-hours__row { border-bottom: 1px solid var(--line); }
.cm-hours__row:last-child { border-bottom: none; }
.cm-hours__day .elementor-heading-title { font-family: var(--body); font-size: .92rem; font-weight: 400; color: var(--ink); }
.cm-hours__val .elementor-heading-title { font-family: var(--body); font-size: .92rem; font-weight: 400; color: var(--ink-2); }
.cm-hours__row--open .elementor-heading-title { font-weight: 700; }
.cm-hours__row--closed .elementor-heading-title { color: var(--ink-3); }

/* Liste de coordonnées : l'intitulé en petites capitales au-dessus. */
.cm-infolist .elementor-icon-list-text strong { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .25rem; font-weight: 700; }
.cm-infolist .elementor-icon-list-item > a,
.cm-infolist .elementor-icon-list-item > span { align-items: flex-start; }
.cm-infolist .elementor-icon-list-icon { margin-top: .3rem; }

/* Puces jaunes de la liste à cocher. */
.cm-checklist .elementor-icon-list-icon i { font-size: 9px; }
.cm-checklist .elementor-icon-list-icon { margin-top: .45rem; }

/* Formulaire dans son panneau : pas de double cadre. */
.cm-panel .wpforms-container { max-width: none; }
.cm-panel .wpforms-field-container { display: grid; gap: 0; }

/* Carte Google : l'arrondi du site. */
.cm-map iframe, .cm-map .elementor-custom-embed { border-radius: var(--r-lg); }
.cm-map { border: 1px solid var(--line); }

/* Réseaux sociaux : pastilles crème qui virent au jaune. */
.cm-socials .elementor-social-icon {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  width: 40px; height: 40px;
  transition: background .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
}
.cm-socials .elementor-social-icon:hover { background: var(--sun); border-color: var(--sun); color: var(--ink); transform: translateY(-3px); }
.cm-socials .elementor-social-icon svg { fill: currentColor; width: 16px; height: 16px; }
/* ---------- En-tete et pied de page Xpro -------------------------------- */
.cm-header { position: sticky; top: 0; z-index: 100; }
.cm-header .cm-logo__mark img { width: 38px; height: 38px; }
.cm-header .cm-logo { text-decoration: none; }

.cm-logoname .elementor-heading-title,
.cm-logoname .xpro-heading-title {
  font-family: var(--display); font-size: 1.5rem; font-weight: 500; color: var(--ink); line-height: 1.05; margin: 0;
}
.cm-logotag .elementor-heading-title,
.cm-logotag .xpro-heading-title {
  font-family: var(--body); font-size: .54rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0; line-height: 1.4;
}

/* Menu Xpro : onglet terracotta clair sur la page courante. */
.cm-nav .xpro-nav-menu > li > a,
.cm-nav ul.xpro-nav-menu > li > a {
  font-family: var(--body); font-size: .86rem; font-weight: 400; color: var(--ink-2);
  padding: .5rem .8rem; border-radius: 999px;
  transition: background .26s var(--ease), color .26s var(--ease);
}
.cm-nav .xpro-nav-menu > li > a:hover { background: var(--cream-2); color: var(--ink); }
.cm-nav .xpro-nav-menu > li.current-menu-item > a,
.cm-nav .xpro-nav-menu > li.current_page_item > a { background: var(--terra-light); color: var(--ink); font-weight: 700; }

/* Liens du pied de page : petits, sobres, terracotta au survol. */
.cm-footlink .xpro-heading-title,
.cm-footlink .elementor-heading-title { font-family: var(--body); font-size: .9rem; font-weight: 400; color: var(--ink-2); margin: 0; line-height: 1.7; }
.cm-footlink a { color: var(--ink-2); text-decoration: none; }
.cm-footlink:hover a, .cm-footlink a:hover { color: var(--terra); }
.cm-footer__title .xpro-heading-title,
.cm-footer__title .elementor-heading-title {
  color: var(--ink); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; font-family: var(--body); margin: 0;
}
.cm-footer .xpro-social-icon-wrapper a,
.cm-socials-x .xpro-social-icon-list a {
  border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink);
}
.cm-footer__bottom .xpro-heading-title,
.cm-footer__bottom .elementor-heading-title { font-size: .8rem; color: var(--ink-3); margin: 0; font-family: var(--body); font-weight: 400; }
/* ---------- Reprise des couleurs tierces (WPForms, Astra) --------------- */
/* Ces greffons arrivent avec leur propre bleu et leur propre rouge :
   on les ramène dans la palette « galerie claire ». */
.wpforms-container a,
.wpforms-container .wpforms-form a { color: var(--terra-btn); }
.wpforms-container a:hover { color: var(--terra-btn-2); }
.wpforms-container .wpforms-required-label,
.wpforms-container label.wpforms-error,
.wpforms-container em.wpforms-error,
.wpforms-container .wpforms-error-container { color: var(--error); }
.wpforms-container input.wpforms-error,
.wpforms-container textarea.wpforms-error,
.wpforms-container select.wpforms-error { border-color: var(--error); }
.wpforms-container .wpforms-field-label-inline a { color: var(--terra-btn); }

/* Aucun aplat blanc pur ni noir sur le site : c'est la première regle. */
.wpforms-container .wpforms-form input,
.wpforms-container .wpforms-form select,
.wpforms-container .wpforms-form textarea { background-color: var(--cream); color: var(--ink); }
.ast-scroll-top { background-color: var(--terra-btn) !important; color: var(--cream-btn) !important; border-radius: 999px; }
.ast-scroll-top:hover { background-color: var(--terra-btn-2) !important; }
/* Monogramme Xpro : l'arche en miniature, 38px. */
.cm-monogram img, .cm-monogram .xpro-site-logo img { width: 38px; height: 38px; }
.cm-monogram a { display: block; line-height: 0; }

/* Dernier reste de bleu WPForms : focus, cases à cocher, boutons radio. */
.wpforms-container { --wpforms-button-background-color: var(--terra-btn); --wpforms-button-text-color: var(--cream-btn); --wpforms-field-border-color: var(--line); --wpforms-label-color: var(--ink); --wpforms-label-sublabel-color: var(--ink-3); --wpforms-label-error-color: var(--error); --wpforms-page-break-color: var(--terra-btn); --wpforms-field-text-color: var(--ink); --wpforms-field-background-color: var(--cream); }
.wpforms-container input[type=checkbox], .wpforms-container input[type=radio] { accent-color: var(--terra); }
.wpforms-container :focus-visible { outline-color: var(--ink); }
/* ---------- Colonnes jumelles : photo et texte côte à côte ---------------
   Les largeurs en pourcentage ne comptent pas l'écart entre colonnes : 53 % +
   43 % + un écart de 64 px dépassent la largeur du conteneur, et la seconde
   colonne passait à la ligne. On les laisse se partager la place au lieu de
   les forcer, et on ne replie qu'à partir de la tablette. */
@media (min-width: 1025px) {
  .cm-split { flex-wrap: nowrap !important; }
  .cm-split > .e-con { min-width: 0; flex-shrink: 1; }
}
/* En-tete : logo et bouton gardent leur taille, le menu prend le reste. */
.cm-header__inner > .e-con:first-child { flex: 0 0 auto; }
.cm-header__inner > .cm-nav { flex: 1 1 auto; }
.cm-header__inner > .e-con:last-child { flex: 0 0 auto; }
@media (max-width: 1024px) {
  .cm-header__inner { flex-wrap: nowrap !important; }
  .cm-header__inner > .e-con:last-child { display: none; }
}
/* Filet de securite : couvre aussi les rangees en conteneur 'boite'. */
@media (min-width: 1025px) {
  .cm-split > .e-con-inner { flex-wrap: nowrap !important; }
  .cm-split > .e-con-inner > .e-con { min-width: 0; flex-shrink: 1; }
}

/* ---------- Les artisans (page À propos) -------------------------------- */
.cm-maker { transition: transform .38s var(--ease); }
.cm-maker:hover { transform: translateY(-5px); }
.cm-maker .elementor-widget-image img { aspect-ratio: 4 / 3.4; object-fit: cover; width: 100%; }
.cm-maker h3.elementor-heading-title { margin-bottom: 0; }
.cm-maker__atelier .elementor-heading-title {
  font-family: var(--body); font-size: .78rem; font-weight: 700; color: var(--terra); letter-spacing: 0; text-transform: none;
}
.cm-maker .elementor-widget-text-editor p { font-size: .9rem; }
.cm-maker .cm-pill { margin-top: .35rem; }
/* « plusieurs » remplace un chiffre : la manuscrite doit rester lisible. */
.cm-stat__num .elementor-heading-title { font-size: clamp(2rem, 3.6vw, 2.9rem); overflow-wrap: break-word; }

/* Fiche artisan cliquable vers son compte. */
.cm-maker a { text-decoration: none; }
.cm-maker:hover h3.elementor-heading-title { color: var(--terra); }

/* Le nom de l'artisan renvoie vers son compte, dans un nouvel onglet. */
.cm-maker__nom a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: baseline; gap: .35rem; }
.cm-maker__nom a::after { content: "\2197"; font-size: .7em; color: var(--terra); transition: transform .26s var(--ease); }
.cm-maker__nom a:hover { color: var(--terra); }
.cm-maker:hover .cm-maker__nom a::after { transform: translate(2px,-2px); }

/* ==========================================================================
   MOBILE - marges laterales, en-tete, chevauchements
   ========================================================================== */

/* 1. De l'air sur les cotes. Les sections n'avaient aucune marge laterale :
      sur telephone le texte touchait le bord de l'ecran. */
.cm-section, .cm-header, .cm-footer { padding-inline: 28px !important; }
@media (max-width: 767px) {
  .cm-section, .cm-header, .cm-footer { padding-inline: 20px !important; }
}
/* Le bandeau defilant garde toute la largeur : c'est le principe. */
.cm-ticker { padding-inline: 0 !important; }

/* 2. En-tete
      a) Le logo garde ses proportions au lieu d'etre ecrase dans un carre.
      b) Logo et nom alignes sur le meme axe.
      c) Sur tablette et telephone, le logo prend la place disponible et le
         menu se replie sur son bouton, qui reste a portee de pouce. */
.cm-header .cm-logo { align-items: center; }
.cm-header .cm-logo__mark { width: auto !important; flex: 0 0 auto; }
.cm-header .cm-logo__mark img,
.cm-header .cm-monogram img { width: auto !important; height: 48px !important; max-width: none; display: block; }

@media (max-width: 1024px) {
  .cm-header__inner > .e-con:first-child { width: auto !important; flex: 1 1 auto; min-width: 0; }
  .cm-header__inner > .cm-nav { width: auto !important; flex: 0 0 auto; }
  .cm-nav .xpro-horizontal-menu-toggle,
  .cm-nav .xpro-menu-toggle { display: inline-flex !important; }
}
@media (max-width: 767px) {
  .cm-header .cm-logo__mark img,
  .cm-header .cm-monogram img { height: 40px !important; }
  .cm-logoname .xpro-heading-title, .cm-logoname .elementor-heading-title { font-size: 1.25rem; }
  .cm-logotag .xpro-heading-title, .cm-logotag .elementor-heading-title { font-size: .5rem; }
}

/* 3. Heros : sur telephone, la pastille et Marguerite ne se posent plus
      par-dessus la photo, elles passent dessous. */
@media (max-width: 767px) {
  .cm-showcase__badge { position: static !important; width: 84px; margin: -2.5rem 0 0 auto; }
  .cm-showcase__marguerite { position: static !important; max-width: none; margin-top: 1rem; }
  .cm-showcase__cartel { display: none; }
}

/* 4. Grilles : une seule colonne sur telephone, avec un vrai espace entre
      les cartes plutot que des photos collees les unes aux autres. */
@media (max-width: 767px) {
  .cm-bento { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .cm-bento__wide { grid-column: span 1 !important; }
  .e-con.e-flex > .e-con { row-gap: 0; }
}
/* ---------- Menu Xpro : vrais noms de classes ---------------------------- */
/* Les regles precedentes visaient .xpro-nav-menu, qui n'existe pas dans le
   rendu : le menu n'etait donc pas habille du tout. */
.cm-nav .xpro-elementor-horizontal-navbar-nav { gap: .1rem; }
.cm-nav .xpro-elementor-horizontal-navbar-nav > li > a.xpro-elementor-nav-link {
  font-family: var(--body);
  font-size: .86rem;
  font-weight: 400;
  color: var(--ink-2);
  padding: .5rem .8rem;
  border-radius: 999px;
  transition: background .26s var(--ease), color .26s var(--ease);
}
.cm-nav .xpro-elementor-horizontal-navbar-nav > li > a.xpro-elementor-nav-link:hover {
  background: var(--cream-2); color: var(--ink);
}
.cm-nav .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a.xpro-elementor-nav-link,
.cm-nav .xpro-elementor-horizontal-navbar-nav > li.current_page_item > a.xpro-elementor-nav-link {
  background: var(--terra-light); color: var(--ink); font-weight: 700;
}

/* Bouton hamburger : bien visible, assez grand pour le pouce. */
.cm-nav .xpro-elementor-horizontal-menu-toggler,
.cm-nav .xpro-elementor-horizontal-menu-close {
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
.cm-nav .xpro-elementor-horizontal-menu-toggler svg,
.cm-nav .xpro-elementor-horizontal-menu-close svg { width: 18px; height: 18px; fill: currentColor; }
.cm-nav .xpro-elementor-horizontal-menu-toggler:hover { background: var(--terra-light); }
.cm-nav .xpro-elementor-horizontal-menu-toggler-wrapper { display: flex; justify-content: flex-end; }

/* Panneau deroulant : creme, jamais un aplat sombre, titres en Cormorant. */
@media (max-width: 1024px) {
  .cm-nav .xpro-elementor-horizontal-navbar { background: var(--cream); }
  .cm-nav .xpro-elementor-horizontal-navbar-nav { flex-direction: column; align-items: flex-start; gap: .25rem; padding: 1rem; }
  .cm-nav .xpro-elementor-horizontal-navbar-nav > li { width: 100%; }
  .cm-nav .xpro-elementor-horizontal-navbar-nav > li > a.xpro-elementor-nav-link {
    font-family: var(--display);
    font-size: 1.6rem;
    font-weight: 400;
    padding: .55rem .6rem;
    display: block;
    width: 100%;
  }
  .cm-nav .xpro-elementor-horizontal-menu-close { position: absolute; top: 1rem; right: 1rem; z-index: 5; }
}
/* ---------- Galerie bento : des rangees regulieres ----------------------- */
/* Les photos de la boutique sont en portrait 3:4. Sans cadrage impose, les
   tuiles larges devenaient enormes et la rangee prenait leur hauteur. */
.cm-bento .cm-arch img { aspect-ratio: 1 / 1.15; object-fit: cover; width: 100%; height: auto; }
.cm-bento .cm-bento__wide .cm-arch img { aspect-ratio: 2 / 1.15; }
.cm-bento > .e-con { min-width: 0; }
@media (max-width: 1024px) {
  .cm-bento .cm-bento__wide .cm-arch img { aspect-ratio: 2 / 1.3; }
}
@media (max-width: 767px) {
  .cm-bento .cm-arch img,
  .cm-bento .cm-bento__wide .cm-arch img { aspect-ratio: 4 / 3.2; }
}

/* ---------- Rien ne deborde sur la section suivante ---------------------- */
/* Chaque section forme son propre plan : un visuel ne peut plus passer
   par-dessus le titre qui suit. */
.cm-section, .cm-page-hero, .cm-cta { position: relative; z-index: 1; }
.cm-section .elementor-widget-image img { max-width: 100%; height: auto; }
.cm-arch { overflow: hidden; }
/* ---------- Correctif : bouton menu visible sur ordinateur --------------- */
/* Les regles precedentes forcaient display:inline-flex sans limite de
   largeur : le hamburger et la croix de fermeture s'affichaient aussi sur
   grand ecran, a cote du menu deroule. */
@media (min-width: 1025px) {
  .cm-nav .xpro-elementor-horizontal-menu-toggler-wrapper,
  .cm-nav .xpro-elementor-horizontal-menu-toggler,
  .cm-nav .xpro-elementor-horizontal-menu-close { display: none !important; }
}
@media (max-width: 1024px) {
  .cm-nav .xpro-elementor-horizontal-menu-toggler { display: inline-flex !important; }
  .cm-nav .xpro-elementor-horizontal-menu-close { display: inline-flex !important; }
}

/* Le menu doit tenir sur une seule ligne : on rend sa colonne elastique et
   on resserre legerement les onglets entre 1025 et 1240 px. */
.cm-header__inner > .cm-nav { width: auto !important; flex: 1 1 auto; min-width: 0; }
.cm-nav .xpro-elementor-horizontal-navbar-nav { flex-wrap: nowrap; justify-content: flex-end; }
@media (min-width: 1025px) and (max-width: 1300px) {
  .cm-nav .xpro-elementor-horizontal-navbar-nav > li > a.xpro-elementor-nav-link {
    font-size: .8rem; padding: .45rem .6rem;
  }
  .cm-header__inner > .e-con:last-child { width: 170px !important; }
}
/* ==========================================================================
   CORRECTIF - la place de l'image est reservee par son cadre
   --------------------------------------------------------------------------
   Le cadrage etait pose sur la balise <img>. Tant que la photo n'est pas
   chargee, une image n'occupe aucune place : le cadre retombait a la hauteur
   d'une ligne de texte (28 px) et le titre de la section suivante venait se
   poser par-dessus. On deplace donc le cadrage sur le cadre lui-meme, qui
   garde sa hauteur quoi qu'il arrive.
   ========================================================================== */

/* Le cadre ne clippe plus a l'aveugle : l'arrondi est deja porte par l'image. */
.cm-arch { overflow: visible; }

/* Regle generale : tout cadre d'image garde sa hauteur. */
.cm-ratio,
.cm-bento .cm-arch,
.cm-tile__media .elementor-widget-image,
.cm-maker .elementor-widget-image,
.cm-arch--portrait,
.cm-arch--tall {
  display: block;
  overflow: hidden;
  border-radius: inherit;
}
.cm-ratio > .elementor-widget-container,
.cm-bento .cm-arch > .elementor-widget-container,
.cm-tile__media .elementor-widget-image > .elementor-widget-container,
.cm-maker .elementor-widget-image > .elementor-widget-container,
.cm-arch--portrait > .elementor-widget-container,
.cm-arch--tall > .elementor-widget-container { height: 100%; }

/* L'image remplit son cadre, sans jamais le definir. */
.cm-bento .cm-arch img,
.cm-tile__media .elementor-widget-image img,
.cm-maker .elementor-widget-image img,
.cm-arch--portrait img,
.cm-arch--tall img {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
  display: block;
}

/* Les proportions, cadre par cadre. */
.cm-bento .cm-arch { aspect-ratio: 1 / 1.15; }
.cm-bento .cm-bento__wide .cm-arch { aspect-ratio: 2 / 1.15; }
.cm-tile__media .elementor-widget-image { aspect-ratio: 4 / 3.1; }
.cm-maker .elementor-widget-image { aspect-ratio: 4 / 3.4; }
.cm-arch--portrait { aspect-ratio: 3 / 4; }
.cm-arch--tall { aspect-ratio: 1 / 1.12; }

@media (max-width: 1024px) { .cm-bento .cm-bento__wide .cm-arch { aspect-ratio: 2 / 1.3; } }
@media (max-width: 767px) {
  .cm-bento .cm-arch,
  .cm-bento .cm-bento__wide .cm-arch { aspect-ratio: 4 / 3.2; }
}

/* Les photos sans cadrage impose (histoire, la maison) gardent leurs
   proportions naturelles mais ne peuvent plus s'effondrer. */
.cm-arch:not(.cm-arch--portrait):not(.cm-arch--tall) img { height: auto; }

/* ---------- En-tete mobile : logo et nom sur le meme axe ----------------- */
.cm-header .cm-logo { justify-content: flex-start; gap: 10px; }
.cm-header .cm-logo__text { align-items: flex-start; }
.cm-header .cm-logo__text .xpro-heading-title,
.cm-header .cm-logo__text .elementor-heading-title { text-align: left; }

/* ---------- Heros : moins de vide au-dessus du titre sur telephone ------- */
@media (max-width: 767px) {
  .cm-hero { padding-top: 24px !important; padding-bottom: 40px !important; }
}
/* ==========================================================================
   LA CAUSE : le cadre d'image retombait a zero
   --------------------------------------------------------------------------
   Elementor pose --container-widget-height:100% sur les conteneurs. Applique
   a un widget Image dont le parent n'a pas de hauteur definie, cela donne un
   cadre de 0 px : la photo debordait, et le titre suivant se retrouvait
   par-dessus. On rend leur hauteur naturelle aux cadres d'image.
   ========================================================================== */
.elementor-widget-image { height: auto !important; }
.e-con > .elementor-widget-image,
.e-con-inner > .elementor-widget-image { align-self: auto; }

/* Les cadres cadres garden leur proportion, l'image les remplit. */
.cm-bento .cm-arch,
.cm-tile__media .elementor-widget-image,
.cm-maker .elementor-widget-image,
.cm-arch--portrait,
.cm-arch--tall { display: block; overflow: hidden; }

.cm-bento .cm-arch img,
.cm-tile__media .elementor-widget-image img,
.cm-maker .elementor-widget-image img,
.cm-arch--portrait img,
.cm-arch--tall img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; display: block; }
/* ==========================================================================
   GALERIE BENTO - correctif definitif
   --------------------------------------------------------------------------
   Dans une grille CSS, une image en largeur 100 % ne contribue pour rien au
   calcul de la hauteur des rangees : celles-ci tombaient a 0 px et les photos
   debordaient par-dessus le texte suivant. On donne donc la proportion a la
   case elle-meme, dont la largeur est connue, et l'image la remplit.
   ========================================================================== */
.cm-bento > .e-con {
  aspect-ratio: 1 / 1.15;
  height: auto !important;
  min-height: 0;
}
.cm-bento > .cm-bento__wide { aspect-ratio: 2 / 1.15; }

.cm-bento > .e-con > .cm-arch {
  height: 100% !important;
  aspect-ratio: auto !important;
  overflow: hidden;
}
.cm-bento > .e-con > .cm-arch img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  aspect-ratio: auto !important;
  display: block;
}

@media (max-width: 1024px) { .cm-bento > .cm-bento__wide { aspect-ratio: 2 / 1.3; } }
@media (max-width: 767px) {
  .cm-bento > .e-con,
  .cm-bento > .cm-bento__wide { aspect-ratio: 4 / 3.2; }
}
/* ==========================================================================
   CADRES D'IMAGE - solution definitive
   --------------------------------------------------------------------------
   aspect-ratio ne suffit pas ici : une image en largeur 100 % ne compte pour
   rien quand le navigateur calcule la hauteur d'un conteneur flex ou d'une
   rangee de grille. Le cadre retombait a 0 px, la photo debordait, et le
   texte suivant venait se poser dessus.

   On reserve donc la place avec un padding en pourcentage, qui se calcule
   toujours sur la largeur - connue des le depart - et on pose la photo par
   dessus. La place est tenue avant meme que l'image soit chargee.
   ========================================================================== */
.cm-arch,
.cm-tile__media .elementor-widget-image,
.cm-maker .elementor-widget-image {
  position: relative !important;
  display: block !important;
  height: 0 !important;
  overflow: hidden !important;
  aspect-ratio: auto !important;
}

.cm-arch            { padding-top: 125% !important; }  /* photo verticale */
.cm-arch--tall      { padding-top: 112% !important; }  /* heros */
.cm-arch--portrait  { padding-top: 133% !important; }  /* portraits */
.cm-tile__media .elementor-widget-image { padding-top: 77.5% !important; }
.cm-maker .elementor-widget-image       { padding-top: 85% !important; }

/* Dans la galerie bento, c'est la case qui porte la proportion. */
.cm-bento > .e-con > .cm-arch { padding-top: 0 !important; height: 100% !important; }

.cm-arch img,
.cm-tile__media .elementor-widget-image img,
.cm-maker .elementor-widget-image img {
  position: absolute !important;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  aspect-ratio: auto !important;
  display: block !important;
}

/* Sur telephone, les photos larges respirent un peu plus. */
@media (max-width: 767px) {
  .cm-arch { padding-top: 100% !important; }
  .cm-arch--tall { padding-top: 105% !important; }
}
/* ---------- Plus de defilement lateral parasite -------------------------- */
/* Le panneau du menu mobile est gare hors ecran, a droite : il doublait la
   largeur de la page et on pouvait la faire glisser sur le cote. On coupe ce
   depassement. « clip » plutot que « hidden » : l'en-tete reste collant. */
html { overflow-x: clip; }
@media (max-width: 1024px) {
  .cm-nav .xpro-elementor-horizontal-navbar-wrapper { max-width: 100vw; }
}
/* ---------- Bandeau defilant : la meme etoile partout -------------------- */
/* Le caractere U+2733 sort en emoji couleur sur iPhone et iPad, et en simple
   glyphe sur ordinateur. On le remplace par un dessin vectoriel : identique
   partout, et toujours du jaune de la charte. */
.cm-ticker__item .elementor-heading-title::after {
  content: "";
  width: 11px; height: 11px;
  flex: 0 0 auto;
  background-color: var(--sun);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Crect x='10.6' y='2' width='2.8' height='20' rx='1.4'/%3E%3Crect x='10.6' y='2' width='2.8' height='20' rx='1.4' transform='rotate(45 12 12)'/%3E%3Crect x='10.6' y='2' width='2.8' height='20' rx='1.4' transform='rotate(90 12 12)'/%3E%3Crect x='10.6' y='2' width='2.8' height='20' rx='1.4' transform='rotate(135 12 12)'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Crect x='10.6' y='2' width='2.8' height='20' rx='1.4'/%3E%3Crect x='10.6' y='2' width='2.8' height='20' rx='1.4' transform='rotate(45 12 12)'/%3E%3Crect x='10.6' y='2' width='2.8' height='20' rx='1.4' transform='rotate(90 12 12)'/%3E%3Crect x='10.6' y='2' width='2.8' height='20' rx='1.4' transform='rotate(135 12 12)'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Panneau du menu mobile : aux couleurs de la maison ----------- */
@media (max-width: 1024px) {
  .cm-nav .xpro-elementor-horizontal-navbar-wrapper {
    background: var(--cream) !important;
    box-shadow: -18px 0 44px rgba(31, 59, 44, .12);
  }
  .cm-nav .xpro-elementor-horizontal-navbar-nav {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    padding: 0 !important;
  }
  .cm-nav .xpro-elementor-horizontal-navbar-nav > li { width: 100%; }
  .cm-nav .xpro-elementor-horizontal-navbar-nav > li > a.xpro-elementor-nav-link {
    font-family: var(--display) !important;
    font-size: 1.75rem !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    color: var(--ink) !important;
    text-align: left !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 1rem .2rem !important;
    display: block !important;
    width: 100% !important;
  }
  .cm-nav .xpro-elementor-horizontal-navbar-nav > li:last-child > a.xpro-elementor-nav-link { border-bottom: 0 !important; }
  .cm-nav .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a.xpro-elementor-nav-link,
  .cm-nav .xpro-elementor-horizontal-navbar-nav > li.current_page_item > a.xpro-elementor-nav-link {
    color: var(--terra) !important;
    font-weight: 500 !important;
  }
  /* La croix de fermeture reprend le bouton hamburger. */
  .cm-nav .xpro-elementor-horizontal-menu-close {
    top: 22px !important; right: 20px !important;
    width: 44px !important; height: 44px !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--ink) !important;
  }
}