/* ============================================================
   CCB — Assistant de demande d'offre (styles additifs)
   Étend les variables CSS existantes (--navy, --green, --paper...).
   N'écrase aucune classe existante : préfixe "oa-" dédié.
   ============================================================ */

.oa-modal{max-width:600px;}

/* ---- Écran de sélection de service ---- */
.oa-intro{margin-bottom:18px;}
.oa-intro-trust{font-size:.82rem;color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:12px 14px;margin-top:14px;}

.oa-service-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px;}
.oa-service-card{position:relative;}
.oa-service-card input{position:absolute;opacity:0;width:100%;height:100%;top:0;left:0;margin:0;cursor:pointer;}
.oa-service-card label{
  display:flex;flex-direction:column;gap:8px;padding:18px 16px;border:1.5px solid var(--line);
  border-radius:8px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;
  height:100%;background:#fff;
}
.oa-service-card .oa-icon{width:30px;height:30px;color:var(--navy);}
.oa-service-card .oa-icon svg{width:100%;height:100%;}
.oa-service-card strong{font-family:var(--font-heading);font-size:.94rem;color:var(--navy-deep);font-weight:800;}
.oa-service-card span{font-size:.78rem;color:var(--ink-soft);line-height:1.4;}
.oa-service-card input:checked + label{border-color:var(--green);background:var(--mint);box-shadow:0 0 0 1px var(--green);}
.oa-service-card input:focus-visible + label{outline:2px solid var(--navy);outline-offset:2px;}
@media(max-width:420px){ .oa-service-grid{grid-template-columns:1fr;} }

/* ---- Progression nommée ---- */
.oa-progress{margin-bottom:18px;}
.oa-progress-label{font-size:.74rem;font-weight:700;color:var(--green-deep);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;}
.oa-progress-track{display:flex;gap:5px;}
.oa-progress-seg{flex:1;height:4px;border-radius:3px;background:var(--line);transition:background .2s;}
.oa-progress-seg.done{background:var(--green);}
.oa-progress-seg.current{background:var(--navy);}

/* ---- Étapes ---- */
.oa-step{display:none;}
.oa-step.active{display:block;animation:oa-fade-in .22s ease;}
@keyframes oa-fade-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){ .oa-step.active{animation:none;} }

.oa-step-title{font-family:var(--font-heading);font-size:1.15rem;font-weight:800;color:var(--navy);margin-bottom:4px;}
.oa-step-sub{font-size:.82rem;color:var(--ink-soft);margin-bottom:16px;line-height:1.5;}

.oa-field{margin-bottom:16px;}
.oa-field label.oa-label{display:block;font-size:.78rem;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px;}
.oa-field input[type=text], .oa-field input[type=email], .oa-field input[type=tel],
.oa-field input[type=number], .oa-field input[type=date], .oa-field input[type=time],
.oa-field select, .oa-field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:6px;font-family:inherit;font-size:1rem;background:#fff;
}
.oa-field input:focus, .oa-field select:focus, .oa-field textarea:focus{outline:none;border-color:var(--green);}
.oa-field-row{display:flex;gap:10px;}
.oa-field-row .oa-field{flex:1;}
.oa-hint{font-size:.76rem;color:var(--ink-soft);margin-top:6px;line-height:1.4;}

/* ---- Choix en cartes (réutilise le principe .wizard-card, préfixe propre) ---- */
.oa-choice-grid{display:flex;flex-direction:column;gap:9px;}
.oa-choice-grid.oa-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.oa-choice{position:relative;}
.oa-choice input{position:absolute;opacity:0;width:100%;height:100%;top:0;left:0;margin:0;cursor:pointer;}
.oa-choice label{
  display:flex;align-items:center;gap:10px;padding:13px 15px;border:1.5px solid var(--line);border-radius:6px;
  font-weight:600;font-size:.9rem;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s;background:#fff;
}
.oa-choice input:checked + label{border-color:var(--green);background:var(--mint);color:var(--navy);font-weight:700;}
.oa-choice input:focus-visible + label{outline:2px solid var(--navy);outline-offset:2px;}
.oa-choice .oa-check{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line);flex-shrink:0;position:relative;transition:border-color .15s,background .15s;}
.oa-choice input:checked + label .oa-check{border-color:var(--green);background:var(--green);}
.oa-choice input:checked + label .oa-check::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.oa-choice input[type=checkbox] + label .oa-check{border-radius:4px;}

