/* ============================================================================
   GUIDE APN MOBILE — page configuration-parametres-apn-internet-et-mms.html
   23/09/2026
   ============================================================================
   Habillage uniquement : les données APN, le menu à ancres, les tableaux, le
   corps rendu par le backoffice et les blocs GEO restent dans le PHP existant.
   Le préfixe apn- évite toute incidence sur les autres guides mobiles. */

#texte.apn-page{
  --apn-nuit:#151820;--apn-nuit2:#1b202b;--apn-panel:#202938;
  --apn-ligne:rgba(173,200,225,.22);--apn-texte:#eef3f9;--apn-doux:#b6c3d2;
  --apn-muted:#8394a8;--apn-rouge:#f15c70;--apn-bleu:#58aaff;--apn-cyan:#23e0d0;
  float:none;clear:both;box-sizing:border-box;
  padding:23px 24px 31px;border:1px solid rgba(219,110,130,.32);border-radius:17px;
  background:
    radial-gradient(circle at 83% 2%,rgba(63,142,255,.14),transparent 21%),
    radial-gradient(circle at 10% 24%,rgba(241,92,112,.10),transparent 24%),
    linear-gradient(180deg,#171a22 0%,#151a23 54%,#151820 100%);
  color:var(--apn-texte);font-family:'Space Grotesk',Arial,sans-serif;
  box-shadow:0 20px 42px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.045);
}
#texte.apn-page *,#texte.apn-page *::before,#texte.apn-page *::after{box-sizing:border-box;}

/* ── En-tête : le sujet est le mobile et son réseau, pas l'IA ─────────────── */
#texte.apn-page .apn-mobile-hero{
  position:relative;isolation:isolate;float:none;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(260px,.98fr);gap:20px;
  margin:-3px -4px 18px;padding:25px 27px;border:1px solid rgba(98,163,244,.38);border-radius:15px;
  background:
    radial-gradient(circle at 67% 45%,rgba(25,223,208,.14),transparent 21%),
    linear-gradient(118deg,#151a24 0%,#172030 58%,#111c2a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 30px rgba(0,0,0,.2);
}
#texte.apn-page .apn-mobile-hero::before{
  content:"";position:absolute;z-index:-1;inset:0;opacity:.6;pointer-events:none;
  background-image:linear-gradient(rgba(102,184,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(241,92,112,.11) 1px,transparent 1px);
  background-size:18px 18px;mask-image:linear-gradient(90deg,transparent 0%,#000 37%,#000 100%);
}
#texte.apn-page .apn-hero-texte{align-self:center;max-width:540px;}
#texte.apn-page .apn-kicker{
  display:inline-flex;align-items:center;gap:6px;width:max-content;max-width:100%;margin:0 0 9px;
  padding:5px 10px;border:1px solid rgba(241,92,112,.9);border-radius:999px;
  color:#ff8290;font-size:10px;line-height:1;font-weight:800;letter-spacing:1.1px;
}
#texte.apn-page .apn-kicker svg{width:13px;height:13px;stroke:currentColor;}
#texte.apn-page h1{
  margin:0 0 10px!important;color:#fff!important;font-family:'Space Grotesk',Arial,sans-serif;
  font-size:35px!important;line-height:1.04!important;letter-spacing:-.9px!important;text-shadow:0 3px 13px rgba(0,0,0,.4);
}
#texte.apn-page h1 span{display:block;color:#ff7284;}
#texte.apn-page h1 em{display:block;margin-top:5px;color:#c9d4e0;font-size:14px;line-height:1.2;font-style:normal;font-weight:500;letter-spacing:0;}
#texte.apn-page .apn-mobile-hero h2{
  margin:0 0 10px!important;color:#d9e9fb!important;font-size:14px!important;line-height:1.42!important;font-weight:500!important;
}
#texte.apn-page .apn-hero-maj{font-size:11px;line-height:1.35;color:var(--apn-muted);}
#texte.apn-page .apn-hero-maj > *{margin:0!important;color:var(--apn-muted)!important;}

