/*
 * Centre de contrôle iPad — glyphes, curseurs verticaux et différences 15 / 17 / 18 (campagne iOS §10.32).
 *
 * Baseline documentaire : guide d'utilisation iPadOS 17 et 18 « Use and customize Control Center »,
 * HIG (SF Symbols). Le simulateur ne rend pas le centre de contrôle (geste de bord impossible) : pas de
 * GT, donc aucune Φ. Le module ios-system-chrome.js garde son DOM ; cette feuille remplace les libellés
 * textuels des tuiles (« Air », « Cell », « BT ») par des pictogrammes dessinés à la manière des
 * symboles Apple (masques SVG, tracés Capsule, jamais des copies), pose les curseurs luminosité /
 * volume à la verticale (barres pleines sans curseur, comme iOS) et sépare les versions :
 *   · iOS 15 / 17 : un seul écran, pas de bouton « + » ni de pages (la personnalisation passe par Réglages) ;
 *   · iOS 18 : « + » en haut à gauche, bouton d'alimentation en haut à droite, pages Favoris / Média /
 *     Connectivité / Maison signalées par des points verticaux à droite.
 * Scope : .ios-sys.is-cc (module iOS uniquement) et body#ios-15 / 17 / 18 pour les écarts de version.
 */

/* ---- Pictogrammes (masques) ------------------------------------------------------------------ */

