/*
@author UBPartner
*/
/* ==========================================================
   C3S - classes ajoutées par le thème

   Tout ce qui n'existait pas dans le design d'origine et que la conversion
   rend nécessaire. Préfixe c3s- pour qu'on distingue d'un coup d'œil ce qui
   vient du design de ce qui vient de la reconstruction.

   Les classes du design gardent leurs noms d'origine - hero-modern,
   section-heading, stat-card - puisque ce sont elles qui portent le dessin
   et qu'elles sont posées telles quelles sur les éléments Elementor.
   ========================================================== */


/* ==========================================================
   RÉVÉLATION À L'APPARITION - remplace AOS

   Reprend les réglages du design : 700 ms, ease-out-cubic, déclenchement une
   seule fois, déplacement de 100 px vers le haut (valeur par défaut de
   fade-up dans AOS 2.3.1, que le site ne redéfinissait pas).

   La coupure sous 992 px était en JavaScript, dans l'option `disable`
   d'AOS - et n'était évaluée qu'au chargement : un écran de bureau réduit
   ensuite continuait d'animer. Ici c'est une requête média, donc réévaluée
   en continu par le navigateur. Le défaut disparaît de lui-même.
   ========================================================== */
@media (min-width: 992px) {
  .c3s-reveal {
    opacity: 0;
    transform: translate3d(0, 100px, 0);
    transition:
      opacity 0.7s cubic-bezier(0.215, 0.61, 0.355, 1),
      transform 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-delay: var(--c3s-delay, 0s);
  }

  .c3s-reveal.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Décalages d'apparition. Le générateur pose c3s-delay-N là où le design
   portait data-aos-delay="N" ; les cinq valeurs sont celles relevées dans les
   quatorze pages. Elementor gratuit n'offre pas de CSS par élément, une
   variable en ligne n'est donc pas possible : une classe par valeur. */
.c3s-delay-60  { --c3s-delay: 0.06s; }
.c3s-delay-80  { --c3s-delay: 0.08s; }
.c3s-delay-100 { --c3s-delay: 0.1s; }
.c3s-delay-120 { --c3s-delay: 0.12s; }
.c3s-delay-160 { --c3s-delay: 0.16s; }
.c3s-delay-200 { --c3s-delay: 0.2s; }
.c3s-delay-240 { --c3s-delay: 0.24s; }
.c3s-delay-300 { --c3s-delay: 0.3s; }

/* Dans l'éditeur, la révélation ne se joue jamais.

   Dans le canevas, des sections entières restaient invisibles - un blanc que
   l'on pouvait pourtant cliquer et modifier - et réapparaissaient dès que le
   champ « Classes CSS » de l'onglet Avancé était vidé.

   La cause n'est pas Elementor : c'est .c3s-reveal, qui pose opacity 0 en
   attendant que l'observateur d'intersection ajoute .is-revealed. Or
   l'éditeur re-rend un élément à chaque modification, et le nouvel élément
   n'est plus observé. L'auteur voyait donc disparaître ce qu'il venait de
   toucher.

   Une animation d'apparition n'a de toute façon rien à faire dans un outil
   d'édition - Elementor neutralise les siennes pour la même raison. La
   classe du corps vient de inc/elementor/globals.php, et non de celles
   d'Elementor : elle ne dépend d'aucun nom qu'une mise à jour pourrait
   changer. */
body.c3s-editeur .c3s-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}


/* Le mouvement n'est pas une information : qui l'a désactivé voit le
   contenu, simplement, sans transition ni décalage. */
@media (prefers-reduced-motion: reduce) {
  .c3s-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ==========================================================
   DRAPEAU

   Le design chargeait la bibliothèque flag-icons entière depuis un CDN
   pour un seul drapeau (la carte du bureau de Paris). Un SVG de trois
   rectangles, en ligne, fait le même travail sans requête vers un tiers.
   Les dimensions sont celles de flag-icons (4:3, 1.333em de large).
   ========================================================== */
.fi {
  position: relative;
  display: inline-block;
  width: 1.333em;
  height: 1em;
  line-height: 1em;
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
}

.fi-fr {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23fff' d='M0 0h640v480H0z'/%3E%3Cpath fill='%23002654' d='M0 0h213.3v480H0z'/%3E%3Cpath fill='%23ce1126' d='M426.7 0H640v480H426.7z'/%3E%3C/svg%3E");
}


/* ==========================================================
   CONSENTEMENT

   Case ajoutée sous les formulaires (RGPD) : elle s'aligne sur la
   maquette des champs sans y ajouter de style propre.
   ========================================================== */
.c3s-consent label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  line-height: 1.5;
}