/* Les deux sorties de téléphone : données et MMS. Illustrations CSS décoratives. */
#texte.apn-page .apn-hero-visuel{position:relative;min-height:202px;display:flex;align-items:center;justify-content:center;}
#texte.apn-page .apn-telephone{
  position:relative;z-index:2;width:94px;height:176px;padding-top:54px;border:2px solid #87c4ff;border-radius:18px;
  background:linear-gradient(155deg,#132a47,#1b2547 48%,#131e31);box-shadow:0 0 0 7px rgba(84,169,255,.07),0 0 25px rgba(69,161,255,.34),inset 0 0 25px rgba(53,187,255,.14);
  text-align:center;color:#eaf7ff;font-size:21px;letter-spacing:-1px;font-weight:800;
}
#texte.apn-page .apn-telephone::before{content:"";position:absolute;top:27px;left:21px;right:21px;height:5px;border-radius:5px;background:rgba(225,245,255,.7);}
#texte.apn-page .apn-telephone::after{content:"";position:absolute;left:11px;right:11px;bottom:17px;height:1px;background:rgba(129,219,255,.55);box-shadow:0 -30px 0 rgba(129,219,255,.25),0 -60px 0 rgba(129,219,255,.19);}
#texte.apn-page .apn-telephone b{position:relative;z-index:1;text-shadow:0 0 13px #64b7ff;}
#texte.apn-page .apn-telephone i{position:absolute;z-index:1;width:8px;height:8px;border-radius:50%;background:#36e2d3;box-shadow:0 0 12px #36e2d3;}
#texte.apn-page .apn-telephone i:nth-of-type(1){left:-6px;top:48px;}.apn-telephone i:nth-of-type(2){right:-6px;top:76px;background:#ff7890;box-shadow:0 0 12px #ff7890;}.apn-telephone i:nth-of-type(3){left:-6px;bottom:42px;background:#ffe277;box-shadow:0 0 12px #ffe277;}
#texte.apn-page .apn-telephone-haut,#texte.apn-page .apn-telephone-bas{display:none;}
#texte.apn-page .apn-signal{
  position:absolute;z-index:1;width:135px;min-height:91px;padding:11px;border:1px solid rgba(36,225,208,.7);border-radius:12px;
  background:linear-gradient(135deg,rgba(9,69,79,.83),rgba(18,34,54,.89));box-shadow:inset 0 0 24px rgba(31,220,204,.09),0 0 21px rgba(14,219,203,.09);
}
#texte.apn-page .apn-signal-internet{left:0;top:25px;}.apn-signal-mms{right:0;bottom:18px;border-color:rgba(89,167,255,.78);background:linear-gradient(135deg,rgba(21,58,116,.88),rgba(17,31,59,.9));}
#texte.apn-page .apn-signal > span{display:inline-grid;place-items:center;float:left;width:29px;height:29px;margin:0 7px 4px 0;border:1px solid currentColor;border-radius:8px;color:#36e2d3;font-size:18px;line-height:1;}.apn-signal-mms > span{color:#75b8ff!important;}
#texte.apn-page .apn-signal b{display:block;color:#fff;font-size:12px;line-height:1.1;}.apn-signal small{display:block;clear:both;padding-top:6px;border-top:1px solid rgba(255,255,255,.14);color:#c6dbe3;font-size:9px;line-height:1.3;}

/* Les deux vignettes Internet / MMS reprennent le gabarit généreux des
   pages Bons Plans sur écran large. Les données restent décoratives : le
   contenu et les réglages APN demeurent ceux du backoffice. */
@media (min-width:1050px){
  #texte.apn-page .apn-hero-visuel{min-height:228px;}
  #texte.apn-page .apn-telephone{width:102px;height:190px;padding-top:59px;border-radius:20px;font-size:23px;}
  #texte.apn-page .apn-telephone::before{top:29px;left:23px;right:23px;}
  #texte.apn-page .apn-telephone::after{bottom:18px;left:12px;right:12px;box-shadow:0 -33px 0 rgba(129,219,255,.25),0 -66px 0 rgba(129,219,255,.19);}
  #texte.apn-page .apn-signal{width:176px;min-height:124px;padding:14px;border-radius:14px;}
  #texte.apn-page .apn-signal-internet{top:19px;}
  #texte.apn-page .apn-signal-mms{bottom:14px;}
  #texte.apn-page .apn-signal > span{width:34px;height:34px;margin:0 8px 6px 0;border-radius:9px;font-size:20px;}
  #texte.apn-page .apn-signal b{font-size:14px;}
  #texte.apn-page .apn-signal small{padding-top:8px;font-size:10px;}
}

