.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --ast-ardoise:#405965; --ast-fonce:#2A3844; --ast-dore:#B49F75; --ast-dore-texte:#7D6A45; --ast-texte:#333333; --ast-fond:#FFFFFF; --ast-fond-clair:#F6F5F2; --ast-filet:#E6E4DE; --ast-police:Montserrat; --ast-h1:56px; --ast-h1-mobile:36px; --ast-h2:40px; --ast-h2-mobile:28px; --ast-h3:24px; --ast-h3-mobile:20px; --ast-texte-corps:17px; --ast-texte-corps-mobile:16px; --ast-texte-ui:15px; --ast-petit:14px; --ast-texte-grand:20px; --ast-chiffre:40px; --ast-chiffre-mobile:32px; --ast-esp-section:120px; --ast-esp-section-mobile:64px; --ast-esp-titre:48px; --ast-esp-titre-mobile:32px; --ast-esp-bloc:64px; --ast-esp-bloc-mobile:40px; --ast-marge:40px; --ast-marge-mobile:20px; --ast-gouttiere:32px; --ast-boite:1240px; --ast-rayon:4px; --ast-voile:rgba(42, 56, 68, 0.4); --ast-filet-sombre:rgba(255, 255, 255, 0.15); }
/* Start custom CSS *//* ============================================================
   ASTRAGALE : CSS GLOBAL (version OceanWP)
   Seule exception à la règle « aucun CSS personnalisé ».
   Emplacement : Réglages du site > CSS personnalisé.
   ============================================================ */


/* ------------------------------------------------------------
   1. FOCUS VISIBLE (navigation au clavier, indépendant du thème)
   Contour sur tout élément focalisable : liens, boutons (e-button
   en a ou button, div-blocks en lien, boutons lecture et pause de
   la vidéo), accordéons (summary), champs de formulaire.
   La 2e ligne de sélecteurs, préfixée .elementor, passe devant le
   « all: unset » qu'Elementor applique aux liens des paragraphes,
   titres et images (sans elle, ces liens n'ont aucun contour).
   Par défaut : 2 px ast-dore-texte, décalé de 3 px.
   ------------------------------------------------------------ */
:is(a[href], button, summary, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible,
.elementor :is(a[href], button, summary, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--ast-dore-texte);
  outline-offset: 3px;
}

/* 1 bis. Contour blanc sur les fonds sombres :
   sections sombres (CTA), popups (menu, showreel), hero,
   et tout bloc marqué ast-sur-sombre.
   Même précision de sélecteur que la règle précédente,
   placée après : elle l'emporte sans !important. */
:is(.ast-section--sombre, .ast-popup, .ast-hero, .ast-sur-sombre) :is(a[href], button, summary, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline-color: var(--ast-fond);
}


/* ------------------------------------------------------------
   2. HEADER FIXE
   OceanWP enveloppe le header Elementor dans son propre
   <header id="site-header">, qui a la même hauteur que lui :
   c'est donc ce cadre qu'on colle en haut de l'écran.
   Le décalage suit la hauteur de la barre d'administration
   WordPress quand elle est affichée (0 px pour les visiteurs).
   Aucun parent OceanWP ne bloque le sticky (vérifié).
   ------------------------------------------------------------ */
#site-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 50;
}


/* ------------------------------------------------------------
   3. MOUVEMENT RÉDUIT
   Si le visiteur a demandé moins d'animations dans son système,
   on coupe transitions, animations et défilement fluide.
   !important est nécessaire ici : les transitions des classes
   ast-* et les animations Elementor sont déclarées avec des
   sélecteurs plus précis que « * », qu'on ne pourrait pas battre
   autrement.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ------------------------------------------------------------
   4. DÉFILEMENT INFINI DES LOGOS
   Chaque groupe glisse de sa propre largeur + l'écart : raccord exact,
   quelle que soit la largeur de la piste.
   width: max-content est indispensable : les blocs V4 portent aussi
   la classe .e-con d'Elementor (width: 100%), qui ramène sinon chaque
   groupe à la largeur de l'écran (saut de 1 504 px au raccord).
   Préfixe « body .elementor » : ce CSS se charge avant les styles
   de base d'Elementor ; le préfixe body le fait passer devant.
   Écart RGAA connu (13.8) : pause au survol seulement.
   07/10 : écart dans --ast-defile-gap (40 px), utilisé par la piste,
   les groupes ET l'animation : les trois restent synchronisés.
   ------------------------------------------------------------ */