.c3s-consent input {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

/* La case doit se voir cochée.

   style.css habille TOUS les champs d'un .form-group - fond, bordure, rayon,
   padding - et termine par « appearance: none ». La règle vise les champs
   texte du design, qui n'avait pas de case à cocher ; appliquée à une case,
   elle supprime le dessin natif. Le clic était bien pris en compte, mais rien
   ne changeait à l'écran.

   On rend donc à la case son rendu natif et on annule l'habillage des champs
   texte. accent-color la peint aux couleurs de la marque sans avoir à
   redessiner la coche à la main. */
.form-group input[type="checkbox"],
.demo-field input[type="checkbox"],
.c3s-consent input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  accent-color: var(--primary, #7347b3);
}


/* ==========================================================
   REPLI DE PHOTO D'ÉQUIPE

   team.css dessine la silhouette (.team-avatar-fallback) mais la laisse
   sans display : le design la montrait par un style en ligne, quand
   l'image échouait à charger. Le widget sait s'il y a une photo ; il pose
   cette classe à la place du style en ligne.
   ========================================================== */
.team-avatar-fallback.is-shown {
  display: flex;
}


/* ==========================================================
   POT DE MIEL

   Champ que seul un robot remplit. Il évite reCAPTCHA, dont l'appel
   constituerait un transfert de données vers un pays tiers.

   Ni display:none ni visibility:hidden : certains robots les détectent et
   sautent le champ. On le sort de l'écran tout en le laissant « visible »
   au sens du moteur de rendu. aria-hidden et tabindex="-1", posés dans le
   gabarit, le retirent des lecteurs d'écran et du parcours clavier.
   ========================================================== */
.c3s-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ==========================================================
   LIEN D'ÉVITEMENT

   Premier élément focusable de la page : permet d'atteindre le contenu sans
   parcourir la navigation entière au clavier. Invisible tant qu'il n'a pas
   le focus, comme le veut le motif habituel.
   ========================================================== */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  z-index: 100000;
  top: 16px;
  left: 16px;
  width: auto;
  height: auto;
  padding: 12px 24px;
  clip-path: none;
  border-radius: 8px;
  background: #fff;
  color: var(--primary);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(36, 27, 61, 0.24);
}


/* ==========================================================
   LISTINGS - ÉTAT DE CHARGEMENT

   Le filtre et le « voir plus » ne rechargent plus la page : sans signal,
   rien ne dit que quelque chose se passe, et l'on reclique. La grille
   s'estompe et un disque tourne au-dessus, le temps de la réponse.

   Rien de tout cela n'existe au repos : le relevé de fidélité, pris page
   chargée, n'en voit rien.
   ========================================================== */
[data-listing][aria-busy="true"] [data-listing-grid] {
  opacity: 0.4;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

[data-listing][aria-busy="true"] {
  position: relative;
}

[data-listing][aria-busy="true"]::after {
  content: "";
  position: absolute;
  top: 120px;
  left: 50%;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  border: 3px solid rgba(115, 71, 179, 0.2);
  border-top-color: var(--primary, #7347b3);
  border-radius: 50%;
  animation: c3sSpin 0.7s linear infinite;
}

@keyframes c3sSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Le mouvement n'est pas une information : sans lui, l'estompe suffit. */
@media (prefers-reduced-motion: reduce) {
  [data-listing][aria-busy="true"]::after {
    animation: none;
  }
}


/* ==========================================================
   PLACE RÉSERVÉE AUX MESSAGES D'ERREUR

   Écart assumé avec le design d'origine, demandé par le client.

   Le design insère le message sous le champ au moment de l'erreur : la
   rangée grandit, tout ce qui suit descend, et le bouton se dérobe sous le
   curseur au moment où l'on vise. Le défaut est d'autant plus net à l'envoi,
   où plusieurs champs s'allongent d'un coup.

   La ligne est donc réservée en permanence, sous le champ, et le message s'y
   pose hors du flux : la hauteur de la rangée ne change jamais, qu'il y ait
   une erreur ou non.

   L'écart vertical du formulaire passe à zéro, la place réservée servant
   désormais de séparation. Le rythme d'origine est de 18 px, la réserve de
   22 px : chaque rangée gagne 4 px, et rien d'autre ne bouge. Les éléments
   qui ne sont pas des champs - bouton, mentions - reprennent à la main
   l'écart qu'ils tenaient de la grille.

   Une seule ligne est réservée : les messages sont écrits pour tenir dans
   la colonne la plus étroite du site, la demi-largeur du formulaire de
   contact. Les allonger ferait réapparaître le décalage.

   Les deux familles de messages sont visées : .field-error, posé par le
   thème, et .wpcf7-not-valid-tip, posé par Contact Form 7. Son enveloppe
   étant en display: contents (voir compat.css), le message est bien un
   enfant du groupe et se cale sur lui.
   ========================================================== */
.contact-form,
.demo-form {
  gap: 0;
}

.contact-form .form-group,
.demo-form .form-group,
.event-form .demo-field {
  position: relative;
  padding-bottom: 22px;
}

/* .demo-field portait l'écart en marge basse, pas en gap. */
.event-form .demo-field {
  margin-bottom: 0;
}

/* Le GROUPE est exigé dans le sélecteur, et ce n'est pas un détail. La règle
   visait d'abord tout .field-error du formulaire, message de RÉPONSE compris -
   celui que le serveur renvoie après l'envoi, qui n'appartient à aucun champ.
   Hors d'un groupe, il ne trouvait aucun parent positionné et se calait sur
   un ancêtre lointain : il sortait alors sous le bouton, à un endroit qui ne
   devait rien à sa place dans le balisage. */
.contact-form .form-group .field-error,
.contact-form .form-group .wpcf7-not-valid-tip,
.demo-form .form-group .field-error,
.demo-form .form-group .wpcf7-not-valid-tip,
.event-form .demo-field .field-error,
.event-form .demo-field .wpcf7-not-valid-tip {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
}

/* Le message vide ne doit plus disparaître : c'est sa place qui tient la
   rangée. Il n'occupe de toute façon aucune hauteur, étant hors du flux. */
.contact-form .form-group .field-error:empty,
.demo-form .form-group .field-error:empty,
.event-form .demo-field .field-error:empty {
  display: block;
}

/* Le message de réponse, lui, reste dans le flux, à la place que le gabarit
   lui donne : juste avant le bouton. L'écart est celui que le gap du
   formulaire fournissait avant de passer à zéro. */
.contact-form > .field-error,
.contact-form > .form-success,
.demo-form > .field-error,
.demo-form > .form-success {
  margin-top: 18px;
}

/* Écarts que le gap du formulaire fournissait avant de passer à zéro. */
.contact-form .btn {
  margin-top: 18px;
}

.demo-form .demo-submit {
  margin-top: 24px;
}


/* ==========================================================
   CARTE CLIENT DEVENUE LIEN

   Quand le client a une adresse, la carte est rendue en <a> plutôt qu'en
   <article> : tout le rectangle devient cliquable. reseau.css l'habille par
   sa classe, indifférente à la balise ; il ne reste qu'à défaire ce que le
   reboot de Bootstrap donne à un lien - couleur et soulignement - et à
   rétablir le display que le reboot fixe à inline.
   ========================================================== */
a.client-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

a.client-card:hover,
a.client-card:focus-visible {
  color: inherit;
  text-decoration: none;
}

/* Le logo du bandeau défilant suit la même règle. */
.pt-logo-cell a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}


/* ==========================================================
   BANDEAU DE REPLI - « SUIVEZ-NOUS »

   Le bandeau ne fait défiler que des événements publiés. Sans eux, il
   disparaissait et la navigation remontait de 40 px : le site sans
   événement ne ressemblait pas au site qui en a, et la hauteur d'en-tête sur
   laquelle reposent les calculs de bandeau changeait sous les pieds.

   La barre garde donc sa place et affiche les liens de contact. Le dessin -
   hauteur, fond, couleur - vient de .breaking-news dans header.css ; seul
   l'alignement change, le contenu tenant à droite au lieu d'être centré.

   À droite du CONTENU, pas de l'écran : les icônes sont dans le même
   .container que la navbar, et s'arrêtent donc au même bord que le bouton
   « Contactez-nous » juste en dessous. Sans cela, elles partaient au fond
   à droite sur les grands écrans.
   ========================================================== */
.breaking-news--follow {
  justify-content: center;
}

.bn-follow-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.bn-follow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
}

