/* =====================================================================
   Clair & Net 06 — pont Elementor
   Adapte le design system (clairetnet.css, copie du kit) au DOM produit par Elementor.
   Chargé APRÈS elementor-frontend (functions.php, priorité 30).
   Règles : la mise en page (display, padding, margin, largeur, position) se règle en natif
   dans Elementor ; ici seulement l'habillage et les sélecteurs que le kit ne peut pas atteindre.
   Spécificité cible : .elementor-widget-{type}.cn-x .interne (0,3,0).
   ===================================================================== */

/* ---------- Polices auto-hébergées (assets/fonts/, licence OFL) ---------- */
@font-face { font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/DMSerifDisplay-Regular.woff2') format('woff2'); }
@font-face { font-family: 'DM Serif Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/DMSerifDisplay-Italic.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/Manrope-Variable.woff2') format('woff2-variations'), url('fonts/Manrope-Variable.woff2') format('woff2'); }

/* ---------- Footer : liens des menus rendus par [cn_menu] (classes d'items WP) ---------- */
.cn-footer nav a.cn-footer__all { color: #fff; font-weight: 600; margin-top: 4px; }
.cn-footer nav a.cn-footer__muted { margin-top: 8px; color: rgba(255, 255, 255, .55); }
.cn-footer nav a.cn-footer__ig { display: flex; align-items: center; gap: 8px; }

/* ---------- Header ---------- */
/* Header clair : le logo de la cliente n'existe que sur fond blanc (décision du 21/09/2026). */
.e-con.cn-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); color: var(--cn-ink); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cn-line); }
.elementor-widget-image.cn-brand__logo { flex: 0 0 auto; }
.elementor-widget-image.cn-brand__logo a { display: block; }
.elementor-widget-image.cn-brand__logo img { display: block; width: auto; height: 76px; max-width: none; } /* logo seul : assez grand pour que « CLAIR & NET » se lise */
@media (max-width: 760px) { .elementor-widget-image.cn-brand__logo img { height: 60px; } }
.elementor-widget-heading.cn-logo .elementor-heading-title { font-size: 21px; } }
@media (max-width: 370px) { .elementor-widget-heading.cn-logo { display: none; } }
.elementor-widget-heading.cn-logo .elementor-heading-title { font-family: var(--cn-font-display); font-size: 26px; letter-spacing: -0.01em; white-space: nowrap; line-height: 1; }
.elementor-widget-heading.cn-logo .elementor-heading-title { color: var(--cn-ink); }
.elementor-widget-heading.cn-logo em { font-style: italic; color: var(--cn-accent-ink); margin: 0 6px; }
/* Le CTA du menu (« Demander un devis gratuit ») n'existe que dans le menu déroulant mobile */
.elementor-widget-nav-menu .elementor-nav-menu--main .cn-menu-cta { display: none; }
.elementor-widget-nav-menu .elementor-nav-menu--dropdown .cn-menu-cta { margin-top: 8px; padding: 0 20px 12px; }
.elementor-widget-nav-menu .elementor-nav-menu--dropdown .cn-menu-cta > a { display: flex; justify-content: center; height: 50px; background: var(--cn-accent); color: var(--cn-on-accent) !important; font-weight: 700; font-size: 16px; }
.elementor-widget-nav-menu .elementor-nav-menu--dropdown a { border-bottom: 1px solid var(--cn-line-2); }
.elementor-widget-nav-menu .elementor-nav-menu--dropdown { border-top: 1px solid var(--cn-line); }
/* Item « Services » actif sur les pages services (une ancre n'est jamais active pour Elementor) */
body.cn-type-service .elementor-nav-menu--main .elementor-nav-menu > .menu-item:first-child > a { color: var(--cn-accent-ink); } /* premier niveau seulement : pas le premier lien du sous-menu */
.elementor-widget-button.cn-b--iconbtn .elementor-button { width: 44px; height: 44px; padding: 0; border: 1px solid rgba(15, 27, 63, .25); background: transparent; color: var(--cn-accent-ink); }
.elementor-widget-button.cn-b--iconbtn .elementor-button:hover { background: var(--cn-accent-tint); color: var(--cn-accent-ink); }

/* ---------- Hero ---------- */
.elementor-widget-image.cn-hero__img { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; margin: 0; z-index: 0; }
.elementor-widget-image.cn-hero__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.elementor-widget-image.cn-hero__img--top img { object-position: 50% 0%; }
.elementor-widget-image.cn-hero__img--top-right img { object-position: 68% 0%; } /* sujet à droite : reste dans le cadre en portrait (mobile) */
.elementor-widget-image.cn-hero__img--bottom img { object-position: 50% 88%; }
.cn-hero > .e-con { position: relative; }
/* Hero « art » (accueil) : illustration lumineuse de la cliente SUR TOUTE LA LARGEUR (choix de l'utilisateur), sujet centré.
   Lisibilité du texte : l'image est élargie à 118 % et calée à gauche (le personnage glisse vers la droite, hors de la colonne de
   texte), un dégradé bleu nuit couvre le côté texte et s'efface avant le visage, la colonne est étroite, les textes ont une ombre.
   Les chiffres passent en bandeau sous le hero (cn_stats_band) : posés sur l'image, ils couvriraient le personnage. */
