/* =====================================================================
   Atoumo — Popup territoire
   Les !important visent les surcharges du kit Elementor sur <button>,
   qui impose display / flex-direction / text-align / white-space.
   ===================================================================== */

.ato-terr[hidden]{display:none}

.ato-terr{
  position:fixed;inset:0;z-index:99990;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}

.ato-terr-fond{
  position:absolute;inset:0;
  background:rgba(23,16,22,.62);
  backdrop-filter:blur(3px);
  animation:ato-terr-fondu .25s ease both;
}

.ato-terr-boite{
  position:relative;
  width:100%;max-width:620px;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  background:#fff;
  border:1px solid #EADFE5;
  border-radius:22px;
  box-shadow:0 26px 70px rgba(23,16,22,.28);
  padding:34px 30px 26px;
  text-align:center;
  animation:ato-terr-monte .32s cubic-bezier(.22,.9,.3,1) both;
}

@keyframes ato-terr-fondu{from{opacity:0}to{opacity:1}}
@keyframes ato-terr-monte{
  from{opacity:0;transform:translateY(16px) scale(.97)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .ato-terr-fond,.ato-terr-boite,.ato-terr-choix{animation:none!important;transition:none!important}
}

/* ---------- Fermeture ---------- */
.ato-terr .ato-terr-x{
  position:absolute;top:12px;right:12px;
  width:36px!important;height:36px!important;padding:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  background:none!important;border:0!important;border-radius:50%!important;
  color:#665D64;cursor:pointer;
}
.ato-terr .ato-terr-x:hover{background:#FFF6FA!important;color:#171016}
.ato-terr .ato-terr-x svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* ---------- En-tête ---------- */
.ato-terr-mo{
  display:block;margin:0 auto 10px;
  width:auto;height:112px;
  object-fit:contain;
}

.ato-terr-sur{
  font:600 13px/1.3 Inter,system-ui,sans-serif;
  letter-spacing:.06em;text-transform:uppercase;
  color:#C90055;margin-bottom:8px;
}

.ato-terr-titre{
  margin:0 0 10px;
  font:700 27px/1.22 Inter,system-ui,sans-serif;
  color:#171016;
}

.ato-terr-texte{
  margin:0 auto 22px;max-width:46ch;
  font:400 15px/1.6 Inter,system-ui,sans-serif;
  color:#665D64;
}

/* ---------- Les sept choix ----------
   minmax(0,1fr) et pas 1fr : une piste 1fr ne peut pas descendre sous sa
   taille min-content, et « Je vis à l'international » la ferait déborder. */
.ato-terr-grille{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;margin-bottom:18px;
}

.ato-terr .ato-terr-choix{
  display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:flex-start!important;
  text-align:center!important;white-space:normal!important;
  gap:8px!important;padding:14px 8px!important;
  background:#fff!important;border:1px solid #EADFE5!important;
  border-radius:14px!important;cursor:pointer;
  transition:border-color .16s,background .16s,transform .16s;
}
.ato-terr .ato-terr-choix:hover,
.ato-terr .ato-terr-choix:focus-visible{
  background:#FFF6FA!important;border-color:#C90055!important;
  transform:translateY(-2px);
}
.ato-terr .ato-terr-choix:focus-visible{outline:2px solid #C90055;outline-offset:2px}

/* Les deux dernières cases n'ont pas de silhouette : elles passent sur une
   deuxième ligne, en paire centrée sous les cinq territoires.
   Ciblage par rang et non par :first-of-type — tous les enfants étant des
   <button>, :first-of-type désignerait la Guadeloupe. */
.ato-terr .ato-terr-choix.est-ailleurs{
  flex-direction:row!important;justify-content:center!important;
  gap:10px!important;padding:12px 14px!important;
}
.ato-terr .ato-terr-choix:nth-child(6){grid-column:2 / span 2}
.ato-terr .ato-terr-choix:nth-child(7){grid-column:4 / span 2}

.ato-terr-visuel{
  display:flex;align-items:center;justify-content:center;
  height:44px;
}
.ato-terr-visuel img{
  max-width:100%;max-height:44px;width:auto;height:auto;
  opacity:.82;transition:opacity .16s;
}
.ato-terr .ato-terr-choix:hover .ato-terr-visuel img{opacity:1}
.ato-terr-visuel svg{width:24px;height:24px;fill:#C90055}
.ato-terr .ato-terr-choix.est-ailleurs .ato-terr-visuel{height:auto}

.ato-terr-nom{
  font:600 12.5px/1.3 Inter,system-ui,sans-serif;
  color:#171016;overflow-wrap:anywhere;
}

/* ---------- Boutons de bas de boîte ---------- */
.ato-terr .ato-terr-passer{
  display:inline-block!important;
  background:none!important;border:0!important;padding:6px 4px!important;
  font:400 13px/1.4 Inter,system-ui,sans-serif;
  color:#8A8189;text-decoration:underline;cursor:pointer;
}
.ato-terr .ato-terr-passer:hover{color:#171016}

.ato-terr .ato-terr-suite{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  margin:4px auto 10px;padding:13px 30px!important;
  background:#C90055!important;color:#fff!important;
  border:0!important;border-radius:999px!important;
  font:600 15px/1 Inter,system-ui,sans-serif;
  cursor:pointer;transition:background .16s;
}
.ato-terr .ato-terr-suite:hover{background:#A80047!important}

/* ---------- Mobile ----------
   Google sanctionne les interstitiels qui masquent le contenu à l'arrivée
   depuis une recherche : on garde la boîte compacte et la croix atteignable
   au pouce. Voir la note de déploiement. */
@media (max-width:640px){
  .ato-terr{padding:12px;align-items:flex-end}
  .ato-terr-boite{padding:26px 18px 20px;border-radius:20px 20px 14px 14px}
  .ato-terr-mo{height:88px}
  .ato-terr-titre{font-size:22px}
  .ato-terr-texte{font-size:14px;margin-bottom:18px}
  .ato-terr-grille{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .ato-terr .ato-terr-choix{padding:11px 6px!important}
  .ato-terr .ato-terr-choix:nth-child(6),
  .ato-terr .ato-terr-choix:nth-child(7){grid-column:1 / span 3}
  .ato-terr-visuel{height:36px}
  .ato-terr-visuel img{max-height:36px}
  .ato-terr-nom{font-size:12px}
}