/* Segmented control (ex: nombre de pièces) */
.oa-segmented{display:flex;flex-wrap:wrap;gap:8px;}
.oa-segmented .oa-choice label{padding:10px 14px;border-radius:20px;font-size:.84rem;}

.oa-checkline{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--ink-soft);margin-top:2px;cursor:pointer;}

/* Bloc conditionnel (annexes, protections...) */
.oa-conditional{margin-top:10px;padding:12px 14px;border-left:2px solid var(--green);background:var(--paper);border-radius:0 6px 6px 0;}

/* ---- Alerte incohérence (jamais une erreur agressive) ---- */
.oa-alert{display:flex;gap:10px;align-items:flex-start;background:#FFF8E8;border:1px solid #F0D999;color:#6B5100;border-radius:6px;padding:12px 14px;font-size:.84rem;line-height:1.5;margin-top:12px;}
.oa-alert svg{flex-shrink:0;width:18px;height:18px;margin-top:1px;}

.oa-warn{font-size:.8rem;color:#B3261E;margin-top:8px;display:none;}
.oa-warn.show{display:block;}

/* ---- Résumé vivant (mini, pendant le parcours) ---- */
.oa-mini-summary{border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:14px 16px;margin-bottom:18px;}
.oa-mini-summary-head{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;}
.oa-mini-summary-head strong{font-family:var(--font-heading);font-size:.8rem;color:var(--navy);text-transform:uppercase;letter-spacing:.4px;}
.oa-mini-summary-toggle{font-size:.76rem;color:var(--green-deep);font-weight:700;background:none;padding:0;}
.oa-mini-summary-body{display:none;margin-top:10px;font-size:.84rem;color:var(--ink-soft);line-height:1.7;}
.oa-mini-summary-body.open{display:block;}
.oa-mini-summary-body span{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:4px;padding:3px 9px;margin:0 6px 6px 0;color:var(--navy-deep);font-weight:600;font-size:.78rem;}

/* ---- Photos ---- */
.oa-photo-drop{border:1.5px dashed var(--line);border-radius:8px;padding:20px;text-align:center;cursor:pointer;background:#fff;transition:border-color .15s,background .15s;}
.oa-photo-drop:hover{border-color:var(--green);background:var(--mint);}
.oa-photo-drop svg{width:26px;height:26px;color:var(--navy);margin-bottom:8px;}
.oa-photo-drop .oa-photo-drop-text{font-size:.86rem;font-weight:700;color:var(--navy);}
.oa-photo-drop .oa-photo-drop-sub{font-size:.76rem;color:var(--ink-soft);margin-top:3px;}
.oa-photo-suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.oa-photo-suggestions span{font-size:.74rem;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:4px 10px;color:var(--ink-soft);}
.oa-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;margin-top:12px;}
.oa-photo-thumb{position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:#f0f0f0;}
.oa-photo-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.oa-photo-remove{
  position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;background:rgba(19,35,64,.78);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem;line-height:1;padding:0;
}
.oa-photo-error{font-size:.78rem;color:#B3261E;margin-top:8px;}

/* Piège anti-bot (honeypot) : jamais visible, jamais atteignable au clavier, ne doit générer aucun espace dans la mise en page */
.hp-field{position:absolute!important;left:-9999px!important;top:-9999px!important;height:0!important;width:0!important;overflow:hidden!important;margin:0!important;padding:0!important;border:0!important;}

/* ---- Résumé final ---- */
.oa-summary-final{display:flex;flex-direction:column;gap:14px;}
.oa-summary-section{border:1px solid var(--line);border-radius:8px;padding:14px 16px;background:#fff;}
.oa-summary-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.oa-summary-section-head strong{font-family:var(--font-heading);font-size:.82rem;color:var(--navy);text-transform:uppercase;letter-spacing:.4px;}
.oa-summary-edit{font-size:.78rem;font-weight:700;color:var(--green-deep);background:none;padding:0;text-decoration:underline;text-underline-offset:2px;}
.oa-summary-section ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;}
/* overflow-wrap : une valeur saisie longue et sans espace (e-mail, adresse) forçait
   un débordement horizontal de toute l'étape 8 (résumé) sur mobile — trouvé en test
   E2E réel (320-412px), pas visible en saisie manuelle rapide avec des valeurs
   courtes. */
.oa-summary-section li{font-size:.86rem;color:var(--ink);overflow-wrap:anywhere;}
.oa-summary-section li.oa-missing{color:var(--ink-soft);font-style:italic;}

.oa-consent{display:flex;align-items:flex-start;gap:10px;font-size:.83rem;color:var(--ink-soft);margin:16px 0;line-height:1.5;}
.oa-consent input{margin-top:3px;flex-shrink:0;}
.oa-consent span a{color:var(--navy);text-decoration:underline;text-underline-offset:2px;font-weight:600;}
.oa-consent span a:hover{color:var(--navy-deep);}

/* ---- Nav ---- */
.oa-nav{display:flex;gap:10px;margin-top:22px;}
.oa-nav .btn{flex:1;}
.oa-nav .btn[disabled]{opacity:.6;cursor:not-allowed;}

/* ---- État vide / confirmation ---- */
.oa-confirm{text-align:center;padding:10px 0 4px;}
.oa-confirm .oa-icon-ok{width:52px;height:52px;border-radius:50%;background:var(--mint);color:var(--green-deep);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.oa-confirm .oa-icon-ok svg{width:26px;height:26px;}
.oa-confirm h3{font-family:var(--font-heading);font-size:1.1rem;color:var(--navy);margin-bottom:8px;}
.oa-confirm p{font-size:.88rem;color:var(--ink-soft);line-height:1.6;}

.oa-confirm-actions{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:24px;}
.oa-confirm-actions .btn{width:100%;max-width:320px;}
.oa-confirm-wa-link{font-size:.82rem;font-weight:700;color:var(--navy);text-decoration:underline;text-underline-offset:3px;}

/* Bloc "Et maintenant ?" — réutilise le même langage visuel discret que les
   pastilles numérotées du bloc 3 étapes de l'accueil, adapté à ce fichier CSS. */
.oa-next-block{border:1px solid var(--line);background:#fff;border-radius:8px;padding:18px 16px;text-align:left;}
.oa-next-title{font-family:var(--font-heading);font-size:.85rem;font-weight:800;color:var(--navy);text-transform:uppercase;letter-spacing:.4px;margin-bottom:14px;}
.oa-next-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.oa-next-list li{display:flex;align-items:flex-start;gap:10px;}
.oa-next-list .oa-next-num{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:rgba(30,53,96,.08);color:var(--navy-deep);border:1px solid rgba(30,53,96,.2);font-family:var(--font-heading);font-weight:800;font-size:.7rem;line-height:1;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.oa-next-list strong{display:block;font-family:var(--font-heading);font-size:.82rem;font-weight:800;color:var(--navy-deep);}
.oa-next-list span{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:2px;line-height:1.5;}

.oa-confirm-contact{margin-top:16px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:16px;text-align:left;}
.oa-confirm-contact .oa-trust-person{margin-bottom:0;}

.oa-confirm-extra-mobile{display:block;margin-top:18px;text-align:left;}
.oa-confirm-extra-mobile > * + *{margin-top:14px;}
@media(min-width:960px){
  .oa-confirm-extra-mobile{display:none;}
}
.oa-confirm-page-aside > * + *{margin-top:16px;}

@media(max-width:700px){
  .oa-nav{flex-direction:column;}
  .oa-nav .btn{width:100%;min-height:52px;}
}

/* ============================================================
   Page dédiée (assistant-offre.html / assistant-offre-fr.html)
   Remplace l'ancien conteneur modale : ici l'assistant vit dans
   une vraie page, avec défilement naturel du document.
   ============================================================ */
.oa-page-header{position:sticky;top:0;z-index:20;background:var(--navy);box-shadow:0 1px 3px rgba(19,35,64,.12);}
.oa-page-header-inner{max-width:1160px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;}
.oa-page-logo{display:inline-flex;align-items:center;background:#fff;padding:7px 14px;border-radius:6px;flex-shrink:0;}
.oa-page-logo img{height:24px;width:auto;display:block;}
.oa-page-header-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.oa-page-lang-switch{display:flex;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:3px;}
.oa-page-lang-switch a{padding:6px 12px;border-radius:4px;font-size:.75rem;font-weight:800;color:#B9C8E0;letter-spacing:.4px;font-family:var(--font-heading);}
.oa-page-lang-switch a.active{background:var(--green);color:var(--navy-deep);}
.oa-page-back{font-size:.82rem;font-weight:700;color:#DCE6F5;white-space:nowrap;}
.oa-page-back:hover{color:#fff;}

.oa-page-wrap{max-width:1160px;margin:0 auto;padding:28px 20px 60px;}

.oa-page-footer{text-align:center;padding:18px 20px 32px;border-top:1px solid var(--line);}
.oa-page-footer a{font-size:.76rem;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;}
.oa-page-footer a:hover{color:var(--navy);}

.oa-page-intro-row{margin-bottom:20px;}
.oa-page-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(36,158,115,.1);border:1px solid rgba(36,158,115,.3);color:var(--green-deep);padding:6px 14px;border-radius:6px;font-size:.74rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;font-family:var(--font-heading);}

.oa-page-grid{display:block;}
.oa-page-main{background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px 24px 24px;box-shadow:0 1px 3px rgba(20,30,45,.05);}
.oa-page-aside{display:none;}

@media(min-width:960px){
  .oa-page-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start;}
  .oa-page-main{padding:34px 36px 32px;}
  .oa-page-aside{display:block;position:sticky;top:88px;}
  .oa-page-aside .oa-mini-summary{margin-bottom:0;}
  .oa-page-aside .oa-mini-summary-body{display:block !important;margin-top:12px;}
  .oa-page-aside .oa-mini-summary-toggle{display:none;}
  .oa-page-aside .oa-mini-summary-head{cursor:default;}
  .oa-page-main > .oa-mini-summary-mobile-slot{display:none !important;}
}

/* Nav "Continuer / Retour" facilement accessible sur mobile, sans se transformer
   en barre flottante intrusive : reste dans le flux mais colle en bas quand le
   contenu de l'étape dépasse l'écran. */
@media(max-width:700px){
  .oa-page-header-inner{padding:10px 14px;}
  .oa-page-wrap{padding:16px 0 0;}
  .oa-page-main{border-radius:0;border-left:none;border-right:none;padding:18px 16px 16px;}
  .oa-page-main .oa-nav{
    position:sticky;bottom:0;background:#fff;margin:22px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    box-shadow:0 -2px 10px rgba(20,30,45,.06);border-top:1px solid var(--line);
  }
}
/* En dessous de 480px, "logo + switch DE/FR + retour au site" en toutes lettres ne
   tient plus sur une ligne : .oa-page-header-right (flex-wrap:wrap) empilait alors
   le switch et le lien de retour sur 2 lignes à côté du logo, ce qui rendait le
   header disproportionné et repoussait fortement le contenu. On réduit ici
   uniquement l'encombrement (lien de retour en icône seule, logo et switch un peu
   plus compacts) sans rien retirer fonctionnellement : le texte du lien reste
   disponible pour les lecteurs d'écran via aria-label.
   IMPORTANT : ne pas dupliquer ces règles ni utiliser !important — un seul point
   d'ajustement pour ce header, ici. */
@media(max-width:480px){
  .oa-page-header-inner{gap:8px;}
  .oa-page-logo{padding:6px 10px;}
  .oa-page-logo img{height:20px;}
  .oa-page-header-right{gap:6px;flex-wrap:nowrap;}
  .oa-page-lang-switch a{padding:5px 9px;font-size:.72rem;}
  .oa-page-back{font-size:1rem;padding:4px 2px;}
  .oa-page-back-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
}
@media(min-width:701px) and (max-width:959px){
  .oa-page-wrap{padding:24px 20px 60px;}
}

/* ---- Bloc de réassurance humaine ---- */
.oa-trust-block{margin-top:16px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:18px 16px;}
.oa-trust-person{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.oa-trust-avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;flex-shrink:0;border:1px solid var(--line);}
.oa-trust-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.oa-trust-person-name{display:block;font-family:var(--font-heading);font-size:.8rem;font-weight:800;color:var(--navy-deep);}
.oa-trust-person-role{display:block;font-size:.7rem;color:var(--ink-soft);margin-top:1px;}
.oa-trust-title{font-family:var(--font-heading);font-size:.88rem;font-weight:800;color:var(--navy);margin-bottom:7px;line-height:1.35;}
.oa-trust-text{font-size:.8rem;color:var(--ink-soft);line-height:1.55;margin-bottom:14px;}
.oa-trust-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.oa-trust-points li{display:flex;align-items:flex-start;gap:8px;font-size:.79rem;color:var(--ink);line-height:1.4;}
.oa-trust-points li svg{flex-shrink:0;margin-top:2px;width:15px;height:15px;color:var(--green-deep);}

/* Copie mobile : affichée uniquement à l'étape résumé (voir renderStepResume),
   masquée sur desktop où la copie de la colonne de droite suffit. */
@media(min-width:960px){
  .oa-trust-mobile-only{display:none;}
}