/* ── Chemin Android / iPhone, toujours au-dessus du contenu éditable ───────── */
#texte.apn-page .apn-pratique{
  display:grid;grid-template-columns:43px minmax(0,1fr);gap:12px;align-items:start;
  margin:0 0 18px;padding:14px 16px;border:1px solid rgba(54,207,197,.42);border-radius:12px;
  background:linear-gradient(100deg,rgba(0,129,129,.16),rgba(29,43,61,.72));box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
#texte.apn-page .apn-pratique-icone{display:grid;place-items:center;width:39px;height:39px;border:1px solid #2ee6d6;border-radius:50%;color:#2ee6d6;font-size:21px;font-weight:800;box-shadow:0 0 18px rgba(28,229,214,.17);}
#texte.apn-page .apn-pratique p{margin:0!important;color:#e6eef4;font-size:13px;line-height:1.58;text-align:left!important;}
#texte.apn-page .apn-pratique strong{color:#fff;}#texte.apn-page .apn-pratique em{color:#9edfff;font-style:normal;font-weight:600;}#texte.apn-page .apn-pratique p span{display:block;margin-top:5px;color:#a4bac4;font-size:11px;}

/* ── Réponse GEO : Mayotte, au-dessus des tableaux opérateurs ────────────── */
#texte.apn-page .apn-geo-rapide{margin:0 0 18px;padding:17px 18px;border:1px solid rgba(244,188,93,.52);border-left:4px solid #f4bc5d;border-radius:12px;background:linear-gradient(105deg,rgba(91,61,18,.36),rgba(28,38,54,.78));box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
#texte.apn-page .apn-geo-kicker{display:inline-block;margin:0 0 7px;color:#ffcf72;font-size:10px;font-weight:850;letter-spacing:1.1px;}
#texte.apn-page .apn-geo-rapide h2{margin:0 0 8px!important;padding:0!important;border:0!important;color:#fff!important;font-size:21px!important;line-height:1.25!important;text-align:left!important;}
#texte.apn-page .apn-geo-rapide p{margin:5px 0 0!important;color:#e5edf4!important;font-size:13px;line-height:1.55;text-align:left!important;}
#texte.apn-page .apn-geo-rapide code{padding:2px 5px;border:1px solid rgba(255,207,114,.4);border-radius:5px;background:rgba(11,19,30,.65);color:#ffe0a1;font-family:"SFMono-Regular",Consolas,monospace;font-size:.91em;white-space:nowrap;}

/* ── Menu de saut : même comportement JS, nouvelle présentation ──────────── */
#texte.apn-page form.apn-selecteur{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.85fr);gap:7px 17px;align-items:end;
  clear:both;margin:20px 0 23px;padding:17px 18px;border:1px solid rgba(241,92,112,.53);border-radius:13px;
  background:linear-gradient(110deg,rgba(78,24,42,.65),rgba(29,34,49,.95));box-shadow:inset 0 0 24px rgba(241,86,112,.055);
}
#texte.apn-page form.apn-selecteur .alerte-rouge{display:inline-flex;align-items:center;width:max-content;max-width:100%;margin:0;color:#ff8290!important;font-size:11px;font-weight:800;letter-spacing:1px;}
#texte.apn-page form.apn-selecteur .alerte-rouge::before{content:"⌖";margin-right:6px;font-size:17px;line-height:.5;}
#texte.apn-page form.apn-selecteur label{grid-column:1/2;margin:0;color:#e7e9f1;font-size:14px;line-height:1.4;text-align:left!important;}
#texte.apn-page form.apn-selecteur select{
  grid-column:2;grid-row:1/3;width:100%;min-height:44px;padding:0 35px 0 13px;border:1px solid rgba(255,135,154,.62);border-radius:9px;
  appearance:auto;background:#171e2b;color:#fff;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;outline:none;
}
#texte.apn-page form.apn-selecteur select:hover,#texte.apn-page form.apn-selecteur select:focus{border-color:#ff8a9d;box-shadow:0 0 0 3px rgba(241,92,112,.12);}

