/* Page « Entreprises de travaux et d'études » (partenaire) : la page unique de conversion des entreprises,
   rejoindre le réseau ou se connecter. Classes préfixées partenaire-. Couleurs : uniquement les variables --dt-* de dt.css ;
   la scène de l'en-tête est dessinée avec les classes d'illustration (f-pap, f-cadre, f-vitre, f-chaud, f-trait). */

/* ========== En-tête : trois casques autour d'un même local ========== */
/* L'espace sous l'en-tête est porté par son conteneur : la bande teintée qui suit commence nettement plus bas */
.partenaire-haut { padding-bottom: clamp(56px, 7vw, 96px); }
.partenaire-tete { padding-bottom: 0; }
.partenaire-art { margin: 0; max-width: 460px; }
.partenaire-art svg { overflow: visible; }
.partenaire-anneau { stroke: var(--dt-ink-3); }

/* Couleurs de la page, celles de la coque d'application (une par étape) : bleu-vert pâle, bleu-vert, framboise, pétrole.
   Le pâle est un peu plus clair que dans l'espace agence, pour que l'encre y reste lisible la nuit. Leur texte : --pc-on. */
:root {
  --pc-1: color-mix(in srgb, var(--dt-il-cadre) 35%, var(--dt-paper)); --pc-2: var(--dt-il-cadre); --pc-3: var(--dt-you); --pc-4: var(--dt-ink);
}

/* ========== Pourquoi rejoindre : une bande teintée, trois cartes, chacune sa couleur et son objet en papier ========== */
.partenaire-pourquoi { background: color-mix(in srgb, var(--dt-il-cadre) 12%, var(--dt-surface)); }
.partenaire-raisons { margin-top: 44px; }
.partenaire-raison { --c: var(--dt-band); overflow: hidden; padding-top: 0; }
.partenaire-raison.r-metier { --c: var(--pc-3); }
.partenaire-raison.r-abonnement { --c: var(--pc-2); }
.partenaire-plaque { display: grid; place-items: center start; height: 128px; margin: 0 calc(var(--esp-5) * -1) var(--esp-2); padding: 0 var(--esp-5); background: var(--c); }
.partenaire-raison .objet { width: 128px; height: 96px; transform: rotate(-3deg); }
.partenaire-raison.r-metier .objet { transform: rotate(4deg); }
.partenaire-raison p { color: var(--dt-ink-2); }

/* ========== Sélection : les critères, et la charte avec ses tampons ========== */
.partenaire-criteres { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--esp-6) 56px; margin-top: 44px; align-items: start; }
.partenaire-liste { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--dt-ink); }
.partenaire-liste li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 0; border-bottom: 2px solid var(--dt-surface-alt-2); font-weight: 600; font-size: 17px; line-height: 1.4; }
.partenaire-liste svg { width: 24px; height: 24px; color: var(--dt-ink); }
.partenaire-charte { padding: clamp(22px, 3vw, 34px); border-radius: var(--r-panel); background: var(--dt-encart); font-size: 17px; line-height: 1.55; color: var(--dt-ink-2); }
.partenaire-charte p + p { margin-top: var(--esp-3); }
.partenaire-charte strong { display: block; margin-bottom: 4px; font: 800 21px/1.2 var(--display); letter-spacing: -0.012em; color: var(--dt-ink); }
.partenaire-tampons { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: center; margin: 0 0 var(--esp-5); padding: 4px 0 6px; }
.partenaire-tampons li { padding: 9px 16px; border: 3px solid var(--dt-ink); border-radius: 12px 14px 11px 15px; background: var(--dt-paper); font: 800 19px/1 var(--display); letter-spacing: 0.03em; text-transform: uppercase; color: var(--dt-ink); }
.partenaire-tampons li:nth-child(1) { transform: rotate(-4deg); }
.partenaire-tampons li:nth-child(2) { transform: rotate(2deg); border-color: var(--dt-accent); color: var(--dt-accent); }
.partenaire-tampons li:nth-child(3) { transform: rotate(-2deg); }