body .elementor .ast-defilement {
  --ast-defile-gap: 40px;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
body .elementor .ast-defilement__piste {
  display: flex;
  gap: var(--ast-defile-gap);
}
body .elementor .ast-defilement__groupe {
  display: flex;
  align-items: center;
  gap: var(--ast-defile-gap);
  flex-shrink: 0;
  width: max-content;
  animation: ast-defile 45s linear infinite;
}
body .elementor .ast-defilement:hover .ast-defilement__groupe {
  animation-play-state: paused;
}
@keyframes ast-defile {
  to { transform: translateX(calc(-100% - var(--ast-defile-gap))); }
}
@media (prefers-reduced-motion: reduce) {
  body .elementor .ast-defilement__groupe { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
  body .elementor .ast-defilement__double { display: none; }
}


/* ------------------------------------------------------------
   5. CARTES SERVICES IMMERSIVES (accueil)
   Mosaïque 2 x 2 dans ast-conteneur (07/10 : plus en pleine largeur),
   gouttière 24 px, texte dans l'image.
   Survol (desktop uniquement) : la carte s'élargit, zoom lent, voile plus dense,
   étiquettes et « Découvrir » qui apparaissent.
   Tactile, tablette et mobile : tout visible.
   Clavier : contour blanc à l'intérieur de la carte + tout visible.
   Le zoom GSAP de l'arrivée est sur __zoom, celui du survol sur
   l'image : deux éléments, les deux effets ne se gênent pas.
   ------------------------------------------------------------ */
/* Flex et non grid : chaque rangée répartit sa largeur seule, la carte
   survolée peut donc s'élargir sans toucher à la rangée du dessous.
   Base 34 % : 2 cartes par rangée (3 x 34 % dépasse 100 %), le reste
   de la place est partagé selon flex-grow (1 et 1 = 50 / 50). */
/* La grille est dans ast-conteneur : l'écart sous le H2 vient du gap
   du conteneur (ast-esp-titre), pas de margin-top. */
body .elementor .ast-services__grille {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  width: 100%;
}
body .elementor .ast-carte-immersive {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex: 1 1 34%;
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
  color: var(--ast-fond);
  text-decoration: none;
  transition: flex-grow .8s cubic-bezier(.2, .7, .2, 1);
}
body .elementor .ast-carte-immersive__media,
body .elementor .ast-carte-immersive__zoom,
body .elementor .ast-carte-immersive__voile {
  position: absolute;
  inset: 0;
}
body .elementor .ast-carte-immersive__media { z-index: -2; }
body .elementor .ast-carte-immersive__media img,
body .elementor .ast-carte-immersive__media video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
}
/* Dégradé fixe + couche unie qui se densifie au survol
   (un dégradé ne s'anime pas, une couleur de fond si).
   07/10 : couche unie de 20 % en permanence et dégradé plus haut,
   pour les photos noir et blanc claires à venir. */
body .elementor .ast-carte-immersive__voile {
  z-index: -1;
  background-color: rgba(42, 56, 68, .2);
  background-image: linear-gradient(to top, rgba(42, 56, 68, .95) 0%, rgba(42, 56, 68, .88) 40%, rgba(42, 56, 68, .4) 70%, rgba(42, 56, 68, 0) 100%);
  transition: background-color .6s ease;
}
body .elementor .ast-carte-immersive__contenu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 40px;
}
/* Titre sur 2 lignes comme la maquette : « PRODUCTION » puis
   « audiovisuelle » en italique (le em est posé dans le titre). */
body .elementor .ast-carte-immersive__titre { text-transform: uppercase; }
body .elementor .ast-carte-immersive__titre em {
  display: block;
  font-style: italic;
  text-transform: none;
}
/* Accroche dorée : style porté par la classe globale ast-carte-immersive__accroche (éditeur). */
body .elementor .ast-carte-immersive__plus {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .5s ease, opacity .4s ease;
}
body .elementor .ast-carte-immersive__plus-interieur {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  overflow: hidden;
  min-height: 0;
}
body .elementor .ast-carte-immersive__plus-interieur > :first-child { margin-top: 8px; }
/* Étiquettes en version claire */
body .elementor .ast-carte-immersive .ast-etiquette {
  color: var(--ast-fond);
  border-color: rgba(255, 255, 255, .5);
}
/* « Découvrir → » (span, pas un lien : la carte est le lien).
   Mot en blanc, flèche en doré : le doré en texte plafonne à 3,7:1
   sur les photos, même sous le voile (4,5:1 exigé). */
