@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════════
   COUCHE D'ADAPTATION — widget Prelinker (c.op4pro.com/8)
   ──────────────────────────────────────────────────────────────────────
   Ce fichier est le SEUL du projet autorisé à contenir des !important,
   et le seul à dépendre du balisage d'un prestataire externe.
   C'est volontaire : la dette technique est isolée ici, donc visible
   et bornée. C'est ce fichier — et lui seul — à ré-auditer quand le
   widget est mis à jour côté prestataire.

   Config observée le 2026-08-21 :
     tag mM8Kn (inscription) — content.styles.contents = ["no-style"]
     tag kiqkT (connexion)   — content.styles.contents = ["default"]

   RÈGLES DE RÉDACTION, à respecter pour toute modification :
     1. Jamais de libellé visible dans un sélecteur. L'ancien CSS ciblait
        input[value="Démarrer la recherche"] et input[placeholder="Mon Email"] :
        or la config prouve que ce sont des clés de traduction éditables
        en back-office. Un changement de wording cassait silencieusement
        le style du bouton de conversion.
     2. Tout scoper sous #pt-register-slot / #pt-login-slot — les seuls
        sélecteurs dont nous sommes propriétaires. #id + .classe pèse
        (1,1,0) et bat une classe vendeur (0,1,0) : aucun !important
        n'est nécessaire pour gagner.
     3. Cibler le préfixe en attribut, [class*="ptprelinker-containers-"],
        qui survit au changement de type de conteneur (modal/selector/here).
     4. Privilégier les sélecteurs structurels : un formulaire a toujours
        des input, un select et un submit.
     5. !important réservé à la surcharge des styles inline écrits par le
        widget, regroupés dans l'unique bloc de fin de fichier.

   Résultat : 2 !important, contre 242 dans l'ancien style.css.
   ══════════════════════════════════════════════════════════════════════ */


/* ═══ Conteneur injecté ═══════════════════════════════════════════════ */

/* Le widget se positionnait en position:fixed via des styles écrits en
   JavaScript. On lui rend une position normale dans le flux : le
   placement redevient l'affaire du CSS, pas du script.               */
