/**
 * Section « Demande de produit » — feuille autonome.
 *
 * Elle porte ses propres jetons plutôt que de dépendre de ayo-base.css : la
 * section est destinée à être posée n'importe où, y compris au milieu d'une
 * page Elementor, sans traîner les règles globales du panier.
 *
 * DM Sans est la police de tout le site et Elementor la sert déjà en local
 * (weights 100-900, italique compris) : la déclarer ici suffit, rien à charger.
 */

.ayo-demande {
  --ayo-navy: #132747;
  --ayo-navy-soft: #263b59;
  --ayo-red: #ed2638;
  --ayo-green: #2f9e44;
  --ayo-muted: #71819a;
  --ayo-line: #e6eaf0;
  --ayo-wash: #f7f8fa;
  --ayo-radius: 14px;

  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 8px 0 4px;
  font-family: "DM Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ayo-navy);
  box-sizing: border-box;
}

.ayo-demande *,
.ayo-demande *::before,
.ayo-demande *::after { box-sizing: inherit; }

/* -- L'accroche entre guillemets --------------------------------------- */

.ayo-demande__intro {
  max-width: 900px;
  margin: 0 auto 34px;
  font-size: clamp(16px, 2.2vw, 19px);
  font-style: italic;
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
  color: var(--ayo-navy);
  font-family: system-ui, 'DM Sans', sans-serif;
  font-size: 22px;
}

/* -- La rangée de boutiques --------------------------------------------- */

.ayo-demande__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* Neuf logos sur une seule ligne à 1140 px, comme la maquette : l'écart
     est calculé pour cela. Le flex-wrap reste là comme filet - un vrai logo
     plus large que prévu fera passer la rangée à deux lignes plutôt que
     déborder du conteneur. */
  gap: 16px 46px;
  margin: 0 0 38px !important;
  padding: 0;
  list-style: none;
}

.ayo-demande__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

/* Le point qui décide si la rangée paraît soignée ou bâclée.
   Ces neuf logotypes n'ont aucun rapport de forme commun - le carré H&M
   contre la longue signature Woodbrass - et les laisser à leur taille
   naturelle donne une ligne en dents de scie. Une hauteur unique, la largeur
   libre et « contain » les ramènent à un poids visuel comparable. */
.ayo-demande__logo img {
  display: block;
  width: auto;
  height: 32px !important;
  max-width: 116px !important;
  object-fit: contain;

  /* Neuf chartes graphiques côte à côte font une bande bariolée qui capte
     l'attention avant le formulaire. En gris, elles disent « ces enseignes
     sont couvertes » sans concurrencer les champs. */
  /* filter: grayscale(1);
  opacity: .62;
  transition: filter .2s ease, opacity .2s ease; */
}

.ayo-demande__logo img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* Repli quand le fichier n'a pas encore été déposé : le nom de l'enseigne,
   pour que la rangée ne se troue pas. */
.ayo-demande__logo-texte {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ayo-muted);
  text-transform: uppercase;
}

/* -- Le message de retour ---------------------------------------------- */

.ayo-demande__notice {
  margin: 0 0 26px;
  padding: 14px 18px;
  border-radius: 10px;
  border-left: 3px solid currentColor;
  font-size: 15px;
  line-height: 1.5;
}

.ayo-demande__notice--success {
  color: var(--ayo-green);
  background: #f0faf3;
}

.ayo-demande__notice--error {
  color: var(--ayo-red);
  background: #fff1f2;
}

/* -- Les trois champs, côte à côte comme sur la maquette ---------------- */

.ayo-demande__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
  padding: 0 70px;
}

.ayo-demande__field {
  min-width: 0;
}

.ayo-demande__field--email {
  max-width: 420px;
  margin: 26px 0 0;
}

.ayo-demande__label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ayo-navy);
}

.ayo-demande__icon {
  font-size: 15px;
  line-height: 1;
}

.ayo-demande__optional {
  font-weight: 400;
  color: var(--ayo-muted);
}

.ayo-demande__input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--ayo-line);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ayo-navy);
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Le texte d'invite reprend la voix des légendes sous les champs : italique
   et plus petit que la saisie. Deux raisons de le réduire - il se distingue
   ainsi au premier coup d'œil d'une valeur réellement saisie, et l'invite du
   lien produit est une phrase entière, qui à 15 px se ferait couper avant sa
   fin dans la largeur d'une colonne. */