.cn-hero--art .elementor-widget-image.cn-hero__img { right: auto; width: 118%; }
.cn-hero--art .elementor-widget-image.cn-hero__img img { object-position: 0% 6%; }
@media (min-width: 1025px) { /* bureau seulement : à ≤ 1024 px c'est le dégradé « bandeau » du kit (clairetnet.css) qui s'applique à tous les heros */
  .cn-hero--art::after { background: linear-gradient(90deg, rgba(15, 27, 63, .95) 0%, rgba(15, 27, 63, .92) 30%, rgba(15, 27, 63, .74) 40%, rgba(15, 27, 63, .32) 49%, rgba(15, 27, 63, 0) 58%), linear-gradient(180deg, rgba(15, 27, 63, 0) 68%, rgba(15, 27, 63, .55) 100%); }
}
@media (min-width: 1280px) {
  /* Grands écrans : la colonne de texte (conteneur centré de 1160 px) avance vers le milieu. L'illustration est décalée de 12 % vers la
     droite plutôt qu'agrandie (moins de flou) : sa bande gauche, de toute façon sous le dégradé, laisse place au bleu nuit plein. */
  .cn-hero--art .elementor-widget-image.cn-hero__img { left: 12%; width: 108%; }
  .cn-hero--art::after { background: linear-gradient(90deg, rgba(15, 27, 63, 1) 0%, rgba(15, 27, 63, 1) 13%, rgba(15, 27, 63, .93) 32%, rgba(15, 27, 63, .72) 41%, rgba(15, 27, 63, .30) 49%, rgba(15, 27, 63, 0) 58%), linear-gradient(180deg, rgba(15, 27, 63, 0) 68%, rgba(15, 27, 63, .55) 100%); }
}
.cn-hero--art .e-con.cn-hero__col { max-width: 470px; }
.cn-hero--art .elementor-widget-heading.cn-h1 .elementor-heading-title { font-size: clamp(36px, 3.6vw, 54px); text-shadow: 0 2px 18px rgba(15, 27, 63, .65); } /* quatre lignes, sans coupure à « Alpes-Maritimes » */
.cn-hero--art .elementor-widget-text-editor.cn-lead p, .cn-hero--art .elementor-widget-heading.cn-kicker .elementor-heading-title { text-shadow: 0 1px 10px rgba(15, 27, 63, .8); }
.cn-hero--art .elementor-widget-text-editor.cn-lead p { color: #fff; }
.cn-hero--art .elementor-widget-button.cn-b--light .elementor-button { background: rgba(15, 27, 63, .55); }
.e-con.cn-stats-band { border-top: 1px solid rgba(255, 255, 255, .10); }
.e-con.cn-stats-band .elementor-widget-heading.cn-glass__num .elementor-heading-title { font-size: 34px; }
@media (max-width: 1024px) {
  /* Tous les heros (services, villes, contact, accueil) : la photo en bandeau haut pleine largeur, le texte dessous sur le bleu nuit
     (retour de la cliente, 21/09/2026 : à 390 px la photo pleine hauteur sous le texte étirait la section à 1 000 px et n'en montrait
     qu'une bande étroite). Hauteur du bandeau : --cn-hero-band (clairetnet.css), ≈ 3:2 à 390 px, plafonnée à 420 px. */
  .e-con.cn-hero { --min-height: 0px; min-height: 0; justify-content: flex-start; } /* (0,2,0) : bat .cn-hero--compact et .e-con { min-height: var(--min-height) } ; la variable d'Elementor (640/460) n'est plus lue */
  .cn-hero .elementor-widget-image.cn-hero__img { inset: 0 0 auto 0; width: 100%; height: var(--cn-hero-band); } /* après la règle « art » de bureau (right: auto ; width: 118 %), qu'elle bat par l'ordre */
  /* Spécificité (0,4,0) : le padding du conteneur est posé par Elementor en (0,3,0) sur l'élément lui-même (appliqué à .e-con-inner via la variable héritée). */
  .e-con.cn-hero > .e-con.e-grid { --padding-top: calc(var(--cn-hero-band) + 4px); }
  /* Variante « art » (accueil) : bandeau plus haut (illustration 8:3, sujet centré), cadrage sur le visage, colonne de texte libérée. */
  .e-con.cn-hero.cn-hero--art { --cn-hero-band: clamp(280px, 46vw, 420px); }
  .cn-hero--art .elementor-widget-image.cn-hero__img img { object-position: 50% 18%; }
  .cn-hero--art .e-con.cn-hero__col { max-width: none; }
}
.e-con.cn-glass { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(10px); justify-self: end; }
.elementor-widget-heading.cn-glass__num .elementor-heading-title { font-family: var(--cn-font-display); font-size: 40px; line-height: 1; display: flex; align-items: center; gap: 8px; color: #fff; }
.elementor-widget-heading.cn-glass__label .elementor-heading-title { margin-top: 4px; font-size: 13px; color: rgba(255, 255, 255, .8); font-family: var(--cn-font-body); }
.cn-star-ico { display: inline-block; width: 22px; height: 22px; background: var(--cn-star); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- Sections : en-têtes, eyebrow, texte ---------- */
/* Les widgets sont des enfants flex : les marges du kit posées sur les classes doivent viser le wrapper. */
.e-con > .elementor-widget.cn-eyebrow { margin-block-end: 10px; }
.cn-section__head > .elementor-widget.cn-section__intro p { color: var(--cn-muted); text-wrap: pretty; }
.elementor-widget-text-editor.cn-text p { font-size: 17px; color: var(--cn-muted); text-wrap: pretty; }
.cn-section--dark .elementor-widget-text-editor.cn-text p { color: rgba(255, 255, 255, .8); }
.elementor-widget-text-editor.cn-lead p { font-size: 18px; line-height: 1.6; color: var(--cn-muted); text-wrap: pretty; }
.cn-hero .elementor-widget-text-editor.cn-lead p, .cn-section--dark .elementor-widget-text-editor.cn-lead p { color: rgba(255, 255, 255, .86); }
.elementor-widget-heading.cn-kicker .elementor-heading-title { font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cn-accent); font-family: var(--cn-font-body); }
.elementor-widget-heading.cn-link-more .elementor-heading-title { font-size: 16px; font-weight: 700; font-family: var(--cn-font-body); }
.elementor-widget-heading.cn-link-more .elementor-heading-title a { color: var(--cn-accent-ink); }
.elementor-widget-heading.cn-link-more .elementor-heading-title a:hover { color: var(--cn-accent-ink-hover); }

/* ---------- Cartes services (a.cn-card > widgets) ---------- */
.e-con.cn-card > .elementor-widget-image.cn-card__img { width: calc(100% + 48px); max-width: none; margin: -24px -24px 0; }
.e-con.cn-card > .elementor-widget-image.cn-card__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.e-con.cn-card > .elementor-widget-text-editor { flex: 1 1 auto; }
.e-con.cn-card > .elementor-widget-text-editor p { font-size: 15px; color: var(--cn-muted); }
.elementor-widget-heading.cn-card__link .elementor-heading-title { font-size: 14px; font-weight: 700; color: var(--cn-accent-ink); font-family: var(--cn-font-body); }
.e-con.cn-card .elementor-heading-title { color: var(--cn-ink); }
/* Grille des services (accueil) : 6 pistes, 2 par carte ; les cartes larges (services piliers, en tête) en prennent 3 et passent à
   l'horizontale : la grille est toujours pleine (11 services = 2 larges + 3×3). Tablette : 2 colonnes ; mobile : 1 colonne. */
.e-con.cn-cards > .e-con.cn-card { grid-column: span 2; }
.e-con.cn-cards > .e-con.cn-card--wide { grid-column: span 3; }
.e-con.cn-card--wide > .elementor-widget-image.cn-card__img { aspect-ratio: auto; } /* le kit impose 4:3 au bloc image : ici c'est l'<img> qui fixe le format (16:9 ou pleine hauteur) */
.e-con.cn-card--wide > .e-con.cn-card__body { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; padding: 0; flex: 1 1 auto; }
.e-con.cn-card--wide > .e-con.cn-card__body > .elementor-widget-text-editor { flex: 1 1 auto; }
.e-con.cn-card--wide > .e-con.cn-card__body > .elementor-widget-text-editor p { font-size: 15px; color: var(--cn-muted); }
@media (min-width: 1100px) {
  .e-con.cn-cards > .e-con.cn-card.cn-card--wide { --flex-direction: row; flex-direction: row; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; padding: 0; --row-gap: 0px; --column-gap: 0px; gap: 0; align-items: stretch; overflow: hidden; }
  /* L'image remplit la colonne de gauche sans peser sur la hauteur de la carte (position absolue) : c'est le texte qui la fixe, avec un minimum. */
  .e-con.cn-card--wide > .elementor-widget-image.cn-card__img { position: relative; flex: 0 0 47%; width: 47%; margin: 0; align-self: stretch; min-height: 264px; }
  .e-con.cn-card--wide > .elementor-widget-image.cn-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .e-con.cn-card--wide > .e-con.cn-card__body { --padding-top: 30px; --padding-bottom: 30px; --padding-left: 30px; --padding-right: 30px; padding: 30px; justify-content: center; }
  .e-con.cn-card--wide > .e-con.cn-card__body > .elementor-widget-text-editor { flex: 0 0 auto; }
  .e-con.cn-card--wide .elementor-widget-heading.cn-h3 .elementor-heading-title { font-size: 26px; line-height: 1.15; }
  .e-con.cn-card--wide > .e-con.cn-card__body > .elementor-widget-text-editor p { font-size: 16px; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .e-con.cn-card--wide > .elementor-widget-image.cn-card__img img { aspect-ratio: 16 / 9; } /* demi-largeur mais encore verticale : image plus panoramique */
}
@media (max-width: 899px) {
  .e-con.cn-cards > .e-con.cn-card, .e-con.cn-cards > .e-con.cn-card--wide { grid-column: span 1; }
}
@media (min-width: 761px) and (max-width: 899px) {
  /* Nombre impair de services : la première carte prend toute la largeur (à l'horizontale), les autres vont par deux. */
  .e-con.cn-cards--odd > .e-con.cn-card--wide:first-child { grid-column: span 2; --flex-direction: row; flex-direction: row; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; padding: 0; --row-gap: 0px; --column-gap: 0px; gap: 0; align-items: stretch; overflow: hidden; }
  .e-con.cn-cards--odd > .e-con.cn-card--wide:first-child > .elementor-widget-image.cn-card__img { position: relative; flex: 0 0 47%; width: 47%; margin: 0; align-self: stretch; min-height: 240px; }
  .e-con.cn-cards--odd > .e-con.cn-card--wide:first-child > .elementor-widget-image.cn-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .e-con.cn-cards--odd > .e-con.cn-card--wide:first-child > .e-con.cn-card__body { --padding-top: 26px; --padding-bottom: 26px; --padding-left: 26px; --padding-right: 26px; padding: 26px; justify-content: center; }
  .e-con.cn-cards--odd > .e-con.cn-card--wide:first-child > .e-con.cn-card__body > .elementor-widget-text-editor { flex: 0 0 auto; }
  .e-con.cn-cards--odd > .e-con.cn-card--wide:first-child .elementor-widget-heading.cn-h3 .elementor-heading-title { font-size: 24px; line-height: 1.15; }
}

/* ---------- Tuiles « L'entreprise » ---------- */
.e-con.cn-tiles > .elementor-widget-image.cn-tiles__img { grid-column: 1 / -1; }
.e-con.cn-tiles > .elementor-widget-image.cn-tiles__img img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.e-con.cn-tiles > .elementor-widget-image.cn-tiles__img--3x2 img { aspect-ratio: 3 / 2; } /* visuel « qui sommes-nous » servi entier */
.elementor-widget-heading.cn-tile__num .elementor-heading-title { font-family: var(--cn-font-display); font-size: 32px; color: var(--cn-accent-ink); line-height: 1.2; }
.e-con.cn-tile > .elementor-widget-text-editor p { margin-top: 6px; font-size: 14px; color: var(--cn-muted); }

/* ---------- Boutons (widget Bouton + classes cn-b--*) : le style global du kit Elementor donne le primary ---------- */
.elementor-widget-button.cn-b .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; line-height: 1; border: 1px solid transparent; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.elementor-widget-button.cn-b--light .elementor-button { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; }
.elementor-widget-button.cn-b--light .elementor-button:hover { background: #fff; color: var(--cn-ink); border-color: #fff; }
.elementor-widget-button.cn-b--dark .elementor-button { background: transparent; border: 2px solid var(--cn-ink); color: var(--cn-ink); padding: 14px 22px; }
.elementor-widget-button.cn-b--dark .elementor-button:hover { background: var(--cn-ink); color: #fff; }
.elementor-widget-button.cn-b--wa .elementor-button { background: transparent; border: 2px solid var(--cn-wa); color: #1A8A44; }
.elementor-widget-button.cn-b--wa .elementor-button:hover { background: var(--cn-wa); color: #fff; }
.elementor-widget-button.cn-b--sm .elementor-button { padding: 13px 18px; font-size: 15px; }
.elementor-widget-button.cn-b--block .elementor-button { width: 100%; }
/* Icônes en masque (les SVG du kit sont en trait, Elementor remplirait un SVG uploadé) */
.elementor-widget-button.cn-ico-phone .elementor-button-content-wrapper::before,
.elementor-widget-button.cn-ico-whatsapp .elementor-button-content-wrapper::before { content: ''; flex-shrink: 0; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--cn-ico) center / contain no-repeat; mask: var(--cn-ico) center / contain no-repeat; }
.elementor-widget-button.cn-ico-phone .elementor-button-content-wrapper { --cn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.elementor-widget-button.cn-ico-whatsapp .elementor-button-content-wrapper { --cn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E"); }
.elementor-widget-button.cn-b .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: 10px; }
.elementor-widget-button.cn-b--iconbtn .elementor-button-content-wrapper::before { width: 20px; height: 20px; }
/* Groupe d'actions : boutons étirés en mobile comme dans le kit */
.e-con.cn-actions > .elementor-widget-button { flex: 1 1 200px; }
.e-con.cn-actions > .elementor-widget-button .elementor-button { width: 100%; }
@media (min-width: 761px) { .e-con.cn-actions > .elementor-widget-button { flex: 0 0 auto; } .e-con.cn-actions > .elementor-widget-button .elementor-button { width: auto; } }
/* Boutons natifs du kit (onglets du slider, filtres) protégés du style global des boutons et du reset Hello */
.ba-tabs button, .cn-filters button { background: var(--cn-white); color: var(--cn-ink); border: 1px solid var(--cn-line); padding: 0 16px; border-radius: 0; font-family: var(--cn-font-body); }
.ba-tabs button:hover, .cn-filters button:hover { background: var(--cn-white); color: var(--cn-ink); border-color: var(--cn-accent-ink); }
.ba-tabs button.is-active, .ba-tabs button.is-active:hover, .cn-filters button.is-active, .cn-filters button.is-active:hover { border-color: var(--cn-accent); background: var(--cn-accent); color: var(--cn-on-accent); }

/* ---------- Avant / après ---------- */
.e-con.cn-ba-col { order: -1; }
/* Curseur avant/après : `.elementor img { height: auto }` (0,1,1) bat le `.ba__img { height: 100% }` du kit (0,1,0). Une source
   paysage sans recadrage cn-ba (canapé « avant » du kit, 852×630) ne remplissait plus le cadre 3:4 et laissait voir l'autre photo. */
.elementor-widget-html .ba .ba__img { height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* ---------- FAQ : widget nested-accordion habillé comme le details/summary du kit ---------- */
.elementor-widget-n-accordion.cn-faq { --n-accordion-border-width: 0px; --n-accordion-border-color: transparent; --n-accordion-item-title-space-between: 0px; --n-accordion-padding: 18px 0; --n-accordion-title-justify-content: space-between; --n-accordion-title-font-size: 17px; }
.elementor-widget-n-accordion.cn-faq .e-n-accordion { border-top: 1px solid var(--cn-line); }
.elementor-widget-n-accordion.cn-faq .e-n-accordion-item { border: 0; border-bottom: 1px solid var(--cn-line); border-radius: 0; background: transparent; }
.elementor-widget-n-accordion.cn-faq .e-n-accordion-item-title { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; border: 0; background: transparent; font-size: 17px; font-weight: 700; color: var(--cn-ink); cursor: pointer; }
.elementor-widget-n-accordion.cn-faq .e-n-accordion-item-title-header { flex: 1 1 auto; }
.elementor-widget-n-accordion.cn-faq .e-n-accordion-item-title-text { font-size: 17px; font-weight: 700; font-family: var(--cn-font-body); color: var(--cn-ink); }
.elementor-widget-n-accordion.cn-faq .e-n-accordion-item-title::after { content: '+'; font-size: 22px; line-height: 1; color: var(--cn-accent-ink); flex-shrink: 0; font-weight: 400; }
.elementor-widget-n-accordion.cn-faq .e-n-accordion-item[open] > .e-n-accordion-item-title::after { content: '−'; }
.elementor-widget-n-accordion.cn-faq .e-n-accordion-item > .e-con { padding: 0; }
.elementor-widget-n-accordion.cn-faq .elementor-widget-text-editor.cn-faq__answer p { padding: 0 40px 18px 0; font-size: 16px; color: var(--cn-muted); }

/* ---------- Footer ---------- */
.e-con > .elementor-widget.cn-footer__brand { margin-block-end: 14px; }
.elementor-widget-heading.cn-footer__brand .elementor-heading-title { font-family: var(--cn-font-display); font-size: 22px; color: #fff; line-height: 1.2; }
.elementor-widget-heading.cn-footer__brand span { color: var(--cn-accent); }
.elementor-widget-image.cn-footer__logo { margin-bottom: 20px; }
.elementor-widget-image.cn-footer__logo img { display: block; width: 168px; height: auto; padding: 12px 16px; background: #fff; border-radius: 14px; }
.cn-footer .elementor-widget-heading .elementor-heading-title { margin: 0 0 16px; }
.cn-footer .elementor-widget-heading.cn-footer__title .elementor-heading-title { font-family: var(--cn-font-body); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; line-height: 1.3; } /* même rendu que .cn-footer h4 du kit */
/* Colonne de texte du footer (site sans pages villes : communes de la zone, site.php footer_cols) : même gris que les liens des menus. */
.cn-footer .cn-footer__col-text .elementor-widget-heading.cn-footer__title { margin-bottom: 14px; }
.cn-footer .cn-footer__col-text p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .75); }
.cn-footer .cn-footer__col-text a { color: #fff; font-weight: 700; }
.cn-footer .elementor-widget-heading.cn-footer__brand .elementor-heading-title { margin: 0; }
.cn-footer__cta .elementor-widget-text-editor p { font-family: var(--cn-font-display); font-size: clamp(26px, 3vw, 38px); line-height: 1.1; color: #fff; max-width: 560px; text-wrap: balance; }
@media (max-width: 760px) { .cn-footer__cta .elementor-widget-text-editor p { font-size: 24px; } } /* footer mobile compact (21/09/2026) */
.cn-footer__bottom { font-size: 13px; color: rgba(255, 255, 255, .55); }
.cn-footer__bottom .elementor-widget-text-editor p { font-size: 13px; color: rgba(255, 255, 255, .55); }
.cn-footer__bottom nav.cn-menu { flex-direction: row; gap: 20px; font-size: 13px; }
/* Signature de l'agence : « Fait avec [cœur qui bat] par Tsuki Dev » */
.cn-footer__credit { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .55); white-space: nowrap; }
.cn-footer__credit a { color: rgba(255, 255, 255, .85); font-weight: 600; text-decoration: none; }
.cn-footer__credit a:hover { color: var(--cn-accent); }
.cn-heart { display: inline-flex; vertical-align: -2px; margin: 0 3px; color: #FF5A6E; transform-origin: center; animation: cn-heartbeat 1.3s ease-in-out infinite; }
.cn-heart svg { display: block; }
@keyframes cn-heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.28); } 28% { transform: scale(1); } 42% { transform: scale(1.18); } 56% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cn-heart { animation: none; } }
/* Bouton icône : texte présent pour Elementor et les lecteurs d'écran, masqué visuellement */
.elementor-widget-button.cn-b--iconbtn .elementor-button-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.elementor-widget-button.cn-b--iconbtn .elementor-button-content-wrapper { gap: 0; }
/* Menu déroulant mobile : ancré au header, pleine largeur (markup du kit : .cn-mobile-menu) */
.e-con.cn-header > .e-con, .e-con.cn-header .elementor-widget-nav-menu { position: static; }
.e-con.cn-header .elementor-nav-menu--dropdown.elementor-nav-menu__container { position: absolute; left: 0 !important; right: 0; width: auto !important; top: 100%; margin: 0; padding: 8px 20px 20px; background: var(--cn-white); border-top: 1px solid var(--cn-line); box-shadow: 0 18px 40px rgba(15, 27, 63, .12); }
.e-con.cn-header .elementor-nav-menu--dropdown .cn-menu-cta { padding: 0; }
.e-con.cn-header .elementor-menu-toggle { width: 44px; height: 44px; border: 1px solid rgba(15, 27, 63, .25); border-radius: 0; color: var(--cn-ink); background: transparent; }

/* ---------- Gabarit service ---------- */
.elementor-widget-shortcode.cn-breadcrumb-wrap { margin-block-end: 0; }
.cn-hero .cn-breadcrumb { color: rgba(255, 255, 255, .75); }
.e-con.cn-card--plain > .elementor-widget-text-editor { flex: none; }
.e-con.cn-card--plain > .elementor-widget-text-editor p { font-size: 15px; color: var(--cn-muted); }
.e-con.cn-card--plain .elementor-heading-title { margin-bottom: 8px; }
.e-con.cn-card--plain > .elementor-widget-heading { margin-block-end: 0; }
.elementor-widget-heading.cn-step__num .elementor-heading-title { font-family: var(--cn-font-display); font-size: 14px; letter-spacing: .08em; color: var(--cn-accent-ink); }
.e-con.cn-step > .elementor-widget-heading.cn-h3 .elementor-heading-title { margin: 6px 0 8px; }
.e-con.cn-step > .elementor-widget-text-editor p { font-size: 15px; color: var(--cn-muted); }
.e-con.cn-ba-col--right { order: 0; }
.e-con.cn-ba-col--right .ba-wrap { max-width: 440px; }
.elementor-widget-heading.cn-zones-title .elementor-heading-title { font-family: var(--cn-font-display); font-size: 22px; line-height: 1.25; }

/* ---------- Gabarit ville ---------- */
.cn-hero .elementor-widget-html .cn-trust { margin-top: 24px; }
.elementor-widget-heading.cn-pair__cat .elementor-heading-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cn-accent-ink); font-family: var(--cn-font-body); }
.e-con.cn-card--plain > .elementor-widget-heading.cn-pair__cat .elementor-heading-title { margin-bottom: 0; }
.elementor-widget-google_maps.cn-map { aspect-ratio: 16 / 10; background: var(--cn-line-2); }
/* Bandeau carte pleine largeur (home) : hauteur fixe au lieu du ratio 16/10 */
.elementor-widget-google_maps.cn-map.cn-map--band { aspect-ratio: auto; height: clamp(340px, 36vw, 480px); width: 100%; max-width: none; }
.elementor-widget-google_maps.cn-map .elementor-custom-embed, .elementor-widget-google_maps.cn-map iframe { width: 100%; height: 100%; display: block; }
.cn-section--dark .elementor-widget-text-editor p.cn-small { font-size: 14px; }
.cn-section--dark .elementor-widget-text-editor p.cn-small a { color: #fff; }

/* ---------- Formulaires Elementor Pro (habillage du kit .cn-form) ---------- */
.elementor-widget-form.cn-form-widget .elementor-form-fields-wrapper { row-gap: 16px; }
.elementor-widget-form.cn-form-widget--full .elementor-form-fields-wrapper { row-gap: 18px; }
.elementor-widget-form.cn-form-widget .elementor-field-group { padding: 0; margin-bottom: 0; }
.elementor-widget-form.cn-form-widget .elementor-field-label { font-size: 14px; font-weight: 700; color: var(--cn-ink); margin-bottom: 6px; display: block; }
.elementor-widget-form.cn-form-widget .elementor-field-textual { height: 48px; font-size: 16px; }
.elementor-widget-form.cn-form-widget textarea.elementor-field-textual { height: auto; min-height: 130px; resize: vertical; }
.elementor-widget-form.cn-form-widget .elementor-field-textual::placeholder { color: #8A96A3; }
.elementor-widget-form.cn-form-widget .elementor-field-textual:focus { outline: none; box-shadow: 0 0 0 3px rgba(34, 62, 145, .18); }
.elementor-widget-form.cn-form-widget .elementor-select-wrapper select { height: 48px; }
.elementor-widget-form.cn-form-widget .elementor-field-type-acceptance .elementor-field-subgroup label { font-size: 14px; font-weight: 400; color: var(--cn-muted); line-height: 1.5; }
.elementor-widget-form.cn-form-widget .elementor-field-type-acceptance input { width: 18px; height: 18px; accent-color: var(--cn-accent-ink); margin-top: 2px; }
.elementor-widget-form.cn-form-widget .elementor-field-type-html { font-size: 14px; }
.elementor-widget-form.cn-form-widget .cn-field__label { display: block; font-size: 14px; font-weight: 700; color: var(--cn-ink); margin-bottom: 6px; }
.elementor-widget-form.cn-form-widget .cn-field__hint { display: block; font-size: 13px; font-weight: 500; color: var(--cn-muted-2); }
.elementor-widget-form.cn-form-widget .elementor-field-type-upload .elementor-field { font-size: 14px; padding: 12px 16px; border: 1px dashed #7E8B99; background: var(--cn-white); width: 100%; }
.elementor-widget-form.cn-form-widget .e-form__buttons { margin-top: 2px; }
.elementor-widget-form.cn-form-widget .elementor-button { height: 54px; font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
/* Elementor Pro force un texte blanc sur le bouton d'envoi : illisible sur le bleu clair. */
.elementor-widget-form.cn-form-widget .elementor-button, .elementor-widget-form.cn-form-widget .elementor-button:hover, .elementor-widget-form.cn-form-widget .elementor-button:focus { background: var(--cn-accent); color: var(--cn-on-accent); }
.elementor-widget-form.cn-form-widget .elementor-button:hover { background: var(--cn-accent-hover); }
.elementor-widget-form.cn-form-widget .elementor-button svg { fill: currentColor; }
.elementor-widget-form.cn-ico-send .elementor-button .elementor-button-content-wrapper::after { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/%3E%3Cpath d='m21.854 2.147-10.94 10.939'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z'/%3E%3Cpath d='m21.854 2.147-10.94 10.939'/%3E%3C/svg%3E") center / contain no-repeat; }
.elementor-widget-form.cn-form-widget .elementor-button .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: 10px; }
.elementor-widget-form.cn-form-widget .elementor-message { font-size: 14px; }
.elementor-widget-form.cn-form-widget .elementor-message-success { padding: 16px; background: var(--cn-accent-tint); color: var(--cn-accent-ink); font-weight: 600; }
.e-con.cn-form { color: var(--cn-ink); }
.e-con.cn-form .elementor-widget-text-editor p.cn-form__note { font-size: 13px; color: var(--cn-muted-2); text-align: center; }
.e-con.cn-form .elementor-widget-text-editor p.cn-form__note a { color: var(--cn-accent-ink); font-weight: 600; }
.elementor-widget-heading.cn-form__h .elementor-heading-title { font-family: var(--cn-font-display); font-size: 24px; line-height: 1.25; }
.e-con.cn-form__title .elementor-widget-text-editor small { font-size: 13px; color: var(--cn-muted-2); }
.elementor-widget-heading.cn-h3--22 .elementor-heading-title { font-size: 22px; }
.elementor-widget-button.cn-b--wa-solid .elementor-button { background: var(--cn-wa); color: #fff; border-color: var(--cn-wa); }
.elementor-widget-button.cn-b--wa-solid .elementor-button:hover { background: var(--cn-wa-dark); color: #fff; }
.e-con.cn-direct .cn-phone-big { margin-top: 20px; }

/* ---------- Réalisations ---------- */
.elementor-widget-heading.cn-h2--banner .elementor-heading-title { font-size: clamp(24px, 2.6vw, 32px); }
.cn-section--sand .cn-breadcrumb { color: var(--cn-muted-2); }
.elementor-widget-html .cn-pair { height: 100%; }
.e-con.e-grid > .elementor-widget-html { height: 100%; }
.cn-pair__body h2.cn-h3 { font-size: 20px; line-height: 1.25; letter-spacing: 0; }

/* ---------- Bandeau Instagram (cn_instagram_band : accueil, réalisations ; demande de la cliente du 21/09/2026) ---------- */
.e-con.cn-ig__item { overflow: hidden; border: 1px solid var(--cn-line); background: var(--cn-sand); transition: transform var(--cn-ease), box-shadow var(--cn-ease), border-color var(--cn-ease); }
.e-con.cn-ig__item:hover, .e-con.cn-ig__item:focus-visible { border-color: var(--cn-accent-ink); transform: translateY(-3px); box-shadow: var(--cn-shadow-card); }
.e-con.cn-ig__item > .elementor-widget-image.cn-ig__img { width: 100%; margin: 0; }
.e-con.cn-ig__item > .elementor-widget-image.cn-ig__img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform .35s ease; }
.e-con.cn-ig__item:hover > .elementor-widget-image.cn-ig__img img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .e-con.cn-ig__item, .e-con.cn-ig__item img { transition: none; } }

/* ---------- Pages article (avis, à-propos, nuisibles, zones, légales) ---------- */
.elementor-widget-text-editor.cn-prose__body p + p { margin-top: 14px; }
.elementor-widget-text-editor.cn-prose__body p { font-size: 17px; line-height: 1.65; color: var(--cn-muted); }
.elementor-widget-text-editor.cn-prose__body a { font-weight: 600; }
.elementor-widget-text-editor.cn-prose__body strong { color: var(--cn-ink); }
.cn-rows--1 { grid-template-columns: 1fr; }
.elementor-widget-image.cn-article__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border: 1px solid var(--cn-line); }
.elementor-widget-text-editor.cn-text a { font-weight: 600; color: var(--cn-accent-ink); }

/* ---------- Relecture (site en noindex uniquement) ---------- */
.cn-review-banner { padding: 10px 20px; background: #FBBC05; color: #0F1B3F; font-size: 14px; font-weight: 700; text-align: center; }

/* ---------- Accessibilité : contrastes AA (audit Lighthouse) ----------
   Le gris des mentions passe de 4,4 à 5,2:1 sur blanc. L'accent sur fond clair est le marine du logo (≈ 9:1 sur blanc comme sur sable) :
   plus besoin de surcharge par fond. Le vert WhatsApp (#25D366, texte blanc : 2:1) reste celui de la marque WhatsApp : écart assumé. */
:root { --cn-muted-2: #5B6A88; }
.cn-section--dark .cn-small, .cn-section--dark .elementor-widget-text-editor .cn-small { color: rgba(255, 255, 255, .72); }
.cn-section--dark .cn-small a { color: var(--cn-accent); text-decoration: underline; }
/* Bouton WhatsApp plein (page contact) : texte encre sur le vert WhatsApp (8,9:1) au lieu de blanc (2:1). */
.elementor-widget-button.cn-b--wa-solid .elementor-button, .elementor-widget-button.cn-b--wa-solid .elementor-button:hover { color: var(--cn-ink); }

/* ---------- Sous-menu « Zones » (desktop) : sous le header, habillage du header ---------- */
.e-con.cn-header .elementor-nav-menu--main .menu-item-has-children > a.elementor-item { padding-block: 34px; } /* le lien occupe la hauteur du header : le sous-menu (top: 100 %) s'ouvre à son bord bas, sans trou de survol */
.e-con.cn-header .elementor-nav-menu--main .sub-menu { min-width: 230px !important; background: var(--cn-white); border: 1px solid var(--cn-line); border-top: 0; box-shadow: 0 18px 40px rgba(15, 27, 63, .14); }
.e-con.cn-header .elementor-nav-menu--main .sub-menu a.elementor-sub-item { padding: 12px 18px; font-size: 15px; color: var(--cn-ink); border-left: 0; }
.e-con.cn-header .elementor-nav-menu--main .sub-menu a.elementor-sub-item:hover, .e-con.cn-header .elementor-nav-menu--main .sub-menu a.elementor-sub-item:focus { background: var(--cn-accent-tint); color: var(--cn-accent-ink); }
.e-con.cn-header .elementor-nav-menu--main .sub-menu .cn-menu-all > a.elementor-sub-item, .e-con.cn-header .elementor-nav-menu--dropdown .cn-menu-all > a { font-weight: 700; color: var(--cn-ink); }
/* ---------- Méga-menu « Services » (inc/megamenu.php ; structure : build/steps/35-menus.php) ----------
   Panneau pleine largeur sous le header : 3 familles de services (vignette, titre, description) + bloc devis. Le <ul> porte la classe
   `mega-menu` : SmartMenus l'ouvre et le ferme (display inline block/none) mais laisse son contenu libre. */
.e-con.cn-header .elementor-nav-menu--main .cn-menu-services > a.elementor-item { padding-block: 34px; } /* le lien touche le bas du header : pas de trou de survol */
/* Le panneau se positionne par rapport au header (toute la largeur), pas par rapport à l'élément « Services ». */
.e-con.cn-header .elementor-nav-menu--main, .e-con.cn-header .elementor-nav-menu--main > .elementor-nav-menu, .e-con.cn-header .elementor-nav-menu--main .cn-menu-services { position: static; }
.e-con.cn-header .elementor-nav-menu--main ul.mega-menu { top: 100% !important; left: 50% !important; margin: 0 !important; transform: translateX(-50%); width: min(1160px, calc(100vw - 40px)) !important; min-width: 0 !important; max-width: none !important; padding: 28px 28px 24px; background: var(--cn-white); border: 1px solid var(--cn-line); border-top: 0; box-shadow: 0 28px 60px rgba(15, 27, 63, .18); z-index: 5; }
/* Opacité forcée : le fondu d'ouverture de SmartMenus (opacité animée en JS) pouvait s'arrêter vers 96 %, laissant voir la page à
   travers le panneau. Remplacé par un court glissement en CSS (une déclaration !important l'emporte sur une animation d'opacité). */
.e-con.cn-header .elementor-nav-menu--main .sub-menu { opacity: 1 !important; }
@keyframes cn-mm-in { from { translate: 0 -8px; } to { translate: 0 0; } }
.e-con.cn-header .elementor-nav-menu--main ul.mega-menu[style*="display: block"] { animation: cn-mm-in .16s ease-out; }
@media (prefers-reduced-motion: reduce) { .e-con.cn-header .elementor-nav-menu--main ul.mega-menu[style*="display: block"] { animation: none; } }
/* Ouvert = style inline « display: block » posé par SmartMenus (y compris pendant le fondu) : on le passe en grille. */
.e-con.cn-header .elementor-nav-menu--main ul.mega-menu[style*="display: block"] { display: grid !important; grid-template-columns: 1.08fr 1fr 1fr; grid-template-rows: auto 1fr auto; gap: 18px 36px; }
.elementor-nav-menu--main ul.mega-menu > li { position: static; margin: 0; }
.elementor-nav-menu--main ul.mega-menu > li.cn-mm-group:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
.elementor-nav-menu--main ul.mega-menu > li.cn-mm-group:nth-child(2) { grid-area: 1 / 2 / 3 / 3; }
.elementor-nav-menu--main ul.mega-menu > li.cn-mm-group:nth-child(3) { grid-area: 1 / 3 / 2 / 4; }
.elementor-nav-menu--main ul.mega-menu > li.cn-mm-cta { grid-area: 2 / 3 / 4 / 4; align-self: end; }
.elementor-nav-menu--main ul.mega-menu > li.cn-menu-all { grid-area: 3 / 1 / 4 / 3; align-self: end; border-top: 1px solid var(--cn-line-2); padding-top: 14px; }
/* Titres de colonnes et listes internes (toujours visibles : ce ne sont pas des sous-menus volants) */
.cn-mm-group__title { display: block; padding: 0 10px 10px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cn-accent-ink); }
.e-con.cn-header .elementor-nav-menu--main ul.mega-menu .cn-mm-group > ul.sub-menu, .elementor-nav-menu ul.mega-menu .cn-mm-group > ul { display: block; position: static; width: auto; min-width: 0 !important; max-width: none; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; transform: none; opacity: 1; }
.elementor-nav-menu ul.mega-menu .cn-mm-group > ul > li { margin: 0; }
/* Un service : vignette + titre + description */
.e-con.cn-header .elementor-nav-menu--main ul.mega-menu a.elementor-sub-item.cn-mm-link, .e-con.cn-header .elementor-nav-menu--main ul.mega-menu .cn-mm-item > a.elementor-sub-item { display: flex; align-items: center; gap: 14px; padding: 9px 10px; border: 0; border-radius: var(--cn-radius); white-space: normal; line-height: 1.3; background: transparent; color: var(--cn-ink); transition: background var(--cn-ease); }
.cn-mm__thumb { flex: 0 0 48px; width: 48px; height: 48px; border-radius: var(--cn-radius); object-fit: cover; background: var(--cn-sand); }
.cn-mm__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cn-mm__title { font-size: 15px; font-weight: 700; color: var(--cn-ink); }
.cn-mm__desc { font-size: 13px; font-weight: 500; color: var(--cn-muted-2); }
.e-con.cn-header .elementor-nav-menu--main ul.mega-menu .cn-mm-item > a.elementor-sub-item:hover, .e-con.cn-header .elementor-nav-menu--main ul.mega-menu .cn-mm-item > a.elementor-sub-item:focus-visible { background: var(--cn-sand); }
.elementor-nav-menu--main ul.mega-menu .cn-mm-item > a:hover .cn-mm__title, .elementor-nav-menu--main ul.mega-menu .cn-mm-item.current-menu-item .cn-mm__title { color: var(--cn-accent-ink); }
.e-con.cn-header .elementor-nav-menu--main ul.mega-menu .cn-mm-item.current-menu-item > a.elementor-sub-item { background: var(--cn-accent-tint); }
/* Bloc devis */
.cn-mm-cta__box { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--cn-radius); background: var(--cn-ink); color: #fff; }
.cn-mm-cta__title { margin: 0; font-family: var(--cn-font-display); font-size: 22px; line-height: 1.15; color: #fff; text-wrap: balance; }
.cn-mm-cta__text { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.e-con.cn-header .elementor-nav-menu--main ul.mega-menu a.cn-mm-cta__btn { display: flex; align-items: center; justify-content: center; height: 46px; margin-top: 6px; padding: 0 18px; border: 0; background: var(--cn-accent); color: var(--cn-on-accent); font-size: 15px; font-weight: 700; white-space: nowrap; transition: background var(--cn-ease); }
.e-con.cn-header .elementor-nav-menu--main ul.mega-menu a.cn-mm-cta__btn:hover { background: var(--cn-accent-hover); color: var(--cn-on-accent); }
.e-con.cn-header .elementor-nav-menu--main ul.mega-menu a.cn-mm-cta__tel { display: block; padding: 4px 0 0; border: 0; background: none; text-align: center; font-size: 16px; font-weight: 700; color: #fff; }
.e-con.cn-header .elementor-nav-menu--main ul.mega-menu a.cn-mm-cta__tel:hover { color: var(--cn-accent); background: none; }
/* « Tous les services » */
.e-con.cn-header .elementor-nav-menu--main ul.mega-menu .cn-menu-all > a.elementor-sub-item { display: inline-flex; padding: 4px 10px; border: 0; background: none; font-size: 14px; font-weight: 700; color: var(--cn-accent-ink); }
.e-con.cn-header .elementor-nav-menu--main ul.mega-menu .cn-menu-all > a.elementor-sub-item::after { content: "→"; margin-left: 8px; }
.e-con.cn-header .elementor-nav-menu--main ul.mega-menu .cn-menu-all > a.elementor-sub-item:hover { background: none; text-decoration: underline; }
/* Menu déroulant mobile : familles en intertitres, services en liste simple (ni vignettes ni descriptions), pas de bloc devis (le menu a déjà son bouton). */
.elementor-nav-menu--dropdown.elementor-nav-menu__container ul.mega-menu .cn-mm-group > ul { padding: 0; }
.elementor-nav-menu--dropdown.elementor-nav-menu__container ul.mega-menu .cn-mm-group__title { padding: 16px 8px 4px 18px; font-size: 11px; color: var(--cn-muted-2); }
.elementor-nav-menu--dropdown.elementor-nav-menu__container ul.mega-menu .cn-mm__thumb, .elementor-nav-menu--dropdown.elementor-nav-menu__container ul.mega-menu .cn-mm__desc, .elementor-nav-menu--dropdown.elementor-nav-menu__container ul.mega-menu .cn-mm-cta { display: none; }
.elementor-nav-menu--dropdown.elementor-nav-menu__container ul.mega-menu .cn-mm__title { font-size: inherit; font-weight: inherit; color: inherit; }
/* « Nice » renvoie à l'accueil : sur l'accueil, ni « Zones » ni « Nice » ne doivent paraître actifs. */
body.home .e-con.cn-header .elementor-nav-menu .current-menu-ancestor > a.elementor-item-active,
body.home .e-con.cn-header .elementor-nav-menu .sub-menu .current-menu-item > a.elementor-item-active { color: inherit; }

.cn-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* texte réservé aux lecteurs d'écran */

/* ---------- Vidéos hébergées (façade cn_video : image d'attente, <video> créée au clic par clairetnet.js §6) ---------- */
.cn-video { margin: 0; width: 100%; max-width: 320px; }
/* `.cn-video button…` : spécificité supérieure au style de bouton du kit (.elementor-kit-N button) */
.cn-video button.cn-video__play, .cn-video button.cn-video__play:hover, .cn-video button.cn-video__play:focus { padding: 0; border: 0; border-radius: 0; background: var(--cn-ink); }
.cn-video__play { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--cn-ink); cursor: pointer; overflow: hidden; }
.cn-video__play img, .cn-video__player { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: var(--cn-ink); }
.cn-video__play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 27, 63, 0) 55%, rgba(15, 27, 63, .55) 100%); transition: background var(--cn-ease); }
.cn-video__icon { position: absolute; z-index: 1; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding-left: 4px; border-radius: 50%; background: var(--cn-accent); color: var(--cn-on-accent); box-shadow: 0 10px 30px rgba(15, 27, 63, .35); transition: transform var(--cn-ease), background var(--cn-ease); }
.cn-video__play:hover .cn-video__icon, .cn-video__play:focus-visible .cn-video__icon { transform: scale(1.06); background: var(--cn-accent-hover); }
.cn-video__play:focus-visible { outline: 3px solid var(--cn-accent-ink); outline-offset: 3px; }
.cn-video__duration { position: absolute; z-index: 1; right: 10px; bottom: 10px; padding: 4px 8px; background: rgba(15, 27, 63, .82); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.cn-video figcaption { margin-top: 12px; font-size: 14px; font-style: normal; line-height: 1.5; color: var(--cn-muted); }
.cn-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 320px)); gap: 24px; justify-content: start; }
.cn-videos__title { margin: 56px 0 24px; font-family: var(--cn-font-body); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cn-accent-ink); }
.e-con.cn-ba-col--right .cn-video { margin: 0 auto; max-width: 340px; }
/* /realisations : bouton lecture posé sur les deux images de la carte, la vidéo verticale s'ouvre dans un <dialog> */
.cn-pair__imgs { position: relative; }
.cn-pair__imgs button.cn-pair__video { padding: 0 14px 0 10px; border: 0; border-radius: 18px; background: var(--cn-ink); color: #fff; font-size: 13px; font-weight: 700; }
.cn-pair__imgs button.cn-pair__video:hover, .cn-pair__imgs button.cn-pair__video:focus-visible { background: var(--cn-accent); color: var(--cn-on-accent); }
.cn-pair__video { position: absolute; z-index: 2; left: 50%; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border: 0; border-radius: 18px; transform: translateX(-50%); background: var(--cn-ink); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; box-shadow: 0 8px 24px rgba(15, 27, 63, .35); transition: background var(--cn-ease); }
.cn-pair__video:hover, .cn-pair__video:focus-visible { background: var(--cn-accent); color: var(--cn-on-accent); }
.cn-pair__video:focus-visible { outline: 3px solid var(--cn-accent); outline-offset: 2px; }
.cn-pair__video .cn-video__icon { position: static; width: 22px; height: 22px; margin: 0; padding-left: 2px; box-shadow: none; }
dialog.cn-video-modal { padding: 0; border: 0; background: #000; max-width: 92vw; max-height: 92vh; overflow: visible; }
dialog.cn-video-modal::backdrop { background: rgba(15, 27, 63, .86); }
dialog.cn-video-modal video { display: block; height: min(88vh, 1280px); width: auto; max-width: 92vw; aspect-ratio: 9 / 16; background: #000; }
dialog.cn-video-modal button.cn-video-modal__close, dialog.cn-video-modal button.cn-video-modal__close:hover { padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--cn-ink); }
.cn-video-modal__close { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; color: var(--cn-ink); font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
@media (max-width: 600px) { .cn-video-modal__close { top: 8px; right: 8px; } }