/* =====================================================================
   CNFP — ajouts propres à la plateforme.

   Le reste de `assets/css` vient du thème d'origine et n'est pas retouché :
   tout ce que la plateforme ajoute au site se pose ici, chargé en dernier,
   pour rester lisible le jour où le thème évoluera.
   ===================================================================== */

/* ---------- Accès à l'espace personnel ----------
   Un cinquième lien tient dans la barre sur un grand écran, plus en dessous :
   il s'efface alors de la barre, où il ferait déborder la navigation, et
   reste accessible dans le menu mobile. */
@media (max-width: 1200px) {
  .cnfp-nav a[href="/mon-espace"] {
    display: none;
  }
}

/* ---------- Réponse du formulaire de contact ----------
   Insérée au-dessus du pied du formulaire une fois la demande partie, ou
   quand la saisie est refusée. */
.f-reponse {
  grid-column: 1 / -1;
  margin: 0 0 18px;
  padding: 13px 16px;
  border-radius: 8px;
  border-left: 3px solid #19a35b;
  background: rgba(25, 163, 91, 0.08);
  color: #16603a;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
.f-reponse.est-erreur {
  border-left-color: #c4121a;
  background: rgba(196, 18, 26, 0.07);
  color: #8d1219;
}

/* ── Le bouton « Demander un devis » de l'en-tête ─────────────────────────
   Il est posé dans `.cnfp-nav`, si bien que la règle des liens de menu
   — `.cnfp-nav a { padding: 6px 0 }` — l'emportait d'un cran de spécificité
   sur `.cnfp-cta`. Le bouton s'affichait donc écrasé à 28 px de haut, quand
   le thème lui en donne 43 : c'est la version du menu mobile qui montrait
   la taille voulue.
   On rétablit, et on l'agrandit franchement — sans toucher au texte, dont
   la taille et l'interlettrage font l'équilibre du bandeau. */
.cnfp-header .cnfp-nav a.cnfp-cta {
  padding: 19px 36px 18px;
}

/* Le bouton devis garde son texte blanc, en toute circonstance.

   Au défilement, l'en-tête pose un fond blanc et met ses liens en bleu
   marine — règle qui rattrapait aussi le bouton, dont le texte virait au
   bleu sur le terracotta. Illisible, et surtout : c'est le seul appel à
   l'action de la page, celui qu'on ne peut pas se permettre de rendre
   fade. Le survol est repris pour la même raison. */
.cnfp-header .cnfp-nav a.cnfp-cta,
.cnfp-header.is-scrolled .cnfp-nav a.cnfp-cta,
.cnfp-header.is-scrolled .cnfp-nav a.cnfp-cta:hover,
.cnfp-header .cnfp-nav a.cnfp-cta:hover {
  color: var(--cnfp-white);
}

/* ---------- Le bouton de l'en-tête : CNFP IA ----------
   Il menait au formulaire de devis ; il mène à CNFP IA depuis le
   23/10/2026, et se veut le bouton le plus précieux du site :
   - un dégradé terracotta, traversé à intervalles d'un reflet de lumière
     (un calque du fond, donc découpé à la forme du bouton) ;
   - un liseré de lumière qui en fait le tour (`::after`, anneau obtenu par
     masque) ;
   - un halo qui respire, et l'étincelle qui scintille ;
   - au survol, il se soulève et s'illumine.
   Sans animation voulue, il reste un beau bouton immobile. */
@property --cnfp-cta-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.cnfp-cta.cnfp-cta-ia {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  isolation: isolate;
  border-color: transparent;
  background:
    linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 46%, rgba(255, 255, 255, 0.15) 54%, transparent 70%) -150% 0 / 220% 100% no-repeat,
    linear-gradient(135deg, #d9715a 0%, #c4513a 45%, #a53c29 100%);
  box-shadow: 0 8px 22px rgba(183, 71, 50, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  /* Le libellé, court, se lit d'un coup : Montserrat 900, un rien plus
     grand que les liens du menu (demande de la direction, 23/10/2026). */
  font-weight: 900;
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 2px rgba(90, 20, 10, 0.45);
  animation: cnfpCtaReflet 4.2s ease-in-out 1.2s infinite, cnfpCtaHalo 2.8s ease-out infinite;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.cnfp-cta.cnfp-cta-ia::after {
  content: "";
  display: block;
  position: absolute;
  inset: -3px;
  /* Le soulignement des liens du menu (`.cnfp-nav a::after`) fixe une
     largeur et une hauteur : sans ces deux lignes, l'anneau tient en 5 px. */
  width: auto;
  height: auto;
  border-radius: inherit;
  padding: 2.5px;
  background: conic-gradient(from var(--cnfp-cta-angle), rgba(255, 214, 200, 0) 0deg, rgba(255, 255, 255, 1) 55deg, rgba(191, 220, 240, 1) 100deg, rgba(255, 214, 200, 0) 160deg, rgba(255, 214, 200, 0) 360deg);
  filter: drop-shadow(0 0 3px rgba(255, 236, 228, 0.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: cnfpCtaTour 3.6s linear infinite;
  pointer-events: none;
}
.cnfp-cta.cnfp-cta-ia:hover {
  background:
    linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 46%, rgba(255, 255, 255, 0.15) 54%, transparent 70%) -150% 0 / 220% 100% no-repeat,
    linear-gradient(135deg, #e07d66 0%, #cd5a42 45%, #b04430 100%);
  transform: translateY(-2px);
  filter: saturate(1.1) brightness(1.04) drop-shadow(0 0 14px rgba(242, 160, 141, 0.55));
}
.cnfp-cta-ia svg {
  width: 15px;
  height: 15px;
  flex: none;
  filter: drop-shadow(0 0 4px rgba(255, 236, 228, 0.9));
  animation: cnfpEtincelle 2.8s ease-in-out infinite;
}
.cnfp-cta-ia:hover svg {
  animation-duration: 1.2s;
}
@keyframes cnfpCtaReflet {
  0%, 55% { background-position: -150% 0, 0 0; }
  85%, 100% { background-position: 250% 0, 0 0; }
}
@keyframes cnfpCtaHalo {
  0% { box-shadow: 0 8px 22px rgba(183, 71, 50, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 0 0 rgba(208, 101, 79, 0.55); }
  70% { box-shadow: 0 8px 22px rgba(183, 71, 50, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 0 12px rgba(208, 101, 79, 0); }
  100% { box-shadow: 0 8px 22px rgba(183, 71, 50, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 0 0 rgba(208, 101, 79, 0); }
}
@keyframes cnfpCtaTour {
  to { --cnfp-cta-angle: 360deg; }
}
@keyframes cnfpEtincelle {
  0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
  50% { transform: scale(1.22) rotate(20deg); opacity: 0.85; }
}
/* Barre resserrée (1001 à 1240 px, voir cnfp-common) : le bouton suit. */
@media (min-width: 1001px) and (max-width: 1240px) {
  .cnfp-nav .cnfp-cta.cnfp-cta-ia {
    padding: 12px 18px 11px;
    font-size: 12px;
    letter-spacing: 0.1em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cnfp-cta.cnfp-cta-ia,
  .cnfp-cta.cnfp-cta-ia::after,
  .cnfp-cta-ia svg {
    animation: none;
  }
}

/* ---------- Le logo ne s'efface jamais ----------
   Une barre trop pleine écrasait le logo jusqu'à le faire disparaître :
   il ne rétrécit plus. */
.cnfp-brand {
  flex-shrink: 0;
}
/* Dans le menu mobile, le bouton garde son entrée en fondu. */
.cnfp-menu .cnfp-cta.cnfp-cta-ia {
  transition: opacity 0.45s var(--cnfp-ease) 0.32s, transform 0.45s var(--cnfp-ease) 0.32s, filter 0.3s ease;
}

/* ---------- Le choix de la langue (FR · EN · ES) ----------
   Posé dans la barre, juste avant le bouton : trois petits drapeaux, plus
   discrets que les entrées du menu, celui de la langue courante pleinement
   visible et souligné. */
.cnfp-drapeau {
  display: block;
  width: 20px;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: 2px;
  /* Un filet clair : le blanc du drapeau français ne se perd pas sur un fond blanc. */
  box-shadow: 0 0 0 1px rgba(33, 54, 94, 0.18);
}
/* Dans la barre : le drapeau de la langue courante et un menu déroulant.
   Son style vit avec le composant (`ChoixLangueDeroulant.module.css`) :
   une ancienne version de cette feuille, gardée par un navigateur, ne doit
   pas pouvoir le défaire. */

/* Dans le menu du téléphone, sous le bouton : la liste y est verticale,
   les trois codes s'y posent sur une ligne. */
.cnfp-menu-langues {
  display: flex;
  gap: 22px;
  margin-top: 26px;
  opacity: 0;
  transition: opacity 0.45s ease 0.36s;
}
.cnfp-menu.is-open .cnfp-menu-langues {
  opacity: 1;
}
.cnfp-menu-langues a {
  display: inline-flex;
  opacity: 0.6;
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.cnfp-menu-langues .cnfp-drapeau {
  width: 28px;
}
.cnfp-menu-langues a:hover {
  opacity: 1;
}
.cnfp-menu-langues a.is-active {
  opacity: 1;
  border-bottom-color: var(--cnfp-terra-hi);
}

/* Entre 1 001 et 1 089 px, la barre française — cinq entrées et le bouton
   CNFP IA — n'a pas la place même d'un drapeau : il débordait de 46 px à
   1 001 px. Il s'efface de la barre ; le pied de page porte les langues. */
@media (min-width: 1001px) and (max-width: 1089px) {
  .cnfp-nav .cnfp-langues {
    display: none;
  }
}

/* Juste au-dessus de la barre resserrée (1 241 à 1 279 px), le bouton CNFP IA
   sortait de 9 px de l'écran : la barre y garde des espacements un peu plus
   courts. */
@media (min-width: 1241px) and (max-width: 1279px) {
  .cnfp-nav {
    gap: 28px;
  }
}

/* Dans le pied de page, sous la présentation du centre. Le préfixe
   `.cnfp-footer` l'emporte sur `.cnfp-f-col span { display: block }`. */
.cnfp-footer .cnfp-f-langues {
  display: flex;
  gap: 18px;
  margin-top: 18px;
}
.cnfp-footer .cnfp-f-langues a {
  display: inline-flex;
  opacity: 0.6;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.cnfp-footer .cnfp-f-langues .cnfp-drapeau {
  width: 24px;
}
.cnfp-footer .cnfp-f-langues a:hover {
  opacity: 1;
  transform: none;
}
.cnfp-footer .cnfp-f-langues a.is-active {
  opacity: 1;
  border-bottom-color: var(--cnfp-terra-hi);
}