.ayo-demande__input::placeholder {
  color: #a8b2c1;
  font-style: italic;
  font-size: 12.5px;
}

.ayo-demande__input:focus {
  outline: none;
  border-color: var(--ayo-navy-soft);
  box-shadow: 0 0 0 3px rgba(38, 59, 89, .12);
}

/* -- Le champ fichier, déguisé en champ ordinaire ----------------------- */

/* Masqué à l'œil, jamais au clavier ni aux lecteurs d'écran : « display:none »
   le sortirait de l'ordre de tabulation, et le visiteur qui navigue au clavier
   ne pourrait plus joindre de capture. Cette technique le laisse focusable. */
.ayo-demande__file {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Le libellé qui tient lieu de champ : mêmes bordure, rayon et hauteur que
   les deux autres, pour que la rangée reste alignée. */
.ayo-demande__fichier {
  display: flex;
  align-items: center;
  min-height: 46px;
  cursor: pointer;
}

/* L'invite : même italique, même corps que les placeholders voisins. */
.ayo-demande__fichier-texte {
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.35;
  color: #a8b2c1;
}

/* Un fichier choisi n'est plus une invite mais une valeur : il reprend donc
   le romain et le corps de la saisie, comme le texte tapé dans les autres
   champs. */
.ayo-demande__fichier-texte.is-rempli {
  font-style: normal;
  font-size: 15px;
  color: var(--ayo-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Le champ réel étant invisible, c'est au libellé de montrer le focus -
   sinon la tabulation traverse le formulaire sans rien signaler. */
.ayo-demande__file:focus-visible + .ayo-demande__fichier {
  border-color: var(--ayo-navy-soft);
  box-shadow: 0 0 0 3px rgba(38, 59, 89, .12);
}

.ayo-demande__fichier:hover { border-color: var(--ayo-navy-soft); }

.ayo-demande__textarea {
  resize: vertical;
  min-height: 46px;
}

.ayo-demande__hint {
  margin: 7px 0 0;
  font-size: 14px;
  font-style: italic;
  line-height: 1.45;
  color: var(--ayo-muted);
}

.ayo-demande__hint em { font-style: italic; }
.ayo-demande__hint span { 
    color: blue;
    text-decoration: underline; 
    font-style: normal;
  }

/* -- L'envoi ------------------------------------------------------------ */

/* Aligné à droite, sur sa propre ligne.
   Le hors-flux a été essayé et ne tient pas : le bas de la grille est celui
   du texte d'aide le plus long, si bien qu'un bouton en position absolue
   recouvre toujours quelque chose - la colonne « Recommandations » sur un
   grand écran. En occupant une ligne entière de la grille, il garde son
   alignement à droite et se réserve la place qu'il occupe. */
.ayo-demande__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 20px;
  margin: 4px 0 0;
  position: absolute;
  right: 68px;
  bottom: -33px;
}

/* Bouton discret : la maquette est une bande de champs, pas une page de
   conversion. Un aplat rouge y ferait un bloc de couleur que rien d'autre ne
   porte. Le contour suffit - et comme le bouton n'apparaît qu'une fois le lien
   collé, son apparition est déjà l'événement qui attire l'œil. */
.ayo-demande__submit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  background: #FF5544;
  color: white;
}

.ayo-demande__submit:hover:not(:disabled) {
  background: var(--ayo-navy);
  color: #fff;
}

.ayo-demande__submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(38, 59, 89, .18);
}

.ayo-demande__submit:disabled {
  opacity: .55;
  cursor: default;
}

/* L'icône ne porte aucune information : le libellé dit déjà tout. Elle est
   là pour clore la ligne, d'où le retrait volontaire. */
.ayo-demande__check {
  flex: none;
  opacity: .7;
}

.ayo-demande__submit:hover:not(:disabled) .ayo-demande__check { opacity: 1; }

/* -- Apparition à la saisie du lien ------------------------------------- */

/* Escamoté seulement quand le script tourne : sans lui, .ayo-demande--js
   n'est jamais posée et le bouton reste là, comme dans n'importe quel
   formulaire. */
.ayo-demande--js .ayo-demande__actions {
  display: none;
}

