/* =========================================================================
   relation-client-2026.css  —  LOT 1 / refonte formulaires de leads (2026)
   -------------------------------------------------------------------------
   Feuille NEUVE, NON BRANCHEE (incluse nulle part dans ce lot).
   Style le conteneur .rc26 (formulaire de leads, fond sombre « un bloc »).

   Les COULEURS DE MARQUE ne sont JAMAIS ecrites en dur ici : elles arrivent
   par les custom properties --rc-* posees en attribut style sur .rc26,
   produites par Auto::cssRelationClientVars() :
       --rc-texte  --rc-contour  --rc-fond  --rc-sur-fond  [--rc-contour-auto]
   Les valeurs de repli passees a var(--rc-*, …) sont des NEUTRES de theme
   (repli de rang), pas des couleurs de marque.

   Palette de theme (fond sombre) figee en dur — non liee a une marque.
   Reference visuelle : x-maquette/maquette-leads-2026.html (variante « un bloc »).
   ========================================================================= */

.rc26{
  /* --- Palette de theme (neutres, jamais une couleur de marque) --- */
  --rc26-card:#1F1F1E;        /* carte / fond du conteneur   */
  --rc26-field:#252523;       /* champ au repos              */
  --rc26-field-on:#2B2B29;    /* champ actif / selectionne   */
  --rc26-line:#35352F;        /* bordure de champ            */
  --rc26-line-soft:#2A2A26;   /* separateur discret          */
  --rc26-ink:#EFE9DF;         /* texte principal             */
  --rc26-ink-2:#8F8B84;       /* texte secondaire            */
  --rc26-ink-3:#5F5C57;       /* placeholder / libelle faible*/
  --rc26-ko:#E2554B;          /* erreur                      */
  --rc26-ok:#5DCAA5;          /* succes                      */

  /* Familles typographiques (memes piles que la maquette, repli systeme).
     Le chargement des webfonts est une affaire de PAGE (lot 2), pas de ce
     fichier non branche. */
  --rc26-ttl:'Fira Sans Condensed',system-ui,-apple-system,Segoe UI,sans-serif;
  --rc26-body:'Public Sans',system-ui,-apple-system,Segoe UI,sans-serif;

  position:relative;
  background:var(--rc26-card);
  color:var(--rc26-ink);
  border:1px solid var(--rc-contour,#35352F);
  border-radius:12px;
  margin-bottom:20px;
  overflow:hidden;
  font-family:var(--rc26-body);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* Largeur pilotee par le CONTENEUR (col22 ~300px), pas par la fenetre :
     un media query de fenetre ne se declencherait jamais correctement ici. */
  container-type:inline-size;
}

.rc26 *{box-sizing:border-box}

/* Seul !important tolere dans cette feuille : l'attribut [hidden] doit TOUJOURS
   masquer, meme sur un element dont la classe impose un display (ex. .rc26__go{display:flex}
   l'emporterait sinon sur la regle UA [hidden]{display:none}). Permet a element.hidden=true
   de rester le mecanisme declaratif attendu cote JS, sans style inline. */
[hidden]{display:none !important}

/* ---------------------------------------------------------------- bandeau */
.rc26__band{
  background:var(--rc-fond,#2B2B29);
  color:var(--rc-sur-fond,#EFE9DF);
  border-bottom:2px solid var(--rc-contour,#35352F);
  padding: 15px 18px 5px 18px;
  /*
  padding:13px 18px;
  */
}
.rc26__band h2,
.rc26__band h3{
  font-family:'Sansita',Georgia,Arial,sans-serif;
  font-size:20px;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--rc-sur-fond,#EFE9DF);
  margin:0;
}

/* ------------------------------------------------------------------- corps */
.rc26__body{padding:18px}
.rc26__intro{
  font-size:12.5px;
  color:var(--rc26-ink-2);
  margin-bottom:16px;
}

/* --------------------------------------------- choix de l'objet (3 cartes) */
/* .rc26__seg est un <fieldset> : on neutralise sa bordure/padding/margin par
   defaut (sinon un cadre "groove" blanc entoure le groupe d'objets) et son
   min-width:min-content implicite qui casse la grille. */
.rc26__seg{
  border:0;
  padding:0;
  min-width:0;
  margin:0 0 18px;          /* seul l'espacement bas est conserve */
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
}
/* Legende du groupe : masquee a l'oeil, lue par les lecteurs d'ecran
   (sr-only, JAMAIS display:none qui la retirerait de l'accessibilite). */
.rc26__sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
/* Objet = <input type="radio"> reels + <label class="rc26__opt"><span>…</span></label>.
   Style pur CSS (:checked + span), fonctionnel sans JavaScript.
   Migre depuis le <style> inline du partial (lot 3). */
.rc26__seg .rc26__opt{position:relative;display:block;margin:0}
.rc26__seg .rc26__opt input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.rc26__seg .rc26__opt > span{
  min-height:62px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:var(--rc26-field);
  border:1px solid var(--rc26-line);
  border-radius:9px;
  padding:11px 4px;
  color:var(--rc26-ink-2);
  font-family:var(--rc26-body);
  font-size:11.5px;
  line-height:1.25;
  text-align:center;
  cursor:pointer;
  transition:border-color .16s,color .16s,background .16s;
}
.rc26__seg .rc26__opt svg{
  width:19px;height:19px;
  stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  opacity:.85;
}
.rc26__seg .rc26__opt:hover > span{border-color:var(--rc26-ink-3);color:var(--rc26-ink)}
/* option selectionnee : contour marque + fond champ actif */
.rc26__seg .rc26__opt input:checked + span{
  background:var(--rc26-field-on);
  border-color:var(--rc-contour,#35352F);
  color:var(--rc26-ink);
}
.rc26__seg .rc26__opt input:checked + span svg{opacity:1}
/* visibilite clavier */
.rc26__seg .rc26__opt input:focus-visible + span{
  border-color:var(--rc-contour,#35352F);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--rc-contour,#35352F) 26%,transparent);
}

/* -------------------------------------------------------------- les champs */
.rc26__f{margin-bottom:12px;position:relative}

/* ----- LABELS FLOTTANTS (CSS pur, sans JS) -----
   Le <label for> reel est conserve (accessibilite / aria-describedby intacts) ; il joue le
   role de placeholder au repos, et remonte + reduit au focus OU quand le champ est rempli.
   Les inputs/textarea portent placeholder=" " pour que :placeholder-shown fonctionne. */
.rc26__f > label{
  position:absolute;
  left:8px; top:15px;
  margin:0; padding:0 4px;
  font-size:14px; line-height:1;
  color:var(--rc26-ink-3);
  background:transparent;
  pointer-events:none;
  white-space:nowrap; max-width:calc(100% - 16px); overflow:hidden; text-overflow:ellipsis;
  transition:top .15s ease, font-size .15s ease, color .15s ease;
}
/* Etat FLOTTANT :
   - input / textarea : au focus OU quand rempli (:not(:placeholder-shown))
   - select : EN PERMANENCE (un select n'a pas de placeholder et affiche toujours une valeur) */
.rc26__f:has(input:focus) > label,
.rc26__f:has(input:not(:placeholder-shown)) > label,
.rc26__f:has(textarea:focus) > label,
.rc26__f:has(textarea:not(:placeholder-shown)) > label,
.rc26__f:has(select) > label{
  top:-7px;
  font-size:11px;                 /* jamais sous 11px */
  color:var(--rc26-ink-2);        /* #8F8B84 sur --rc26-card #1F1F1E : contraste ~5.2 (>= 4.5) */
  background:var(--rc26-card);     /* masque le trait de bordure sous le label flottant */
}
.rc26__f label .rc26__opt-tag{color:var(--rc26-ink-3)}

.rc26__f input,
.rc26__f select,
.rc26__f textarea{
  width:100%;
  height:46px;                 /* >= 44px cible tactile */
  background:var(--rc26-field);
  border:1px solid var(--rc26-line);
  border-radius:9px;
  color:var(--rc26-ink);
  font-family:var(--rc26-body);
  font-size:14px;
  padding:0 12px;
  transition:border-color .15s,box-shadow .15s;
  -webkit-appearance:none;appearance:none;
}
.rc26__f textarea{height:74px;padding:11px 12px;resize:none;line-height:1.5}
.rc26__f select{
  padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8b84' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  background-size:16px;
}
.rc26__f input::placeholder,
.rc26__f textarea::placeholder{color:var(--rc26-ink-3)}

/* focus : contour marque + halo derive du contour marque */
.rc26__f input:focus,
.rc26__f select:focus,
.rc26__f textarea:focus{
  outline:none;
  border-color:var(--rc-contour,#35352F);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--rc-contour,#35352F) 26%,transparent);
}

/* Champs courts : 1 COLONNE PAR DEFAUT (repli sur ecran non compatible container
   query = affichage sur : jamais de debordement). Le passage a 2 colonnes est pilote
   par la largeur du CONTENEUR (voir @container plus bas), reserve a la landing.
   minmax(0,1fr) empeche un <select> a option longue d'elargir la piste. */
.rc26__duo{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
/* Duo reduit a une seule colonne (ville pleine largeur) quand le modele est impose (hidden). */
.rc26__duo--solo{grid-template-columns:minmax(0,1fr)}
.rc26__f{min-width:0}

/* --------------------------------------------------- erreur par champ */
.rc26__f .rc26__err{
  display:none;
  font-size:11.5px;
  color:var(--rc26-ko);
  margin-top:5px;
  align-items:center;
  gap:5px;
}
.rc26__f.is-bad input,
.rc26__f.is-bad select,
.rc26__f.is-bad textarea{border-color:var(--rc26-ko)}
.rc26__f.is-bad .rc26__err{display:flex}
.rc26__err svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* ------------------------------------------------ bouton principal + envoi */
.rc26__go{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--rc-fond,#2B2B29);
  border:1px solid var(--rc-contour,#35352F);
  border-radius:9px;
  color:var(--rc-sur-fond,#EFE9DF);
  font-family:'Sansita',Georgia,Arial,sans-serif;
  font-size:16px;
  font-weight:500;
  letter-spacing:.02em;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:filter .16s,transform .16s;
}
.rc26__go:hover{filter:brightness(1.12)}
.rc26__go:active{transform:scale(.99)}
.rc26__go svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* etat d'envoi : spinner, libelle masque */
.rc26__go.is-busy{pointer-events:none;color:transparent}
.rc26__go.is-busy::after{
  content:'';
  position:absolute;
  width:19px;height:19px;
  border:2px solid color-mix(in srgb,var(--rc-sur-fond,#EFE9DF) 30%,transparent);
  border-top-color:var(--rc-sur-fond,#EFE9DF);
  border-radius:50%;
  animation:rc26-spin .7s linear infinite;
}
@keyframes rc26-spin{to{transform:rotate(360deg)}}

/* Mention d'origine (incitation coordonnees valides) = la plus lisible. */
.rc26__legal{
  font-size:11.5px;
  color:var(--rc26-ink-2);          /* #8F8B84 sur carte #1F1F1E : contraste ~5.2 (>= 4.5) */
  text-align:center;
  margin-top:11px;
  line-height:1.5;
}
/* Mention Turnstile : secondaire, plus petite, APRES la mention d'origine. */
.rc26__legal--min{
  font-size:10px;
  color:var(--rc26-ink-3);
  margin-top:4px;
}
.rc26__legal a{color:var(--rc26-ink-2)}

/* etape 2 revelee (coordonnees) */
.rc26__step2{display:none}
.rc26__step2.is-show{display:block;animation:rc26-drop .32s cubic-bezier(.3,.9,.4,1)}
@keyframes rc26-drop{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}

/* ------------------------------------------------- ecran de confirmation */
.rc26__done{display:none;padding:30px 22px;text-align:center}
.rc26__done.is-show{display:block;animation:rc26-rise .4s cubic-bezier(.3,.9,.4,1)}
@keyframes rc26-rise{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:none}}

.rc26__tick{
  width:52px;height:52px;border-radius:50%;
  border:2px solid var(--rc26-ok);
  margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
}
.rc26__tick svg{
  width:25px;height:25px;
  stroke:var(--rc26-ok);fill:none;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:30;stroke-dashoffset:30;
  animation:rc26-draw .45s .18s forwards;
}
@keyframes rc26-draw{to{stroke-dashoffset:0}}
.rc26__done h3{font-family:var(--rc26-ttl);font-size:22px;font-weight:500;margin-bottom:7px}
.rc26__done .rc26__sub{font-size:13px;color:var(--rc26-ink-2);margin-bottom:20px;line-height:1.6}

.rc26__recap{background:var(--rc26-field);border-radius:10px;padding:13px 15px;text-align:left;margin-bottom:16px}
.rc26__recap .rc26__r{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:5px 0}
.rc26__recap .rc26__r + .rc26__r{border-top:1px solid var(--rc26-line-soft)}
.rc26__recap .rc26__k{color:var(--rc26-ink-3)}
.rc26__recap .rc26__v{color:var(--rc26-ink);font-weight:500;text-align:right}

/* liens de rebond */
.rc26__next{display:flex;flex-direction:column;gap:8px}
.rc26__next a{
  display:flex;align-items:center;justify-content:space-between;
  min-height:44px;
  background:var(--rc26-field);
  border:1px solid var(--rc26-line);
  border-radius:9px;
  padding:12px 14px;
  color:var(--rc26-ink);
  text-decoration:none;
  font-size:13px;
  transition:border-color .15s,background .15s;
}
.rc26__next a:hover{border-color:var(--rc-contour,#35352F);background:var(--rc26-field-on)}
.rc26__next a svg{width:15px;height:15px;stroke:var(--rc26-ink-3);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.rc26__ref{font-size:10.5px;color:var(--rc26-ink-3);margin-top:15px;font-family:ui-monospace,monospace;letter-spacing:.04em}

/* si le garde-fou de luminance a eclairci le contour cote serveur,
   --rc-contour-auto vaut 1 : accroche facultative (aucun style impose ici). */

/* =============================== RESPONSIF ===============================
   Pilote par la LARGEUR DU CONTENEUR (.rc26), pas par la fenetre.
   Defaut = 1 colonne (repli sur). 2 colonnes seulement quand le conteneur
   depasse 420px (franchement au-dessus du max mobile 340px) : landing uniquement.
   GAMME (col22 ~300px) reste donc toujours sur 1 colonne. */
@container (min-width:420px){
  .rc26__duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rc26__duo--solo{grid-template-columns:minmax(0,1fr)}   /* reste 1 colonne meme en large */
}

/* ---- Cloudflare Turnstile (module leads 2026) ----
   Widget a largeur flexible (data-size="flexible") : il occupe 100% de la colonne,
   avec un minimum de 300px et une hauteur d'environ 65px. Aucune mise a l'echelle
   n'est necessaire (contrairement a l'ancien reCAPTCHA 302x78) : Turnstile s'adapte
   seul a la largeur du conteneur .rc26, en GAMME (col22 ~300px) comme en landing.
   min-height reserve la place dans le flux avant le rendu du widget pour eviter un
   saut de mise en page. La fenetre de defi eventuelle est superposee (position:fixed)
   et reste pleinement cliquable. */
.rc26__turnstile{min-height:65px;margin:6px 0 12px}

/* Conteneur etroit (GAMME, col22 ~300px) : le plancher de 300px du widget
   "flexible" depasse la largeur utile (262px). Mise a l'echelle du widget,
   hauteur reservee ajustee pour ne pas laisser de vide dans le flux.
   La landing (conteneur > 335px) n'est pas concernee. */
@container (max-width:335px){
  .rc26__turnstile{
    width:300px;
    transform:scale(.86);
    transform-origin:left top;
    min-height:0;
    height:56px;
  }
}

/* Landing sur mobile : le bloc colle aux bords de l'ecran. Marge laterale
   reservee au parcours LP (conteneur pleine largeur), jamais a la colonne
   GAMME (~300px) dont la largeur utile est deja contrainte par le plancher
   de 300px du widget Turnstile. Media query de FENETRE (pas @container) :
   la marge doit etre calculee par rapport a l'ecran, pas au conteneur. */
@media (max-width:767px){
  .rc26{margin-left:20px;margin-right:20px}
}