/* AlloSasha — guide « Ajouter Sasha à Claude » (/ajouter/claude). Complète site.css. */

.guide { padding-bottom: 80px; }
.guide-intro { padding-top: 30px; }
.guide-titre { font-size: clamp(40px, 7vw, 92px); letter-spacing: -0.045em; }
.guide-titre span { display: block; }
.guide-sous-titre { font-size: clamp(28px, 4vw, 48px); }
.fond-jaune { background: var(--jaune); }

/* --- Choix de l'appareil -------------------------------------------------------- */
.appareil {
  display: inline-flex; gap: 6px; margin-top: 30px; padding: 6px;
  border: 2px solid var(--bord-2); border-radius: 999px; background: var(--carte);
}
.appareil-choix {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border: 0; border-radius: 999px; background: transparent; color: var(--texte-2); cursor: pointer;
  font-family: var(--corps); font-weight: 700; font-size: 16px;
}
.appareil-choix[aria-selected="true"] { background: var(--lime); color: var(--noir); }

/* --- Adresse à copier ------------------------------------------------------------ */
.adresse {
  margin-top: 34px; background: var(--carte); border: 2px solid var(--blanc); border-radius: 26px;
  padding: clamp(20px, 3vw, 30px);
}
.adresse-libelle { margin: 0; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lime); }
.adresse-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 14px; }
.adresse-url {
  flex: 1 1 320px; min-width: 0; overflow-wrap: anywhere; user-select: all;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: clamp(14px, 1.8vw, 18px);
  background: var(--noir); border: 1.5px solid var(--bord-2); border-radius: 14px; padding: 14px 16px; color: var(--blanc);
}
.adresse-aide { margin: 12px 0 0; font-size: 15px; color: var(--doux); }
.bouton.copie-ok { background: var(--blanc); }