/* ========== La demande, en deux pages : étape 1 (partenaire), étape 2 (partenaire-fiche) ========== */
/* Indicateur d'étape : deux traits, l'étape faite en bleu-vert pâle, l'étape en cours en bleu-vert et plus épaisse */
.partenaire-etape { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); font-size: 16px; color: var(--dt-ink-2); }
.partenaire-etape b { font-weight: 600; color: var(--dt-ink); }
.partenaire-etape-frise { display: grid; grid-template-columns: 44px 44px; align-items: center; gap: 4px; }
.partenaire-etape-frise i { height: 6px; border-radius: 3px; background: var(--dt-surface-alt-2); }
.partenaire-etape[data-etape="1"] i:nth-child(1), .partenaire-etape[data-etape="2"] i:nth-child(2) { height: 12px; border-radius: 4px; background: var(--pc-2); }
.partenaire-etape[data-etape="2"] i:nth-child(1) { background: var(--pc-1); }
#partner-form-shell > .partenaire-etape { margin-bottom: var(--esp-5); padding-bottom: var(--esp-4); border-bottom: 2px dashed var(--dt-surface-alt-2); }
.partenaire-fiche-tete .partenaire-etape { margin-bottom: var(--esp-4); }
/* Sur téléphone, dt.css place le chapô après les autres éléments (order: 1) : l'entreprise le suit */
.partenaire-fiche-tete .partenaire-entreprise { order: 1; }
/* Étape 2 : l'entreprise retrouvée grâce au SIRET (lue dans SIRENE par l'API), ou à préciser */
.partenaire-entreprise { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3) var(--esp-4); justify-self: start; margin-top: var(--esp-5); padding: 14px 18px 14px 14px; border-radius: 16px; background: var(--dt-paper); box-shadow: 0 0 0 2px var(--dt-ink); }
.partenaire-entreprise-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px 14px 11px 13px; background: var(--pc-2); color: var(--dt-paper); }
.partenaire-entreprise-ico svg { width: 26px; height: 26px; }
.partenaire-entreprise p { margin: 0; font-size: 15px; color: var(--dt-ink-2); }
.partenaire-entreprise b { display: block; font: 800 20px/1.2 var(--display); letter-spacing: -0.01em; color: var(--dt-ink); }