.ios-sys.is-cc {
    --cc-ico-airplane: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5Z'/></svg>");
    --cc-ico-cellular: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'><path d='M12 21V9'/><circle cx='12' cy='7' r='2' fill='white'/><path d='M8 10.5a5.5 5.5 0 0 1 0-7M16 10.5a5.5 5.5 0 0 0 0-7M5.5 13a9 9 0 0 1 0-12M18.5 13a9 9 0 0 0 0-12'/></svg>");
    --cc-ico-wifi: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'><path d='M2.5 9a14 14 0 0 1 19 0M5.5 12.5a9.5 9.5 0 0 1 13 0M8.5 16a5 5 0 0 1 7 0'/><circle cx='12' cy='19.3' r='1.4' fill='white' stroke='none'/></svg>");
    --cc-ico-bt: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 7.5 17 16l-5 4V4l5 4L6.5 16.5'/></svg>");
    --cc-ico-airdrop: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='2.2' fill='white' stroke='none'/><path d='M7.8 16.2a6 6 0 0 1 0-8.4M16.2 7.8a6 6 0 0 1 0 8.4M5 19a10 10 0 0 1 0-14M19 5a10 10 0 0 1 0 14'/></svg>");
    --cc-ico-hotspot: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='13' r='2' fill='white' stroke='none'/><path d='M8.5 16.5a5 5 0 0 1 0-7M15.5 9.5a5 5 0 0 1 0 7M5.7 19.3a9 9 0 0 1 0-12.6M18.3 6.7a9 9 0 0 1 0 12.6'/></svg>");
    --cc-ico-vpn: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 4.5 6v6c0 4.5 3.2 7.8 7.5 9 4.3-1.2 7.5-4.5 7.5-9V6Z'/><path d='m9 12 2 2 4-4'/></svg>");
    --cc-ico-internet: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><circle cx='12' cy='12' r='8.5'/><path d='M3.5 12h17M12 3.5c3 3 3 14 0 17M12 3.5c-3 3-3 14 0 17'/></svg>");
    --cc-ico-focus: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M14.5 2.5a9.5 9.5 0 1 0 7 15.8A8 8 0 0 1 14.5 2.5Z'/></svg>");
    --cc-ico-orient: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12a8 8 0 0 1-13 6.2M4 12a8 8 0 0 1 13-6.2'/><path d='M17 2.5v3.5h-3.5M7 21.5V18h3.5'/><rect x='9.5' y='10' width='5' height='5' rx='1' fill='white' stroke='none'/></svg>");
    --cc-ico-silent: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 17V11a6 6 0 0 1 10.5-4M18 11v6l1.5 2H4.5L6 17M10 21h4'/><path d='m3 3 18 18'/></svg>");
    --cc-ico-mirror: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 17H4.5A1.5 1.5 0 0 1 3 15.5v-9A1.5 1.5 0 0 1 4.5 5h15A1.5 1.5 0 0 1 21 6.5v9a1.5 1.5 0 0 1-1.5 1.5H18'/><path d='m12 13 5 7H7Z' fill='white'/></svg>");
    --cc-ico-camera: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round'><path d='M4 8h3.5l1.5-2.5h6L16.5 8H20v11H4Z'/><circle cx='12' cy='13' r='3.2'/></svg>");
    --cc-ico-pip: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round'><rect x='2.5' y='5' width='19' height='14' rx='2'/><rect x='12' y='11.5' width='7' height='5' rx='1' fill='white' stroke='none'/></svg>");
    --cc-ico-flashlight: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round'><path d='M8 2.5h8v4l-2 3v12H10v-12l-2-3Z'/><path d='M8 6.5h8'/><circle cx='12' cy='12.5' r='1' fill='white' stroke='none'/></svg>");
    --cc-ico-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><circle cx='12' cy='12' r='8.5'/><path d='M12 3.5v17a8.5 8.5 0 0 0 0-17Z' fill='white' stroke='none'/></svg>");
    --cc-ico-lowpower: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round'><rect x='2.5' y='7' width='17' height='10' rx='2.5'/><path d='M21.5 10.5v3'/><rect x='5' y='9.5' width='4' height='5' rx='1' fill='white' stroke='none'/></svg>");
    --cc-ico-timer: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='13' r='8'/><path d='M12 9v4l2.5 2M10 2.5h4'/></svg>");
    --cc-ico-calculator: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round'><rect x='5' y='2.5' width='14' height='19' rx='2.5'/><path d='M8.5 6.5h7' stroke-width='2.4'/><circle cx='9' cy='12' r='1' fill='white' stroke='none'/><circle cx='12' cy='12' r='1' fill='white' stroke='none'/><circle cx='15' cy='12' r='1' fill='white' stroke='none'/><circle cx='9' cy='16' r='1' fill='white' stroke='none'/><circle cx='12' cy='16' r='1' fill='white' stroke='none'/><circle cx='15' cy='16' r='1' fill='white' stroke='none'/></svg>");
    --cc-ico-notes: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='16' height='18' rx='2.5'/><path d='M8 8.5h8M8 12.5h8M8 16.5h5'/></svg>");
    --cc-ico-qr: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><rect x='3.5' y='3.5' width='6.5' height='6.5'/><rect x='14' y='3.5' width='6.5' height='6.5'/><rect x='3.5' y='14' width='6.5' height='6.5'/><path d='M14 14h3v3h-3zM19 14h1.5v1.5H19zM17 19h3.5v1.5H17z' fill='white' stroke='none'/></svg>");
    --cc-ico-shazam: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'><path d='M4 10v4M8 7v10M12 4v16M16 8v8M20 10v4'/></svg>");
    --cc-ico-screenrecord: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><circle cx='12' cy='12' r='8.5'/><circle cx='12' cy='12' r='4' fill='white' stroke='none'/></svg>");
    --cc-ico-sun: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='4' fill='white'/><path d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1'/></svg>");
    --cc-ico-speaker: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9.5h3.5L13 5v14l-5.5-4.5H4Z' fill='white'/><path d='M16.5 9a4.5 4.5 0 0 1 0 6M19 6.5a8 8 0 0 1 0 11'/></svg>");
    --cc-ico-power: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'><path d='M12 3v8'/><path d='M7 6.3a8 8 0 1 0 10 0'/></svg>");
    --cc-ico-plus: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
}

/* ---- Tuiles de connectivité (2 × 2) : pictogramme seul ----------------------------------- */