body .elementor .ast-carte-immersive__plus-interieur > .ast-texte-petit {
  color: var(--ast-fond);
  font-weight: 500;
}
body .elementor .ast-carte-immersive__plus-interieur > .ast-texte-petit > span {
  display: inline-block;
  color: var(--ast-dore);
  transition: transform .3s ease;
}
@media (hover: hover) and (min-width: 1025px) {
  /* Mosaïque qui s'ouvre : la carte survolée passe à 62 %, sa voisine à 38 %. */
  body .elementor .ast-carte-immersive:hover,
  body .elementor .ast-carte-immersive:focus-visible {
    flex-grow: 7;
  }
  body .elementor .ast-carte-immersive:hover .ast-carte-immersive__media img,
  body .elementor .ast-carte-immersive:hover .ast-carte-immersive__media video {
    transform: scale(1.06);
  }
  body .elementor .ast-carte-immersive:hover .ast-carte-immersive__plus-interieur > .ast-texte-petit > span {
    transform: translateX(6px);
  }
}
body .elementor .ast-carte-immersive:hover .ast-carte-immersive__voile,
body .elementor .ast-carte-immersive:focus-visible .ast-carte-immersive__voile {
  background-color: rgba(42, 56, 68, .35);
}
body .elementor .ast-carte-immersive:hover .ast-carte-immersive__plus,
body .elementor .ast-carte-immersive:focus-visible .ast-carte-immersive__plus {
  grid-template-rows: 1fr;
  opacity: 1;
}
/* Focus : contour blanc dans la carte (à l'extérieur, il serait
   coupé au bord de l'écran et caché par la carte voisine).
   Le préfixe .ast-services__grille passe devant la règle 1. */
body .elementor .ast-services__grille .ast-carte-immersive:focus-visible {
  outline: 2px solid var(--ast-fond);
  outline-offset: -10px;
}
/* Sans survol, tout le texte est affiché et monte plus haut :
   le dégradé monte avec lui (contraste mesuré sur les 4 images). */
@media (hover: none), (max-width: 1024px) {
  body .elementor .ast-carte-immersive__plus { grid-template-rows: 1fr; opacity: 1; }
  body .elementor .ast-carte-immersive__voile {
    background-image: linear-gradient(to top, rgba(42, 56, 68, .95) 0%, rgba(42, 56, 68, .88) 60%, rgba(42, 56, 68, .3) 100%);
  }
}
@media (max-width: 1024px) {
  body .elementor .ast-carte-immersive__contenu { padding: 32px; }
}
@media (max-width: 767px) {
  body .elementor .ast-services__grille { gap: 16px; }
  body .elementor .ast-carte-immersive { flex-basis: 100%; min-height: 460px; }
  body .elementor .ast-carte-immersive__contenu { padding: 24px; }
}


/* ------------------------------------------------------------
   6. MENU : BOUTON DU HEADER ET RÉSEAUX DU POPUP (07/10/2026)
   Le menu reste en fenêtre modale (popup 50) à toutes les largeurs.
   ------------------------------------------------------------ */
/* Bouton « Menu » (e-button en balise button, ouvre le popup 50) :
   icône 3 traits de 2,5 px + mot « Menu », zone cliquable 44 x 44 px minimum. */
body .elementor .ast-btn-menu {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--ast-fonce);
  font-family: var(--ast-police);
  font-size: var(--ast-texte-ui);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease;
}
body .elementor .ast-btn-menu::before {
  content: "";
  width: 24px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Crect y='0' width='24' height='2.5' rx='1.25'/%3E%3Crect y='7.75' width='24' height='2.5' rx='1.25'/%3E%3Crect y='15.5' width='24' height='2.5' rx='1.25'/%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 18'%3E%3Crect y='0' width='24' height='2.5' rx='1.25'/%3E%3Crect y='7.75' width='24' height='2.5' rx='1.25'/%3E%3Crect y='15.5' width='24' height='2.5' rx='1.25'/%3E%3C/svg%3E") center / contain no-repeat;
}
body .elementor .ast-btn-menu:hover { color: var(--ast-dore-texte); }
/* Ancienne icône burger (widget Icône V3, non modifiable par le MCP) :
   masquée en attendant sa suppression dans l'éditeur. Règle à retirer ensuite. */
body .elementor .ast-header .elementor-widget-icon { display: none; }

/* Réseaux du popup : icônes 24 px dans une zone de 44 x 44 px.
   Le texte du lien (Instagram, YouTube, Facebook) reste le nom accessible :
   il est seulement réduit à 0, pas masqué aux lecteurs d'écran. */