/* ========== La demande : le formulaire ========== */
.partenaire-candidature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px; margin-top: 44px; align-items: start; }
.partenaire-consigne { font-size: 14px; color: var(--dt-ink-2); }
.partenaire-form > fieldset > legend { font-size: 24px; letter-spacing: -0.02em; margin-bottom: var(--esp-4); }
.partenaire-form > fieldset:has(+ fieldset) { padding-bottom: var(--esp-6); border-bottom: 2px dashed var(--dt-surface-alt-2); }
.partenaire-champs { display: grid; gap: var(--esp-5); }
.partenaire-pot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; visibility: hidden; }
.partenaire-pot input { font-size: 16px; }
.partenaire-form .choix-grille { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.partenaire-form .choix .ico { width: 40px; height: 40px; }
.partenaire-form .choix:has(input:checked) .ico { background: var(--dt-surface); box-shadow: none; }
.partenaire-cases { display: grid; gap: var(--esp-4); }
.partenaire-form .case > span { font-size: 15px; color: var(--dt-ink-2); }
.partenaire-form .case b { display: block; font-size: 16px; font-weight: 600; color: var(--dt-ink); }
.partenaire-accord { padding-top: var(--esp-5); border-top: 2px dashed var(--dt-surface-alt-2); }
.partenaire-envoi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-4) var(--esp-5); }
.partenaire-envoi .btn[disabled] { opacity: 0.7; cursor: progress; transform: none; }
/* Erreurs : le bloc en erreur porte la classe « erreur » (dt.css) ; groupes de choix et cases en plus */
.partenaire-form .champ.erreur .choix { box-shadow: inset 0 0 0 2px var(--dt-erreur); }
.partenaire-form .champ.erreur .choix:has(input:checked) { box-shadow: 4px 4px 0 var(--dt-action-shadow); }
.partenaire-form .erreur .case input { box-shadow: inset 0 0 0 2px var(--dt-erreur); }
.partenaire-resume { margin-bottom: var(--esp-5); padding: 18px 20px; border-radius: 16px; box-shadow: inset 0 0 0 3px var(--dt-erreur); }
.partenaire-resume-titre { display: flex; gap: 10px; align-items: flex-start; font: 800 18px/1.3 var(--display); letter-spacing: -0.01em; color: var(--dt-erreur); }
.partenaire-resume-titre svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.partenaire-resume ul { margin: 10px 0 0; padding-left: 32px; }
.partenaire-resume li + li { margin-top: 4px; }
.partenaire-resume a { display: inline-block; padding: 6px 0; color: var(--dt-ink); text-decoration: underline; text-decoration-color: var(--dt-erreur); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.partenaire-merci { padding: var(--esp-5) 0; }
.partenaire-merci:focus { outline: none; }
.partenaire-merci-ico svg { width: 64px; height: 64px; color: var(--dt-accent); }
.partenaire-merci h3 { margin-top: var(--esp-4); font-size: clamp(32px, 3.4vw, 46px); line-height: 1; letter-spacing: -0.035em; }
.partenaire-merci p { margin-top: var(--esp-3); font-size: 18px; color: var(--dt-ink-2); }
.partenaire-merci .btn-2 { margin-top: var(--esp-6); }

/* L'après-envoi, à côté du formulaire : une frise de quatre étapes, une couleur par étape, reliées par un trait */
.partenaire-apres { position: sticky; top: var(--esp-9); overflow: hidden; padding: 0 26px 26px; border-radius: var(--r-panel); background: color-mix(in srgb, var(--dt-il-cadre) 10%, var(--dt-paper)); box-shadow: 0 0 0 2px var(--dt-band); }
/* La tête de l'encart : une plaque pétrole, comme celles des cartes plus haut */
.partenaire-apres-tete { margin: 0 -26px; padding: 24px 26px 22px; background: var(--dt-band); color: var(--dt-on-band); }
.partenaire-apres-sur { font: 800 13px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dt-on-band-2); }
.partenaire-apres h3 { margin-top: 10px; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; color: var(--dt-on-band); }
.partenaire-apres ol { list-style: none; margin: 24px 0 0; padding: 0; }
.partenaire-apres li { --c: var(--pc-1); --on: var(--dt-ink); position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding-bottom: 22px; font-size: 15px; line-height: 1.45; color: var(--dt-ink-2); }
.partenaire-apres li:last-child { padding-bottom: 0; }
.partenaire-apres li:nth-child(2) { --c: var(--pc-2); --on: var(--dt-paper); }
.partenaire-apres li:nth-child(3) { --c: var(--pc-3); --on: var(--dt-paper); }
.partenaire-apres li:nth-child(4) { --c: var(--pc-4); --on: var(--dt-paper); }
/* Le trait qui relie une pastille à la suivante, dans la couleur de l'étape */
.partenaire-apres li:not(:last-child)::before { content: ""; position: absolute; left: 18px; top: 40px; bottom: 0; width: 4px; border-radius: 2px; background: var(--c); }
.partenaire-apres li b { display: block; margin: 8px 0 2px; font: 800 17px/1.25 var(--display); letter-spacing: -0.01em; color: var(--dt-ink); }
.partenaire-apres li.fait .partenaire-pastille svg { width: 22px; height: 22px; }
/* État d'une étape (page 2) : un mot, jamais la couleur seule */
.partenaire-statut { display: inline-block; margin-left: 6px; padding: 3px 9px; border-radius: 999px; background: var(--pc-1); color: var(--dt-ink); font: 600 13px/1.2 var(--text); letter-spacing: 0; vertical-align: 2px; }
.partenaire-apres li:nth-child(2) .partenaire-statut { background: var(--pc-2); color: var(--dt-paper); }
.partenaire-apres-note { margin-top: var(--esp-5); padding-top: var(--esp-4); border-top: 2px dashed color-mix(in srgb, var(--dt-il-cadre) 32%, var(--dt-paper)); font-size: 15px; line-height: 1.45; color: var(--dt-ink-2); }
.partenaire-pastille { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px 13px 10px 12px; background: var(--c); color: var(--on); font: 800 18px/1 var(--display); }