.bn-follow a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  color: inherit;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.bn-follow a:hover,
.bn-follow a:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
}

@media (max-width: 575.98px) {
  .bn-follow {
    gap: 10px;
  }
}


/* ==========================================================
   BANDEAU NEWSLETTER - À LA PLACE DES ÉVÉNEMENTS

   La maquette enveloppe ce bandeau d'un <div class="without-event"> : il
   occupe la section Agenda tant qu'aucun événement n'est annoncé, et lui
   cède la place dès qu'il y en a un. La classe existait, rien ne s'en
   servait.

   La condition est portée par le corps du document (inc/setup.php), faute de
   condition d'affichage dans Elementor gratuit : le bandeau est fait
   d'éléments natifs qu'aucun widget ne pilote.

   Dans l'éditeur, le bandeau reste visible quoi qu'il arrive - sans quoi il
   deviendrait impossible d'en modifier le texte le jour où des événements
   existent, exactement comme les sections que .c3s-reveal faisait
   disparaître du canevas.
   ========================================================== */
body.c3s-has-events .without-event {
  display: none;
}

body.c3s-editeur .without-event {
  display: block;
}

/* ==========================================================
   Icônes : pas d'italique

   La balise <i> est italique par défaut, et bootstrap-icons.css ne remet
   le style droit que sur ::before. L'élément lui-même restait donc en
   italique, et le navigateur téléchargeait la police italique d'Inter -
   380 Ko - sur chaque page, pour 44 éléments sans texte. Relevé sur
   l'accueil : c'étaient les seuls éléments italiques de la page.
   ========================================================== */
.bi {
  font-style: normal;
}

/* ==========================================================
   Animations permanentes : pause hors écran

   Les orbites du bandeau, le marquee des logos et le bandeau d'actualités
   tournent en boucle en CSS. Hors de la fenêtre, ils coûtaient quand même
   de la mise en page et de la peinture à chaque image ; sur mobile, le fil
   principal en restait saturé. main.js pose la classe par observation.
   ========================================================== */
.c3s-offscreen .orbit-ring,
.c3s-offscreen .orbit-core,
.c3s-offscreen .pt-logos-track,
.c3s-offscreen .bn-track {
  animation-play-state: paused;
}