/* ── Les valeurs restent les mêmes, mais deviennent des cartes à recopier ── */
#texte.apn-page hr.degrade1{clear:both;height:1px;margin:22px 0;border:0;background:linear-gradient(90deg,transparent,rgba(123,187,255,.5),rgba(241,92,112,.5),transparent);}
#texte.apn-page .apnmms{clear:both;position:relative;margin:25px 0 0;padding:18px 18px 2px;border:1px solid rgba(128,168,214,.25);border-radius:13px;background:rgba(21,28,39,.61);box-shadow:inset 0 1px 0 rgba(255,255,255,.03);}
#texte.apn-page .apnmms > img{max-width:38px!important;max-height:38px!important;vertical-align:middle;object-fit:contain;}
#texte.apn-page .apn_nomope{display:inline-block;margin-left:8px;color:#dce8f3!important;font-size:12px;font-weight:800;letter-spacing:.8px;vertical-align:middle;}
#texte.apn-page h2.apn_titre{
  position:relative;margin:12px 0 11px!important;padding:0 0 0 13px;border:0!important;color:#fff!important;
  font-size:18px!important;line-height:1.3!important;font-weight:750!important;text-align:left!important;
}
#texte.apn-page h2.apn_titre::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:4px;border-radius:5px;background:linear-gradient(#55b5ff,#f15c70);box-shadow:0 0 11px rgba(84,177,255,.45);}
#texte.apn-page .apn-tbl{
  width:100%;max-width:none;margin:7px 0 20px;border:1px solid rgba(123,181,227,.28);border-radius:10px;border-collapse:separate;border-spacing:0;overflow:hidden;
  background:rgba(10,17,28,.52);box-shadow:0 9px 22px rgba(0,0,0,.13);
}
#texte.apn-page .apn-tbl th,#texte.apn-page .apn-tbl td{padding:8px 11px;border:0!important;border-bottom:1px solid rgba(124,178,220,.16);text-align:left!important;vertical-align:top;overflow-wrap:anywhere;word-break:break-word;}
#texte.apn-page .apn-tbl tr:last-child th,#texte.apn-page .apn-tbl tr:last-child td{border-bottom:0!important;}
#texte.apn-page .apn-tbl th{width:39%;background:rgba(55,78,107,.33)!important;color:#cbd8e7!important;font-family:'Space Grotesk',Arial,sans-serif;font-size:12px;font-weight:700;}
#texte.apn-page .apn-tbl td{background:rgba(11,18,29,.35)!important;color:#fff!important;font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;font-size:13px;line-height:1.42;}
#texte.apn-page .apn-tbl tbody tr:nth-child(even) td{background:rgba(33,50,70,.48)!important;}
#texte.apn-page .apn-fiche{margin:8px 0 15px;padding:10px 12px;border:1px solid rgba(91,172,255,.35);border-left:3px solid #58aaff;border-radius:8px;background:rgba(47,74,108,.25);color:#c2d2df;font-size:12px;}
#texte.apn-page .apn-fiche a{color:#9bd2ff!important;text-decoration:none!important;font-weight:800;}.apn-fiche a:hover{text-decoration:underline!important;color:#fff!important;}
#texte.apn-page a[href="#texte"]{display:inline-flex;align-items:center;gap:5px;margin:1px 0 4px;padding:7px 10px;border:1px solid rgba(103,180,255,.32);border-radius:8px;background:rgba(51,89,128,.17);color:#a8d7ff!important;font-size:11px;font-weight:700;text-decoration:none!important;}
#texte.apn-page a[href="#texte"]:hover{border-color:#73b9ff;color:#fff!important;background:rgba(81,154,238,.24);}