/* Renvoi du lien depuis l'étape 1 (sous « Regardez votre boîte mail ») et réglages communs aux deux étapes. Les états de
   l'étape 2 sont dessinés par Claude Design (design/refonte-2026-10/integration/design/etats-partenaire/), plus bas. */
.partenaire-renvoi { margin-top: var(--esp-6); padding-top: var(--esp-5); border-top: 2px dashed var(--dt-surface-alt-2); }
.partenaire-merci .partenaire-renvoi p { margin-top: 0; font-size: 16px; }
.partenaire-merci .partenaire-renvoi .btn-2 { margin-top: var(--esp-4); }
.partenaire-merci .partenaire-renvoi-etat { margin-top: var(--esp-3); font-size: 16px; font-weight: 600; color: var(--dt-ink); }
.partenaire-merci .partenaire-renvoi-etat.message-erreur { color: var(--dt-erreur); }
.partenaire-resume-detail { margin-top: 8px; font-size: 14px; color: var(--dt-ink-2); }
button.btn[aria-busy="true"], button.btn-2[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* ========== Étape 2 : les états de la fiche (lien lu, ouverture, expiré, renvoyé, déjà utilisé, invalide, erreur ; entreprise à vérifier) ========== */
/* Un en-tête par état (header[data-etat]). La personne arrive d'un email : le titre dit ce qui s'est passé, une seule action
   principale suit. Sur téléphone, dt.css passe le chapô en fin d'en-tête (order: 1) : le reste le suit, dans l'ordre du texte. */
.partenaire-fiche-tete .actions-tete, .partenaire-etat-aide, .partenaire-etat-erreur, .partenaire-entreprise-autre { order: 1; }
/* partenaire.js amène le titre à l'écran quand l'état change : le titre est toujours près du haut de la page, le défilement
   remonte donc tout en haut, sans le glisser sous l'en-tête collant ni couper l'étape et la plaque */
.partenaire-fiche-tete h1 { scroll-margin-top: 400px; }
.partenaire-etat-aide { margin-top: var(--esp-5); font-size: 16px; line-height: 1.6; color: var(--dt-ink-2); }
/* Le lien d'adresse, dans une phrase : sa zone de clic atteint 44 px (marge intérieure d'un élément en ligne : les lignes ne s'écartent pas) */
.partenaire-etat-aide .lien { padding: 12px 0; }

/* Une plaque de couleur et son objet en papier, une par famille : l'horloge (lien expiré), la lettre (nouveau lien parti),
   la fiche cochée (déjà transmise), la loupe (lien qui ne mène pas à la fiche). Rien d'alarmant : un lien expiré est banal. */
.partenaire-fiche-tete:has(> .partenaire-etat-art) { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; }
.partenaire-fiche-tete:has(> .partenaire-etat-art) > div { grid-template-columns: minmax(0, 1fr); }
.partenaire-etat-art { --c: var(--pc-1); display: grid; place-items: center; justify-self: end; width: 100%; max-width: 360px; aspect-ratio: 5 / 4; border-radius: var(--r-panel); background: var(--c); }
.partenaire-etat-art .objet { width: 60%; height: auto; transform: rotate(-4deg); }
.partenaire-fiche-tete[data-etat="renvoye"] .partenaire-etat-art, .partenaire-fiche-tete[data-etat="utilise"] .partenaire-etat-art { --c: var(--pc-2); }
/* La lettre est une icône : même papier et même ombre sans flou que les objets */
.partenaire-etat-art > svg:not(.objet) { width: 46%; height: auto; color: var(--dt-il-pap); transform: rotate(5deg); filter: drop-shadow(0 4px 0 color-mix(in srgb, var(--dt-il-ombre, var(--dt-shadow)) 30%, transparent)); }

/* Les attentes (lecture du lien, ouverture du compte et de l'espace) sont l'écran à étapes de attentes.css : une carte posée
   sous le fil d'Ariane, à la hauteur des en-têtes des autres états (.page-tete). */
.partenaire-attente { margin-top: clamp(24px, 4vw, 56px); margin-bottom: clamp(32px, 5vw, 72px); }

/* Erreurs (lecture du lien impossible, trop de demandes, renvoi impossible) : une panne passagère, pas une faute de la
   personne. Un encart calme, l'icône sur papier, sans rouge ; role="alert" l'annonce. */
.partenaire-etat-erreur { gap: var(--esp-3); align-items: center; justify-self: start; margin-top: var(--esp-5); padding: 10px 20px 10px 10px; border-radius: 16px; background: var(--dt-encart); font-size: 17px; line-height: 1.4; color: var(--dt-ink); }
.partenaire-etat-erreur svg { box-sizing: content-box; width: 22px; height: 22px; margin: 0; padding: 9px; border-radius: 10px 12px 9px 11px; background: var(--dt-paper); color: var(--dt-ink); }
.partenaire-fiche-tete[data-etat="erreur"] .partenaire-etat-erreur { font-size: 19px; }
#fiche-renvoyer-erreur { margin-top: var(--esp-4); }

/* L'entreprise à vérifier (introuvable, fermée, ou SIRENE muette) : l'encart passe en pointillés, son icône sur fond pâle, et le
   lien « Refaire l'étape 1 » le suit de près. Sans raison sociale lue : « à préciser », en encre douce. */
.partenaire-fiche-tete > div:has(> .partenaire-entreprise-autre:not([hidden])) > .partenaire-entreprise { padding: 12px 16px 12px 12px; border: 2px dashed var(--dt-ink-3); box-shadow: none; }
.partenaire-fiche-tete > div:has(> .partenaire-entreprise-autre:not([hidden])) .partenaire-entreprise-ico { background: var(--pc-1); color: var(--dt-ink); }
.partenaire-fiche-tete > div:has(> .chapo[data-entreprise="introuvable"]:not([hidden]), > .chapo[data-entreprise="non_verifiee"]:not([hidden])) #fiche-entreprise-nom { font-weight: 600; color: var(--dt-ink-2); }
.partenaire-entreprise-autre { margin-top: var(--esp-3); font-size: 16px; color: var(--dt-ink-2); }
.partenaire-entreprise-autre .lien { display: inline-block; padding: 10px 0; font-weight: 600; }

/* Téléphone : l'en-tête sur une colonne, la plaque réduite en vignette au-dessus de l'étape */
@media (max-width: 760px) {
  .partenaire-fiche-tete:has(> .partenaire-etat-art) { grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); }
  .partenaire-etat-art { order: -1; justify-self: start; max-width: 112px; border-radius: 14px; }
  .partenaire-etat-art > svg:not(.objet) { filter: drop-shadow(0 2px 0 color-mix(in srgb, var(--dt-il-ombre, var(--dt-shadow)) 30%, transparent)); }
  .partenaire-etat-erreur, .partenaire-fiche-tete[data-etat="erreur"] .partenaire-etat-erreur { font-size: 16px; }
}
@media (forced-colors: active) {
  .partenaire-etat-art, .partenaire-etat-erreur { border: 2px solid CanvasText; }
}

/* ========== Tablette ========== */
@media (max-width: 1023px) {
  .partenaire-criteres { grid-template-columns: minmax(0, 1fr); }
  .partenaire-candidature { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .partenaire-apres { position: static; max-width: 560px; }
}

/* ========== Téléphone ========== */
@media (max-width: 760px) {
  .partenaire-tete .art { max-width: 320px; }
  .partenaire-raisons, .partenaire-criteres, .partenaire-candidature { margin-top: 28px; }
  .partenaire-tampons li { font-size: 16px; }
  .partenaire-plaque { height: 112px; }
  .partenaire-raison .objet { width: 112px; height: 84px; }
  .partenaire-form > fieldset > legend { font-size: 21px; }
  .partenaire-form .choix { min-height: 56px; padding: 8px 12px; }
  .partenaire-form .choix .ico { width: 36px; height: 36px; }
  .partenaire-envoi .btn { width: 100%; }
  .partenaire-entreprise { display: flex; }
}
@media (forced-colors: active) {
  .partenaire-charte, .partenaire-apres, .partenaire-resume { border: 2px solid CanvasText; }
  .partenaire-pastille, .partenaire-apres li::before, .partenaire-plaque { forced-color-adjust: none; }
}