:is(#pt-register-slot,#pt-login-slot) [class*="ptprelinker-containers-"],
:is(#pt-register-slot,#pt-login-slot) [class*="ptprelinker-content"]{
  position:static;
  inset:auto;
  transform:none;
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}

/* L'overlay de la modale n'a plus lieu d'être lorsque le formulaire est
   rendu à l'intérieur de la page. */
:is(#pt-register-slot,#pt-login-slot) [class*="ptprelinker-overlay"]{
  position:static;
  background:none;
  backdrop-filter:none;
}

:is(#pt-register-slot,#pt-login-slot) form{
  display:grid;
  gap:.7rem;
  width:100%;
}

:is(#pt-register-slot,#pt-login-slot) legend,
:is(#pt-register-slot,#pt-login-slot) [class*="ptprelinker-legend"]{
  font-family:var(--f-display);
  font-size:var(--t-lg);
  font-weight:700;
  color:var(--c-ink);
  text-align:center;
  padding:0;
  margin-bottom:var(--s-2xs);
  text-shadow:0 1px 10px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.7);
}

:is(#pt-register-slot,#pt-login-slot) fieldset{
  border:0;padding:0;margin:0;min-width:0;
}


/* ═══ Champs ══════════════════════════════════════════════════════════ */

:is(#pt-register-slot,#pt-login-slot) :is(input,select):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]){
  inline-size:100%;
  min-block-size:48px;                    /* cible tactile conforme */
  padding:.8rem .9rem;
  font-family:var(--f-text);
  /* 16 px est un PLANCHER, pas une préférence : en dessous, iOS Safari
     zoome automatiquement à chaque prise de focus. L'ancien CSS
     descendait à 14 px sous 480 px — c'est-à-dire précisément sur le
     formulaire de conversion, sur mobile.                            */
  font-size:1rem;
  line-height:1.4;
  /* Verre, au sens propre : un voile blanc tres translucide et un flou
     d'arriere-plan modere. C'est le flou qui rend le texte lisible en
     diffusant ce qui passe dessous, sans masquer l'image — un aplat
     opaque, lui, l'aurait effacee. */
  color:#fff;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(10px) saturate(170%);
          backdrop-filter:blur(10px) saturate(170%);
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  border-radius:var(--r-sm);
  transition:border-color var(--d-base) var(--ease-out),
             box-shadow var(--d-base) var(--ease-out);
}

/* Groupe champ + icône.
   Le widget produit une structure de type « input-group » :
     div.ptprelinker-input-group
       div.ptprelinker-input-group-prepend
         span.ptprelinker-input-group-text > i.ptprelinker-icon-*
       input | select

   On la traite en flex plutôt qu'en positionnement absolu. Empiler des
   position:absolute sur le groupe, le prepend ET le span faisait dériver
   l'icône par-dessus le texte du champ. Le flux normal ne peut pas
   produire ce défaut, et résiste mieux à une évolution du balisage.

   Sélecteurs en [class~=] (mot exact) et non [class*=] : « …-group »
   est un préfixe de « …-group-prepend » et de « …-group-text », qui
   recevaient donc les mêmes règles que leur parent. */
:is(#pt-register-slot,#pt-login-slot) [class~="ptprelinker-input-group"]{
  display:flex;
  align-items:stretch;
  width:100%;
  min-width:0;
}
:is(#pt-register-slot,#pt-login-slot) [class~="ptprelinker-input-group-prepend"]{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  padding-inline:.8rem;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.28);
  border-right:0;
  -webkit-backdrop-filter:blur(10px) saturate(170%);
          backdrop-filter:blur(10px) saturate(170%);
  border-radius:var(--r-sm) 0 0 var(--r-sm);
  color:var(--c-accent);
  pointer-events:none;
}
:is(#pt-register-slot,#pt-login-slot) [class~="ptprelinker-input-group-text"]{
  display:flex;align-items:center;
  background:transparent;border:0;padding:0;
  font-size:1.05rem;line-height:1;
  color:inherit;
}
:is(#pt-register-slot,#pt-login-slot) [class*="ptprelinker-icon-"]{
  margin:0;                       /* le CSS du widget pose ±.2em de marge */
  color:inherit;
}
/* Dans un groupe, le champ perd son bord gauche et se colle à l'icône. */
:is(#pt-register-slot,#pt-login-slot) [class~="ptprelinker-input-group"] :is(input,select){
  flex:1 1 auto;
  min-width:0;
  border-left:0;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding-left:.6rem;
}

:is(#pt-register-slot,#pt-login-slot) :is(input,select):focus{
  outline:none;
  border-color:var(--c-accent-fill);
  box-shadow:0 0 0 3px var(--c-accent-ring);
}
:is(#pt-register-slot,#pt-login-slot) :is(input,select):focus-visible{
  outline:2px solid var(--c-accent);
  outline-offset:1px;
}

/* Les listes déroulantes de date de naissance : trois côte à côte. */
:is(#pt-register-slot,#pt-login-slot) [class*="birthdate"],
:is(#pt-register-slot,#pt-login-slot) [class*="birth-date"]{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.5rem;
}
:is(#pt-register-slot,#pt-login-slot) [class*="birthdate"] :is(input,select),
:is(#pt-register-slot,#pt-login-slot) [class*="birth-date"] :is(input,select){
  padding-left:.6rem;
}


/* ═══ Libellés, cases à cocher, mentions ══════════════════════════════ */

:is(#pt-register-slot,#pt-login-slot) label{
  display:block;
  font-size:var(--t-xs);
  font-weight:600;
  color:#fff;
  margin-bottom:.2rem;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
}

/* La mention d'age et d'acceptation des CGU se lisait mal : petit texte
   pose directement sur le verre, avec la photographie derriere. Un fond
   propre lui rend le contraste sans alourdir le formulaire. */
:is(#pt-register-slot,#pt-login-slot) [class~="ptprelinker-checkbox"]{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  padding:.5rem .6rem;
  background:rgba(255,255,255,.08);
  border-radius:var(--r-sm);
  -webkit-backdrop-filter:blur(10px) saturate(170%);
          backdrop-filter:blur(10px) saturate(170%);
}
:is(#pt-register-slot,#pt-login-slot) input[type="checkbox"]{
  flex-shrink:0;
  inline-size:22px;block-size:22px;      /* cible tactile */
  margin-top:.1rem;
  accent-color:var(--c-accent-fill);
}
:is(#pt-register-slot,#pt-login-slot) [class*="ptprelinker-checkbox"] label,
:is(#pt-register-slot,#pt-login-slot) [class*="ptprelinker-cgu"] label{
  margin:0;
  min-width:0;                  /* autorise le retour à la ligne sans déborder */
  font-size:var(--t-2xs);
  font-weight:400;
  line-height:1.5;
  color:#fff;
  /* Posée sur du verre, cette mention peut tomber sur une zone très
     claire de la photo. Une ombre la tient sans qu'il faille opacifier
     le fond, ce qui masquerait l'image. */
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.6);
  text-wrap:pretty;
}

:is(#pt-register-slot,#pt-login-slot) a{
  color:var(--c-accent-soft);
  text-underline-offset:.15em;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
/* Les liens vers les CGU et la politique de confidentialité sont rendus
   en bloc par le widget : la mention d'acceptation s'étalait alors sur
   quatre lignes. On les remet dans le fil de la phrase. */
:is(#pt-register-slot,#pt-login-slot) [class~="ptprelinker-cgu-link"]{
  display:inline;
}
/* Au survol le lien devient PLUS lisible. L'ancien CSS le faisait virer
   vers #7f2562, soit 2,34:1 sur fond noir : une régression d'accessibilité
   déclenchée par le survol lui-même. */
:is(#pt-register-slot,#pt-login-slot) a:hover{color:var(--c-accent-soft)}


/* ═══ Bouton de soumission ════════════════════════════════════════════ */

/* [class~=] et non [class*=] : le conteneur des boutons porte la classe
   « ptprelinker-buttons », que [class*="ptprelinker-button"] attraperait
   aussi — la div héritait alors du fond dégradé du bouton. */
:is(#pt-register-slot,#pt-login-slot) :is(button[type="submit"],input[type="submit"],button:not([type])),
:is(#pt-register-slot,#pt-login-slot) [class~="ptprelinker-button"]{
  inline-size:100%;
  /* L'ancien CSS imposait min-width:300px : sur un écran de 320 px, le
     conteneur offrait ~264 px utiles, d'où un débordement d'environ
     36 px masqué — et non corrigé — par overflow-x:hidden.          */
  min-inline-size:0;
  min-block-size:52px;
  padding:.9rem 1.5rem;
  font-family:var(--f-text);
  font-size:var(--t-base);
  font-weight:700;
  line-height:1;
  color:var(--c-ink-on-fill);
  background:var(--grad-brand);
  border:0;
  border-radius:var(--r-sm);
  box-shadow:var(--e-glow);
  cursor:pointer;
  transition:filter var(--d-base) var(--ease-out),
             transform var(--d-fast) var(--ease-out);
  -webkit-appearance:none;appearance:none;
}
:is(#pt-register-slot,#pt-login-slot) :is(button[type="submit"],input[type="submit"]):hover,
:is(#pt-register-slot,#pt-login-slot) [class~="ptprelinker-button"]:hover{
  filter:brightness(1.12);
}
:is(#pt-register-slot,#pt-login-slot) :is(button[type="submit"],input[type="submit"]):active,
:is(#pt-register-slot,#pt-login-slot) [class~="ptprelinker-button"]:active{
  transform:translateY(1px);
}


/* ═══ Messages d'erreur et mot de passe oublié ════════════════════════ */

:is(#pt-register-slot,#pt-login-slot) [class*="error"]{
  padding:.6rem .8rem;
  font-size:var(--t-2xs);
  color:#ffd7d7;
  background:rgba(180,30,50,.25);
  border:1px solid rgba(230,91,114,.45);
  border-radius:var(--r-sm);
}

/* ── Panneau « mot de passe oublié » ─────────────────────────────────
   Le CSS du prestataire ne prévoit que deux états :
       .ptprelinker-forgotten-form.show { display:flex }
       .ptprelinker-forgotten-form.hide { display:none }
   Au chargement, le formulaire ne porte NI l'une NI l'autre : aucune
   règle ne s'applique, il retombe donc sur le display par défaut d'un
   <form> et s'affichait déplié par-dessus le formulaire de connexion.
   On rétablit l'état fermé par défaut, et on redessine le panneau —
   son fond d'origine est un jaune pâle sans rapport avec le site. */

:is(#pt-register-slot,#pt-login-slot) [class~="ptprelinker-forgotten-form"]{
  display:none;
}
:is(#pt-register-slot,#pt-login-slot) [class~="ptprelinker-forgotten-form"].show{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  position:static;
  inset:auto;
  width:100%;
  max-width:100%;
  margin-top:.85rem;
  padding:var(--s-sm);
  background:var(--c-surface-2);
  border:1px solid var(--c-hairline-strong);
  border-radius:var(--r-md);
}
/* La flèche de bulle n'a plus d'objet une fois le panneau en flux. */
:is(#pt-register-slot,#pt-login-slot) [class~="ptprelinker-forgotten-form"]::before{
  display:none;
}
:is(#pt-register-slot,#pt-login-slot) [class~="ptprelinker-forgotten-form"] *{
  margin-right:0;
}
:is(#pt-register-slot,#pt-login-slot) [class~="ptprelinker-forgotten-label"]{
  display:block;
  font-size:var(--t-xs);
  color:var(--c-ink-muted);
}
/* Messages de confirmation et d'erreur : masqués tant qu'ils ne sont
   pas déclenchés. */
:is(#pt-register-slot,#pt-login-slot) [class~="forgotten-hide"]{
  display:none;
}

/* Posé sur la surface translucide du panneau, avec la photographie
   derrière : l'accent standard n'y tient pas le contraste. On prend la
   déclinaison claire, qui monte à 10:1. */
:is(#pt-register-slot,#pt-login-slot) [class~="ptprelinker-forgotten-link"]{
  display:inline-block;
  margin-top:.35rem;
  font-size:var(--t-xs);
  font-weight:600;
  color:var(--c-accent-soft);
  text-decoration:underline;
  text-underline-offset:.18em;
  cursor:pointer;
}
:is(#pt-register-slot,#pt-login-slot) [class~="ptprelinker-forgotten-link"]:hover{
  color:#fff;
}


/* ══════════════════════════════════════════════════════════════════════
   NEUTRALISATION DE LA MODALE
   ──────────────────────────────────────────────────────────────────────
   Seul endroit du projet où !important est autorisé. Il en faut ici, et
   la raison est précise — vérifiée dans la feuille servie par le
   prestataire, https://c.op4pro.com/8/css/containers/modal/default.css :

     .ptprelinker-containers-modal-default{
       position:fixed; top:50%; left:50%;
       transform:translateX(-50%) translateY(-50%) scale(0) }

     .ptprelinker-containers-modal-default.ptprelinker-show{
       animation:fadein… .4s .4s … forwards }

   La règle de position se bat sur la spécificité, et nos sélecteurs
   portés par un ID la battent sans difficulté. L'ANIMATION, elle, ne se
   joue pas sur ce terrain : dans la cascade, une animation l'emporte sur
   toute déclaration d'auteur — sauf si celle-ci est marquée !important.
   Le transform de l'image clé finale replaçait donc le formulaire au
   centre de l'écran, hors de son emplacement, quoi qu'on écrive.

   Le conteneur est destiné à s'afficher en modale plein écran ; nous le
   rendons au flux de la page. Neuf déclarations — contre 242 !important
   éparpillés dans l'ancien style.css.
   ══════════════════════════════════════════════════════════════════════ */

:is(#pt-register-slot,#pt-login-slot) [class*="ptprelinker-containers-"]{
  display:block !important;
  position:static !important;
  inset:auto !important;
  width:100% !important;          /* la modale se dimensionne en width:auto */
  max-width:100% !important;
  transform:none !important;      /* bat l'image clé finale de l'animation */
  animation:none !important;      /* et l'animation elle-même */
  z-index:auto !important;        /* sinon 1002, au-dessus du bandeau cookies */
  transition:none !important;
}

/* L'overlay plein écran n'a plus d'objet une fois le formulaire intégré
   à la page. La configuration du tag le désactive déjà (overlay:false) ;
   cette règle couvre le cas où il serait réactivé côté back-office. */
[class*="ptprelinker-overlay"]{
  position:static !important;
  width:auto !important;
  height:auto !important;
  background:none !important;
  z-index:auto !important;
}
[class*="ptprelinker-overlay"][hidden]{
  display:none !important;
}


/* Placeholders : sur verre sombre, le gris par défaut du navigateur
   descend sous le seuil de lisibilité. */
:is(#pt-register-slot,#pt-login-slot) ::placeholder{
  color:rgba(255,255,255,.78);
  opacity:1;
}
:is(#pt-register-slot,#pt-login-slot) select option{
  background:#141416;
  color:#fff;
}