/* La vignette publicitaire reste à droite, mais ne doit pas repousser le
   premier opérateur sous elle : à cette largeur il commence à son niveau.
   Le sélecteur adjacent préserve le contenu issu du backoffice ([PUB]). */
@media (min-width:901px) and (max-width:1559px){
  #texte.apn-page .pub + .apnmms{clear:none;}
}

/* Les paragraphes et titres édités depuis le backoffice restent lisibles dans le même univers. */
#texte.apn-page > p,#texte.apn-page .apnmms ~ p{color:var(--apn-doux);line-height:1.65;text-align:left;}
#texte.apn-page > h2:not(.apn_titre){margin:29px 0 11px!important;color:#fff!important;font-size:21px!important;line-height:1.3!important;text-align:left!important;}
#texte.apn-page a:not(.apn-fiche a):not([href="#texte"]){color:#9ed2ff;}

@media (max-width:740px){
  #texte.apn-page{padding:16px 14px 24px;border-radius:13px;}
  #texte.apn-page .apn-mobile-hero{grid-template-columns:minmax(0,1fr);gap:10px;margin:-3px -3px 14px;padding:19px 16px 15px;border-radius:12px;}
  #texte.apn-page h1{font-size:29px!important;letter-spacing:-.7px!important;}
  #texte.apn-page h1 em{font-size:12.5px;}
  #texte.apn-page .apn-mobile-hero h2{font-size:12px!important;}
  #texte.apn-page .apn-hero-visuel{min-height:149px;margin:1px -5px 0;}
  #texte.apn-page .apn-telephone{width:72px;height:135px;padding-top:41px;border-radius:15px;font-size:17px;}
  #texte.apn-page .apn-telephone::before{top:20px;left:17px;right:17px;height:4px;}.apn-telephone::after{bottom:13px;left:9px;right:9px;box-shadow:0 -22px 0 rgba(129,219,255,.25),0 -44px 0 rgba(129,219,255,.19);}
  #texte.apn-page .apn-signal{width:124px;min-height:75px;padding:9px;}.apn-signal-internet{left:0!important;top:13px!important;}.apn-signal-mms{right:0!important;bottom:7px!important;}
  #texte.apn-page .apn-signal > span{width:25px;height:25px;margin-right:5px;border-radius:7px;font-size:15px;}.apn-signal b{font-size:10.5px;}.apn-signal small{padding-top:4px;font-size:8px;}
  #texte.apn-page .apn-pratique{grid-template-columns:34px minmax(0,1fr);gap:9px;margin-bottom:15px;padding:12px;}.apn-pratique-icone{width:31px!important;height:31px!important;font-size:17px!important;}.apn-pratique p{font-size:12px!important;line-height:1.5!important;}
  #texte.apn-page .apn-geo-rapide{margin-bottom:15px;padding:13px;}.apn-geo-rapide h2{font-size:18px!important;}.apn-geo-rapide p{font-size:12px!important;line-height:1.5!important;}
  #texte.apn-page form.apn-selecteur{grid-template-columns:minmax(0,1fr);gap:7px;margin:16px 0 20px;padding:13px;}.apn-selecteur label{grid-column:auto!important;font-size:12px!important;}.apn-selecteur select{grid-column:auto!important;grid-row:auto!important;min-height:42px!important;font-size:12px!important;}
  #texte.apn-page .apnmms{margin-top:18px;padding:14px 11px 1px;border-radius:11px;}
  #texte.apn-page h2.apn_titre{margin:10px 0 8px!important;font-size:16px!important;}
  #texte.apn-page .apn-tbl th,#texte.apn-page .apn-tbl td{padding:6px 7px;}.apn-tbl th{width:44%!important;font-size:10.5px!important;}.apn-tbl td{font-size:11px!important;}
}

@media (max-width:380px){
  #texte.apn-page .apn-signal{width:112px;}.apn-signal small{font-size:7.4px;}
  #texte.apn-page h1{font-size:27px!important;}
}