.ayo-demande--js.is-ready .ayo-demande__actions {
  display: flex;
  animation: ayo-demande-apparait .22s ease-out;
}

@keyframes ayo-demande-apparait {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ayo-demande--js.is-ready .ayo-demande__actions { animation: none; }
}

.ayo-demande__note {
  margin: 0;
  font-size: 13px;
  color: var(--ayo-muted);
}

/* -- La barre d'envoi ---------------------------------------------------- */

/* Ancrée au bas de la section, sur toute sa largeur. Elle ne pousse rien :
   en position absolue, son apparition ne décale aucun champ, là où un bloc
   dans le flux ferait sauter la page au moment précis où le visiteur vient
   de cliquer. */
.ayo-demande__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--ayo-line);
}

.ayo-demande__progress[hidden] { display: none; }

/* Progression indéterminée, et c'est volontaire : le formulaire part en POST
   classique, le navigateur ne rend la main qu'une fois la réponse reçue. Nous
   n'avons aucun pourcentage réel à afficher - une barre qui se remplirait de
   0 à 100 % inventerait une progression que personne ne mesure. Celle-ci dit
   « en cours », pas « à 60 % ». */
.ayo-demande__progress-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 35%;
  border-radius: 3px;
  background: var(--ayo-red);
  animation: ayo-demande-progresse 1.1s ease-in-out infinite;
}

@keyframes ayo-demande-progresse {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(386%); }
}

/* Sans animation, la barre reste tout de même visible : réduite au repos,
   elle signale l'envoi sans mouvement. */
@media (prefers-reduced-motion: reduce) {
  .ayo-demande__progress-bar {
    animation: none;
    width: 100%;
    opacity: .6;
  }
}

/* Pendant l'envoi, le formulaire ne répond plus : l'estomper le dit mieux
   qu'un texte, et empêche un second clic sur un champ devenu sans effet. */
.ayo-demande.is-sending .ayo-demande__form {
  opacity: .55;
  pointer-events: none;
  transition: opacity .2s ease;
}

.ayo-demande__form {
  position: relative;
}

/* -- Sous 900px la rangée de trois ne tient plus ------------------------ */

@media (max-width: 900px) {
  .ayo-demande__grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .ayo-demande__intro { margin-bottom: 22px; }

  /* Neuf logos ne tiennent pas sur une ligne : ils s'enroulent, et une
     hauteur réduite garde la rangée à deux lignes plutôt que quatre. */
  .ayo-demande__logos {
    gap: 14px 20px;
    margin-bottom: 38px !important;
  }

  .ayo-demande__logo img {
    height: 24px !important;
    max-width: 104px !important;
  }

  /* Une seule colonne : le bouton s'aligne comme les champs. */
  .ayo-demande__actions {
    justify-content: stretch;
    margin-top: 24px;
  }

  /* Pleine largeur : sans cela le contenu du bouton resterait collé à
     gauche de la bande, le libellé et l'icône séparés par tout l'écran. */
  .ayo-demande__submit {
    width: 100%;
    justify-content: center;
  }
}

/* -- Le conteneur Elementor qui porte la section ------------------------ */

/* Elementor enferme le contenu d'un conteneur « encadré » dans un
   .e-con-inner à largeur limitée (1140 px par défaut). La section de demande
   veut toute la largeur disponible : on relâche l'étau, mais uniquement sur le
   conteneur qui la contient — d'où le :has(), seul moyen en CSS de remonter
   d'un enfant vers son parent.
   
   La classe .import-multiple-url est posée sur le widget Shortcode dans
   Elementor (Avancé › Classes CSS) ; c'est elle qui désigne le bon conteneur.

   Le descendant plutôt que l'enfant direct (:has(> …)) est délibéré : le jour
   où le widget sera déplacé dans un conteneur imbriqué, la règle continuera de
   s'appliquer au lieu de cesser d'agir sans prévenir.

   Les !important sont ici nécessaires : la largeur du .e-con-inner vient d'une
   règle Elementor elle-même en !important, générée depuis les réglages du kit. */
.e-con > .e-con-inner:has(.import-multiple-url) {
  width: 100% !important;
  max-width: 100% !important;
}

/* -- Le message d'erreur sous le champ ---------------------------------- */

/* Même gabarit que la légende juste en dessous - position, corps, italique -
   pour que l'apparition du message ne déplace rien d'autre dans la colonne.
   Seule la couleur change, et c'est elle qui porte l'information. */