body .elementor .ast-reseau a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 0;
  color: inherit;
}
body .elementor .ast-reseau a::before {
  content: "";
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--ast-icone) center / contain no-repeat;
          mask: var(--ast-icone) center / contain no-repeat;
}
body .elementor .ast-reseau--instagram { --ast-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E"); }
body .elementor .ast-reseau--youtube { --ast-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M21.6 7.2c-.2-.9-.9-1.6-1.8-1.8C18.2 5 12 5 12 5s-6.2 0-7.8.4c-.9.2-1.6.9-1.8 1.8C2 8.8 2 12 2 12s0 3.2.4 4.8c.2.9.9 1.6 1.8 1.8C5.8 19 12 19 12 19s6.2 0 7.8-.4c.9-.2 1.6-.9 1.8-1.8.4-1.6.4-4.8.4-4.8s0-3.2-.4-4.8zM10 15V9l5.2 3z'/%3E%3C/svg%3E"); }
body .elementor .ast-reseau--facebook { --ast-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 22v-8h2.7l.4-3.2h-3.1V8.8c0-.9.3-1.6 1.6-1.6h1.7V4.3c-.3 0-1.3-.1-2.5-.1-2.5 0-4.2 1.5-4.2 4.3v2.3H7.4V14h2.7v8z'/%3E%3C/svg%3E"); }


/* ------------------------------------------------------------
   7. TITRES EN DEUX TEMPS (07/10/2026, maquette cliente)
   Classe globale ast-titre sur le titre (éditeur) : MAJUSCULES, 500,
   espacement 0,03em, ast-fonce (blanc avec ast-sur-sombre).
   La partie accent est le <em> du titre (« Votre intention <em>notre
   regard</em> ») : Elementor retire les classes des balises internes,
   d'où ce sélecteur ici. À la ligne, italique 400, minuscules, 1,15em.
   Les majuscules viennent du CSS : le texte reste lu normalement.
   ------------------------------------------------------------ */
body .elementor .ast-titre {
  text-wrap: balance;
}
body .elementor .ast-titre em {
  display: block;
  font-size: 1.15em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
/* Accroche du hero (08/10/2026) : « votre histoire » sur la même ligne.
   Taille fluide et nowrap (desktop) dans la classe ast-hero__accroche. */
body .elementor .ast-hero__accroche em {
  display: inline;
}


/* ------------------------------------------------------------
   8. FORMULAIRE SUR FOND SOMBRE (accueil, section Contact, 07/10/2026)
   Variante ast-form--sombre posée sur le formulaire : reprend les
   classes ast-champ* de la page Contact, en clair sur fond ardoise.
   Filet blanc à 55 % (3,6:1 sur l'ardoise, 3:1 exigé pour un champ).
   Focus : bordure dorée + contour blanc du bloc 1 bis (le doré seul
   fait 2,9:1 sur l'ardoise, sous le seuil d'un indicateur de focus).
   ------------------------------------------------------------ */
body .elementor .ast-form--sombre .ast-champ__label {
  color: var(--ast-fond);
}
body .elementor .ast-form--sombre .ast-champ__label a {
  color: inherit;
  text-decoration: underline;
}
body .elementor .ast-form--sombre .ast-champ__label a:hover {
  color: var(--ast-dore);
}
body .elementor .ast-form--sombre .ast-champ__input {
  color: var(--ast-fond);
  background-color: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .55);
}
body .elementor .ast-form--sombre .ast-champ__input:focus {
  border-color: var(--ast-dore);
}
/* Liste déroulante : les options s'affichent sur fond blanc du système. */
body .elementor .ast-form--sombre select.ast-champ__input option {
  color: var(--ast-texte);
}
/* Remplissage automatique de Chrome : pas de fond blanc. */
body .elementor .ast-form--sombre .ast-champ__input:-webkit-autofill {
  -webkit-text-fill-color: var(--ast-fond);
  box-shadow: 0 0 0 1000px var(--ast-ardoise) inset;
}
body .elementor .ast-form--sombre .ast-case {
  border-color: rgba(255, 255, 255, .55);
  color: var(--ast-fonce);
}
body .elementor .ast-form--sombre .ast-case:checked {
  background-color: var(--ast-dore);
}
/* Message de succès : pas de vert sur fond clair, filet doré. */
body .elementor .ast-form--sombre .e-form-success-message-base {
  width: 100%;
  padding: 16px 20px;
  text-align: left;
  background-color: rgba(255, 255, 255, .08);
  border-left: 3px solid var(--ast-dore);
}
body .elementor .ast-form--sombre .e-form-error-message-base {
  width: 100%;
  text-align: left;
}
/* ------------------------------------------------------------
   9. FOCUS SUR LES SECTIONS DORÉES (12/10/2026)
   Sur fond ast-dore, le contour ast-dore-texte ne fait que 2:1.
   Les sections dorées portent ast-sur-dore : contour ast-fonce
   (4,67:1). Même précision que la règle 1, placée après.
   ------------------------------------------------------------ */
.ast-sur-dore :is(a[href], button, summary, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline-color: var(--ast-fonce);
}/* End custom CSS */