.elementor-kit-7{--e-global-color-primary:#11263E;--e-global-color-secondary:#F59C29;--e-global-color-text:#52607A;--e-global-color-accent:#F59C29;--e-global-typography-primary-font-family:"Titillium Web";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Titillium Web";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Titillium Web";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Titillium Web";--e-global-typography-accent-font-weight:600;}.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:991px){.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 { --nuit:#11263E; --orange:#F59C29; --blanc:#FFFFFF; --fond:#F2F4F7; --surface-2:#E8ECF2; --ligne:#DFE4EB; --encre-2:#52607A; --nuit-clair:#1B3355; --blanc-attenue:rgba(255,255,255,0.74); --blanc-voile:rgba(255,255,255,0.85); --ligne-nuit:rgba(255,255,255,0.16); --titillium-web:Titillium Web; --rayon-bloc:2rem; --rayon-carte:1.5rem; --rayon-image:1.25rem; --rayon-form:0.875rem; --largeur-contenu:1320px; --largeur-entete:1120px; --texte-small:0.875rem; --texte-regular:1rem; --texte-medium:1.125rem; --texte-h6:1.25rem; --texte-h5:1.5rem; --titre-section:clamp(2rem, 4vw, 3.25rem); --titre-hero:clamp(2.5rem, 5vw, 4.25rem); }
/* Start custom CSS *//* =====================================================================
   TRANSMISSIO — couche charte (CSS personnalisée du kit, post 7)
   Servie sur tout le site (fichier post-7.css). Elle complète :
   - les variables globales V4 (--nuit, --orange, --fond, --titillium-web…) ;
   - les styles par défaut (h1 à h6, p, a, conteneurs sans marge interne) ;
   - les classes globales tr-* (réglables dans l'éditeur).
   On n'écrit ici que ce que l'éditeur V4 ne sait pas exprimer :
   pseudo-éléments, sélecteurs descendants, @keyframes, préférences système.
   Couleurs : bleu nuit #11263E, orange #F59C29, blanc ; neutres #F2F4F7,
   #E8ECF2, #DFE4EB, #52607A, #1B3355. Oblique du sigle : skewX(-19deg).
   ===================================================================== */

/* 1. Jetons de schéma ------------------------------------------------------
   Valeurs contextuelles relues par les classes tr-* (tr-intro, focus…) :
   --tr-texte (texte principal), --tr-texte-2 (texte secondaire), --tr-focus.
   Sur fond clair par défaut ; tr-bloc-nuit les redéfinit sur son élément
   (texte secondaire blanc atténué, contour de focus blanc). */
:root {
  --tr-texte: #11263E;
  --tr-texte-2: #52607A;
  --tr-focus: #11263E;
  --tr-ombre-douce: 0 1px 2px rgba(17, 38, 62, 0.04), 0 12px 32px -14px rgba(17, 38, 62, 0.14);
  --tr-ombre-survol: 0 2px 4px rgba(17, 38, 62, 0.05), 0 24px 48px -18px rgba(17, 38, 62, 0.22);
}

/* 2. Page ------------------------------------------------------------------
   Fond doux, encre bleu nuit et Titillium Web sur toute la page. Les titres
   et paragraphes héritent la couleur : bleu nuit ici, blanc dans tr-bloc-nuit. */
body {
  background-color: #F2F4F7;
  color: #11263E;
  font-family: "Titillium Web", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background-color: #F59C29;
  color: #11263E;
}

/* En-tête collant (capsule de 64 px posée à 16 px du haut) : une ancre ou un
   élément qui reçoit le focus ne passe jamais dessous (WCAG 2.4.11).
   Les sections ajoutent 1 rem (scroll-margin-top de tr-section). */
html {
  scroll-padding-top: 6rem;
}

/* Barre d'actions flottante en bas d'écran sous 992 px. */
@media (max-width: 991px) {
  html {
    scroll-padding-bottom: calc(6rem + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* 3. Thème Hello : neutralisation -------------------------------------------
   Liens rose et violet du thème remplacés par la couleur du texte ; le titre de
   page du thème reste masqué (le seul h1 est celui du hero). */
a,
a:hover,
a:active {
  color: inherit;
}

.elementor-page .page-header .entry-title {
  display: none;
}

/* 4. Focus visible -----------------------------------------------------------
   Contour de 2 px à 2 px de l'élément, bleu nuit sur fond clair, blanc dans
   tr-bloc-nuit (via --tr-focus). Remplace le halo noir et blanc du thème Hello.
   Spécificité volontairement basse : un style local ou une classe tr-* peut
   toujours le surcharger. */
body :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--tr-focus, #11263E);
  outline-offset: 2px;
  box-shadow: none;
}

:root [tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--tr-focus, #11263E);
  outline-offset: 2px;
  box-shadow: none;
}

/* Les éléments à ombre douce la gardent pendant le focus. */
body :where(.tr-bouton-blanc, .tr-carte):focus-visible {
  box-shadow: var(--tr-ombre-douce);
}

/* 5. Souligné oblique (classe tr-souligne sur le titre) ------------------------
   Dans le texte du titre, entourer le mot : Comment ça <span>se passe</span>.
   Le span devient insécable et reçoit une barre orange en biais, derrière le bas
   des lettres (hauteur 0,16 em, pivot en bas à gauche).
   Pour garder une ponctuation collée au mot : <span><span>bonnes mains</span>,</span>
   (seul le span le plus intérieur reçoit la barre). */
.tr-souligne span {
  white-space: nowrap;
}

.tr-souligne span:not(:has(span)) {
  position: relative;
  isolation: isolate;
  display: inline-block;
}

.tr-souligne span:not(:has(span))::after {
  content: "";
  position: absolute;
  left: 0;
  right: -0.1em;
  bottom: -0.04em;
  z-index: -1;
  height: 0.16em;
  background-color: #F59C29;
  transform: skewX(-19deg);
  transform-origin: bottom left;
  pointer-events: none;
}

/* 6. Marqueur oblique du surtitre -------------------------------------------------
   Remplace les pastilles rondes : trait orange penché comme les fûts du sigle,
   0,3 em sur 0,8 em, pivot en bas à gauche. (Marqueur autonome dans une rangée :
   classe tr-oblique sur un bloc vide, aria-hidden.) */
.tr-surtitre::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 0.3em;
  height: 0.8em;
  background-color: #F59C29;
  transform: skewX(-19deg);
  transform-origin: bottom left;
}

/* 6 bis. Mot mis en avant dans un texte secondaire (tr-intro) ----------------------
   Écrire <strong>votre accord</strong> : semi-gras, insécable, dans la couleur du
   texte principal (bleu nuit sur fond clair, blanc dans tr-bloc-nuit). */
.tr-intro strong {
  color: var(--tr-texte, #11263E);
  font-weight: 600;
  white-space: nowrap;
}

/* 7. Liens dans un paragraphe ----------------------------------------------------
   Elementor remet à zéro les liens écrits dans un e-paragraph (all: unset).
   Charte : texte de la couleur courante en semi-gras, soulignement orange épais
   (jamais de texte orange), insécable, cible tactile agrandie à 44 px. */
.elementor .e-paragraph-base a[href] {
  position: relative;
  border-radius: 0.25em;
  color: inherit;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: #F59C29;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.14em;
  cursor: pointer;
  transition: text-decoration-color 200ms ease;
}

.elementor .e-paragraph-base a[href]:hover {
  text-decoration-color: currentColor;
}

.elementor .e-paragraph-base a[href]::after {
  content: "";
  position: absolute;
  inset: -0.75rem 0;
}

.elementor .e-paragraph-base a[href]:focus-visible {
  outline: 2px solid var(--tr-focus, #11263E);
  outline-offset: 2px;
}

/* 8. Apparition au défilement (classe tr-apparait) -------------------------------
   Translation et légère mise à l'échelle pilotées par le défilement, sans
   opacité : le contenu reste toujours visible (captures, navigateurs sans
   animation-timeline). Désactivée si l'utilisateur réduit les animations. */
@keyframes tr-apparait {
  from {
    transform: translateY(28px) scale(0.985);
  }
  to {
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .tr-apparait {
      animation: tr-apparait linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
  }
}

/* 9. Animations réduites ----------------------------------------------------------
   Respect de prefers-reduced-motion : transitions et animations quasi nulles,
   pas de soulèvement au survol. */
@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;
  }

  .tr-survol-leve:hover {
    transform: none !important;
  }
}

/* 10. Éditeur Elementor : conteneurs décoratifs volontairement vides ---------
   Dans l'éditeur seulement, Elementor place une zone de dépôt
   (.elementor-empty-view) à l'intérieur de chaque conteneur vide, et la feuille
   editor-preview.min.css lui impose alors min-height: 120px. Or la maquette
   utilise des conteneurs vides comme éléments de dessin : porte-icônes tracés
   en CSS (téléphone, flèches, chevrons, « + » de la FAQ, étoiles, puces),
   marqueurs obliques du sigle, voiles et dégradés posés sur les photos. Dans
   l'éditeur ils gonflaient donc à 120 px : boutons du hero à 146 px de haut,
   étiquettes de tuiles transformées en cercles, etc.
   La classe marqueur tr-decor, posée sur ces seuls conteneurs, leur rend une
   hauteur libre. Elle ne sert qu'à les désigner : sa seule déclaration est la
   variable inutilisée --tr-decor, donc elle ne change rien au rendu.
   Deux précautions :
   - la règle est portée par .elementor-edit-mode, classe présente uniquement
     dans l'aperçu de l'éditeur : le site public n'est pas concerné ;
   - elle ne vise que .tr-decor, donc tout conteneur créé par la suite garde sa
     zone de dépôt de 120 px, normale et utile pour y glisser un élément. */
.elementor-edit-mode .tr-decor:has(> .elementor-empty-view) {
  min-height: 0;
}/* End custom CSS */