.ayo-demande__erreur {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 7px 0 0;
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.45;
  color: var(--ayo-red);
}

.ayo-demande__erreur[hidden] { display: none; }

/* Le point d'exclamation double le message : la couleur seule ne suffit pas
   à signaler une erreur à qui ne distingue pas le rouge du gris. */
.ayo-demande__erreur::before {
  content: "!";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--ayo-red);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

.ayo-demande__input--invalide {
  border-color: var(--ayo-red);
}

.ayo-demande__input--invalide:focus {
  border-color: var(--ayo-red);
  box-shadow: 0 0 0 3px rgba(237, 38, 56, .14);
}

/* -- Resserrement d'un conteneur de l'accueil --------------------------- */

/* Le bloc « ✨ Pourquoi choisir Ayo+ ? » descendait de 50 px sous la section
   précédente, ce qui ouvrait un vide au milieu de la page.

   L'override porte sur la variable, pas sur margin-top : Elementor applique la
   marge des conteneurs par « margin-block-start: var(--margin-block-start) »,
   lui-même alimenté par --margin-top. Écrire margin-top ici entrerait en
   concurrence avec cette chaîne au lieu de la nourrir.

   Le !important est nécessaire : la déclaration d'origine vient d'un sélecteur
   à specificité (0,3,0) généré par Elementor, et l'ordre de chargement des
   deux feuilles n'est pas garanti. */
.elementor-element.elementor-element-c5ad7cc {
  --margin-top: 5px !important;
}

/* -- La fenêtre « connectez-vous » -------------------------------------- */

.ayo-demande__modale {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ayo-demande__modale[hidden] { display: none; }

.ayo-demande__voile {
  position: absolute;
  inset: 0;
  background: rgba(19, 39, 71, .55);
  animation: ayo-demande-voile .18s ease-out;
}

/* Le dialogue est au-dessus du voile, et c'est lui qui reçoit les clics :
   sans position relative il passerait dessous et rien ne serait cliquable. */
.ayo-demande__dialogue {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 32px 30px 26px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(19, 39, 71, .28);
  text-align: center;
  animation: ayo-demande-dialogue .22s cubic-bezier(.2, .8, .3, 1);
}

.ayo-demande__fermer {
  position: absolute;
  top: 10px;
  right: 14px;
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--ayo-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.ayo-demande__fermer:hover { color: var(--ayo-navy); }

.ayo-demande__modale-icone {
  margin: 0 0 12px;
  font-size: 34px;
  line-height: 1;
}

.ayo-demande__modale-titre {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ayo-navy);
}

.ayo-demande__modale-texte {
  margin: 0 0 24px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ayo-muted);
}

.ayo-demande__modale-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ayo-demande__modale-bouton {
  display: block;
  width: 100%;
  padding: 13px 24px;
  border-radius: 10px;
  background: var(--ayo-red);
  color: #fff !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  transition: background .15s ease;
}

.ayo-demande__modale-bouton:hover { background: #d21f30; }

.ayo-demande__modale-lien {
  color: var(--ayo-navy) !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline !important;
}

.ayo-demande__modale-note {
  margin: 18px 0 0;
  font-size: 12.5px;
  color: var(--ayo-muted);
}

@keyframes ayo-demande-voile {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ayo-demande-dialogue {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ayo-demande__voile,
  .ayo-demande__dialogue { animation: none; }
}

/* -- Les logos mènent à leur boutique ---------------------------------- */

/* Le lien épouse le logo plutôt que de l'entourer d'une zone morte : la cible
   du clic est exactement ce que l'œil voit. */
.ayo-demande__logo-lien {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-decoration: none;
  transition: transform .2s ease;
}

.ayo-demande__logo-lien:hover {
  transform: translateY(-2px);
}

/* Même anneau que le bouton d'envoi : la page n'a qu'une façon de montrer le
   focus clavier. L'écart le décolle du logo, qui va souvent jusqu'au bord de
   son image. */
.ayo-demande__logo-lien:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(38, 59, 89, .18);
}

@media (prefers-reduced-motion: reduce) {
  .ayo-demande__logo-lien {
    transition: none;
  }

  .ayo-demande__logo-lien:hover {
    transform: none;
  }
}