/* --- Étapes ------------------------------------------------------------------------ */
.parcours { margin-top: 56px; }
.etapes-guide { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.etape-guide {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(20px, 4vw, 48px); align-items: center;
  border: 2px solid var(--bord); border-radius: 28px; background: var(--carte); padding: clamp(22px, 3.5vw, 40px);
}
.etape-guide:not(:has(.maquette)) { grid-template-columns: minmax(0, 1fr); }
.etape-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.etape-texte .numero { width: 48px; height: 48px; font-size: 21px; }
.etape-texte h2 { margin: 4px 0 0; font-family: var(--titre); font-weight: 800; font-size: clamp(21px, 2.4vw, 28px); letter-spacing: -0.02em; line-height: 1.15; }
.etape-texte p { margin: 0; color: var(--texte-3); }
.etape-texte .bouton { margin-top: 6px; }
.libelle {
  display: inline-block; padding: 0 8px; border-radius: 8px; background: var(--carte-3); border: 1px solid var(--bord-2);
  color: var(--blanc); font-weight: 700; font-size: 0.92em; white-space: nowrap;
}
.consignes { margin: 0; padding-left: 20px; color: var(--texte-3); display: grid; gap: 6px; }
.consignes code, .exemple code { font-family: ui-monospace, Menlo, monospace; color: var(--lime); }
.astuce { font-size: 15px; color: var(--doux) !important; }
.astuce-large { margin: 22px 0 0; max-width: 780px; }

.encadre { color: var(--noir); border-radius: 24px; padding: clamp(20px, 3vw, 30px); margin-bottom: 22px; }
.encadre h2 { margin: 0; font-family: var(--titre); font-weight: 800; font-size: 21px; }
.encadre p { margin: 8px 0 0; }

/* --- Maquettes (illustrations simplifiées, pas des captures) --------------------- */
.maquette {
  margin: 0; border-radius: 18px; overflow: hidden; background: #F4F3EE; color: #2A2A30;
  box-shadow: 8px 8px 0 var(--bleu); font-size: 14px; line-height: 1.3;
}
.maquette-barre { display: flex; gap: 6px; padding: 10px 12px; background: #E6E4DC; }
.maquette-barre i { width: 10px; height: 10px; border-radius: 50%; background: #C9C6BB; }
.maquette-corps { padding: 18px; display: flex; flex-direction: column; gap: 9px; min-height: 190px; }
.maquette-2col { flex-direction: row; gap: 14px; }
.maquette-tel { max-width: 300px; justify-self: center; width: 100%; border-radius: 30px; border: 8px solid #2A2A30; }
.maquette-sombre { background: var(--noir); color: var(--blanc); }
.maquette-sombre .maquette-barre { background: var(--carte-3); }
.maquette-sombre .maquette-barre i { background: var(--bord-2); }

.m-menu { flex: 0 0 38%; display: flex; flex-direction: column; gap: 9px; padding-right: 12px; border-right: 1px solid #DDDAD0; }
.m-contenu { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.m-ligne { display: block; height: 9px; border-radius: 5px; background: #DDDAD0; flex: 1; min-width: 40px; }
.m-ligne.court { flex: none; width: 55%; }
.m-item, .m-onglet, .m-option { padding: 7px 10px; border-radius: 9px; font-weight: 600; }
.m-onglet.m-vide, .m-option.m-vide { min-height: 31px; background: #E8E6DE; }
.m-bloc { display: block; height: 34px; border-radius: 10px; background: #E8E6DE; }
.m-entete { display: flex; justify-content: space-between; align-items: center; }
.m-titre { font-weight: 800; font-size: 15px; }
.m-plus {
  width: 32px; height: 32px; border-radius: 9px; border: 1.5px solid #C9C6BB; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 18px; flex: none;
}
.m-plus.petit { width: 26px; height: 26px; font-size: 16px; }
.m-menu-deroulant {
  align-self: flex-end; width: min(100%, 270px); display: flex; flex-direction: column; gap: 4px;
  background: #FFFFFF; border-radius: 12px; padding: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.m-champ-libelle { font-size: 12px; font-weight: 700; color: #6B6A70; margin-top: 2px; }
.m-champ { background: #FFFFFF; border: 1.5px solid #D6D3C8; border-radius: 9px; padding: 8px 10px; overflow-wrap: anywhere; }
.m-url { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.m-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.m-bouton, .m-bouton-gris { padding: 7px 14px; border-radius: 9px; font-weight: 700; }
.m-bouton { background: #2A2A30; color: #FFFFFF; }
.m-bouton-gris { background: #E8E6DE; }
.m-centre { align-items: center; justify-content: center; text-align: center; gap: 12px; }
.m-titre-sasha { font-family: var(--titre); font-weight: 800; font-size: 15px; max-width: 240px; }
.m-bouton-lime, .m-bouton-contour { width: min(100%, 220px); padding: 10px; border-radius: 999px; font-weight: 700; }
.m-bouton-lime { background: var(--lime); color: var(--noir); }
.m-bouton-contour { border: 1.5px solid var(--blanc); }
.m-chat { justify-content: flex-end; }
.m-bulle-moi, .m-bulle-ia { max-width: 85%; padding: 9px 12px; border-radius: 14px; }
.m-bulle-moi { align-self: flex-end; background: #E2DFD5; border-bottom-right-radius: 4px; }
.m-bulle-ia { align-self: flex-start; background: #FFFFFF; border-bottom-left-radius: 4px; }
.m-permission {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: #FFFFFF; border: 1.5px solid #D6D3C8; border-radius: 12px; padding: 8px 10px; font-weight: 600;
}
.m-saisie { display: flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1.5px solid #D6D3C8; border-radius: 14px; padding: 8px; }

/* Élément à cliquer : anneau rose qui pulse. */
.cible { outline: 3px solid var(--rose); outline-offset: 2px; animation: cible 1.6s ease-in-out infinite; }
@keyframes cible {
  0%, 100% { outline-color: var(--rose); }
  50% { outline-color: rgba(255, 61, 139, 0.25); }
}
@media (prefers-reduced-motion: reduce) { .cible { animation: none; } }

/* --- Exemples et dépannage --------------------------------------------------------- */
.bloc-guide { margin-top: 90px; }
.exemples { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-top: 34px; }
.exemple { margin: 0; color: var(--noir); border-radius: 22px; padding: 22px; font-weight: 500; font-size: 17px; line-height: 1.45; }
.faq { margin-top: 30px; display: grid; gap: 12px; max-width: 880px; }
.faq details { border: 2px solid var(--bord); border-radius: 18px; background: var(--carte); padding: 0 20px; }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 700; list-style-position: inside; }
.faq details[open] summary { color: var(--lime); }
.faq details p { margin: 0 0 18px; color: var(--texte-3); }
.fin-guide { margin-top: 60px; color: var(--doux); }
.fin-guide p { margin: 0; }

/* --- Mobile ------------------------------------------------------------------------ */
@media (max-width: 760px) {
  .etape-guide { grid-template-columns: minmax(0, 1fr); }
  .maquette { box-shadow: 5px 5px 0 var(--bleu); }
  .appareil { display: flex; width: 100%; }
  .appareil-choix { flex: 1; justify-content: center; padding: 0 10px; font-size: 15px; }
  .adresse-ligne .bouton { width: 100%; }
  .libelle { white-space: normal; }
}