.ios-sys.is-cc .ios-cc-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.ios-sys.is-cc .ios-cc-tile .ios-cc-glyph {
    width: 26px;
    height: 26px;
    font-size: 0;
    line-height: 0;
    color: transparent;
    background: currentColor;
    -webkit-mask: var(--cc-ico) center / contain no-repeat;
    mask: var(--cc-ico) center / contain no-repeat;
}

.ios-sys.is-cc .ios-cc-tile .ios-cc-glyph { background: #fff; }
.ios-sys.is-cc .ios-cc-tile em { display: none; }
.ios-sys.is-cc .ios-cc-connectivity--lg .ios-cc-tile em {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    display: block;
    font-size: 11px;
    font-style: normal;
    text-align: center;
    opacity: 0.85;
}
.ios-sys.is-cc .ios-cc-connectivity--lg .ios-cc-tile { border-radius: 18px; }
.ios-sys.is-cc .ios-cc-connectivity--lg .ios-cc-tile .ios-cc-glyph { margin-bottom: 14px; }

.ios-sys.is-cc .ios-cc-tile[data-cc-toggle="airplane"] { --cc-ico: var(--cc-ico-airplane); }
.ios-sys.is-cc .ios-cc-tile[data-cc-toggle="airplane"].is-on { background: #ff9500; }
.ios-sys.is-cc .ios-cc-tile[data-cc-toggle="cellular"] { --cc-ico: var(--cc-ico-cellular); }
.ios-sys.is-cc .ios-cc-tile[data-cc-toggle="cellular"].is-on { background: #30d158; }
.ios-sys.is-cc .ios-cc-tile[data-cc-toggle="wifi"] { --cc-ico: var(--cc-ico-wifi); }
.ios-sys.is-cc .ios-cc-tile[data-cc-toggle="bt"] { --cc-ico: var(--cc-ico-bt); }
.ios-sys.is-cc .ios-cc-tile[data-cc-toggle="airdrop"] { --cc-ico: var(--cc-ico-airdrop); }
.ios-sys.is-cc .ios-cc-tile[data-cc-toggle="internet"] { --cc-ico: var(--cc-ico-internet); }
.ios-sys.is-cc .ios-cc-tile[data-cc-action="hotspot"] { --cc-ico: var(--cc-ico-hotspot); }
.ios-sys.is-cc .ios-cc-tile[data-cc-action="vpn"] { --cc-ico: var(--cc-ico-vpn); }

/* ---- Pastilles (Concentration, Verrouillage de l'orientation, Silence, Recopie, Caméra, PiP) ---- */

.ios-sys.is-cc .ios-cc-pill,
.ios-sys.is-cc .ios-cc-extra {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 6px;
    min-height: 68px;
    padding: 10px 10px 9px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.ios-sys.is-cc .ios-cc-pill::before,
.ios-sys.is-cc .ios-cc-extra::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background: #fff;
    -webkit-mask: var(--cc-ico) center / contain no-repeat;
    mask: var(--cc-ico) center / contain no-repeat;
}

.ios-sys.is-cc .ios-cc-pill.is-on,
.ios-sys.is-cc .ios-cc-pill[aria-pressed="true"] { background: #fff; color: #1c1c1e; }
.ios-sys.is-cc .ios-cc-pill.is-on::before,
.ios-sys.is-cc .ios-cc-pill[aria-pressed="true"]::before { background: #1c1c1e; }
.ios-sys.is-cc .ios-cc-pill[data-cc-toggle="focus"][aria-pressed="true"] { background: #5e5ce6; color: #fff; }
.ios-sys.is-cc .ios-cc-pill[data-cc-toggle="focus"][aria-pressed="true"]::before { background: #fff; }
.ios-sys.is-cc .ios-cc-pill[data-cc-toggle="orient"][aria-pressed="true"] { background: #ff3b30; color: #fff; }
.ios-sys.is-cc .ios-cc-pill[data-cc-toggle="orient"][aria-pressed="true"]::before { background: #fff; }
.ios-sys.is-cc .ios-cc-pill[data-cc-toggle="silent"][aria-pressed="true"] { background: #ff3b30; color: #fff; }
.ios-sys.is-cc .ios-cc-pill[data-cc-toggle="silent"][aria-pressed="true"]::before { background: #fff; }

.ios-sys.is-cc .ios-cc-pill[data-cc-toggle="focus"] { --cc-ico: var(--cc-ico-focus); }
.ios-sys.is-cc .ios-cc-pill[data-cc-toggle="orient"] { --cc-ico: var(--cc-ico-orient); }
.ios-sys.is-cc .ios-cc-pill[data-cc-toggle="silent"] { --cc-ico: var(--cc-ico-silent); }
.ios-sys.is-cc .ios-cc-pill[data-cc-toggle="mirror"] { --cc-ico: var(--cc-ico-mirror); }
.ios-sys.is-cc .ios-cc-pill[data-cc-action="camera"] { --cc-ico: var(--cc-ico-camera); }
.ios-sys.is-cc .ios-cc-pill[data-cc-action="pip"] { --cc-ico: var(--cc-ico-pip); }

.ios-sys.is-cc .ios-cc-extra[data-cc-extra="flashlight"] { --cc-ico: var(--cc-ico-flashlight); }
.ios-sys.is-cc .ios-cc-extra[data-cc-extra="dark"] { --cc-ico: var(--cc-ico-dark); }
.ios-sys.is-cc .ios-cc-extra[data-cc-extra="lowpower"] { --cc-ico: var(--cc-ico-lowpower); }
.ios-sys.is-cc .ios-cc-extra[data-cc-extra="timer"] { --cc-ico: var(--cc-ico-timer); }
.ios-sys.is-cc .ios-cc-extra[data-cc-extra="calculator"] { --cc-ico: var(--cc-ico-calculator); }
.ios-sys.is-cc .ios-cc-extra[data-cc-extra="notes"] { --cc-ico: var(--cc-ico-notes); }
.ios-sys.is-cc .ios-cc-extra[data-cc-extra="qr"] { --cc-ico: var(--cc-ico-qr); }
.ios-sys.is-cc .ios-cc-extra[data-cc-extra="shazam"] { --cc-ico: var(--cc-ico-shazam); }
.ios-sys.is-cc .ios-cc-extra[data-cc-extra="screenrecord"] { --cc-ico: var(--cc-ico-screenrecord); }
.ios-sys.is-cc .ios-cc-extra.is-on { background: #fff; color: #1c1c1e; }
.ios-sys.is-cc .ios-cc-extra.is-on::before { background: #1c1c1e; }
.ios-sys.is-cc .ios-cc-extra.is-recording::before { background: #ff3b30; }
.ios-sys.is-cc .ios-cc-extra[data-cc-extra="lowpower"].is-on { background: #ffd60a; }
.ios-sys.is-cc .ios-cc-extra .ios-cc-rm { top: 6px; left: auto; right: 6px; }

/* ---- Curseurs verticaux luminosité / volume (barres pleines, sans bouton) ------------------- */

.ios-sys.is-cc .ios-cc-sliders {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 14px;
    padding: 10px 12px;
}

.ios-sys.is-cc .ios-cc-sliders--solo { justify-content: center; }

.ios-sys.is-cc .ios-cc-slider {
    position: relative;
    flex: 0 0 auto;
    width: 64px;
    height: 150px;
    gap: 0;
}

.ios-sys.is-cc .ios-cc-slider > span {
    position: absolute;
    bottom: 12px;
    left: 50%;
    z-index: 1;
    width: 22px;
    height: 22px;
    font-size: 0;
    color: transparent;
    background: #1c1c1e;
    transform: translateX(-50%);
    -webkit-mask: var(--cc-ico-sun) center / contain no-repeat;
    mask: var(--cc-ico-sun) center / contain no-repeat;
    pointer-events: none;
}

.ios-sys.is-cc .ios-cc-slider:nth-child(2) > span,
.ios-sys.is-cc .ios-cc-sliders--solo .ios-cc-slider > span {
    -webkit-mask-image: var(--cc-ico-speaker);
    mask-image: var(--cc-ico-speaker);
}

.ios-sys.is-cc .ios-cc-slider input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    writing-mode: vertical-lr;
    direction: rtl;
    width: 64px;
    height: 150px;
    margin: 0;
    border-radius: 20px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.96) var(--cc-level, 50%), rgba(255, 255, 255, 0.18) 0);
    overflow: hidden;
    cursor: pointer;
}

.ios-sys.is-cc .ios-cc-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0;
    height: 0;
    border: 0;
    background: transparent;
}

.ios-sys.is-cc .ios-cc-slider input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 100%;
    background: transparent;
}

/* ---- En-tête, bouton +, pages : iOS 18 seulement ---------------------------------------- */

body#ios-15 .ios-sys.is-cc .ios-cc-edit,
body#ios-17 .ios-sys.is-cc .ios-cc-edit,
body#ios-15 .ios-sys.is-cc .ios-cc-rail,
body#ios-17 .ios-sys.is-cc .ios-cc-rail,
body#ios-15 .ios-sys.is-cc .ios-cc-head-title,
body#ios-17 .ios-sys.is-cc .ios-cc-head-title { display: none; }

body#ios-15 .ios-sys.is-cc .ios-cc-head,
body#ios-17 .ios-sys.is-cc .ios-cc-head { min-height: 0; margin: 0; padding: 0; }

body#ios-18 .ios-sys.is-cc .ios-cc-head { position: relative; }

body#ios-18 .ios-sys.is-cc .ios-cc-edit {
    width: 30px;
    height: 30px;
    font-size: 0;
    color: transparent;
    background: rgba(255, 255, 255, 0.2) var(--cc-ico-plus) center / 16px no-repeat;
}

/* Bouton d'alimentation iOS 18 (ouvre « glisser pour éteindre » sur l'appareil) : repère visuel. */
body#ios-18 .ios-sys.is-cc .ios-cc-head::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2) var(--cc-ico-power) center / 16px no-repeat;
}

body#ios-18 .ios-sys.is-cc .ios-cc-head-title { opacity: 0.6; font-size: 13px; }

/* Points de page verticaux (Favoris · Média · Connectivité · Maison). */
body#ios-18 .ios-sys.is-cc .ios-cc-rail { flex-basis: 20px; gap: 10px; padding: 8px 0; }
body#ios-18 .ios-sys.is-cc .ios-cc-rail-btn {
    width: 8px;
    min-height: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    color: transparent;
    background: rgba(255, 255, 255, 0.35);
    box-shadow: none;
}
body#ios-18 .ios-sys.is-cc .ios-cc-rail-btn.is-on { background: #fff; }

/* Panneau : noir translucide (iPadOS), coins 28 pt. */
.ios-sys.is-cc .ios-sys__panel--cc {
    background: rgba(28, 28, 30, 0.72);
}

.ios-sys.is-cc .ios-cc-connectivity,
.ios-sys.is-cc .ios-cc-sliders,
.ios-sys.is-cc .ios-cc-media {
    background: rgba(255, 255, 255, 0.12);
}

.ios-sys.is-cc .ios-cc-pill,
.ios-sys.is-cc .ios-cc-extra { background: rgba(255, 255, 255, 0.14); }

.ios-sys.is-cc .ios-cc-hint { opacity: 0.55; }

/* iPadOS 18 : panneau plus haut (pages, contrôles redimensionnables). */
html.ios-form-tablet body#ios-18 .ios-sys.is-cc .ios-sys__panel--cc {
    max-height: min(760px, calc(100% - 56px));
}